/* =================================================================
   common.css
   全ページ共通のスタイルシート
================================================================= */

/* --- 1. 基本設定とリセット --- */
:root {
  --color-text: #333;
  --color-heading: #111;
  --color-dark: #1A2129;
  --color-light-gray: #f9f9f9;
  --color-border: #e9e9e9;
  --font-family-base: 'Helvetica Neue', Arial, 'Hiragino Kaku Gothic ProN', 'Hiragino Sans', Meiryo, sans-serif;
}

:root {
  --ui-transparent: 0 0 0;
  --ui-black: 0 0 0;
  --ui-white: 255 255 255;
  --ui-slate-50: 248 250 252;
  --ui-slate-100: 241 245 249;
  --ui-slate-200: 226 232 240;
  --ui-slate-300: 202 213 226;
  --ui-slate-400: 144 161 185;
  --ui-slate-500: 98 116 142;
  --ui-slate-600: 69 85 108;
  --ui-slate-700: 49 65 88;
  --ui-slate-800: 29 41 61;
  --ui-slate-900: 15 23 43;
  --ui-slate-950: 2 6 24;
  --ui-gray-50: 249 250 251;
  --ui-gray-100: 243 244 246;
  --ui-gray-200: 229 231 235;
  --ui-gray-300: 209 213 220;
  --ui-gray-400: 153 161 175;
  --ui-gray-500: 106 114 130;
  --ui-gray-600: 74 85 101;
  --ui-gray-700: 54 65 83;
  --ui-gray-800: 30 41 57;
  --ui-gray-900: 16 24 40;
  --ui-gray-950: 3 7 18;
  --ui-zinc-50: 250 250 250;
  --ui-zinc-100: 244 244 245;
  --ui-zinc-200: 228 228 231;
  --ui-zinc-300: 212 212 216;
  --ui-zinc-400: 159 159 169;
  --ui-zinc-500: 113 113 123;
  --ui-zinc-600: 82 82 92;
  --ui-zinc-700: 63 63 71;
  --ui-zinc-800: 39 39 42;
  --ui-zinc-900: 24 24 27;
  --ui-zinc-950: 9 9 11;
  --ui-neutral-50: 250 250 250;
  --ui-neutral-100: 245 245 245;
  --ui-neutral-200: 229 229 229;
  --ui-neutral-300: 212 212 212;
  --ui-neutral-400: 161 161 161;
  --ui-neutral-500: 115 115 115;
  --ui-neutral-600: 82 82 82;
  --ui-neutral-700: 64 64 64;
  --ui-neutral-800: 38 38 38;
  --ui-neutral-900: 23 23 23;
  --ui-neutral-950: 10 10 10;
  --ui-stone-50: 250 250 249;
  --ui-stone-100: 245 245 244;
  --ui-stone-200: 231 229 228;
  --ui-stone-300: 214 211 209;
  --ui-stone-400: 166 160 155;
  --ui-stone-500: 121 113 107;
  --ui-stone-600: 87 83 77;
  --ui-stone-700: 68 64 59;
  --ui-stone-800: 41 37 36;
  --ui-stone-900: 28 25 23;
  --ui-stone-950: 12 10 9;
  --ui-red-50: 254 242 242;
  --ui-red-100: 255 226 226;
  --ui-red-200: 255 201 201;
  --ui-red-300: 255 162 162;
  --ui-red-400: 255 100 103;
  --ui-red-500: 251 44 54;
  --ui-red-600: 231 0 11;
  --ui-red-700: 193 0 7;
  --ui-red-800: 159 7 18;
  --ui-red-900: 130 24 26;
  --ui-red-950: 70 8 9;
  --ui-orange-50: 255 247 237;
  --ui-orange-100: 255 237 212;
  --ui-orange-200: 255 214 168;
  --ui-orange-300: 255 184 106;
  --ui-orange-400: 255 137 4;
  --ui-orange-500: 255 105 0;
  --ui-orange-600: 245 73 0;
  --ui-orange-700: 202 53 0;
  --ui-orange-800: 159 45 0;
  --ui-orange-900: 126 42 12;
  --ui-orange-950: 68 19 6;
  --ui-amber-50: 255 251 235;
  --ui-amber-100: 254 243 198;
  --ui-amber-200: 254 230 133;
  --ui-amber-300: 255 210 48;
  --ui-amber-400: 255 185 0;
  --ui-amber-500: 254 154 0;
  --ui-amber-600: 225 113 0;
  --ui-amber-700: 187 77 0;
  --ui-amber-800: 151 60 0;
  --ui-amber-900: 123 51 6;
  --ui-amber-950: 70 25 1;
  --ui-yellow-50: 254 252 232;
  --ui-yellow-100: 254 249 194;
  --ui-yellow-200: 255 240 133;
  --ui-yellow-300: 255 223 32;
  --ui-yellow-400: 253 199 0;
  --ui-yellow-500: 240 177 0;
  --ui-yellow-600: 208 135 0;
  --ui-yellow-700: 166 95 0;
  --ui-yellow-800: 137 75 0;
  --ui-yellow-900: 115 62 10;
  --ui-yellow-950: 67 32 4;
  --ui-lime-50: 247 254 231;
  --ui-lime-100: 236 252 202;
  --ui-lime-200: 216 249 153;
  --ui-lime-300: 187 244 81;
  --ui-lime-400: 154 230 0;
  --ui-lime-500: 124 207 0;
  --ui-lime-600: 94 165 0;
  --ui-lime-700: 73 125 0;
  --ui-lime-800: 60 99 0;
  --ui-lime-900: 53 83 14;
  --ui-lime-950: 25 46 3;
  --ui-green-50: 240 253 244;
  --ui-green-100: 220 252 231;
  --ui-green-200: 185 248 207;
  --ui-green-300: 123 241 168;
  --ui-green-400: 5 223 114;
  --ui-green-500: 0 201 80;
  --ui-green-600: 0 166 62;
  --ui-green-700: 0 130 54;
  --ui-green-800: 1 102 48;
  --ui-green-900: 13 84 43;
  --ui-green-950: 3 46 21;
  --ui-emerald-50: 236 253 245;
  --ui-emerald-100: 208 250 229;
  --ui-emerald-200: 164 244 207;
  --ui-emerald-300: 94 233 181;
  --ui-emerald-400: 0 212 146;
  --ui-emerald-500: 0 188 125;
  --ui-emerald-600: 0 153 102;
  --ui-emerald-700: 0 122 85;
  --ui-emerald-800: 0 96 69;
  --ui-emerald-900: 0 79 59;
  --ui-emerald-950: 0 44 34;
  --ui-teal-50: 240 253 250;
  --ui-teal-100: 203 251 241;
  --ui-teal-200: 150 247 228;
  --ui-teal-300: 70 236 213;
  --ui-teal-400: 0 213 190;
  --ui-teal-500: 0 187 167;
  --ui-teal-600: 0 150 137;
  --ui-teal-700: 0 120 111;
  --ui-teal-800: 0 95 90;
  --ui-teal-900: 11 79 74;
  --ui-teal-950: 2 47 46;
  --ui-cyan-50: 236 254 255;
  --ui-cyan-100: 206 250 254;
  --ui-cyan-200: 162 244 253;
  --ui-cyan-300: 83 234 253;
  --ui-cyan-400: 0 211 243;
  --ui-cyan-500: 0 184 219;
  --ui-cyan-600: 0 146 184;
  --ui-cyan-700: 0 117 149;
  --ui-cyan-800: 0 95 120;
  --ui-cyan-900: 16 78 100;
  --ui-cyan-950: 5 51 69;
  --ui-sky-50: 240 249 255;
  --ui-sky-100: 223 242 254;
  --ui-sky-200: 184 230 254;
  --ui-sky-300: 116 212 255;
  --ui-sky-400: 0 188 255;
  --ui-sky-500: 0 166 244;
  --ui-sky-600: 0 132 209;
  --ui-sky-700: 0 105 168;
  --ui-sky-800: 0 89 138;
  --ui-sky-900: 2 74 112;
  --ui-sky-950: 5 47 74;
  --ui-blue-50: 239 246 255;
  --ui-blue-100: 219 234 254;
  --ui-blue-200: 190 219 255;
  --ui-blue-300: 142 197 255;
  --ui-blue-400: 81 162 255;
  --ui-blue-500: 43 127 255;
  --ui-blue-600: 21 93 252;
  --ui-blue-700: 20 71 230;
  --ui-blue-800: 25 60 184;
  --ui-blue-900: 28 57 142;
  --ui-blue-950: 22 36 86;
  --ui-indigo-50: 238 242 255;
  --ui-indigo-100: 224 231 255;
  --ui-indigo-200: 198 210 255;
  --ui-indigo-300: 163 179 255;
  --ui-indigo-400: 124 134 255;
  --ui-indigo-500: 97 95 255;
  --ui-indigo-600: 79 57 246;
  --ui-indigo-700: 67 45 215;
  --ui-indigo-800: 55 42 172;
  --ui-indigo-900: 49 44 133;
  --ui-indigo-950: 30 26 77;
  --ui-violet-50: 245 243 255;
  --ui-violet-100: 237 233 254;
  --ui-violet-200: 221 214 255;
  --ui-violet-300: 196 180 255;
  --ui-violet-400: 166 132 255;
  --ui-violet-500: 142 81 255;
  --ui-violet-600: 127 34 254;
  --ui-violet-700: 112 8 231;
  --ui-violet-800: 93 14 192;
  --ui-violet-900: 77 23 154;
  --ui-violet-950: 47 13 104;
  --ui-purple-50: 250 245 255;
  --ui-purple-100: 243 232 255;
  --ui-purple-200: 233 212 255;
  --ui-purple-300: 218 178 255;
  --ui-purple-400: 194 122 255;
  --ui-purple-500: 173 70 255;
  --ui-purple-600: 152 16 250;
  --ui-purple-700: 130 0 219;
  --ui-purple-800: 110 17 176;
  --ui-purple-900: 89 22 139;
  --ui-purple-950: 60 3 102;
  --ui-fuchsia-50: 253 244 255;
  --ui-fuchsia-100: 250 232 255;
  --ui-fuchsia-200: 246 207 255;
  --ui-fuchsia-300: 244 168 255;
  --ui-fuchsia-400: 237 106 255;
  --ui-fuchsia-500: 225 42 251;
  --ui-fuchsia-600: 200 0 222;
  --ui-fuchsia-700: 168 0 183;
  --ui-fuchsia-800: 138 1 148;
  --ui-fuchsia-900: 114 19 120;
  --ui-fuchsia-950: 75 0 79;
  --ui-pink-50: 253 242 248;
  --ui-pink-100: 252 231 243;
  --ui-pink-200: 252 206 232;
  --ui-pink-300: 253 165 213;
  --ui-pink-400: 251 100 182;
  --ui-pink-500: 246 51 154;
  --ui-pink-600: 230 0 118;
  --ui-pink-700: 198 0 92;
  --ui-pink-800: 163 0 76;
  --ui-pink-900: 134 16 67;
  --ui-pink-950: 81 4 36;
  --ui-rose-50: 255 241 242;
  --ui-rose-100: 255 228 230;
  --ui-rose-200: 255 204 211;
  --ui-rose-300: 255 161 173;
  --ui-rose-400: 255 99 126;
  --ui-rose-500: 255 32 86;
  --ui-rose-600: 236 0 63;
  --ui-rose-700: 199 0 54;
  --ui-rose-800: 165 0 54;
  --ui-rose-900: 139 8 54;
  --ui-rose-950: 77 2 24;
  --ease-in-sine: cubic-bezier(0.12, 0, 0.39, 0);
  --ease-out-sine: cubic-bezier(0.61, 1, 0.88, 1);
  --ease-in-out-sine: cubic-bezier(0.37, 0, 0.63, 1);
  --ease-in-quad: cubic-bezier(0.11, 0, 0.5, 0);
  --ease-out-quad: cubic-bezier(0.5, 1, 0.89, 1);
  --ease-in-out-quad: cubic-bezier(0.45, 0, 0.55, 1);
  --ease-in-cubic: cubic-bezier(0.32, 0, 0.67, 0);
  --ease-out-cubic: cubic-bezier(0.33, 1, 0.68, 1);
  --ease-in-out-cubic: cubic-bezier(0.65, 0, 0.35, 1);
  --ease-in-quart: cubic-bezier(0.5, 0, 0.75, 0);
  --ease-out-quart: cubic-bezier(0.25, 1, 0.5, 1);
  --ease-in-out-quart: cubic-bezier(0.76, 0, 0.24, 1);
  --ease-in-quint: cubic-bezier(0.64, 0, 0.78, 0);
  --ease-out-quint: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-in-out-quint: cubic-bezier(0.83, 0, 0.17, 1);
  --ease-in-expo: cubic-bezier(0.7, 0, 0.84, 0);
  --ease-out-expo: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in-out-expo: cubic-bezier(0.87, 0, 0.13, 1);
  --ease-in-circ: cubic-bezier(0.55, 0, 1, 0.45);
  --ease-out-circ: cubic-bezier(0, 0.55, 0.45, 1);
  --ease-in-out-circ: cubic-bezier(0.85, 0, 0.15, 1);
  --ease-in-back: cubic-bezier(0.36, 0, 0.66, -0.56);
  --ease-out-back: cubic-bezier(0.34, 1.56, 0.64, 1);
  --ease-in-out-back: cubic-bezier(0.68, -0.6, 0.32, 1.6);
  --thumbnail-width: 340;
  --thumbnail-height: 420;
  --thumbnail-ratio: 340 / 420;
  --header-height-desktop: 5rem;
  --header-height-mobile: 3.75rem;
  --header-height: var(--header-height-desktop);
  --z-header: 1000;
  --ui-border-color: rgb(var(--ui-gray-300));
  --ui-border-color-hover: rgb(var(--ui-gray-600));
  --ui-border-color-active: rgb(var(--ui-gray-600));
  --site-gutter: 2.5rem;
  --icon-add: url("data:image/svg+xml,%3Csvg width='24' height='25' viewBox='0 0 24 25' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M5.25 12C5.25 11.5858 5.58579 11.25 6 11.25H18C18.4142 11.25 18.75 11.5858 18.75 12C18.75 12.4142 18.4142 12.75 18 12.75H6C5.58579 12.75 5.25 12.4142 5.25 12Z' fill='black'/%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M12 5.25C12.4142 5.25 12.75 5.58579 12.75 6L12.75 18C12.75 18.4142 12.4142 18.75 12 18.75C11.5858 18.75 11.25 18.4142 11.25 18L11.25 6C11.25 5.58579 11.5858 5.25 12 5.25Z' fill='black'/%3E%3C/svg%3E%0A");
  --icon-remove: url("data:image/svg+xml,%3Csvg width='16' height='16' viewBox='0 0 16 16' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M3.5 8.16663C3.5 7.89048 3.72386 7.66663 4 7.66663H12C12.2761 7.66663 12.5 7.89048 12.5 8.16663C12.5 8.44277 12.2761 8.66663 12 8.66663H4C3.72386 8.66663 3.5 8.44277 3.5 8.16663Z' fill='black'/%3E%3C/svg%3E%0A");
  --accordion-toggle-offset: 6px;
  --accordion-toggle-size: 44px;
  --accordion-toggle-height: calc(var(--accordion-toggle-offset) * 2 + var(--accordion-toggle-size));
  --button-border-color: rgb(var(--ui-neutral-300));
  --font-default: "Manrope", "Roboto", "Noto Sans JP", "Hiragino Sans", "Yu Gothic", "Meiryo", system-ui, sans-serif;
  --font-narrow: "Roboto Condensed", "Noto Sans", "Noto Sans JP", "Yu Gothic", system-ui, sans-serif;
}

html {
  height: 100%;
}

body {
  margin: 0;
  font-family: var(--font-family-base);
  color: var(--color-text);
  background-color: #fff;
  line-height: 1.8;
  font-size: 15px;
  background-color: #f7f7f7;
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}

*,
*::before,
*::after {
  box-sizing: border-box;
}

a {
  color: inherit;
  text-decoration: none;
  transition: color 0.3s;
}

a:hover {
  color: #888;
}

img {
  max-width: 100%;
  height: auto;
  vertical-align: middle;
}

.container {
  width: 1200px;
  margin-left: auto;
  margin-right: auto;
  padding-left: 20px;
  padding-right: 20px;
}


/*============================================================================
  #Normalize
  Based on normalize.css v3.0.2 | MIT License | git.io/normalize
==============================================================================*/
article,
aside,
details,
figcaption,
figure,
footer,
header,
hgroup,
main,
menu,
nav,
section,
summary {
  display: block;
}

input,
textarea,
select,
.disclosure__toggle {
  -webkit-font-smoothing: antialiased;
  -webkit-text-size-adjust: 100%;
}

a {
  background-color: transparent;
}

b,
strong {
  font-weight: var(--font-weight-body--bolder);
}

em {
  font-style: italic;
}

small {
  font-size: 80%;
}

sub,
sup {
  font-size: 75%;
  line-height: 0;
  position: relative;
  vertical-align: baseline;
}

sup {
  top: -0.5em;
}

sub {
  bottom: -0.25em;
}

img {
  max-width: 100%;
  border: 0;
}

button,
input,
optgroup,
select,
.disclosure__toggle,
textarea {
  color: inherit;
  font: inherit;
  margin: 0;
}

button[disabled],
html input[disabled] {
  cursor: default;
}

button::-moz-focus-inner,
[type=button]::-moz-focus-inner,
[type=reset]::-moz-focus-inner,
[type=submit]::-moz-focus-inner {
  border-style: none;
  padding: 0;
}

button:-moz-focusring,
[type=button]:-moz-focusring,
[type=reset]:-moz-focusring,
[type=submit]:-moz-focusring {
  outline: 1px dotted ButtonText;
}

input[type=search],
input[type=number],
input[type=email],
input[type=password] {
  -webkit-appearance: none;
  -moz-appearance: none;
}

table {
  width: 100%;
  border-collapse: collapse;
  border-spacing: 0;
}

td,
th {
  padding: 0;
}

textarea {
  overflow: auto;
  -webkit-appearance: none;
  -moz-appearance: none;
}

a,
button,
[role=button],
input,
label,
select,
.disclosure__toggle,
textarea {
  touch-action: manipulation;
}

*,
*::before,
*::after {
  box-sizing: border-box;
}

@media screen and (max-width: 1056px) {
  :root {
    --header-height: var(--header-height-mobile);
    --site-gutter: 5px;
  }
}

html {
  font-size: 16px;
  scroll-behavior: smooth;
}

body {
  font-size: 1em;
  font-weight: 400;
  font-family: var(--font-default);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizelegibility;
  -webkit-text-size-adjust: 100%;
  -ms-text-size-adjust: 100%;
  touch-action: manipulation;
  color: rgb(var(--ui-gray-900));
  background-color: rgb(var(--ui-white));
  font-optical-sizing: auto;
}

html,
body {
  margin: 0;
  padding: 0;
}

h1,
h2,
h3,
h4,
h5,
h6 {
  -webkit-margin-before: 0;
  margin-block-start: 0;
  -webkit-margin-after: 0;
  margin-block-end: 0;
}

ul,
ol {
  margin: 0;
  padding: 0;
  list-style: none;
}

figure {
  margin: 0;
}

p {
  -webkit-margin-before: 0;
  margin-block-start: 0;
  -webkit-margin-after: 0;
  margin-block-end: 0;
}

a:link {
  text-decoration: none;
}

main {
  padding-left: var(--site-gutter);
  padding-right: var(--site-gutter);
  padding-bottom: 4rem;
}

main.top-page {
}

/* --- 2. ヘッダー --- */
.la-brand-topbar {
  background: #000000;
  color: #ffffff;
  padding: 4px;
  height: 40px;
  font-family: "Roboto Condensed", Roboto Condensed, system-ui, sans-serif;
  z-index: 1000;
  overflow: hidden;
}

.la-brand-topbar-inner {
  display: flex;
  align-items: center;
  margin-right: -12px;
  margin-top: -2px;
}

.la-brand-topbar-logo {
  position: relative;
  display: flex;
  flex: none;
  margin-right: 13px;
  padding-top: 8px;
  padding-left: 8px;
  padding-bottom: 8px;
  padding-right: 15px;
}

.la-brand-topbar-logo::after {
  content: '';
  position: absolute;
  display: block;
  top: 50%;
  right: 0;
  transform: translate(0, -50%);
  width: 1px;
  height: 8px;
  background-color: #6A7282;
}

.la-brand-topbar-nav {
  display: flex;
  column-gap: 20px;
  overflow-x: auto;
  -ms-overflow-style: none;
  scrollbar-width: none;
  padding-right: 24px;
  font-size: 12px;
  white-space: nowrap;
}

.la-brand-topbar-nav::-webkit-scrollbar {
  display: none;
}

.la-brand-topbar-nav a {
  display: flex;
  padding-top: 8px;
  padding-bottom: 8px;
}

.la-brand-topbar,
.global-header {
  transition-duration: 300ms;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
}

.sticky-header--unpinned:not(.side-menu-is-open) .mobile-toc {
  translate: 0 0%;
}

.sticky-header--unpinned:not(.side-menu-is-open) .global-header {
  translate: 0 -100px;
}

.sticky-header--unpinned:not(.side-menu-is-open) .la-brand-topbar {
  translate: 0 -100px;
}

.global-header {
  position: fixed;
  top: 0;
  left: 0;
  padding-left: var(--site-gutter);
  width: 100%;
  height: var(--header-height);
  border-bottom: 1px solid rgba(var(--ui-black)/0.15);
  background-color: rgba(var(--ui-white)/0.6);
  -webkit-backdrop-filter: blur(16px);
  backdrop-filter: blur(16px);
  display: flex;
  align-items: center;
  z-index: var(--z-header);
  transition-property: top, translate, background-color;
}

@media screen and (max-width: 1056px) {
  .global-header {
    top: 2.5rem;
    padding-left: calc(1rem * 20 / 16);
  }
}

.global-header:hover {
  background-color: rgba(var(--ui-white)/1);
}

.global-header-logo {
  display: inline-flex;
  width: auto;
}

h1.global-header-logo {
  margin-bottom: 0;
}

.global-header-logo a {
  display: flex;
  min-width: 9rem;
  max-width: 13.125rem;
}

@media screen and (max-width: 767px) {
  .global-header-logo a {
    min-width: 0;
    max-width: 41.25vw;
  }
}

.global-header-current {
  position: relative;
  flex: 1 1 0;
  display: flex;
  align-items: center;
  padding-left: 2rem;
  margin-left: 1.9375rem;
  height: 2rem;
}

.global-header-current::before {
  content: "";
  position: absolute;
  top: 50%;
  left: 0;
  translate: 0 -50%;
  display: block;
  width: 1px;
  height: 1rem;
  background-color: rgb(var(--ui-gray-300));
}

@media screen and (max-width: 1056px) {
  .global-header-current {
    padding-left: 1.25rem;
    margin-left: 1.25rem;
  }
}

.current-site-text {
  font-family: var(--font-narrow);
  font-size: 0.875rem;
  font-style: normal;
  font-weight: 600;
  line-height: 1;
  letter-spacing: 0.08em;
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

@media screen and (min-width: 768px) {
  .current-site-text {
    font-size: 1rem;
  }
}

@media screen and (min-width: 1280px) {
  .current-site-text {
    font-size: 1.125rem;
  }
}

.sidebar-brand-menu,
.header-brand-menu {
  display: flex;
  -moz-column-gap: 1rem;
  column-gap: 1rem;
}

.sidebar-brand-menu .menu-item a,
.header-brand-menu .menu-item a {
  display: flex;
  align-items: center;
  gap: 0 0.375rem;
  padding: 0.75rem 1rem 0.75rem 0.75rem;
  border-radius: 0.1875rem;
  font-weight: 600;
  white-space: nowrap;
  transition-property: background-color, box-shadow;
  transition-duration: 150ms;
  transition-timing-function: var(--ease-out-quart);
  font-family: var(--font-narrow);
}

.sidebar-brand-menu .menu-item a::before,
.header-brand-menu .menu-item a::before {
  content: "";
  display: block;
  width: 1.25rem;
  height: 1.25rem;
  background-size: 100%;
  background-repeat: no-repeat;
  background-position: center;
  translate: 0 -1px;
}

.sidebar-brand-menu .menu-item a:hover,
.header-brand-menu .menu-item a:hover {
  background-color: rgb(var(--ui-neutral-100));
}

.sidebar-brand-menu .menu-item a:active,
.header-brand-menu .menu-item a:active {
  background-color: rgb(var(--ui-neutral-200));
}

.sidebar-brand-menu .menu-item--corporate a::before,
.header-brand-menu .menu-item--corporate a::before {
  background-image: url(https://stories.lostarrow.co.jp/wp-content/themes/lostarrow/img/icons/home.svg);
}

.sidebar-brand-menu .menu-item--store a::before,
.header-brand-menu .menu-item--store a::before {
  background-image: url(https://stories.lostarrow.co.jp/wp-content/themes/lostarrow/img/icons/store.svg);
}

.sidebar-brand-menu .menu-item--brands a::before,
.header-brand-menu .menu-item--brands a::before {
  background-image: url(https://stories.lostarrow.co.jp/wp-content/themes/lostarrow/img/icons/brands.svg);
}

.sidebar-brand-menu .menu-item--stories a::before,
.header-brand-menu .menu-item--stories a::before {
  background-image: url(https://stories.lostarrow.co.jp/wp-content/themes/lostarrow/img/icons/stories.svg);
}

.global-header-brand-menu {
  margin-right: 0.625rem;
}

@media screen and (max-width: 919px) {
  .global-header-brand-menu {
    display: none;
  }
}

@media screen and (min-width: 920px) {
  .sidebar-brand-menu {
    display: none;
  }
}

.global-header-menu-toggle {
  display: flex;
  margin-right: 0.625rem;
  border-radius: 0.25rem;
  cursor: pointer;
  transition-property: background-color, box-shadow;
  transition-duration: 300ms;
  transition-timing-function: var(--ease-out-quart);
  box-shadow: 0 0 0 0 rgb(var(--ui-neutral-950));
}

.global-header-menu-toggle path {
  transform-origin: center;
  transition: 350ms var(--ease-out-quart);
}

.global-header-menu-toggle svg {
  width: 2.75rem;
  height: 2.75rem;
}

.global-header-menu-toggle[aria-expanded=true] .path1 {
  transform: translate(6px, 5.5px) rotate(-45deg);
}

.global-header-menu-toggle[aria-expanded=true] .path2 {
  opacity: 0;
}

.global-header-menu-toggle[aria-expanded=true] .path3 {
  transform: translate(6px, -5.5px) rotate(45deg);
}

@media screen and (max-width: 1056px) {
  .global-header-menu-toggle svg {
    width: 2.75rem;
    height: 2.75rem;
  }
}

.la-brand-topbar {
  z-index: var(--z-header);
}

.la-brand-topbar {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  transition-property: translate;
}

@media screen and (min-width: 1057px) {
  .la-brand-topbar {
    display: none;
  }
}

.global-footer {
  margin-top: auto;
  display: grid;
  flex-wrap: wrap;
  padding: 2.5rem 4.5rem 1.5rem;
  background-color: rgb(var(--ui-black));
  color: rgb(var(--ui-white));
  -moz-column-gap: 2.5rem;
  column-gap: 2.5rem;
  row-gap: 0;
  grid-template-columns: 1fr auto;
  grid-template-rows: repeat(3, -webkit-fit-content);
  grid-template-rows: repeat(3, fit-content);
  grid-template-areas: "menu logo""menu terms""copy copy";
}

.footer-column--menu {
  grid-area: menu;
}

.footer-column--logo {
  grid-area: logo;
}

.footer-column--terms {
  grid-area: terms;
}

.footer-column--copyright {
  grid-area: copy;
}

@media screen and (max-width: 1279px) {
  .global-footer {
    padding: 2.5rem;
  }
}

@media screen and (max-width: 1056px) {
  .global-footer {
    grid-template-columns: 1fr;
    grid-template-rows: repeat(4, auto);
    grid-template-areas: "terms""copy";
    row-gap: 1.5rem;
  }
}

.footer-main-menu li {
  font-size: 1.5rem;
}

@media screen and (max-width: 1056px) {
  .footer-main-menu {
    display: none;
  }
}

.footer-column {
  flex: auto;
}

.footer-column .menu li {
  line-height: 1.5;
  font-weight: 500;
}

.footer-column .menu a {
  border-bottom: 2px solid transparent;
}

.footer-column .menu a:hover {
  border-bottom-color: currentColor;
}

.footer-column--logo {
  display: flex;
  justify-content: flex-end;
}

.footer-logo a {
  display: flex;
  max-width: 15rem;
}

.footer-logo a:hover {
  opacity: 0.8;
}

@media screen and (min-width: 1057px) {
  .footer-column--logo {
    margin-bottom: 2rem;
  }
}

@media screen and (max-width: 1056px) {
  .footer-column--logo {
    justify-content: flex-start;
  }
}

.footer-column--terms .menu {
  display: flex;
  flex-direction: column;
  row-gap: 0.625rem;
}

.footer-column--terms .menu-item {
  font-size: 0.875rem;
  text-align: right;
}

.footer-column--terms .menu-item a {
  opacity: 0.5;
  line-height: 1;
}

.footer-column--terms .menu-item a:hover {
  opacity: 0.8;
}

@media screen and (max-width: 1056px) {
  .footer-column--terms .menu-item {
    text-align: left;
  }
}

.footer-column--copyright {
  display: flex;
  justify-content: center;
  padding-top: 2.5rem;
}

.copyright-text {
  font-size: 0.625rem;
  opacity: 0.4;
}

@media screen and (max-width: 1056px) {
  .footer-column--copyright {
    padding-top: 0;
    justify-content: flex-start;
  }
}

@media screen and (max-width: 767px) {
  .footer-column--logo {
    display: none;
  }
}

@media screen and (max-width: 767px) {
  .footer-column--menu {
    display: none;
  }
}

.global-sidebar {
  --sidebar-padding-x: 2rem;
  position: fixed;
  top: 0;
  right: 0;
  transform: translate(101%, 0);
  padding: calc(var(--header-height) + 1.5rem) var(--sidebar-padding-x);
  border-left: 1px solid rgb(var(--ui-neutral-200));
  width: 25rem;
  height: 100vh;
  background: rgb(var(--ui-white));
  overflow: auto;
  overflow-x: hidden;
  transition-property: transform;
  transition-duration: 400ms;
  transition-timing-function: var(--ease-out-quint);
  z-index: calc(var(--z-header) - 10);
}

.global-sidebar[aria-hidden=false] {
  transform: translate(0%, 0);
  transition-duration: 500ms;
}

@media screen and (max-width: 1056px) {
  .global-sidebar {
    padding-top: 7.5rem;
  }
}

@media screen and (max-width: 767px) {
  .global-sidebar {
    --sidebar-padding-x: 1rem;
    padding-top: 6.25rem;
    width: 100%;
  }
}

.side-menu-is-open {
  overflow: hidden;
}

.global-sidebar-overlay {
  display: block;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: calc(var(--z-header) - 15);
  pointer-events: none;
  background-color: rgba(var(--ui-black)/0);
  -webkit-backdrop-filter: blur(0px);
  backdrop-filter: blur(0px);
  transition: background-color 500ms var(--ease-out-quint), -webkit-backdrop-filter 500ms var(--ease-out-quint);
  transition: backdrop-filter 500ms var(--ease-out-quint), background-color 500ms var(--ease-out-quint);
  transition: backdrop-filter 500ms var(--ease-out-quint), background-color 500ms var(--ease-out-quint), -webkit-backdrop-filter 500ms var(--ease-out-quint);
}

.side-menu-is-open .global-sidebar-overlay {
  pointer-events: initial;
  background-color: rgba(var(--ui-black)/0.15);
  -webkit-backdrop-filter: blur(4px);
  backdrop-filter: blur(4px);
  cursor: pointer;
}

.sidebar-block {
  margin-bottom: 2rem;
}

.sidebar-block__heading {
  background-size: 4px 4px;
  background-repeat: repeat;
  background-position: center left;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='4' height='4' viewBox='0 0 4 4' fill='%23F3F4F6'%3E%3Crect width='1' height='4'/%3E%3C/svg%3E");
  height: 2rem;
  padding: 0 0.75rem;
  color: rgb(var(--ui-neutral-700));
  letter-spacing: 0.1em;
  margin-left: -0.75rem;
  display: flex;
  align-items: center;
  margin-right: -0.75rem;
  font-size: 0.75rem;
  text-transform: uppercase;
}

.sidebar-block .search-form {
  position: relative;
  margin-top: 1.25rem;
}

.sidebar-block .search-form label {
  display: flex;
}

.sidebar-block .search-field {
  border: 1px solid rgb(var(--ui-neutral-300));
  height: 3.375rem;
  border-radius: 9999px;
  width: 100%;
  padding-left: 2rem;
  padding-right: 0.875rem;
  transition: border-color 150ms var(--ease-out-quart), box-shadow 150ms var(--ease-out-quart), background-color 150ms var(--ease-out-quart);
  box-shadow: 0 0 0 0px rgba(var(--ui-gray-950)/0.05);
}

.sidebar-block .search-field:focus {
  border-color: rgb(var(--ui-neutral-400));
  box-shadow: 0 0 0 4px rgba(var(--ui-gray-950)/0.05);
}

.sidebar-block .search-submit {
  all: unset;
  position: absolute;
  top: 0.9375rem;
  right: 0.9375rem;
  text-indent: -9999px;
  width: 1.5rem;
  height: 1.5rem;
  border: 0;
  border-radius: 9999px;
  background-image: url(../img/icons/zoom.svg);
  background-size: 1rem;
  background-repeat: no-repeat;
  background-position: center;
  background-color: rgb(var(--ui-neutral-200));
  cursor: pointer;
}

.sidebar-block .term-list {
  display: table;
  width: 100%;
}

.sidebar-block .term-listitem {
  align-items: center;
  -moz-column-gap: 0.875rem;
  column-gap: 0.875rem;
  height: 5rem;
  position: relative;
  margin: 0 calc(-1 * var(--sidebar-padding-x) * 0.5);
  padding-left: calc(0.5 * var(--sidebar-padding-x));
  padding-right: calc(0.5 * var(--sidebar-padding-x));
  vertical-align: middle;
  display: grid;
  grid-template-columns: 1fr auto;
  grid-template-rows: auto -webkit-min-content -webkit-min-content auto;
  grid-template-rows: auto min-content min-content auto;
  grid-template-areas: "spacer1 count""title count""caption count""spacer2 count";
  -moz-column-gap: 1rem;
  column-gap: 1rem;
}

.sidebar-block .term-listitem::before {
  content: "";
  position: absolute;
  display: block;
  top: 0;
  left: -1rem;
  right: -1rem;
  height: 100%;
  z-index: -1;
  background-color: rgba(var(--ui-neutral-100)/0);
  transition-property: background-color, color;
  transition-duration: 150ms;
  transition-timing-function: var(--ease-out-cubic);
}

.sidebar-block .term-listitem::after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  display: block;
  width: auto;
  height: 1px;
  background-color: rgb(var(--ui-neutral-200));
}

.sidebar-block .term-listitem__title {
  grid-area: title;
  min-width: 3.5rem;
  font-weight: 600;
  font-size: 0.9375rem;
  white-space: nowrap;
  padding-right: 1rem;
  vertical-align: middle;
}

.sidebar-block .term-listitem__title a {
  display: block;
}

.sidebar-block .term-listitem__title a::before {
  content: "";
  display: block;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

.sidebar-block .term-listitem__desc {
  padding-top: 0.25rem;
  grid-area: caption;
  font-size: 0.8125rem;
  color: rgb(var(--ui-neutral-500));
  vertical-align: middle;
  padding-right: 1rem;
}

.sidebar-block .term-listitem__count {
  grid-area: count;
  vertical-align: middle;
  text-align: right;
}

.sidebar-block .term-listitem__count span {
  display: flex;
  justify-content: flex-end;
}

.sidebar-block .term-listitem__count span::after {
  content: attr(data-post-count);
  display: flex;
  display: flex;
  background-color: rgb(var(--ui-neutral-100));
  width: 1.5rem;
  height: 1.5rem;
  line-height: 1.5rem;
  justify-content: center;
  font-size: 0.75rem;
  border-radius: 1000px;
  text-align: center;
  font-weight: 500;
}

.sidebar-block .term-listitem:hover::before {
  background-color: rgba(var(--ui-neutral-100)/1);
}

.sidebar-block-brand-menu {
  margin-bottom: 0;
}

.sidebar-brand-menu {
  margin-left: calc(var(--sidebar-padding-x) * -1);
  margin-right: calc(var(--sidebar-padding-x) * -1);
  padding-left: 0.5rem;
  padding-right: 0.5rem;
  height: 3.75rem;
  align-items: stretch;
  -moz-column-gap: 0;
  column-gap: 0;
}

.sidebar-brand-menu .menu-item {
  position: relative;
  flex: 1 1 auto;
  height: 100%;
}

.sidebar-brand-menu .menu-item a {
  width: 100%;
  flex: 0 0 100%;
  height: 100%;
  justify-content: center;
  font-family: var(--font-narrow);
  font-size: 0.875rem;
  font-style: normal;
  font-weight: 600;
  line-height: 1;
  letter-spacing: 0.02em;
}

.sidebar-brand-menu .menu-item:nth-child(n+2)::before {
  content: "";
  position: absolute;
  top: 50%;
  left: 0;
  translate: 0.5px -50%;
  display: block;
  width: 1px;
  background-color: rgb(var(--ui-gray-300));
  height: 0.625rem;
}

nav.header-nav {
    margin: 6rem auto 0;
    max-width: 1200px;
    width: 100%;
    padding: 0 20px;
    box-sizing: border-box;
    display: flex;
    justify-content: flex-end;
    position: relative;
}

.header-nav ul {
    display: flex; /* 横並びにする */
    margin: 0;
    padding: 0;
    list-style: none;
}

.header-nav li {
    margin-left: 20px; /* 各項目の間隔 */
}

.header-nav a {
    padding: 5px 10px;
    transition: opacity 0.3s;
    font-weight: 600;
    letter-spacing: 1px;
    font-size: 14px;
}

.header-nav a:hover {
    opacity: 0.7;
}

@media screen and (max-width: 767px) {
  nav.header-nav {
    display: none;
  }
}

/* --- 3. フッター --- */

.global-footer {
  display: grid;
  flex-wrap: wrap;
  padding: 2.5rem 4.5rem 1.5rem;
  background-color: rgb(var(--ui-black));
  color: rgb(var(--ui-white));
  -moz-column-gap: 2.5rem;
  column-gap: 2.5rem;
  row-gap: 0;
  grid-template-columns: 1fr auto;
  grid-template-rows: repeat(3, -webkit-fit-content);
  grid-template-rows: repeat(3, fit-content);
  grid-template-areas: "menu logo""menu terms""copy copy";
}

.footer-column--menu {
  grid-area: menu;
}

.footer-column--logo {
  grid-area: logo;
}

.footer-column--terms {
  grid-area: terms;
}

.footer-column--copyright {
  grid-area: copy;
}

@media screen and (max-width: 1279px) {
  .global-footer {
    padding: 2.5rem;
  }
}

@media screen and (max-width: 1056px) {
  .global-footer {
    grid-template-columns: 1fr;
    grid-template-rows: repeat(4, auto);
    grid-template-areas: "terms""copy";
    row-gap: 1.5rem;
  }
}

.footer-main-menu li {
  font-size: 1.5rem;
}

@media screen and (max-width: 1056px) {
  .footer-main-menu {
    display: none;
  }
}

.footer-column {
  flex: auto;
}

.footer-column .menu li {
  line-height: 1.5;
  font-weight: 500;
}

.footer-column .menu a {
  border-bottom: 2px solid transparent;
}

.footer-column .menu a:hover {
  border-bottom-color: currentColor;
}

.footer-column--logo {
  display: flex;
  justify-content: flex-end;
}

.footer-logo a {
  display: flex;
  max-width: 15rem;
}

.footer-logo a:hover {
  opacity: 0.8;
}

@media screen and (min-width: 1057px) {
  .footer-column--logo {
    margin-bottom: 2rem;
  }
}

@media screen and (max-width: 1056px) {
  .footer-column--logo {
    justify-content: flex-start;
  }
}

.footer-column--terms .menu {
  display: flex;
  flex-direction: column;
  row-gap: 0.625rem;
}

.footer-column--terms .menu-item {
  font-size: 0.875rem;
  text-align: right;
}

.footer-column--terms .menu-item a {
  opacity: 0.5;
  line-height: 1;
}

.footer-column--terms .menu-item a:hover {
  opacity: 0.8;
}

@media screen and (max-width: 1056px) {
  .footer-column--terms .menu-item {
    text-align: left;
  }
}

.footer-column--copyright {
  display: flex;
  justify-content: center;
  padding-top: 2.5rem;
}

.copyright-text {
  font-size: 0.625rem;
  opacity: 0.4;
}

@media screen and (max-width: 1056px) {
  .footer-column--copyright {
    padding-top: 0;
    justify-content: flex-start;
  }
}

@media screen and (max-width: 767px) {
  .footer-column--logo {
    display: none;
  }
}

@media screen and (max-width: 767px) {
  .footer-column--menu {
    display: none;
  }
}


/* --- 4. 共通コンポーネント --- */

/* 下層ページのヘッダー */
.page-header {
  padding: 40px 0;
  text-align: center;
  border-bottom: 1px solid var(--color-border);
}

.breadcrumbs {
    font-size: 12px;
    color: #888;
    max-width: 1200px; 
    width: 100%;
    padding: 0 15px;
    box-sizing: border-box;
    margin: -1.5rem auto 0;
}

.breadcrumbs a:hover {
  text-decoration: underline;
}

script + .breadcrumbs.forcms_block {
    margin-top: 30px;
}

@media screen and (max-width: 767px) {
  .breadcrumbs {
    margin: 110px auto 0;
  }
  script + .breadcrumbs.forcms_block {
    margin-top: 110px;
  }
  script + .breadcrumbs.forcms_block + .page-header.container.forcms_block {
    margin-top: 0;
  }
}

.page-title-group {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 5px;
}

.page-title {
  font-size: 32px;
  font-weight: 600;
  letter-spacing: 1px;
  margin: 0;
}

.page-subtitle {
  font-size: 14px;
  font-weight: bold;
  color: #aaa;
  letter-spacing: 2px;
  margin: 0;
}

/* 汎用ボタン */
.btn {
  display: inline-block;
  background-color: var(--color-dark);
  color: #fff;
  padding: 12px 35px;
  text-align: center;
  font-size: 13px;
  font-weight: 600;
  border: none;
  cursor: pointer;
  transition: opacity 0.3s;
}

.btn:hover {
  opacity: 0.8;
  color: #fff;
}


/* --- 5. レスポンシブ (共通部分) --- */
@media (max-width: 992px) {
  .main-nav {
    display: none;
  }

  .hamburger-menu {
    display: flex;
  }
}

@media (max-width: 768px) {
  body {
    font-size: 14px;
  }

  .container {
    padding-left: 15px;
    padding-right: 15px;
    width: auto;
  }

  .page-title {
    font-size: 24px;
  }

  .site-footer .container {
    flex-direction: column;
    gap: 20px;
    text-align: center;
  }

  .footer-nav {
    flex-direction: column;
    gap: 10px;
  }
}



/* ========== サイドバー ========== */
.sidebar-block {
    margin-bottom: 50px;
}
.sidebar-block:last-child {
    margin-bottom: 0;
}

.sidebar-title {
    font-size: 1.1rem;
    font-weight: bold;
    margin: 0 0 15px;
    padding-bottom: 10px;
    border-bottom: 2px solid var(--color-primary);
}

.sidebar-list {
    list-style: none;
    padding: 0;
    margin: 0;
}

.sidebar-list li ul.sidebar-list.item_node.child_genre_item {
}

.sidebar-list li ul.sidebar-list.item_node.child_genre_item li a {
    padding-left: 2em;
    justify-content: flex-start;
    gap:1em;
    font-weight: normal;

}
.sidebar-list li ul.sidebar-list.item_node.child_genre_item li a:before {
    content: '>';
    color: #ccc;
    font-weight: bold;
    font-size: 16px;
    transform: scale(0.8, 1.2);
}
.sidebar-list li ul.sidebar-list.item_node.child_genre_item li a:after {
    display: none;
}

.sidebar-list li:has(.item_node.child_genre_item) {
    border: 0;
}

ul.sidebar-list.item_node.root_genre_item > ul.sidebar-list.item_node.child_genre_item {
    margin-left: 1em;
    border-left: 1px solid #eee;
    padding-left: 1em;
}

ul.sidebar-list.item_node.child_genre_item li:last-child {
    border: 0 !important;
}

.sidebar-list a ,
.sidebar-list span {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 15px;
    color: var(--color-primary);
    font-size: 14px;
    font-weight: normal;
}

.sidebar-list span {
    background-color: #f8f8f8;
    opacity: 1;
    font-weight: bold;
    border-bottom: 1px solid var(--color-border);
}

.sidebar-list li ul li span {
    padding-left: 2em;
    border-bottom: 1px solid var(--color-border);
}

.sidebar-list a::after {
    content: '>';
    color: #ccc;
    font-weight: bold;
}
.sidebar-list a:hover {
    background-color: #f8f8f8;
    opacity: 1;
}

ul.sidebar-list.item_node.root_genre_item {
    margin: 0 0 3em 0;
}

#faq .sidebar-list li ul li span {
    padding-left: 2em;
    border-bottom: 1px solid var(--color-border);
    justify-content: flex-start;
    gap: 1em;
}
#faq .sidebar-list li ul li span:before {
    content: '>';
    color: #ccc;
    font-weight: bold;
    font-size: 16px;
    transform: scale(0.8, 1.2);
}


/* ========== ページネーション ========== */
.pagination {
    margin-top: 60px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 15px;
}

.pagination-info {
    font-size: 0.875rem;
    color: #888;
}

.pagination-list {
    display: flex;
    list-style: none;
    padding: 0;
    margin: 0;
    gap: 5px;
}

.pagination-list a {
    display: block;
    width: 36px;
    height: 36px;
    line-height: 36px;
    text-align: center;
    border: 1px solid #ddd;
    color: var(--color-primary);
}
.pagination-list a:hover {
    background-color: #f8f8f8;
    opacity: 1;
}

.pagination-list .is-current a {
    background-color: var(--color-primary);
    color: #fff;
    border-color: var(--color-primary);
    font-weight: bold;
}

/* ========== 下層ページ用レスポンシブ ========== */
@media (max-width: 992px) { /* サイドバーが下に落ちるブレークポイント */
    .two-column-container {
        flex-direction: column;
        gap: 50px;
    }
    .sidebar {
        width: 100%;
    }
}

@media (max-width: 768px) {
    .page-header-lower {
        padding: 30px 0;
        margin-bottom: 40px;
    }
    .page-title-lower {
        font-size: 1.8rem;
    }

    .news-item-link {
        flex-direction: column; /* SPでは画像を上、テキストを下に */
        gap: 20px;
    }
    .news-item-image {
        width: 100%;
    }
    .news-item-title {
        font-size: 1.1rem;
    }
}


/* ========== ブランド紹介ページ ========== */
#main-visual {
    position: relative;
    width: 100%;
    height: 0;
    padding-top: 41.25%;
    overflow: hidden;
    background-color: #eee;
    margin-top: 40px;
}
.slideshow-container {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

.slideshow-list {
    list-style: none;
    margin: 0;
    padding: 0;
    width: 100%;
    height: 100%;
}

.slideshow-item {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    opacity: 0;
    transition: opacity 1.5s ease-in-out;
    z-index: 1;
}

.slideshow-item picture {
    display: block;
    width: 100%;
    height: 100%;
}

.slideshow-item.is-active {
    opacity: 1;
    z-index: 2;
}

.slideshow-item img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
}

#main-visual .main-visual-content {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 3;
    width: 90%;
    max-width: 800px;
    text-align: center;
    background-color: rgba(0, 0, 0, 0.4);
    padding: 30px 40px;
    border-radius: 5px;
}
.forcms_block.brand-nav {
  /* コンテンツ全体の幅と中央寄せ */
  max-width: 1200px;
  margin-left: auto;
  margin-right: auto;
  padding: 0 20px; /* 画面端の余白 */
}

.brand_title {
    padding: 0;
    display: flex;
    gap: 32px;
    align-items: center; /* ロゴとテキストの下端を揃える */
    font-size: 14px;
    margin: 2.5rem auto 1.5rem;
    font-weight: normal;
}

.brand_title .logo {
  height: 40px;
  width: auto;
}

.brand_title .logo#Scarpa {
  height: auto;
  width: 170px;
}

.brand_title .logo#Smartwool  {
  height: auto;
  width: 170px;
}

.brand_title .logo#SeatoSummit {
  height: auto;
  width: 190px;
}


/* PC表示時のナビゲーション */
.brand-nav nav.header-nav {
    /* 元の指定を維持しつつ、後でスマホ用に上書き */
    margin-top: -66px !important;
    margin-bottom: 25px !important;
    width: auto;
}

.brand-nav nav.header-nav ul {
  display: flex; /* メニューを横並びにする */
  justify-content: flex-end; /* 右寄せにする */
  list-style: none;
  padding: 0;
  margin: 0;
}

.brand-nav nav.header-nav li {
    background: #f5f5f5;
    font-weight: normal;
    margin-left: 10px; /* メニュー間の余白 */
}

.brand-nav nav.header-nav li a {
    font-weight: normal;
    text-decoration: none;
    color: #333;
    display: block;
    padding: 10px 20px; /* クリック領域の確保 */
    transition: background-color 0.3s; /* ホバー時のアニメーション */
}

/* ホバーエフェクト */
.brand-nav nav.header-nav li a:hover {
  background-color: #e9e9e9;
}

a.listWithTitle__url {
    word-break: break-all;
}

/* --- レスポンシブ対応（スマートフォン表示など） --- */
/* 画面幅が768px以下の場合に適用 */
@media (max-width: 768px) {

  /* タイトルのレイアウトを縦積みに変更 */
  .brand_title {
    flex-direction: column; /* 縦に並べる */
    align-items: center;    /* 中央揃えにする */
    gap: 16px;              /* ロゴとテキストの間の余白 */
    margin: 1.5rem auto;    /* 上下の余白を調整 */
  }

  /* ナビゲーションのレイアウト調整 */
  .brand-nav nav.header-nav {
    /* PC用のネガティブマージンをリセットし、自然な配置に戻す */
    margin-top: 20px !important;
    margin-bottom: 20px !important;
    display: block!important;
    width: auto;
  }

  .brand-nav nav.header-nav ul {
    flex-direction: column; /* メニューを縦一列にする */
    align-items: stretch;   /* 各メニューを親要素の幅いっぱいに伸ばす */
  }

  .brand-nav nav.header-nav li {
    margin-left: 0;       /* 横の余白をリセット */
    margin-bottom: 8px;   /* メニュー間の縦の余白 */
  }

  /* 最後のメニューの下余白は不要 */
  .brand-nav nav.header-nav li:last-child {
    margin-bottom: 0;
  }

  .brand-nav nav.header-nav li a {
    text-align: center; /* テキストを中央揃えに */
    padding: 15px 10px; /* タップしやすいように上下の余白を増やす */
  }
}


/* ========== アニメーション ========== */
/* アニメーション前の状態 */
.fade-in {
    opacity: 0;
    transform: translateY(30px);
    transition: opacity 0.8s, transform 0.8s;
}
/* 画面に入ったら付与されるクラス */
.fade-in.is-visible {
    opacity: 1;
    transform: translateY(0);
}


/* ========== レスポンシブ対応 (メディアクエリ) ========== */
@media (max-width: 768px) {
    /* === メインビジュアル (SP) === */
    .main-visual-content h2 {
        font-size: 2rem;
    }
    .main-visual-content p {
        font-size: 1rem;
    }
    #main-visual {
        /* SP用画像のアスペクト比 (1200 / 800 * 100 = 150%) */
        padding-top: 150%;
        margin-top: calc(-1 * var(--header-height-sp));
    }

    #main-visual .main-visual-content {
        padding: 20px;
        width: 85%;
    }

    #main-visual .main-visual-content h2 {
        font-size: 1.5rem; /* SPではテキストも少し小さく調整 */
    }

    #main-visual .main-visual-content p {
        font-size: 0.9rem;
    }
    main {
        padding-left: 5px;
        padding-right: 5px;
        padding-bottom: 4rem;
    }
    .page-header.container.forcms_block {
        margin-top: 90px;
        padding: 23px 0 16px;
    }
}

.pagination {
    margin-top: 60px;
    display: flex;
    justify-content: center;
    flex-direction: row; /* 横並びを指定 */
    flex-wrap: wrap;     /* はみ出したら折り返す */
    gap: 8px 5px;
    padding: 0 15px;
    box-sizing: border-box;
}

.pagination center {
    display: contents;
}

.pagination .navipage_reverse_,
.pagination .navipage_forward_ {
  display: inline-flex;
  gap: 5px;
}

.pagination a,
.pagination .navipage_now_ {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 38px;
  height: 38px;
  padding: 0 10px;
  border: 1px solid #ccc;
  color: #333;
  background-color: #fff;
  text-decoration: none;
  font-size: 0.9rem;
  line-height: 1;
  border-radius: 4px;
  white-space: nowrap;
  transition: background-color 0.2s, color 0.2s;
}

.pagination a:hover {
  background-color: #f0f0f0;
  color: #333;
  opacity: 1;
}

.pagination .navipage_now_ {
  background-color: #333;
  color: #fff;
  border-color: #333;
  font-weight: bold;
  cursor: default;
}

@media (max-width: 768px) {
    .pagination {
        margin-top: 40px;
    }
    .pagination a,
    .pagination .navipage_now_ {
        min-width: 36px;
        height: 36px;
        font-size: 0.85rem;
    }
}