@charset "UTF-8";
*, ::before, ::after{
  --tw-border-spacing-x: 0;
  --tw-border-spacing-y: 0;
  --tw-translate-x: 0;
  --tw-translate-y: 0;
  --tw-rotate: 0;
  --tw-skew-x: 0;
  --tw-skew-y: 0;
  --tw-scale-x: 1;
  --tw-scale-y: 1;
  --tw-pan-x:  ;
  --tw-pan-y:  ;
  --tw-pinch-zoom:  ;
  --tw-scroll-snap-strictness: proximity;
  --tw-gradient-from-position:  ;
  --tw-gradient-via-position:  ;
  --tw-gradient-to-position:  ;
  --tw-ordinal:  ;
  --tw-slashed-zero:  ;
  --tw-numeric-figure:  ;
  --tw-numeric-spacing:  ;
  --tw-numeric-fraction:  ;
  --tw-ring-inset:  ;
  --tw-ring-offset-width: 0px;
  --tw-ring-offset-color: #fff;
  --tw-ring-color: rgb(59 130 246 / 0.5);
  --tw-ring-offset-shadow: 0 0 #0000;
  --tw-ring-shadow: 0 0 #0000;
  --tw-shadow: 0 0 #0000;
  --tw-shadow-colored: 0 0 #0000;
  --tw-blur:  ;
  --tw-brightness:  ;
  --tw-contrast:  ;
  --tw-grayscale:  ;
  --tw-hue-rotate:  ;
  --tw-invert:  ;
  --tw-saturate:  ;
  --tw-sepia:  ;
  --tw-drop-shadow:  ;
  --tw-backdrop-blur:  ;
  --tw-backdrop-brightness:  ;
  --tw-backdrop-contrast:  ;
  --tw-backdrop-grayscale:  ;
  --tw-backdrop-hue-rotate:  ;
  --tw-backdrop-invert:  ;
  --tw-backdrop-opacity:  ;
  --tw-backdrop-saturate:  ;
  --tw-backdrop-sepia:  ;
  --tw-contain-size:  ;
  --tw-contain-layout:  ;
  --tw-contain-paint:  ;
  --tw-contain-style:  ;
}
::backdrop{
  --tw-border-spacing-x: 0;
  --tw-border-spacing-y: 0;
  --tw-translate-x: 0;
  --tw-translate-y: 0;
  --tw-rotate: 0;
  --tw-skew-x: 0;
  --tw-skew-y: 0;
  --tw-scale-x: 1;
  --tw-scale-y: 1;
  --tw-pan-x:  ;
  --tw-pan-y:  ;
  --tw-pinch-zoom:  ;
  --tw-scroll-snap-strictness: proximity;
  --tw-gradient-from-position:  ;
  --tw-gradient-via-position:  ;
  --tw-gradient-to-position:  ;
  --tw-ordinal:  ;
  --tw-slashed-zero:  ;
  --tw-numeric-figure:  ;
  --tw-numeric-spacing:  ;
  --tw-numeric-fraction:  ;
  --tw-ring-inset:  ;
  --tw-ring-offset-width: 0px;
  --tw-ring-offset-color: #fff;
  --tw-ring-color: rgb(59 130 246 / 0.5);
  --tw-ring-offset-shadow: 0 0 #0000;
  --tw-ring-shadow: 0 0 #0000;
  --tw-shadow: 0 0 #0000;
  --tw-shadow-colored: 0 0 #0000;
  --tw-blur:  ;
  --tw-brightness:  ;
  --tw-contrast:  ;
  --tw-grayscale:  ;
  --tw-hue-rotate:  ;
  --tw-invert:  ;
  --tw-saturate:  ;
  --tw-sepia:  ;
  --tw-drop-shadow:  ;
  --tw-backdrop-blur:  ;
  --tw-backdrop-brightness:  ;
  --tw-backdrop-contrast:  ;
  --tw-backdrop-grayscale:  ;
  --tw-backdrop-hue-rotate:  ;
  --tw-backdrop-invert:  ;
  --tw-backdrop-opacity:  ;
  --tw-backdrop-saturate:  ;
  --tw-backdrop-sepia:  ;
  --tw-contain-size:  ;
  --tw-contain-layout:  ;
  --tw-contain-paint:  ;
  --tw-contain-style:  ;
}
/*
! tailwindcss v3.4.19 | MIT License | https://tailwindcss.com
*/
/*
1. Prevent padding and border from affecting element width. (https://github.com/mozdevs/cssremedy/issues/4)
2. Allow adding a border to an element by just adding a border-width. (https://github.com/tailwindcss/tailwindcss/pull/116)
*/
*,
::before,
::after {
  box-sizing: border-box; /* 1 */
  border-width: 0; /* 2 */
  border-style: solid; /* 2 */
  border-color: #e5e7eb; /* 2 */
}
::before,
::after {
  --tw-content: '';
}
/*
1. Use a consistent sensible line-height in all browsers.
2. Prevent adjustments of font size after orientation changes in iOS.
3. Use a more readable tab size.
4. Use the user's configured `sans` font-family by default.
5. Use the user's configured `sans` font-feature-settings by default.
6. Use the user's configured `sans` font-variation-settings by default.
7. Disable tap highlights on iOS
*/
html,
:host {
  line-height: 1.5; /* 1 */
  -webkit-text-size-adjust: 100%; /* 2 */
  -moz-tab-size: 4; /* 3 */
  -o-tab-size: 4;
     tab-size: 4; /* 3 */
  font-family: ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"; /* 4 */
  font-feature-settings: normal; /* 5 */
  font-variation-settings: normal; /* 6 */
  -webkit-tap-highlight-color: transparent; /* 7 */
}
/*
1. Remove the margin in all browsers.
2. Inherit line-height from `html` so users can set them as a class directly on the `html` element.
*/
body {
  margin: 0; /* 1 */
  line-height: inherit; /* 2 */
}
/*
1. Add the correct height in Firefox.
2. Correct the inheritance of border color in Firefox. (https://bugzilla.mozilla.org/show_bug.cgi?id=190655)
3. Ensure horizontal rules are visible by default.
*/
hr {
  height: 0; /* 1 */
  color: inherit; /* 2 */
  border-top-width: 1px; /* 3 */
}
/*
Add the correct text decoration in Chrome, Edge, and Safari.
*/
abbr:where([title]) {
  -webkit-text-decoration: underline dotted;
          text-decoration: underline dotted;
}
/*
Remove the default font size and weight for headings.
*/
h1,
h2,
h3,
h4,
h5,
h6 {
  font-size: inherit;
  font-weight: inherit;
}
/*
Reset links to optimize for opt-in styling instead of opt-out.
*/
a {
  color: inherit;
  text-decoration: inherit;
}
/*
Add the correct font weight in Edge and Safari.
*/
b,
strong {
  font-weight: bolder;
}
/*
1. Use the user's configured `mono` font-family by default.
2. Use the user's configured `mono` font-feature-settings by default.
3. Use the user's configured `mono` font-variation-settings by default.
4. Correct the odd `em` font sizing in all browsers.
*/
code,
kbd,
samp,
pre {
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace; /* 1 */
  font-feature-settings: normal; /* 2 */
  font-variation-settings: normal; /* 3 */
  font-size: 1em; /* 4 */
}
/*
Add the correct font size in all browsers.
*/
small {
  font-size: 80%;
}
/*
Prevent `sub` and `sup` elements from affecting the line height in all browsers.
*/
sub,
sup {
  font-size: 75%;
  line-height: 0;
  position: relative;
  vertical-align: baseline;
}
sub {
  bottom: -0.25em;
}
sup {
  top: -0.5em;
}
/*
1. Remove text indentation from table contents in Chrome and Safari. (https://bugs.chromium.org/p/chromium/issues/detail?id=999088, https://bugs.webkit.org/show_bug.cgi?id=201297)
2. Correct table border color inheritance in all Chrome and Safari. (https://bugs.chromium.org/p/chromium/issues/detail?id=935729, https://bugs.webkit.org/show_bug.cgi?id=195016)
3. Remove gaps between table borders by default.
*/
table {
  text-indent: 0; /* 1 */
  border-color: inherit; /* 2 */
  border-collapse: collapse; /* 3 */
}
/*
1. Change the font styles in all browsers.
2. Remove the margin in Firefox and Safari.
3. Remove default padding in all browsers.
*/
button,
input,
optgroup,
select,
textarea {
  font-family: inherit; /* 1 */
  font-feature-settings: inherit; /* 1 */
  font-variation-settings: inherit; /* 1 */
  font-size: 100%; /* 1 */
  font-weight: inherit; /* 1 */
  line-height: inherit; /* 1 */
  letter-spacing: inherit; /* 1 */
  color: inherit; /* 1 */
  margin: 0; /* 2 */
  padding: 0; /* 3 */
}
/*
Remove the inheritance of text transform in Edge and Firefox.
*/
button,
select {
  text-transform: none;
}
/*
1. Correct the inability to style clickable types in iOS and Safari.
2. Remove default button styles.
*/
button,
input:where([type='button']),
input:where([type='reset']),
input:where([type='submit']) {
  -webkit-appearance: button; /* 1 */
  background-color: transparent; /* 2 */
  background-image: none; /* 2 */
}
/*
Use the modern Firefox focus style for all focusable elements.
*/
:-moz-focusring {
  outline: auto;
}
/*
Remove the additional `:invalid` styles in Firefox. (https://github.com/mozilla/gecko-dev/blob/2f9eacd9d3d995c937b4251a5557d95d494c9be1/layout/style/res/forms.css#L728-L737)
*/
:-moz-ui-invalid {
  box-shadow: none;
}
/*
Add the correct vertical alignment in Chrome and Firefox.
*/
progress {
  vertical-align: baseline;
}
/*
Correct the cursor style of increment and decrement buttons in Safari.
*/
::-webkit-inner-spin-button,
::-webkit-outer-spin-button {
  height: auto;
}
/*
1. Correct the odd appearance in Chrome and Safari.
2. Correct the outline style in Safari.
*/
[type='search'] {
  -webkit-appearance: textfield; /* 1 */
  outline-offset: -2px; /* 2 */
}
/*
Remove the inner padding in Chrome and Safari on macOS.
*/
::-webkit-search-decoration {
  -webkit-appearance: none;
}
/*
1. Correct the inability to style clickable types in iOS and Safari.
2. Change font properties to `inherit` in Safari.
*/
::-webkit-file-upload-button {
  -webkit-appearance: button; /* 1 */
  font: inherit; /* 2 */
}
/*
Add the correct display in Chrome and Safari.
*/
summary {
  display: list-item;
}
/*
Removes the default spacing and border for appropriate elements.
*/
blockquote,
dl,
dd,
h1,
h2,
h3,
h4,
h5,
h6,
hr,
figure,
p,
pre {
  margin: 0;
}
fieldset {
  margin: 0;
  padding: 0;
}
legend {
  padding: 0;
}
ol,
ul,
menu {
  list-style: none;
  margin: 0;
  padding: 0;
}
/*
Reset default styling for dialogs.
*/
dialog {
  padding: 0;
}
/*
Prevent resizing textareas horizontally by default.
*/
textarea {
  resize: vertical;
}
/*
1. Reset the default placeholder opacity in Firefox. (https://github.com/tailwindlabs/tailwindcss/issues/3300)
2. Set the default placeholder color to the user's configured gray 400 color.
*/
input::-moz-placeholder, textarea::-moz-placeholder {
  opacity: 1; /* 1 */
  color: #9ca3af; /* 2 */
}
input::placeholder,
textarea::placeholder {
  opacity: 1; /* 1 */
  color: #9ca3af; /* 2 */
}
/*
Set the default cursor for buttons.
*/
button,
[role="button"] {
  cursor: pointer;
}
/*
Make sure disabled buttons don't get the pointer cursor.
*/
:disabled {
  cursor: default;
}
/*
1. Make replaced elements `display: block` by default. (https://github.com/mozdevs/cssremedy/issues/14)
2. Add `vertical-align: middle` to align replaced elements more sensibly by default. (https://github.com/jensimmons/cssremedy/issues/14#issuecomment-634934210)
   This can trigger a poorly considered lint error in some tools but is included by design.
*/
img,
svg,
video,
canvas,
audio,
iframe,
embed,
object {
  display: block; /* 1 */
  vertical-align: middle; /* 2 */
}
/*
Constrain images and videos to the parent width and preserve their intrinsic aspect ratio. (https://github.com/mozdevs/cssremedy/issues/14)
*/
img,
video {
  max-width: 100%;
  height: auto;
}
/* Make elements with the HTML hidden attribute stay hidden by default */
[hidden]:where(:not([hidden="until-found"])) {
  display: none;
}
.container{
  width: 100%;
}
@media (min-width: 640px){
  .container{
    max-width: 640px;
  }
}
@media (min-width: 768px){
  .container{
    max-width: 768px;
  }
}
@media (min-width: 1024px){
  .container{
    max-width: 1024px;
  }
}
@media (min-width: 1280px){
  .container{
    max-width: 1280px;
  }
}
@media (min-width: 1536px){
  .container{
    max-width: 1536px;
  }
}
.sr-only{
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border-width: 0;
}
.pointer-events-none{
  pointer-events: none;
}
.\!visible{
  visibility: visible !important;
}
.visible{
  visibility: visible;
}
.invisible{
  visibility: hidden;
}
.\!static{
  position: static !important;
}
.static{
  position: static;
}
.fixed{
  position: fixed;
}
.absolute{
  position: absolute;
}
.relative{
  position: relative;
}
.sticky{
  position: sticky;
}
.-inset-\[13\.36\%\]{
  inset: -13.36%;
}
.inset-0{
  inset: 0px;
}
.inset-x-0{
  left: 0px;
  right: 0px;
}
.-left-\[5\.73\%\]{
  left: -5.73%;
}
.-right-\[5\.73\%\]{
  right: -5.73%;
}
.-top-\[56px\]{
  top: -56px;
}
.bottom-0{
  bottom: 0px;
}
.bottom-10{
  bottom: 2.5rem;
}
.bottom-11{
  bottom: 2.75rem;
}
.bottom-2{
  bottom: 0.5rem;
}
.left-0{
  left: 0px;
}
.left-1\/2{
  left: 50%;
}
.left-\[-0\.75\%\]{
  left: -0.75%;
}
.left-\[-1\.98\%\]{
  left: -1.98%;
}
.left-\[-24\%\]{
  left: -24%;
}
.left-\[-51\.7\%\]{
  left: -51.7%;
}
.left-\[-9999px\]{
  left: -9999px;
}
.left-\[1\.951em\]{
  left: 1.951em;
}
.left-\[13px\]{
  left: 13px;
}
.left-\[34\.50\%\]{
  left: 34.50%;
}
.left-\[34px\]{
  left: 34px;
}
.left-\[42px\]{
  left: 42px;
}
.left-\[52\%\]{
  left: 52%;
}
.left-\[64\.17\%\]{
  left: 64.17%;
}
.left-\[68\.7\%\]{
  left: 68.7%;
}
.right-0{
  right: 0px;
}
.top-0{
  top: 0px;
}
.top-1\/2{
  top: 50%;
}
.top-10{
  top: 2.5rem;
}
.top-11{
  top: 2.75rem;
}
.top-2{
  top: 0.5rem;
}
.top-\[-12\.81\%\]{
  top: -12.81%;
}
.top-\[-14\.95vw\]{
  top: -14.95vw;
}
.top-\[-27\.1\%\]{
  top: -27.1%;
}
.top-\[-80px\]{
  top: -80px;
}
.top-\[-88\%\]{
  top: -88%;
}
.top-\[0\.173em\]{
  top: 0.173em;
}
.top-\[0\.7em\]{
  top: 0.7em;
}
.top-\[0\.864em\]{
  top: 0.864em;
}
.top-\[110px\]{
  top: 110px;
}
.top-\[13px\]{
  top: 13px;
}
.top-\[31\.4\%\]{
  top: 31.4%;
}
.top-\[33px\]{
  top: 33px;
}
.top-\[42\.63\%\]{
  top: 42.63%;
}
.top-\[62\%\]{
  top: 62%;
}
.top-\[8\%\]{
  top: 8%;
}
.top-\[99px\]{
  top: 99px;
}
.top-\[calc\(var\(--tuck\)\*0\.18\)\]{
  top: calc(var(--tuck) * 0.18);
}
.top-\[min\(8\.39vw\2c 161px\)\]{
  top: min(8.39vw, 161px);
}
.top-auto{
  top: auto;
}
.isolate{
  isolation: isolate;
}
.-z-10{
  z-index: -10;
}
.z-0{
  z-index: 0;
}
.z-10{
  z-index: 10;
}
.z-50{
  z-index: 50;
}
.z-\[-1\]{
  z-index: -1;
}
.z-\[100\]{
  z-index: 100;
}
.z-\[1\]{
  z-index: 1;
}
.z-\[55\]{
  z-index: 55;
}
.z-\[60\]{
  z-index: 60;
}
.col-span-2{
  grid-column: span 2 / span 2;
}
.mx-auto{
  margin-left: auto;
  margin-right: auto;
}
.-mt-\[6\%\]{
  margin-top: -6%;
}
.-mt-\[min\(4\.69vw\2c 90px\)\]{
  margin-top: calc(min(4.69vw, 90px) * -1);
}
.-mt-\[min\(6\.95vw\2c 133px\)\]{
  margin-top: calc(min(6.95vw, 133px) * -1);
}
.-mt-\[min\(8\.96vw\2c 172px\)\]{
  margin-top: calc(min(8.96vw, 172px) * -1);
}
.mb-\[12px\]{
  margin-bottom: 12px;
}
.ml-\[24px\]{
  margin-left: 24px;
}
.mr-2{
  margin-right: 0.5rem;
}
.mt-1{
  margin-top: 0.25rem;
}
.mt-10{
  margin-top: 2.5rem;
}
.mt-12{
  margin-top: 3rem;
}
.mt-2{
  margin-top: 0.5rem;
}
.mt-3{
  margin-top: 0.75rem;
}
.mt-4{
  margin-top: 1rem;
}
.mt-5{
  margin-top: 1.25rem;
}
.mt-6{
  margin-top: 1.5rem;
}
.mt-8{
  margin-top: 2rem;
}
.mt-\[10px\]{
  margin-top: 10px;
}
.mt-\[calc\(-1\*var\(--tuck\)\)\]{
  margin-top: calc(-1 * var(--tuck));
}
.mt-auto{
  margin-top: auto;
}
.block{
  display: block;
}
.inline-block{
  display: inline-block;
}
.flex{
  display: flex;
}
.inline-flex{
  display: inline-flex;
}
.table{
  display: table;
}
.\!grid{
  display: grid !important;
}
.grid{
  display: grid;
}
.hidden{
  display: none;
}
.aspect-\[1005\.82\/604\.882\]{
  aspect-ratio: 1005.82/604.882;
}
.aspect-\[114\/118\]{
  aspect-ratio: 114/118;
}
.aspect-\[1210\/516\]{
  aspect-ratio: 1210/516;
}
.aspect-\[360\/250\]{
  aspect-ratio: 360/250;
}
.aspect-\[392\/246\]{
  aspect-ratio: 392/246;
}
.aspect-\[441\/282\]{
  aspect-ratio: 441/282;
}
.aspect-\[485\/199\]{
  aspect-ratio: 485/199;
}
.aspect-\[530\/432\]{
  aspect-ratio: 530/432;
}
.aspect-\[549\/267\]{
  aspect-ratio: 549/267;
}
.aspect-\[571\/366\]{
  aspect-ratio: 571/366;
}
.aspect-\[642\/398\]{
  aspect-ratio: 642/398;
}
.aspect-\[706\/421\]{
  aspect-ratio: 706/421;
}
.aspect-\[717\/614\]{
  aspect-ratio: 717/614;
}
.aspect-\[760\/382\]{
  aspect-ratio: 760/382;
}
.aspect-\[845\/780\]{
  aspect-ratio: 845/780;
}
.aspect-square{
  aspect-ratio: 1 / 1;
}
.h-0\.5{
  height: 0.125rem;
}
.h-11{
  height: 2.75rem;
}
.h-\[11\.314px\]{
  height: 11.314px;
}
.h-\[110px\]{
  height: 110px;
}
.h-\[112\.06\%\]{
  height: 112.06%;
}
.h-\[125\.11\%\]{
  height: 125.11%;
}
.h-\[131\.37\%\]{
  height: 131.37%;
}
.h-\[13px\]{
  height: 13px;
}
.h-\[160px\]{
  height: 160px;
}
.h-\[18px\]{
  height: 18px;
}
.h-\[20px\]{
  height: 20px;
}
.h-\[21\.03\%\]{
  height: 21.03%;
}
.h-\[240px\]{
  height: 240px;
}
.h-\[276\%\]{
  height: 276%;
}
.h-\[30px\]{
  height: 30px;
}
.h-\[32\.24\%\]{
  height: 32.24%;
}
.h-\[33\.59\%\]{
  height: 33.59%;
}
.h-\[37\.93\%\]{
  height: 37.93%;
}
.h-\[38\%\]{
  height: 38%;
}
.h-\[38\.28\%\]{
  height: 38.28%;
}
.h-\[38px\]{
  height: 38px;
}
.h-\[40px\]{
  height: 40px;
}
.h-\[44px\]{
  height: 44px;
}
.h-\[46\.15\%\]{
  height: 46.15%;
}
.h-\[47\.17\%\]{
  height: 47.17%;
}
.h-\[48px\]{
  height: 48px;
}
.h-\[50px\]{
  height: 50px;
}
.h-\[52px\]{
  height: 52px;
}
.h-\[56px\]{
  height: 56px;
}
.h-\[58px\]{
  height: 58px;
}
.h-\[5px\]{
  height: 5px;
}
.h-\[64px\]{
  height: 64px;
}
.h-\[72px\]{
  height: 72px;
}
.h-\[7px\]{
  height: 7px;
}
.h-\[88px\]{
  height: 88px;
}
.h-\[8px\]{
  height: 8px;
}
.h-\[9px\]{
  height: 9px;
}
.h-auto{
  height: auto;
}
.h-full{
  height: 100%;
}
.h-px{
  height: 1px;
}
.h-svh{
  height: 100svh;
}
.max-h-\[120px\]{
  max-height: 120px;
}
.max-h-full{
  max-height: 100%;
}
.min-h-\[600px\]{
  min-height: 600px;
}
.\!w-\[300px\]{
  width: 300px !important;
}
.\!w-full{
  width: 100% !important;
}
.w-11{
  width: 2.75rem;
}
.w-7{
  width: 1.75rem;
}
.w-\[100\.32\%\]{
  width: 100.32%;
}
.w-\[105\.34\%\]{
  width: 105.34%;
}
.w-\[107\.42\%\]{
  width: 107.42%;
}
.w-\[11\.314px\]{
  width: 11.314px;
}
.w-\[13px\]{
  width: 13px;
}
.w-\[150\%\]{
  width: 150%;
}
.w-\[176px\]{
  width: 176px;
}
.w-\[182\%\]{
  width: 182%;
}
.w-\[18px\]{
  width: 18px;
}
.w-\[2\.125em\]{
  width: 2.125em;
}
.w-\[240px\]{
  width: 240px;
}
.w-\[27\.07\%\]{
  width: 27.07%;
}
.w-\[272px\]{
  width: 272px;
}
.w-\[30px\]{
  width: 30px;
}
.w-\[31\.01\%\]{
  width: 31.01%;
}
.w-\[31\.38\%\]{
  width: 31.38%;
}
.w-\[37\.93\%\]{
  width: 37.93%;
}
.w-\[373px\]{
  width: 373px;
}
.w-\[38px\]{
  width: 38px;
}
.w-\[42\.60\%\]{
  width: 42.60%;
}
.w-\[43\.51\%\]{
  width: 43.51%;
}
.w-\[47\.17\%\]{
  width: 47.17%;
}
.w-\[49\.69\%\]{
  width: 49.69%;
}
.w-\[4px\]{
  width: 4px;
}
.w-\[50px\]{
  width: 50px;
}
.w-\[52px\]{
  width: 52px;
}
.w-\[56px\]{
  width: 56px;
}
.w-\[58px\]{
  width: 58px;
}
.w-\[5px\]{
  width: 5px;
}
.w-\[60vw\]{
  width: 60vw;
}
.w-\[70\%\]{
  width: 70%;
}
.w-\[70vw\]{
  width: 70vw;
}
.w-\[72px\]{
  width: 72px;
}
.w-\[78\%\]{
  width: 78%;
}
.w-\[7px\]{
  width: 7px;
}
.w-\[86\%\]{
  width: 86%;
}
.w-\[88px\]{
  width: 88px;
}
.w-\[8px\]{
  width: 8px;
}
.w-\[9px\]{
  width: 9px;
}
.w-\[calc\(100\%\+3rem\)\]{
  width: calc(100% + 3rem);
}
.w-\[calc\(100\%-3rem\)\]{
  width: calc(100% - 3rem);
}
.w-auto{
  width: auto;
}
.w-fit{
  width: -moz-fit-content;
  width: fit-content;
}
.w-full{
  width: 100%;
}
.w-max{
  width: -moz-max-content;
  width: max-content;
}
.w-px{
  width: 1px;
}
.min-w-0{
  min-width: 0px;
}
.max-w-\[1005px\]{
  max-width: 1005px;
}
.max-w-\[1148px\]{
  max-width: 1148px;
}
.max-w-\[1188px\]{
  max-width: 1188px;
}
.max-w-\[1212px\]{
  max-width: 1212px;
}
.max-w-\[1280px\]{
  max-width: 1280px;
}
.max-w-\[1320px\]{
  max-width: 1320px;
}
.max-w-\[1344px\]{
  max-width: 1344px;
}
.max-w-\[1358px\]{
  max-width: 1358px;
}
.max-w-\[1390px\]{
  max-width: 1390px;
}
.max-w-\[1400px\]{
  max-width: 1400px;
}
.max-w-\[1440px\]{
  max-width: 1440px;
}
.max-w-\[1525px\]{
  max-width: 1525px;
}
.max-w-\[1615px\]{
  max-width: 1615px;
}
.max-w-\[1755px\]{
  max-width: 1755px;
}
.max-w-\[1920px\]{
  max-width: 1920px;
}
.max-w-\[314px\]{
  max-width: 314px;
}
.max-w-\[329px\]{
  max-width: 329px;
}
.max-w-\[426px\]{
  max-width: 426px;
}
.max-w-\[476px\]{
  max-width: 476px;
}
.max-w-\[477px\]{
  max-width: 477px;
}
.max-w-\[495px\]{
  max-width: 495px;
}
.max-w-\[642px\]{
  max-width: 642px;
}
.max-w-\[732px\]{
  max-width: 732px;
}
.max-w-\[733px\]{
  max-width: 733px;
}
.max-w-\[760px\]{
  max-width: 760px;
}
.max-w-\[845px\]{
  max-width: 845px;
}
.max-w-\[872px\]{
  max-width: 872px;
}
.max-w-\[885px\]{
  max-width: 885px;
}
.max-w-\[915px\]{
  max-width: 915px;
}
.max-w-\[966px\]{
  max-width: 966px;
}
.max-w-full{
  max-width: 100%;
}
.max-w-none{
  max-width: none;
}
.flex-1{
  flex: 1 1 0%;
}
.shrink-0{
  flex-shrink: 0;
}
.origin-top-left{
  transform-origin: top left;
}
.-translate-x-1\/2{
  --tw-translate-x: -50%;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}
.-translate-x-\[200\%\]{
  --tw-translate-x: -200%;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}
.-translate-y-1\/2{
  --tw-translate-y: -50%;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}
.translate-x-full{
  --tw-translate-x: 100%;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}
.rotate-180{
  --tw-rotate: 180deg;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}
.rotate-45{
  --tw-rotate: 45deg;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}
.rotate-90{
  --tw-rotate: 90deg;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}
.-scale-x-100{
  --tw-scale-x: -1;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}
.-scale-y-100{
  --tw-scale-y: -1;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}
.transform{
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}
.cursor-not-allowed{
  cursor: not-allowed;
}
.cursor-pointer{
  cursor: pointer;
}
.resize-y{
  resize: vertical;
}
.list-disc{
  list-style-type: disc;
}
.grid-cols-1{
  grid-template-columns: repeat(1, minmax(0, 1fr));
}
.grid-cols-2{
  grid-template-columns: repeat(2, minmax(0, 1fr));
}
.flex-col{
  flex-direction: column;
}
.flex-wrap{
  flex-wrap: wrap;
}
.place-items-center{
  place-items: center;
}
.items-start{
  align-items: flex-start;
}
.items-end{
  align-items: flex-end;
}
.items-center{
  align-items: center;
}
.items-baseline{
  align-items: baseline;
}
.items-stretch{
  align-items: stretch;
}
.justify-end{
  justify-content: flex-end;
}
.justify-center{
  justify-content: center;
}
.justify-between{
  justify-content: space-between;
}
.gap-1{
  gap: 0.25rem;
}
.gap-1\.5{
  gap: 0.375rem;
}
.gap-10{
  gap: 2.5rem;
}
.gap-12{
  gap: 3rem;
}
.gap-14{
  gap: 3.5rem;
}
.gap-16{
  gap: 4rem;
}
.gap-2{
  gap: 0.5rem;
}
.gap-3{
  gap: 0.75rem;
}
.gap-4{
  gap: 1rem;
}
.gap-5{
  gap: 1.25rem;
}
.gap-6{
  gap: 1.5rem;
}
.gap-8{
  gap: 2rem;
}
.gap-\[10px\]{
  gap: 10px;
}
.gap-\[11px\]{
  gap: 11px;
}
.gap-\[12px\]{
  gap: 12px;
}
.gap-\[14px\]{
  gap: 14px;
}
.gap-\[16px\]{
  gap: 16px;
}
.gap-\[18px\]{
  gap: 18px;
}
.gap-\[2\%\]{
  gap: 2%;
}
.gap-\[20\.84px\]{
  gap: 20.84px;
}
.gap-\[24px\]{
  gap: 24px;
}
.gap-\[2px\]{
  gap: 2px;
}
.gap-\[3\%\]{
  gap: 3%;
}
.gap-\[32px\]{
  gap: 32px;
}
.gap-\[4px\]{
  gap: 4px;
}
.gap-\[6px\]{
  gap: 6px;
}
.gap-\[7px\]{
  gap: 7px;
}
.gap-\[8px\]{
  gap: 8px;
}
.gap-px{
  gap: 1px;
}
.gap-x-10{
  -moz-column-gap: 2.5rem;
       column-gap: 2.5rem;
}
.gap-x-6{
  -moz-column-gap: 1.5rem;
       column-gap: 1.5rem;
}
.gap-x-\[10px\]{
  -moz-column-gap: 10px;
       column-gap: 10px;
}
.gap-x-\[22px\]{
  -moz-column-gap: 22px;
       column-gap: 22px;
}
.gap-x-\[40px\]{
  -moz-column-gap: 40px;
       column-gap: 40px;
}
.gap-y-1{
  row-gap: 0.25rem;
}
.gap-y-10{
  row-gap: 2.5rem;
}
.gap-y-2{
  row-gap: 0.5rem;
}
.gap-y-3{
  row-gap: 0.75rem;
}
.gap-y-\[10px\]{
  row-gap: 10px;
}
.self-start{
  align-self: flex-start;
}
.self-end{
  align-self: flex-end;
}
.self-center{
  align-self: center;
}
.self-stretch{
  align-self: stretch;
}
.overflow-hidden{
  overflow: hidden;
}
.truncate{
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.whitespace-nowrap{
  white-space: nowrap;
}
.rounded{
  border-radius: 0.25rem;
}
.rounded-\[2\.5px\]{
  border-radius: 2.5px;
}
.rounded-\[20px\]{
  border-radius: 20px;
}
.rounded-\[2px\]{
  border-radius: 2px;
}
.rounded-\[4px\]{
  border-radius: 4px;
}
.rounded-\[8px\]{
  border-radius: 8px;
}
.rounded-\[999px\]{
  border-radius: 999px;
}
.rounded-full{
  border-radius: 9999px;
}
.rounded-t-\[2px\]{
  border-top-left-radius: 2px;
  border-top-right-radius: 2px;
}
.border{
  border-width: 1px;
}
.border-2{
  border-width: 2px;
}
.border-\[6px\]{
  border-width: 6px;
}
.border-\[8px\]{
  border-width: 8px;
}
.border-y{
  border-top-width: 1px;
  border-bottom-width: 1px;
}
.border-b{
  border-bottom-width: 1px;
}
.border-r-2{
  border-right-width: 2px;
}
.border-t{
  border-top-width: 1px;
}
.border-t-2{
  border-top-width: 2px;
}
.border-solid{
  border-style: solid;
}
.border-brand-aqua{
  --tw-border-opacity: 1;
  border-color: rgb(115 255 255 / var(--tw-border-opacity, 1));
}
.border-brand-blue{
  --tw-border-opacity: 1;
  border-color: rgb(0 37 123 / var(--tw-border-opacity, 1));
}
.border-brand-blue-mid{
  --tw-border-opacity: 1;
  border-color: rgb(82 120 210 / var(--tw-border-opacity, 1));
}
.border-brand-blue-pale{
  --tw-border-opacity: 1;
  border-color: rgb(200 217 255 / var(--tw-border-opacity, 1));
}
.border-brand-divider{
  --tw-border-opacity: 1;
  border-color: rgb(172 172 172 / var(--tw-border-opacity, 1));
}
.border-brand-gray{
  --tw-border-opacity: 1;
  border-color: rgb(217 217 217 / var(--tw-border-opacity, 1));
}
.border-brand-gray2{
  --tw-border-opacity: 1;
  border-color: rgb(141 141 141 / var(--tw-border-opacity, 1));
}
.border-brand-lightblue{
  --tw-border-opacity: 1;
  border-color: rgb(61 109 220 / var(--tw-border-opacity, 1));
}
.border-brand-step-2{
  --tw-border-opacity: 1;
  border-color: rgb(84 190 219 / var(--tw-border-opacity, 1));
}
.border-brand-step-3{
  --tw-border-opacity: 1;
  border-color: rgb(118 159 255 / var(--tw-border-opacity, 1));
}
.border-current{
  border-color: currentColor;
}
.border-white{
  --tw-border-opacity: 1;
  border-color: rgb(255 255 255 / var(--tw-border-opacity, 1));
}
.bg-black\/20{
  background-color: rgb(0 0 0 / 0.2);
}
.bg-black\/40{
  background-color: rgb(0 0 0 / 0.4);
}
.bg-brand-accent{
  --tw-bg-opacity: 1;
  background-color: rgb(229 255 0 / var(--tw-bg-opacity, 1));
}
.bg-brand-aqua{
  --tw-bg-opacity: 1;
  background-color: rgb(115 255 255 / var(--tw-bg-opacity, 1));
}
.bg-brand-bg-light{
  --tw-bg-opacity: 1;
  background-color: rgb(238 238 238 / var(--tw-bg-opacity, 1));
}
.bg-brand-blue{
  --tw-bg-opacity: 1;
  background-color: rgb(0 37 123 / var(--tw-bg-opacity, 1));
}
.bg-brand-bradblue{
  --tw-bg-opacity: 1;
  background-color: rgb(11 32 82 / var(--tw-bg-opacity, 1));
}
.bg-brand-bradblue\/80{
  background-color: rgb(11 32 82 / 0.8);
}
.bg-brand-card-1{
  --tw-bg-opacity: 1;
  background-color: rgb(23 60 146 / var(--tw-bg-opacity, 1));
}
.bg-brand-card-2{
  --tw-bg-opacity: 1;
  background-color: rgb(19 47 113 / var(--tw-bg-opacity, 1));
}
.bg-brand-card-3{
  --tw-bg-opacity: 1;
  background-color: rgb(16 40 95 / var(--tw-bg-opacity, 1));
}
.bg-brand-gray{
  --tw-bg-opacity: 1;
  background-color: rgb(217 217 217 / var(--tw-bg-opacity, 1));
}
.bg-brand-lightblue{
  --tw-bg-opacity: 1;
  background-color: rgb(61 109 220 / var(--tw-bg-opacity, 1));
}
.bg-brand-red\/10{
  background-color: rgb(231 76 60 / 0.1);
}
.bg-brand-step-2{
  --tw-bg-opacity: 1;
  background-color: rgb(84 190 219 / var(--tw-bg-opacity, 1));
}
.bg-brand-step-3{
  --tw-bg-opacity: 1;
  background-color: rgb(118 159 255 / var(--tw-bg-opacity, 1));
}
.bg-transparent{
  background-color: transparent;
}
.bg-white{
  --tw-bg-opacity: 1;
  background-color: rgb(255 255 255 / var(--tw-bg-opacity, 1));
}
.bg-\[linear-gradient\(135deg\2c \#f9ce34_0\%\2c \#ee2a7b_50\%\2c \#6228d7_100\%\)\]{
  background-image: linear-gradient(135deg,#f9ce34 0%,#ee2a7b 50%,#6228d7 100%);
}
.bg-\[linear-gradient\(180deg\2c \#73ffff_0\%\2c \#54bedb_33\%\2c \#769fff_67\%\2c \#3d6ddc_100\%\)\]{
  background-image: linear-gradient(180deg,#73ffff 0%,#54bedb 33%,#769fff 67%,#3d6ddc 100%);
}
.bg-\[linear-gradient\(90deg\2c rgba\(61\2c 109\2c 220\2c 0\.24\)_0\%\2c rgba\(61\2c 109\2c 220\2c 0\.8\)_58\.17\%\2c rgba\(33\2c 58\2c 118\2c 0\.8\)_100\%\)\]{
  background-image: linear-gradient(90deg,rgba(61,109,220,0.24) 0%,rgba(61,109,220,0.8) 58.17%,rgba(33,58,118,0.8) 100%);
}
.bg-gradient-to-b{
  background-image: linear-gradient(to bottom, var(--tw-gradient-stops));
}
.bg-gradient-to-r{
  background-image: linear-gradient(to right, var(--tw-gradient-stops));
}
.from-brand-bradblue{
  --tw-gradient-from: #0b2052 var(--tw-gradient-from-position);
  --tw-gradient-to: rgb(11 32 82 / 0) var(--tw-gradient-to-position);
  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
}
.from-transparent{
  --tw-gradient-from: transparent var(--tw-gradient-from-position);
  --tw-gradient-to: rgb(0 0 0 / 0) var(--tw-gradient-to-position);
  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
}
.from-\[15\.8\%\]{
  --tw-gradient-from-position: 15.8%;
}
.to-\[rgba\(11\2c 32\2c 82\2c 0\)\]{
  --tw-gradient-to: rgba(11,32,82,0) var(--tw-gradient-to-position);
}
.to-black\/60{
  --tw-gradient-to: rgb(0 0 0 / 0.6) var(--tw-gradient-to-position);
}
.to-\[65\.8\%\]{
  --tw-gradient-to-position: 65.8%;
}
.bg-clip-text{
  -webkit-background-clip: text;
          background-clip: text;
}
.object-contain{
  -o-object-fit: contain;
     object-fit: contain;
}
.object-cover{
  -o-object-fit: cover;
     object-fit: cover;
}
.p-5{
  padding: 1.25rem;
}
.p-6{
  padding: 1.5rem;
}
.p-\[2px\]{
  padding: 2px;
}
.px-2{
  padding-left: 0.5rem;
  padding-right: 0.5rem;
}
.px-24{
  padding-left: 6rem;
  padding-right: 6rem;
}
.px-4{
  padding-left: 1rem;
  padding-right: 1rem;
}
.px-5{
  padding-left: 1.25rem;
  padding-right: 1.25rem;
}
.px-6{
  padding-left: 1.5rem;
  padding-right: 1.5rem;
}
.px-8{
  padding-left: 2rem;
  padding-right: 2rem;
}
.px-\[10px\]{
  padding-left: 10px;
  padding-right: 10px;
}
.px-\[11px\]{
  padding-left: 11px;
  padding-right: 11px;
}
.px-\[12\%\]{
  padding-left: 12%;
  padding-right: 12%;
}
.px-\[13px\]{
  padding-left: 13px;
  padding-right: 13px;
}
.px-\[15px\]{
  padding-left: 15px;
  padding-right: 15px;
}
.px-\[24px\]{
  padding-left: 24px;
  padding-right: 24px;
}
.px-\[6px\]{
  padding-left: 6px;
  padding-right: 6px;
}
.py-10{
  padding-top: 2.5rem;
  padding-bottom: 2.5rem;
}
.py-12{
  padding-top: 3rem;
  padding-bottom: 3rem;
}
.py-16{
  padding-top: 4rem;
  padding-bottom: 4rem;
}
.py-20{
  padding-top: 5rem;
  padding-bottom: 5rem;
}
.py-3{
  padding-top: 0.75rem;
  padding-bottom: 0.75rem;
}
.py-4{
  padding-top: 1rem;
  padding-bottom: 1rem;
}
.py-\[14px\]{
  padding-top: 14px;
  padding-bottom: 14px;
}
.py-\[3px\]{
  padding-top: 3px;
  padding-bottom: 3px;
}
.py-\[60px\]{
  padding-top: 60px;
  padding-bottom: 60px;
}
.py-\[9px\]{
  padding-top: 9px;
  padding-bottom: 9px;
}
.py-px{
  padding-top: 1px;
  padding-bottom: 1px;
}
.pb-10{
  padding-bottom: 2.5rem;
}
.pb-12{
  padding-bottom: 3rem;
}
.pb-14{
  padding-bottom: 3.5rem;
}
.pb-16{
  padding-bottom: 4rem;
}
.pb-20{
  padding-bottom: 5rem;
}
.pb-4{
  padding-bottom: 1rem;
}
.pb-6{
  padding-bottom: 1.5rem;
}
.pb-8{
  padding-bottom: 2rem;
}
.pb-\[104px\]{
  padding-bottom: 104px;
}
.pb-\[11px\]{
  padding-bottom: 11px;
}
.pb-\[14px\]{
  padding-bottom: 14px;
}
.pb-\[32px\]{
  padding-bottom: 32px;
}
.pb-\[5px\]{
  padding-bottom: 5px;
}
.pb-\[8px\]{
  padding-bottom: 8px;
}
.pb-\[calc\(1\.5rem\+min\(10\.78vw\2c 207px\)\)\]{
  padding-bottom: calc(1.5rem + min(10.78vw, 207px));
}
.pb-\[calc\(2\.5rem\+var\(--tuck\)\)\]{
  padding-bottom: calc(2.5rem + var(--tuck));
}
.pb-\[calc\(2rem\+8\.96vw\)\]{
  padding-bottom: calc(2rem + 8.96vw);
}
.pb-\[calc\(3rem\+8\.96vw\)\]{
  padding-bottom: calc(3rem + 8.96vw);
}
.pb-\[max\(4px\2c min\(4\.85vw\2c 93px\)_-_16px\)\]{
  padding-bottom: max(4px, min(4.85vw, 93px) - 16px);
}
.pl-1{
  padding-left: 0.25rem;
}
.pl-5{
  padding-left: 1.25rem;
}
.pl-8{
  padding-left: 2rem;
}
.pl-\[0\.57em\]{
  padding-left: 0.57em;
}
.pl-\[1em\]{
  padding-left: 1em;
}
.pr-\[24px\]{
  padding-right: 24px;
}
.pt-10{
  padding-top: 2.5rem;
}
.pt-12{
  padding-top: 3rem;
}
.pt-14{
  padding-top: 3.5rem;
}
.pt-16{
  padding-top: 4rem;
}
.pt-20{
  padding-top: 5rem;
}
.pt-24{
  padding-top: 6rem;
}
.pt-4{
  padding-top: 1rem;
}
.pt-\[100px\]{
  padding-top: 100px;
}
.pt-\[10px\]{
  padding-top: 10px;
}
.pt-\[110px\]{
  padding-top: 110px;
}
.pt-\[114px\]{
  padding-top: 114px;
}
.pt-\[12px\]{
  padding-top: 12px;
}
.pt-\[15px\]{
  padding-top: 15px;
}
.pt-\[4px\]{
  padding-top: 4px;
}
.pt-\[56px\]{
  padding-top: 56px;
}
.pt-\[80px\]{
  padding-top: 80px;
}
.pt-\[9px\]{
  padding-top: 9px;
}
.pt-\[calc\(3\.5rem\+8\.96vw\)\]{
  padding-top: calc(3.5rem + 8.96vw);
}
.pt-\[calc\(3rem\+8\.96vw\)\]{
  padding-top: calc(3rem + 8.96vw);
}
.pt-\[calc\(4rem\+8\.96vw\)\]{
  padding-top: calc(4rem + 8.96vw);
}
.pt-\[calc\(5rem\+var\(--tuck\)\)\]{
  padding-top: calc(5rem + var(--tuck));
}
.pt-\[calc\(8\.96vw\+40px\)\]{
  padding-top: calc(8.96vw + 40px);
}
.text-left{
  text-align: left;
}
.text-center{
  text-align: center;
}
.font-cond{
  font-family: "Koulen", "Barlow Condensed", sans-serif;
}
.font-jp{
  font-family: "Noto Sans JP", "游ゴシック体", YuGothic, "游ゴシック Medium", "Yu Gothic Medium", "游ゴシック", "Yu Gothic", sans-serif;
}
.text-2xl{
  font-size: 1.5rem;
  line-height: 2rem;
}
.text-3xl{
  font-size: 1.875rem;
  line-height: 2.25rem;
}
.text-\[0\.2991em\]{
  font-size: 0.2991em;
}
.text-\[1\.2em\]{
  font-size: 1.2em;
}
.text-\[10px\]{
  font-size: 10px;
}
.text-\[11px\]{
  font-size: 11px;
}
.text-\[12px\]{
  font-size: 12px;
}
.text-\[13px\]{
  font-size: 13px;
}
.text-\[14px\]{
  font-size: 14px;
}
.text-\[15px\]{
  font-size: 15px;
}
.text-\[16px\]{
  font-size: 16px;
}
.text-\[17px\]{
  font-size: 17px;
}
.text-\[18px\]{
  font-size: 18px;
}
.text-\[19\.8px\]{
  font-size: 19.8px;
}
.text-\[20px\]{
  font-size: 20px;
}
.text-\[22px\]{
  font-size: 22px;
}
.text-\[24px\]{
  font-size: 24px;
}
.text-\[26px\]{
  font-size: 26px;
}
.text-\[28px\]{
  font-size: 28px;
}
.text-\[30px\]{
  font-size: 30px;
}
.text-\[32px\]{
  font-size: 32px;
}
.text-\[34px\]{
  font-size: 34px;
}
.text-\[36px\]{
  font-size: 36px;
}
.text-\[40px\]{
  font-size: 40px;
}
.text-\[44px\]{
  font-size: 44px;
}
.text-\[48px\]{
  font-size: 48px;
}
.text-\[56px\]{
  font-size: 56px;
}
.text-\[64px\]{
  font-size: 64px;
}
.text-\[72px\]{
  font-size: 72px;
}
.text-\[9px\]{
  font-size: 9px;
}
.text-\[clamp\(11px\2c 1\.4vw\2c 18px\)\]{
  font-size: clamp(11px, 1.4vw, 18px);
}
.text-\[length\:min\(6\.3vw\2c 28px\)\]{
  font-size: min(6.3vw, 28px);
}
.text-\[length\:min\(8vw\2c 96px\)\]{
  font-size: min(8vw, 96px);
}
.text-base{
  font-size: 1rem;
  line-height: 1.5rem;
}
.text-lg{
  font-size: 1.125rem;
  line-height: 1.75rem;
}
.text-sm{
  font-size: 0.875rem;
  line-height: 1.25rem;
}
.font-black{
  font-weight: 900;
}
.font-bold{
  font-weight: 700;
}
.font-medium{
  font-weight: 500;
}
.uppercase{
  text-transform: uppercase;
}
.normal-case{
  text-transform: none;
}
.not-italic{
  font-style: normal;
}
.leading-8{
  line-height: 2rem;
}
.leading-\[0\.669\]{
  line-height: 0.669;
}
.leading-\[0\.75\]{
  line-height: 0.75;
}
.leading-\[0\.79\]{
  line-height: 0.79;
}
.leading-\[0\.803\]{
  line-height: 0.803;
}
.leading-\[0\.841\]{
  line-height: 0.841;
}
.leading-\[0\.84\]{
  line-height: 0.84;
}
.leading-\[0\.955\]{
  line-height: 0.955;
}
.leading-\[1\.167\]{
  line-height: 1.167;
}
.leading-\[1\.25\]{
  line-height: 1.25;
}
.leading-\[1\.34\]{
  line-height: 1.34;
}
.leading-\[1\.3\]{
  line-height: 1.3;
}
.leading-\[1\.4\]{
  line-height: 1.4;
}
.leading-\[1\.5\]{
  line-height: 1.5;
}
.leading-\[1\.6\]{
  line-height: 1.6;
}
.leading-\[1\.8\]{
  line-height: 1.8;
}
.leading-\[10px\]{
  line-height: 10px;
}
.leading-\[2\.1\]{
  line-height: 2.1;
}
.leading-\[20px\]{
  line-height: 20px;
}
.leading-\[22px\]{
  line-height: 22px;
}
.leading-\[24px\]{
  line-height: 24px;
}
.leading-\[2\]{
  line-height: 2;
}
.leading-\[30px\]{
  line-height: 30px;
}
.leading-\[32px\]{
  line-height: 32px;
}
.leading-\[36px\]{
  line-height: 36px;
}
.leading-\[64px\]{
  line-height: 64px;
}
.leading-loose{
  line-height: 2;
}
.leading-none{
  line-height: 1;
}
.leading-snug{
  line-height: 1.375;
}
.leading-tight{
  line-height: 1.25;
}
.tracking-\[0\.0167em\]{
  letter-spacing: 0.0167em;
}
.tracking-\[0\.028em\]{
  letter-spacing: 0.028em;
}
.tracking-\[0\.02em\]{
  letter-spacing: 0.02em;
}
.tracking-\[0\.0448em\]{
  letter-spacing: 0.0448em;
}
.tracking-\[0\.045em\]{
  letter-spacing: 0.045em;
}
.tracking-\[0\.0625em\]{
  letter-spacing: 0.0625em;
}
.tracking-\[0\.06em\]{
  letter-spacing: 0.06em;
}
.tracking-\[0\.0833em\]{
  letter-spacing: 0.0833em;
}
.tracking-\[0\.1em\]{
  letter-spacing: 0.1em;
}
.tracking-\[0\.26px\]{
  letter-spacing: 0.26px;
}
.tracking-\[0\.5px\]{
  letter-spacing: 0.5px;
}
.tracking-\[0\.72px\]{
  letter-spacing: 0.72px;
}
.tracking-\[0\.84px\]{
  letter-spacing: 0.84px;
}
.tracking-\[0\.96px\]{
  letter-spacing: 0.96px;
}
.tracking-\[1\.188px\]{
  letter-spacing: 1.188px;
}
.tracking-\[2px\]{
  letter-spacing: 2px;
}
.tracking-\[3px\]{
  letter-spacing: 3px;
}
.tracking-\[4px\]{
  letter-spacing: 4px;
}
.tracking-\[6px\]{
  letter-spacing: 6px;
}
.tracking-kaifu-jp{
  letter-spacing: 0.05em;
}
.text-\[\#e6e6ff\]{
  --tw-text-opacity: 1;
  color: rgb(230 230 255 / var(--tw-text-opacity, 1));
}
.text-brand-accent{
  --tw-text-opacity: 1;
  color: rgb(229 255 0 / var(--tw-text-opacity, 1));
}
.text-brand-aqua{
  --tw-text-opacity: 1;
  color: rgb(115 255 255 / var(--tw-text-opacity, 1));
}
.text-brand-blue{
  --tw-text-opacity: 1;
  color: rgb(0 37 123 / var(--tw-text-opacity, 1));
}
.text-brand-blue-deep{
  --tw-text-opacity: 1;
  color: rgb(22 41 107 / var(--tw-text-opacity, 1));
}
.text-brand-blue-mid{
  --tw-text-opacity: 1;
  color: rgb(82 120 210 / var(--tw-text-opacity, 1));
}
.text-brand-bradblue{
  --tw-text-opacity: 1;
  color: rgb(11 32 82 / var(--tw-text-opacity, 1));
}
.text-brand-gray2{
  --tw-text-opacity: 1;
  color: rgb(141 141 141 / var(--tw-text-opacity, 1));
}
.text-brand-lightblue{
  --tw-text-opacity: 1;
  color: rgb(61 109 220 / var(--tw-text-opacity, 1));
}
.text-brand-red{
  --tw-text-opacity: 1;
  color: rgb(231 76 60 / var(--tw-text-opacity, 1));
}
.text-brand-step-2{
  --tw-text-opacity: 1;
  color: rgb(84 190 219 / var(--tw-text-opacity, 1));
}
.text-brand-step-3{
  --tw-text-opacity: 1;
  color: rgb(118 159 255 / var(--tw-text-opacity, 1));
}
.text-transparent{
  color: transparent;
}
.text-white{
  --tw-text-opacity: 1;
  color: rgb(255 255 255 / var(--tw-text-opacity, 1));
}
.underline{
  text-decoration-line: underline;
}
.decoration-1{
  text-decoration-thickness: 1px;
}
.underline-offset-2{
  text-underline-offset: 2px;
}
.opacity-0{
  opacity: 0;
}
.opacity-10{
  opacity: 0.1;
}
.opacity-20{
  opacity: 0.2;
}
.opacity-40{
  opacity: 0.4;
}
.opacity-50{
  opacity: 0.5;
}
.opacity-60{
  opacity: 0.6;
}
.shadow{
  --tw-shadow: 0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1);
  --tw-shadow-colored: 0 1px 3px 0 var(--tw-shadow-color), 0 1px 2px -1px var(--tw-shadow-color);
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}
.shadow-\[0px_0px_12px_0px_rgba\(61\2c 109\2c 220\2c 0\.4\)\]{
  --tw-shadow: 0px 0px 12px 0px rgba(61,109,220,0.4);
  --tw-shadow-colored: 0px 0px 12px 0px var(--tw-shadow-color);
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}
.outline-none{
  outline: 2px solid transparent;
  outline-offset: 2px;
}
.ring{
  --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
  --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(3px + var(--tw-ring-offset-width)) var(--tw-ring-color);
  box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);
}
.blur{
  --tw-blur: blur(8px);
  filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow);
}
.drop-shadow{
  --tw-drop-shadow: drop-shadow(0 1px 2px rgb(0 0 0 / 0.1)) drop-shadow(0 1px 1px rgb(0 0 0 / 0.06));
  filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow);
}
.drop-shadow-\[0_4px_7px_rgba\(0\2c 0\2c 0\2c 0\.08\)\]{
  --tw-drop-shadow: drop-shadow(0 4px 7px rgba(0,0,0,0.08));
  filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow);
}
.filter{
  filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow);
}
.transition{
  transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 150ms;
}
.transition-all{
  transition-property: all;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 150ms;
}
.transition-colors{
  transition-property: color, background-color, border-color, text-decoration-color, fill, stroke;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 150ms;
}
.transition-opacity{
  transition-property: opacity;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 150ms;
}
.transition-transform{
  transition-property: transform;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 150ms;
}
.duration-300{
  transition-duration: 300ms;
}
.duration-500{
  transition-duration: 500ms;
}
.ease-\[cubic-bezier\(\.56\2c -\.01\2c \.32\2c \.99\)\]{
  transition-timing-function: cubic-bezier(.56,-.01,.32,.99);
}
.ease-out{
  transition-timing-function: cubic-bezier(0, 0, 0.2, 1);
}
.\[--tuck\:56px\]{
  --tuck: 56px;
}
.\[--tuck\:min\(8\.96vw\2c 172px\)\]{
  --tuck: min(8.96vw, 172px);
}
.\[background-image\:linear-gradient\(180deg\2c \#73ffff_0\%\2c \#54bedb_33\%\2c \#769fff_67\%\2c \#3d6ddc_100\%\)\]{
  background-image: linear-gradient(180deg,#73ffff 0%,#54bedb 33%,#769fff 67%,#3d6ddc 100%);
}
.\[clip-path\:polygon\(0_0\2c 100\%_0\2c 100\%_100\%\2c 0_calc\(100\%_-_min\(10\.78vw\2c 207px\)\)\)\]{
  clip-path: polygon(0 0,100% 0,100% 100%,0 calc(100% - min(10.78vw, 207px)));
}
.\[clip-path\:polygon\(0_0\2c 100\%_56px\2c 100\%_calc\(100\%_-_56px\)\2c 0_100\%\)\]{
  clip-path: polygon(0 0,100% 56px,100% calc(100% - 56px),0 100%);
}
.\[clip-path\:polygon\(0_0\2c 100\%_60px\2c 100\%_100\%\2c 0_100\%\)\]{
  clip-path: polygon(0 0,100% 60px,100% 100%,0 100%);
}
.\[clip-path\:polygon\(0_0\2c 100\%_min\(8\.96vw\2c 172px\)\2c 100\%_100\%\2c 0_100\%\)\]{
  clip-path: polygon(0 0,100% min(8.96vw, 172px),100% 100%,0 100%);
}
.\[clip-path\:polygon\(0_0\2c 100\%_var\(--tuck\)\2c 100\%_100\%\2c 0_100\%\)\]{
  clip-path: polygon(0 0,100% var(--tuck),100% 100%,0 100%);
}
.\[clip-path\:polygon\(0_60px\2c 100\%_0\2c 100\%_100\%\2c 0_100\%\)\]{
  clip-path: polygon(0 60px,100% 0,100% 100%,0 100%);
}
.\[clip-path\:polygon\(100\%_0\2c 0_60px\2c 0_100\%\2c 100\%_100\%\)\]{
  clip-path: polygon(100% 0,0 60px,0 100%,100% 100%);
}
.\[clip-path\:polygon\(100\%_0\2c 0_min\(8\.96vw\2c 172px\)\2c 0_100\%\2c 100\%_100\%\)\]{
  clip-path: polygon(100% 0,0 min(8.96vw, 172px),0 100%,100% 100%);
}
.\[clip-path\:polygon\(100\%_0\2c 0_var\(--tuck\)\2c 0_100\%\2c 100\%_100\%\)\]{
  clip-path: polygon(100% 0,0 var(--tuck),0 100%,100% 100%);
}
.\[clip-path\:polygon\(100\%_0\2c 0_var\(--tuck\)\2c 0_calc\(100\%_-_var\(--tuck\)\)\2c 100\%_100\%\)\]{
  clip-path: polygon(100% 0,0 var(--tuck),0 calc(100% - var(--tuck)),100% 100%);
}
.\[filter\:drop-shadow\(32px_-40px_0_\#e5ff00\)\]{
  filter: drop-shadow(32px -40px 0 #e5ff00);
}
.\[text-shadow\:0_1px_4px_rgba\(0\2c 0\2c 0\2c 0\.5\)\]{
  text-shadow: 0 1px 4px rgba(0,0,0,0.5);
}
.\[text-shadow\:0px_20px_0px_\#1bffff\]{
  text-shadow: 0px 20px 0px #1bffff;
}
/*
  Josh's Custom CSS Reset
  https://www.joshwcomeau.com/css/custom-css-reset/
*/
*, *::before, *::after {
  box-sizing: border-box;
}

* {
  margin: 0;
}

html, body {
  height: 100%;
}

body {
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}

img, picture, video, canvas, svg {
  display: block;
  max-width: 100%;
}

input, button, textarea, select {
  font: inherit;
}

p, h1, h2, h3, h4, h5, h6 {
  overflow-wrap: break-word;
}

#root, #__next {
  isolation: isolate;
}

/* A Modern CSS Reset */
*, *::before, *::after {
  box-sizing: border-box;
}

body, h1, h2, h3, h4, p, figure, blockquote, dl, dd {
  margin: 0;
}

ul[role=list], ol[role=list] {
  list-style: none;
}

html:focus-within {
  scroll-behavior: smooth;
}

body {
  min-height: 100vh;
  text-rendering: optimizeSpeed;
  line-height: 1.5;
}

a:not([class]) {
  -webkit-text-decoration-skip: ink;
          text-decoration-skip-ink: auto;
}

img, picture {
  max-width: 100%;
  display: block;
}

input, button, textarea, select {
  font: inherit;
}

@media (prefers-reduced-motion: reduce) {
  html:focus-within {
    scroll-behavior: auto;
  }
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}
@media (max-width: 960px) {
  .pc-only {
    display: none !important;
  }
}

@media (min-width: 961px) {
  .sp-only {
    display: none !important;
  }
}

@media (max-width: 960px) {
  .pc_only {
    display: none !important;
  }
}

/*
 * ベースのフォント。
 * 'Noto Sans' はラテン専用のフォントで、このテーマでは読み込んでいない。
 * 端末に同名フォントがあると日本語だけ別フォントへ落ちて字面が揃わないため、
 * 実際に読み込んでいる 'Noto Sans JP'（Tailwindの font-jp と同じスタック）を先頭にする。
 */
body {
  font-family: "Noto Sans JP", "游ゴシック体", YuGothic, "游ゴシック Medium", "Yu Gothic Medium", "游ゴシック", "Yu Gothic", sans-serif;
}

.vertical-rl {
  writing-mode: vertical-rl;
}

.pager{
  margin-left: auto;
  margin-right: auto;
  display: flex;
  max-width: 640px;
  justify-content: center;
}
.pager .page-numbers{
  margin-left: 0.5rem;
  margin-right: 0.5rem;
  border-width: 2px;
  --tw-bg-opacity: 1;
  background-color: rgb(255 255 255 / var(--tw-bg-opacity, 1));
  padding-top: 0.5rem;
  padding-bottom: 0.5rem;
  padding-left: 1rem;
  padding-right: 1rem;
  font-weight: 700;
  border-color: #FFA32B;
}
.pager .page-numbers--active {
  background-color: #FFA32B;
  margin-left: 0.5rem;
  margin-right: 0.5rem;
  border-width: 2px;
  padding-top: 0.5rem;
  padding-bottom: 0.5rem;
  padding-left: 1rem;
  padding-right: 1rem;
  font-weight: 700;
  --tw-text-opacity: 1;
  color: rgb(255 255 255 / var(--tw-text-opacity, 1));
}

/* --- ローディング画面（D案「収束アウトロ」） ---
 * マークアップと経緯は template_part/parts/loading.php を参照。
 *
 * 【尺】合計 3.6秒
 *   0.15s  マークが円周に沿って描かれはじめる（1.1s）
 *   0.75s  KAIFU が1文字ずつ出現
 *   0.95s  株式会社開敷 が1文字ずつ出現
 *   2.10s  文字がフェードアウト（0.4s）＋ マークがヘッダーロゴ位置へ着地（1.0s）
 *   3.10s  幕がフェードアウト（0.5s）→ 完了
 *
 * 幕とマークを一緒にフェードさせているのは、
 * 背面にある本物のヘッダーロゴ（青）と重なった状態で消えることで、
 * 白いマークが青いロゴへすり替わったように見せるため。
 */
/* 描画量。登録しないとカスタムプロパティは補間されず段階的に飛ぶ */
@property --ld-sweep {
  syntax: "<angle>";
  inherits: false;
  initial-value: 0deg;
}
#loading {
  --ld-draw-delay: 0.15s;
  --ld-draw-dur: 1.1s;
  --ld-out-at: 2.1s; /* 文字が消え、マークが動きはじめる時刻 */
  --ld-fly-dur: 1s;
  --ld-fade-dur: 0.5s;
  transition: opacity var(--ld-fade-dur) ease-out;
  /* 保険: 幕を外すのは JS の役目だが、JSが全く動かない環境だと
   * 全画面のネイビーが residual として残り続けてサイトが読めなくなる。
   * 通常は 3.6秒で消えているので、それより十分あとの 6秒で強制的に消す。 */
  animation: ld-safety 0.01s linear 6s forwards;
}

@keyframes ld-safety {
  to {
    opacity: 0;
    visibility: hidden;
  }
}
/* --- マーク --- */
.loading-mark {
  display: block;
  width: clamp(84px, 13vw, 150px);
  /* エンブレムの実寸 114x118 に合わせる（円がゆがまないように） */
  aspect-ratio: 114/118;
  background: #ffffff;
  /* @property 未対応ブラウザだと var(--ld-sweep) が未定義になり、
   * conic-gradient ごと無効化されてマスクが外れる＝マークが最初から全部見えてしまう。
   * 初期値をここにも書いて、その場合でも 0deg（＝非表示）から始まるようにする。 */
  --ld-sweep: 0deg;
  /* エンブレム型 ∩ 扇形 の交差で「時計まわりに塗り足す」
     from 0deg … CSSのconic-gradientは0degが真上。マークの上部頂点と一致する */
  -webkit-mask-image: var(--emblem), conic-gradient(from 0deg, #000 var(--ld-sweep), rgba(0, 0, 0, 0) 0);
  mask-image: var(--emblem), conic-gradient(from 0deg, #000 var(--ld-sweep), rgba(0, 0, 0, 0) 0);
  -webkit-mask-size: 100% 100%, 100% 100%;
  mask-size: 100% 100%, 100% 100%;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-position: center;
  mask-position: center;
  -webkit-mask-composite: source-in;
  mask-composite: intersect;
  animation: ld-draw var(--ld-draw-dur) cubic-bezier(0.5, 0, 0.2, 1) var(--ld-draw-delay) both;
  will-change: transform;
}

@keyframes ld-draw {
  from {
    --ld-sweep: 0deg;
  }
  to {
    --ld-sweep: 360deg;
  }
}
/* 着地。移動量と縮小率は common.js が実測して渡す（画面幅で変わるためCSSに持てない） */
#loading.is-out .loading-mark {
  transform: translate(var(--fly-x, 0), var(--fly-y, 0)) scale(var(--fly-s, 0.35));
  transition: transform var(--ld-fly-dur) cubic-bezier(0.7, 0, 0.2, 1);
}

/* --- 文字（WF準拠） --- */
/* JSが1文字ずつに分解し終わるまでは伏せておく。
 * 分解後の文字は枠(.ld-char)の外に隠れているが、分解前は素のテキストとして
 * そのまま見えてしまい、スーパーリロード時に一瞬ちらつくため。
 * .is-split は common.js が分解完了時に付ける。 */
.js-loading-split {
  opacity: 0;
}

.js-loading-split.is-split {
  opacity: 1;
}

.loading-en {
  margin: 18px 0 0;
  font-family: "Koulen", sans-serif;
  font-size: clamp(15px, 1.6vw, 20px);
  letter-spacing: 0.4em;
  text-indent: 0.4em; /* 字間が末尾にも付くぶんを打ち消して中央に見せる */
  line-height: 1;
  color: #c3cce6;
}

.loading-jp {
  margin: 12px 0 0;
  font-family: "Noto Sans JP", sans-serif;
  font-weight: 900;
  font-size: clamp(24px, 5.6vw, 46px);
  letter-spacing: 0.06em;
  line-height: 1.05;
  color: #ffffff;
}

/* 1文字ずつ、枠の右外から左へ入る（サイト本体の英字見出しと同じ動き）。
   分解は common.js（.js-loading-split）。 */
.ld-char {
  display: inline-block;
  overflow: hidden;
  vertical-align: top;
  /* 行送りが詰まっていても字の上下が切れないよう、枠だけ広げて同量の負マージンで打ち消す */
  padding-block: 0.25em;
  margin-block: -0.25em;
}

.ld-char > i {
  display: inline-block;
  font-style: normal;
  transform: translateX(110%);
  animation: ld-char-in 0.7s cubic-bezier(0.22, 1, 0.36, 1) forwards;
  animation-delay: calc(var(--ld-base, 0.75s) + var(--n, 0) * 0.035s);
}

@keyframes ld-char-in {
  to {
    transform: translateX(0);
  }
}
/* マークが動き出すのに合わせて文字は消える */
#loading.is-out .js-loading-split {
  opacity: 0;
  transform: translateY(8px);
  transition: opacity 0.4s ease, transform 0.4s ease;
}

/* --- 幕のフェードアウト --- */
#loading.is-done {
  opacity: 0;
  pointer-events: none;
}

/* 着地するまで本物のヘッダーロゴは伏せておく（二重に見えるのを防ぐ） */
html.is-loading .js-header-logo {
  opacity: 0;
}

.js-header-logo {
  transition: opacity var(--ld-fade-dur, 0.5s) ease-out;
}

/* 再生中はスクロールを止める（クラスは loading.php のインラインスクリプトが付与） */
html.is-loading,
html.is-loading body {
  overflow: hidden;
}

/* 2回目以降のアクセス。最初の描画時点で消えているのでちらつかない */
html.is-loaded #loading {
  display: none;
}

/* 動きを減らす設定では演出をせず、即座に本体を見せる（解除は common.js） */
@media (prefers-reduced-motion: reduce) {
  #loading {
    display: none;
  }
}
/* --- インクが「パシャッ」と広がって出現する（DESIGN.md 7.4） ---
 * 対象: FV「まちの未来を、つくる。」/ OUR STRENGTH のリード文まわり / フッター
 *
 * 【仕組み】
 * インクは1枚の静止画なので、画像そのものは動かさず「見えている範囲」だけを広げる。
 * 位置の異なる円形マスクを4枚重ね、時間差で半径を広げることで、
 * 飛沫が数か所で弾けて つながっていくように見せる。
 *
 * 【mask-size ではなく半径を animate する理由】
 * mask-size を 100% より大きくすると、mask-position の % は
 * 「レイヤーの X% を要素の X% に合わせる」という意味になるため、
 * 拡大するほどマスクの中心が要素の外へ滑っていってしまい、飛沫の位置が保てない。
 * そこでマスク領域は要素と同じ 100% に固定し、
 * グラデーション内の `at X% Y%`（＝要素基準で不動）と、
 * カラーストップの位置（＝半径）を @property で animate する。
 *
 * また `circle at X% Y%` は既定が farthest-corner なので、
 * 不透明部分が 100% に達した時点で要素の隅まで確実に覆える。
 * 終端の半径 130% × 芯 0.82 = 106.6% なので、単独でも隅まで覆いきる。
 *
 * 半径 0 のときは芯もにじみも 0 になり、要素は完全に見えない状態から始まる。
 *
 * 【transform / opacity を触らない理由】
 * インク画像には既に -scale-x-100（左右反転）・-scale-y-100（上下反転）・opacity-60 などの
 * ユーティリティが当たっている。ここで transform や opacity を指定すると
 * それらを上書きして反転や濃度が壊れる。
 * マスクが 0 のときは要素が完全に隠れるため、拡大や opacity は不要。
 */
/* カスタムプロパティを型付きで登録する。
 * これがないとカスタムプロパティは補間されず段階的に飛ぶ（＝ポンッと出る）。
 * 未対応ブラウザでもインクは最終的に表示される（下の .is-inked で必ずマスクを外すため）。 */
@property --ink-r1 {
  syntax: "<percentage>";
  inherits: false;
  initial-value: 0%;
}
@property --ink-r2 {
  syntax: "<percentage>";
  inherits: false;
  initial-value: 0%;
}
@property --ink-r3 {
  syntax: "<percentage>";
  inherits: false;
  initial-value: 0%;
}
@property --ink-r4 {
  syntax: "<percentage>";
  inherits: false;
  initial-value: 0%;
}
.js-ink-splash {
  /* 飛沫の位置（要素基準）。要素ごとに変えたい場合はこの4つを上書きする */
  --ink-p1: 40% 46%;
  --ink-p2: 74% 24%;
  --ink-p3: 18% 74%;
  --ink-p4: 62% 82%;
  /* 不透明な芯の割合（半径に対する比）。1 に近いほど輪郭が硬くなる。
   * にじみを「固定幅」ではなく「半径に対する比率」で持つのが要点。
   * 固定幅（例: 半径 + 10%）にすると半径0のときも 10% の点が残ってしまい、
   * アニメーション開始前にインクがうっすら見えてしまう。 */
  --ink-core: 0.82;
  --ink-1: radial-gradient(
      circle at var(--ink-p1),
      #000 calc(var(--ink-r1) * var(--ink-core)),
      rgba(0, 0, 0, 0) var(--ink-r1)
  );
  --ink-2: radial-gradient(
      circle at var(--ink-p2),
      #000 calc(var(--ink-r2) * var(--ink-core)),
      rgba(0, 0, 0, 0) var(--ink-r2)
  );
  --ink-3: radial-gradient(
      circle at var(--ink-p3),
      #000 calc(var(--ink-r3) * var(--ink-core)),
      rgba(0, 0, 0, 0) var(--ink-r3)
  );
  --ink-4: radial-gradient(
      circle at var(--ink-p4),
      #000 calc(var(--ink-r4) * var(--ink-core)),
      rgba(0, 0, 0, 0) var(--ink-r4)
  );
  -webkit-mask-image: var(--ink-1), var(--ink-2), var(--ink-3), var(--ink-4);
  mask-image: var(--ink-1), var(--ink-2), var(--ink-3), var(--ink-4);
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  /* マスク領域は要素と同じ大きさに固定する（中心をずらさないため） */
  -webkit-mask-size: 100% 100%;
  mask-size: 100% 100%;
  -webkit-mask-position: center;
  mask-position: center;
}

.js-ink-splash.is-splashed {
  /* --ink-delay … 見出しより後に弾けさせたいときに指定する（Asana ピン4） */
  animation: ink-splash 1.05s cubic-bezier(0.18, 0.82, 0.3, 1) var(--ink-delay, 0ms) forwards;
}

/* 演出後はマスクを外す。
 * 画像の形やブラウザの対応状況に関わらず、最終的に必ず全体が見えている状態を保証する。 */
.js-ink-splash.is-inked {
  -webkit-mask-image: none;
  mask-image: none;
}

/* キーフレームの間ごとにイージングがかかるので、飛沫が1つずつ弾けるように見える。
 * 各飛沫は最終的に 100% を超える＝単独でも要素の隅まで覆う。 */
@keyframes ink-splash {
  0% {
    --ink-r1: 0%;
    --ink-r2: 0%;
    --ink-r3: 0%;
    --ink-r4: 0%;
  }
  28% {
    --ink-r1: 72%;
    --ink-r2: 0%;
    --ink-r3: 0%;
    --ink-r4: 0%;
  }
  46% {
    --ink-r1: 100%;
    --ink-r2: 68%;
    --ink-r3: 0%;
    --ink-r4: 0%;
  }
  64% {
    --ink-r1: 118%;
    --ink-r2: 100%;
    --ink-r3: 74%;
    --ink-r4: 0%;
  }
  82% {
    --ink-r1: 126%;
    --ink-r2: 118%;
    --ink-r3: 104%;
    --ink-r4: 78%;
  }
  100% {
    --ink-r1: 130%;
    --ink-r2: 130%;
    --ink-r3: 130%;
    --ink-r4: 130%;
  }
}
/* --- 右から左へ掃いて出す（.js-ink-sweep） ---
 * 採用情報ページ MISSION のインク用。
 * 通常の飛沫（中央付近から四方に広がる）ではなく、右端から左へ塗られていくように見せる。
 *
 * 4枚の円形マスクを1枚の横方向グラデーションに差し替えるだけで、
 * 「マスクの範囲を広げて見せる」という考え方は .js-ink-splash と同じ。
 *
 * linear-gradient(to left, ...) は右端が 0%・左端が 100%。
 * 不透明部分の終わりを --ink-sweep とし、そこへ向かうにじみ幅を
 * --ink-core（＝半径に対する比率）で作る。
 * にじみを固定幅にすると --ink-sweep が0のときも右端に帯が残って
 * 開始前からインクが見えてしまうため、飛沫版と同じく比率で持たせている。
 *
 * 終端は 130%。芯 0.82 を掛けても 106.6% になり、左端まで確実に塗りきる。
 */
@property --ink-sweep {
  syntax: "<percentage>";
  inherits: false;
  initial-value: 0%;
}
.js-ink-splash.js-ink-sweep {
  --ink-sweep-mask: linear-gradient(
      to left,
      #000 calc(var(--ink-sweep) * var(--ink-core)),
      rgba(0, 0, 0, 0) var(--ink-sweep)
  );
  -webkit-mask-image: var(--ink-sweep-mask);
  mask-image: var(--ink-sweep-mask);
}

.js-ink-splash.js-ink-sweep.is-splashed {
  /* 横幅いっぱいを渡るので、飛沫（1.05s）より少しだけ長くしている */
  animation: ink-sweep 1.2s cubic-bezier(0.22, 0.61, 0.24, 1) var(--ink-delay, 0ms) forwards;
}

@keyframes ink-sweep {
  from {
    --ink-sweep: 0%;
  }
  to {
    --ink-sweep: 130%;
  }
}
/* 動きを減らす設定では最初から出しておく */
@media (prefers-reduced-motion: reduce) {
  .js-ink-splash {
    -webkit-mask-image: none;
    mask-image: none;
    animation: none;
  }
}
/*
 * Tailwind のユーティリティだけでは表現できないものを補完する。
 * （スタイリングは原則 PHP 側の Tailwind クラスで行い、ここは最小限に留める）
 */
/* --- アウトライン文字（DESIGN.md 6.6 ABOUT / 6.9 CONTACT の極太アウトライン見出し） --- */
.text-stroke-white {
  -webkit-text-stroke: 1px #ffffff;
  text-stroke: 1px #ffffff;
}

.text-stroke-navy {
  -webkit-text-stroke: 1px #002080;
  text-stroke: 1px #002080;
}

@media (min-width: 768px) {
  .text-stroke-white {
    -webkit-text-stroke-width: 2px;
    text-stroke-width: 2px;
  }
  .text-stroke-navy {
    -webkit-text-stroke-width: 2px;
    text-stroke-width: 2px;
  }
}
/* --- 流れるテキスト（DESIGN.md 6.10 フッター / 7.6 右から左へ無限ループ） --- */
/* 同じ内容を2つ並べ、50%スクロールした時点で先頭に戻すことでシームレスにループさせる */
.marquee {
  animation: marquee 30s linear infinite;
}

@keyframes marquee {
  from {
    transform: translateX(0);
  }
  to {
    transform: translateX(-50%);
  }
}
@media (prefers-reduced-motion: reduce) {
  .marquee {
    animation: none;
  }
}
/* --- 流れるテキストの文字色グラデーション（フッター / DESIGN.md 6.10） ---
 * Figmaの塗りは右 #00257b → 左 #5278d2 の横グラデーション。
 * これを一定周期(600px)の repeating-linear-gradient にして背景位置を
 * ちょうど1周期ぶん動かすことで、文字の中をグラデーションが流れて見えるようにする。
 * 周期をpx固定にしているのは、テキスト幅（SPとPCで大きく変わる）に依存せず
 * 見た目のムラの大きさを一定に保つため。
 */
.marquee-gradient {
  background-image: repeating-linear-gradient(100deg, #00257b 0px, #5278d2 150px, #00257b 300px, #5278d2 450px, #00257b 600px);
  animation: marquee-gradient 6s linear infinite;
}

@keyframes marquee-gradient {
  from {
    background-position: 0 0;
  }
  to {
    background-position: 600px 0;
  }
}
@media (prefers-reduced-motion: reduce) {
  .marquee-gradient {
    animation: none;
  }
}
/* --- RECRUIT: 3つのバブルが中央円から飛び出す（DESIGN.md 7.10） ---
 * 初期状態は中央円の背面に縮小して重なっており、画面内に入ると
 * 上 → 左 → 右 の順に時差（--d）をつけて所定位置へ移動する。
 * --bx / --by は「バブル中心 → 中央円中心」の差分（バブル自身のサイズに対する %）。
 * scale(.6) は 360px→216px で、中央の白円(262px)に完全に隠れるサイズ。
 * 終点でわずかに行き過ぎる easing にして「ふわっと弾む」動きにしている。
 */
.js-recruit-bubble {
  transform: translate(var(--bx, 0), var(--by, 0)) scale(0.6);
  transition: transform 0.9s cubic-bezier(0.34, 1.56, 0.64, 1), opacity 0.4s ease-out;
  transition-delay: var(--d, 0ms);
  opacity: 0;
  will-change: transform;
}

.js-recruit-bubbles.is-visible .js-recruit-bubble {
  transform: translate(0, 0) scale(1);
  opacity: 1;
}

@media (prefers-reduced-motion: reduce) {
  .js-recruit-bubble {
    transform: none;
    opacity: 1;
    transition: none;
  }
}
/* --- Swiper（INSTAGRAM / WORKS） --- */
/* WORKS: 右から左へ等速で流し続ける。
 * Swiper の既定イージング(ease)だと1周ごとに加減速して「流れ続ける」感が出ないため linear に上書きする。 */
.js-works-swiper .swiper-wrapper {
  transition-timing-function: linear !important;
}

/* INSTAGRAM: カード列
 *
 * 並びは新しい順で、HTML側の dir="rtl" により一番右が最新になる。
 * 表示されているうち一番右のカード（Swiperが .swiper-slide-active を付けるスライド）だけを
 * 大きく・暗幕なしにする。送れば次に右端へ来たカードが大きくなる。
 *
 * 【幅ではなく transform で拡大縮小している理由】
 * Swiper はスライドの幅を初期化時に測り、その値で送り先の位置を決める。
 * 幅そのものを変えると測り直しが必要になり、送りの途中で位置がずれる。
 * そこで「枠」は常に大きいカードと同じ幅にしておき、
 * 中身だけを scale で縮める。枠の幅は変わらないので位置計算は狂わず、
 * 大小の入れ替わりは transform のアニメーションだけで滑らかに進む。
 *
 * 縮小率 0.6246 は 218 / 349（Figmaの小さいカード幅 ÷ 大きいカード幅）。
 * 枠が大きいままだと間隔が空きすぎるので、その差ぶんを
 * spaceBetween のマイナス値で詰めている（common.js のブレークポイント指定）。
 *   PC   枠349 − 縮小後218 = 131 → 26 - 131 = -105
 *   md   枠288 − 縮小後180 = 108 → 16 - 108 =  -92
 *   SP   枠224 − 縮小後140 =  84 → 12 -  84 =  -72
 */
.js-ig-swiper {
  /* Figma の 218:349 ＝ 小さいカードと大きいカードの幅の比 */
  --ig-scale: 0.6246;
  /* 縮んだカードのアカウント表示が小さくなりすぎないようにする逆補正。
   * 30px × 0.6246 × 1.38 ≒ 25.86px（Figmaの小さいカードの実値）になる。 */
  --ig-badge-scale: 1.38;
  /* 枠の高さはどれも同じだが、中身は下端を軸に縮めるので下でそろう（Figma: items-end） */
}
.js-ig-swiper .swiper-wrapper {
  align-items: flex-end;
}
.js-ig-swiper {
  /* 枠。幅は「大きいカード」の寸法で固定する */
}
.js-ig-swiper .swiper-slide {
  width: 224px;
  height: auto;
  aspect-ratio: 349/620;
}
@media (min-width: 768px) {
  .js-ig-swiper .swiper-slide {
    width: 288px;
  }
}
@media (min-width: 1280px) {
  .js-ig-swiper .swiper-slide {
    width: 349px;
  }
}
.js-ig-swiper {
  /* 中身。既定は縮小状態。左下を軸にするのは、
   * 縮んでも下端と左端がそろい、右側だけが空くようにするため
   * （その空きぶんをマイナスの spaceBetween で詰めている）。 */
}
.js-ig-swiper .js-ig-card {
  position: relative;
  display: block;
  width: 100%;
  height: 100%;
  overflow: hidden;
  border-radius: 18px;
  transform: scale(var(--ig-scale));
  transform-origin: left bottom;
  transition: transform 0.45s cubic-bezier(0.22, 0.61, 0.36, 1);
}
.js-ig-swiper .js-ig-veil {
  transition: opacity 0.45s ease;
}
.js-ig-swiper .js-ig-badge {
  transform: scale(var(--ig-badge-scale));
  transition: transform 0.45s cubic-bezier(0.22, 0.61, 0.36, 1);
}
.js-ig-swiper {
  /* 右端の1枚 */
}
.js-ig-swiper .swiper-slide-active {
  /* 大きくなる途中のカードを一番手前に出す。
   * 枠が重なる作りなので、これが無いと「新しい投稿へ」で戻したとき、
   * 大きくなろうとしているカードが隣のカードの後ろに潜って見える。 */
  z-index: 1;
}
.js-ig-swiper .swiper-slide-active .js-ig-card {
  transform: scale(1);
}
.js-ig-swiper .swiper-slide-active {
  /* Figma: 大きいカードには暗幕を掛けない */
}
.js-ig-swiper .swiper-slide-active .js-ig-veil {
  opacity: 0;
}
.js-ig-swiper .swiper-slide-active {
  /* 逆補正を戻して、Figmaの大きいカードの実値（30px / 11px / 9px）そのものにする */
}
.js-ig-swiper .swiper-slide-active .js-ig-badge {
  transform: scale(1);
}

@media (prefers-reduced-motion: reduce) {
  .js-ig-swiper .js-ig-card,
  .js-ig-swiper .js-ig-veil,
  .js-ig-swiper .js-ig-badge {
    transition: none;
  }
}
/* INSTAGRAM: ページャーを Figma 準拠に（通常 6px の丸 / アクティブは 18×6 のピル）
 *
 * 並びを row-reverse にしているのは、スライダーが右から左へ流れるため。
 * Swiper はドットを投稿の順（新しい順）に並べるので、そのままだと
 * 一番左のドットが最新＝初期状態で光ることになり、カードの並びと逆になってしまう。
 * 逆順にすることで「一番右のドットが最新」となり、
 * 左ボタンで古い投稿へ送るとドットも左へ移っていく。
 *
 * justify-content: flex-end は、逆順にしてもドットの束が画面左寄りのまま
 * （＝これまでと同じ位置）になるようにするためのもの。
 * row-reverse では flex-end が左側を指す。
 */
.js-ig-dots {
  display: flex;
  flex-direction: row-reverse;
  justify-content: flex-end;
  align-items: center;
  gap: 7px;
  height: 17px;
}
.js-ig-dots .swiper-pagination-bullet {
  width: 6px;
  height: 6px;
  margin: 0 !important;
  background: #ffffff;
  border-radius: 3px;
  opacity: 1;
  transition: width 0.3s ease, opacity 0.3s ease;
}
.js-ig-dots .swiper-pagination-bullet:not(.swiper-pagination-bullet-active) {
  opacity: 0.5;
}
.js-ig-dots .swiper-pagination-bullet-active {
  width: 18px;
}

/* 前後ボタンは既存のTailwindクラスで見た目を作っているため、
 * Swiper が無効（スライドが収まりきる）ときだけ薄くする。 */
.js-ig-older.swiper-button-disabled,
.js-ig-newer.swiper-button-disabled {
  opacity: 0.35;
  cursor: default;
}

@media (prefers-reduced-motion: reduce) {
  .js-works-swiper .swiper-wrapper {
    transition-duration: 0ms !important;
  }
}
/* --- OUR STRENGTH: カードが重なっていく演出（DESIGN.md 6.3 / 7.5） ---
 * 参考: https://recruit.triorb.co.jp/ の社員紹介セクション
 *
 * 各カードを sticky にして、止まる位置を1枚ごとに --stack-peek ずつ下へずらす。
 * 後のカードほど z-index が大きい（PHP側でインライン指定）ので手前に重なり、
 * 前のカードは上端が --stack-peek 分だけ残って見える＝カードが積み重なって見える。
 *
 * --stack-top  : 最初のカードが止まる位置。固定ヘッダー(78px)に隠れないぶんを確保する
 * --stack-peek : 前のカードの上端が何px覗くか
 *
 * 注意: 祖先に overflow:hidden があると sticky が効かないため、
 *       strength.php ではセクションから overflow-hidden を外している。
 * SPはカードが縦に長く重ねると読みにくいので md 以上でのみ有効にする。
 */
/* --stack-peek … 前のカードの上端が何px覗くか。
 * Asana ピン3「1と2のツラの重なりが微妙／ツラそろえて全部重なってOK」により 0 にした。
 * 0 だと全カードが同じ位置で止まり、上端がぴたりと揃って重なる。 */
@media (min-width: 768px) {
  .js-strength-card {
    --stack-top: 102px;
    --stack-peek: 0px;
    position: sticky;
    top: calc(var(--stack-top) + var(--i, 0) * var(--stack-peek));
  }
}
/* --- ABOUT: 背景の写真コラージュが列ごとに上下へ流れ続ける ---
 * 参考: https://ha-ru2017.co.jp/ の会社案内セクション
 *
 * 同じ並びを2セット出力したトラックを、ちょうど1セット分（-50%）だけ動かして無限ループさせる。
 * 画像の間隔は gap ではなく各画像の margin-bottom で持たせているため、
 * 「2セット分の高さ ÷ 2」が正確に1セット分と一致し、1周しても継ぎ目が出ない。
 * 奇数列は animation-direction: reverse で逆向き（下向き）に流す。
 */
.js-about-track {
  animation: about-scroll 40s linear infinite;
  will-change: transform;
}

.js-about-track.is-reverse {
  animation-direction: reverse;
}

@keyframes about-scroll {
  from {
    transform: translateY(0);
  }
  to {
    transform: translateY(-50%);
  }
}
@media (prefers-reduced-motion: reduce) {
  .js-about-track {
    animation: none;
  }
}
/* --- ヘッダーCTA: ラベルが1文字ずつ回転して入れ替わる ---
 * 参考: https://recruit.triorb.co.jp/ のヘッダーボタン
 * 実測値: duration 0.4s / 1文字あたり 0.02s の時差 / ease cubic-bezier(.56,-.01,.32,.99)
 *
 * .roll-char が1文字ぶんの窓（overflow:hidden）で、中に「元の字」と「複製」を縦に重ねる。
 * ホバーで両方を1行分（100%）上へずらすと、元の字が上へ抜けて複製が下から入れ替わる。
 * --n は文字の並び順で、これに 0.02s を掛けて時差にしている。
 * 文字の分解は common.js（.js-roll-text）が行う。
 */
.js-roll-text {
  display: inline-flex;
}

.roll-char {
  display: inline-block;
  position: relative;
  overflow: hidden;
  vertical-align: top;
}

.roll-char__in {
  display: block;
  transition: transform 0.4s cubic-bezier(0.56, -0.01, 0.32, 0.99);
  transition-delay: calc(var(--n, 0) * 0.02s);
}

.roll-char__in--dup {
  position: absolute;
  top: 0;
  left: 0;
  transform: translateY(100%);
}

.group:hover .roll-char__in {
  transform: translateY(-100%);
}

.group:hover .roll-char__in--dup {
  transform: translateY(0);
}

/* 矢印: 元の矢印が右へ抜け、複製が左から入る */
.group:hover .js-arrow-out {
  transform: translateX(200%);
}

.group:hover .js-arrow-in {
  transform: translateX(0);
}

@media (prefers-reduced-motion: reduce) {
  .roll-char__in,
  .js-arrow-out,
  .js-arrow-in {
    transition: none;
  }
}
/* --- 英字見出し: 1文字ずつ枠の右外から左へスライドして出現（DESIGN.md 7.3） ---
 * 参考: https://school.dhw.co.jp/p/honka_reframe/
 *
 * 各文字に「その文字ぶんの枠」を用意して overflow:hidden で隠し、
 * 中の文字を枠の右外（translateX(100%)）に置いておく。
 * 画面内に入ると .is-revealed が付き、左へ動いて枠の中に現れる。
 * --n は文字の並び順（common.js が付与）で、これに 0.03s を掛けて時差にしている。
 *
 * 枠を overflow:hidden にすると、行送りを詰めた大見出し（leading 0.841 など）では
 * 文字の上下がはみ出して切れてしまう。そこで上下に padding を足して枠を広げ、
 * 同じ量の負のマージンで打ち消して、レイアウトを変えずに縦方向だけ切れないようにしている。
 */
.js-anim-title .reveal-char {
  display: inline-block;
  overflow: hidden;
  vertical-align: top;
  padding-block: 0.3em;
  margin-block: -0.3em;
}

.js-anim-title .reveal-char__in {
  display: inline-block;
  transform: translateX(100%);
  transition: transform 0.7s cubic-bezier(0.22, 1, 0.36, 1);
  transition-delay: calc(var(--n, 0) * 0.03s);
  will-change: transform;
}

.js-anim-title.is-revealed .reveal-char__in {
  transform: translateX(0);
}

@media (prefers-reduced-motion: reduce) {
  .js-anim-title .reveal-char__in {
    transform: none;
    transition: none;
  }
}
/* --- ページ内リンクのスムーススクロール ---
 * ヘッダーが position:fixed（高さ78px）で常に上に乗っているため、
 * そのまま飛ぶとセクションの先頭がヘッダーの下に潜ってしまう。
 * scroll-margin-top でアンカー先に同じ高さぶんの余白を確保する。
 * 動きを減らす設定の環境では従来どおり瞬時に移動させる。
 */
html {
  scroll-behavior: smooth;
}

section[id],
[id]:target {
  scroll-margin-top: 78px;
}

/* --- Lenis の推奨スタイル ---
 * Lenis は <html> に lenis / lenis-smooth / lenis-scrolling / lenis-stopped を付ける。
 * これが無いと、ブラウザ標準のスムーススクロールと引っ張り合ったり、
 * height の指定でスクロール量の計算がずれたりして、挙動が安定しない。
 * 参考テーマ（mukuten-okayama）と同じ内容。
 */
html.lenis,
html.lenis body {
  height: auto;
}

.lenis.lenis-smooth {
  scroll-behavior: auto !important;
}

.lenis.lenis-smooth [data-lenis-prevent] {
  overscroll-behavior: contain;
}

.lenis.lenis-stopped {
  overflow: hidden;
}

.lenis.lenis-scrolling iframe {
  pointer-events: none;
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }
}
/* --- 汎用の出現アニメーション（.js-reveal） ---
 * 以前は JS が Tailwind の duration-700 を付けていたが、
 * 要素ごとに「速度」と「時差」を変えられないため CSS 側へ移した（Asana ピン4・5）。
 *   --reveal-dur   … 動く速さ
 *   --reveal-delay … 見出しより後に出したいときの待ち時間
 * .is-armed は JS が付ける。CSS だけで opacity:0 にすると
 * JSが動かない環境で中身が消えてしまうため、初期状態はJS任せにしている。
 */
.js-reveal {
  transition: opacity var(--reveal-dur, 0.7s) ease-out var(--reveal-delay, 0ms), transform var(--reveal-dur, 0.7s) cubic-bezier(0.22, 1, 0.36, 1) var(--reveal-delay, 0ms);
}

.js-reveal.is-armed {
  opacity: 0;
  transform: translateY(24px);
}

@media (prefers-reduced-motion: reduce) {
  .js-reveal {
    transition: none;
  }
  .js-reveal.is-armed {
    opacity: 1;
    transform: none;
  }
}
/* --- 左→右のワイプで出す（.js-wipe / .js-reveal と併用） ---
 * 代表挨拶の写真用（Asana 事業内容ピン4）。
 * 上下フェードではなく「インクが左から走る」見え方にしたい、という指示。
 * .js-reveal.is-armed（0,2,0）を確実に上書きしたいのでクラス3つで書いている。
 * clip-path はマスク（インク型）と併用しても互いに干渉しない＝重ね掛けで効く。
 */
.js-reveal.js-wipe {
  clip-path: inset(0 0 0 0);
  transition: clip-path var(--wipe-dur, 1.1s) cubic-bezier(0.16, 1, 0.3, 1) var(--reveal-delay, 0ms);
}

.js-reveal.js-wipe.is-armed {
  opacity: 1;
  transform: none;
  clip-path: inset(0 100% 0 0);
}

@media (prefers-reduced-motion: reduce) {
  .js-reveal.js-wipe {
    transition: none;
  }
  .js-reveal.js-wipe.is-armed {
    clip-path: inset(0 0 0 0);
  }
}
/* --- 代表挨拶の写真を2枚でクロスフェード（.js-msg-photo / .js-msg-slide） ---
 * Asana 事業内容ピン5「Figmaに追加で一つ画像を置いているので交互に表示させたい」。
 * 初期表示の1枚目には PHP が .is-current を付けて出力しているので、
 * JSが動かない環境でも写真が消えることはない。
 */
.js-msg-slide {
  opacity: 0;
  transition: opacity 1.2s ease-in-out;
}

.js-msg-slide.is-current {
  opacity: 1;
}

@media (prefers-reduced-motion: reduce) {
  .js-msg-slide {
    transition: none;
  }
}
/* --- ヘッダーのグラデ帯が右から左へ流れて出る（Asana ピン1） ---
 * 隠れている状態を html.is-loading に紐づけている。
 * このクラスは最初の描画時点で付いているので（loading.php のインラインスクリプト）、
 * 幕を出さない回＝2回目以降は帯が最初から出ており、一瞬消えて見えることがない。
 * 幕が抜けきった時点で JS が is-loading を外し、そこで下の transition が走る。
 *
 * 右端から左へ現れるので、隠す向きは「左側を削る」= inset の left を動かす。
 */
.js-header-bg {
  clip-path: inset(0 0 0 0);
  transition: clip-path 1.1s cubic-bezier(0.22, 1, 0.36, 1);
}

html.is-loading .js-header-bg {
  clip-path: inset(0 0 0 100%);
}

@media (prefers-reduced-motion: reduce) {
  .js-header-bg,
  html.is-loading .js-header-bg {
    clip-path: none;
    transition: none;
  }
}
/* --- テストモードの警告表示（template_part/parts/test-mode-badge.php） ---
 * テストモードのまま公開するとお問い合わせが本番の宛先に届かないため、画面下部に帯を出す。
 * 中身の操作は妨げないよう pointer-events は切る。
 */
/* 画面下部の帯 */
.test-mode-bar {
  position: fixed;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 99999;
  pointer-events: none;
  background: #e74c3c;
  box-shadow: 0 -4px 16px rgba(0, 0, 0, 0.25);
}

.test-mode-bar__inner {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  padding: 10px 16px;
  margin: 0;
  color: #fff;
  text-align: left;
}

.test-mode-bar__tag {
  flex-shrink: 0;
  padding: 3px 10px;
  font-family: var(--font-cond, sans-serif);
  font-size: 14px;
  font-weight: 700;
  line-height: 1.2;
  color: #e74c3c;
  letter-spacing: 0.08em;
  background: #ffe100;
  border-radius: 999px;
  animation: test-mode-pulse 1.8s ease-in-out infinite;
}

.test-mode-bar__text {
  font-size: 14px;
  font-weight: 700;
  line-height: 1.5;
}

/* 帯のぶんだけ下に余白を足し、フッターの末尾が隠れないようにする */
body.is-test-mode {
  padding-bottom: 64px;
}

@keyframes test-mode-pulse {
  0%, 100% {
    opacity: 1;
  }
  50% {
    opacity: 0.4;
  }
}
@media (prefers-reduced-motion: reduce) {
  .test-mode-bar__tag {
    animation: none;
  }
}
@media print {
  .test-mode-bar {
    display: none;
  }
}
.breadcrumb {
  max-width: 1200px;
  width: 100%;
  margin: auto;
}
@media (max-width: 767px) {
  .breadcrumb {
    font-size: 0.8rem;
  }
}
.breadcrumb__wrap {
  width: 100%;
}
.breadcrumb__list {
  list-style: none;
  margin: 0;
  padding: 0.25rem;
  display: flex;
}
.breadcrumb__item a {
  color: hotpink;
  text-decoration: underline;
}
.breadcrumb__item:last-child::after {
  content: "";
}
.breadcrumb__item::after {
  content: "　＞　";
}
.placeholder\:text-brand-gray2::-moz-placeholder{
  --tw-text-opacity: 1;
  color: rgb(141 141 141 / var(--tw-text-opacity, 1));
}
.placeholder\:text-brand-gray2::placeholder{
  --tw-text-opacity: 1;
  color: rgb(141 141 141 / var(--tw-text-opacity, 1));
}
.last\:border-b-0:last-child{
  border-bottom-width: 0px;
}
.last\:pb-0:last-child{
  padding-bottom: 0px;
}
.hover\:bg-brand-accent:hover{
  --tw-bg-opacity: 1;
  background-color: rgb(229 255 0 / var(--tw-bg-opacity, 1));
}
.hover\:bg-brand-aqua:hover{
  --tw-bg-opacity: 1;
  background-color: rgb(115 255 255 / var(--tw-bg-opacity, 1));
}
.hover\:bg-white:hover{
  --tw-bg-opacity: 1;
  background-color: rgb(255 255 255 / var(--tw-bg-opacity, 1));
}
.hover\:text-brand-accent:hover{
  --tw-text-opacity: 1;
  color: rgb(229 255 0 / var(--tw-text-opacity, 1));
}
.hover\:text-brand-aqua:hover{
  --tw-text-opacity: 1;
  color: rgb(115 255 255 / var(--tw-text-opacity, 1));
}
.hover\:text-brand-lightblue:hover{
  --tw-text-opacity: 1;
  color: rgb(61 109 220 / var(--tw-text-opacity, 1));
}
.hover\:underline:hover{
  text-decoration-line: underline;
}
.hover\:opacity-80:hover{
  opacity: 0.8;
}
.focus\:border-brand-lightblue:focus{
  --tw-border-opacity: 1;
  border-color: rgb(61 109 220 / var(--tw-border-opacity, 1));
}
.group:hover .group-hover\:-translate-y-\[20px\]{
  --tw-translate-y: -20px;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}
.group:hover .group-hover\:scale-\[1\.04\]{
  --tw-scale-x: 1.04;
  --tw-scale-y: 1.04;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}
.group:hover .group-hover\:bg-brand-accent{
  --tw-bg-opacity: 1;
  background-color: rgb(229 255 0 / var(--tw-bg-opacity, 1));
}
.group:hover .group-hover\:text-brand-lightblue{
  --tw-text-opacity: 1;
  color: rgb(61 109 220 / var(--tw-text-opacity, 1));
}
.peer:checked ~ .peer-checked\:border-brand-lightblue{
  --tw-border-opacity: 1;
  border-color: rgb(61 109 220 / var(--tw-border-opacity, 1));
}
.peer:checked ~ .peer-checked\:bg-brand-lightblue{
  --tw-bg-opacity: 1;
  background-color: rgb(61 109 220 / var(--tw-bg-opacity, 1));
}
.peer:focus-visible ~ .peer-focus-visible\:ring-2{
  --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
  --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color);
  box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);
}
.peer:focus-visible ~ .peer-focus-visible\:ring-brand-lightblue{
  --tw-ring-opacity: 1;
  --tw-ring-color: rgb(61 109 220 / var(--tw-ring-opacity, 1));
}
.peer:focus-visible ~ .peer-focus-visible\:ring-offset-2{
  --tw-ring-offset-width: 2px;
}
@media (min-width: 768px){
  .md\:-top-\[80px\]{
    top: -80px;
  }
  .md\:bottom-12{
    bottom: 3rem;
  }
  .md\:bottom-\[55px\]{
    bottom: 55px;
  }
  .md\:left-\[42px\]{
    left: 42px;
  }
  .md\:left-\[53px\]{
    left: 53px;
  }
  .md\:top-12{
    top: 3rem;
  }
  .md\:top-\[12\%\]{
    top: 12%;
  }
  .md\:top-\[55px\]{
    top: 55px;
  }
  .md\:mt-10{
    margin-top: 2.5rem;
  }
  .md\:mt-12{
    margin-top: 3rem;
  }
  .md\:mt-14{
    margin-top: 3.5rem;
  }
  .md\:mt-16{
    margin-top: 4rem;
  }
  .md\:mt-4{
    margin-top: 1rem;
  }
  .md\:mt-6{
    margin-top: 1.5rem;
  }
  .md\:mt-8{
    margin-top: 2rem;
  }
  .md\:block{
    display: block;
  }
  .md\:inline{
    display: inline;
  }
  .md\:flex{
    display: flex;
  }
  .md\:hidden{
    display: none;
  }
  .md\:h-\[110px\]{
    height: 110px;
  }
  .md\:h-\[186px\]{
    height: 186px;
  }
  .md\:h-\[420px\]{
    height: 420px;
  }
  .md\:h-\[74px\]{
    height: 74px;
  }
  .md\:h-\[83px\]{
    height: 83px;
  }
  .md\:h-\[88px\]{
    height: 88px;
  }
  .md\:\!w-\[330px\]{
    width: 330px !important;
  }
  .md\:w-1\/2{
    width: 50%;
  }
  .md\:w-\[110px\]{
    width: 110px;
  }
  .md\:w-\[130px\]{
    width: 130px;
  }
  .md\:w-\[60vw\]{
    width: 60vw;
  }
  .md\:w-\[70\%\]{
    width: 70%;
  }
  .md\:w-\[74px\]{
    width: 74px;
  }
  .md\:w-\[88px\]{
    width: 88px;
  }
  .md\:w-\[calc\(100\%\+5rem\)\]{
    width: calc(100% + 5rem);
  }
  .md\:w-\[calc\(100\%-5rem\)\]{
    width: calc(100% - 5rem);
  }
  .md\:w-auto{
    width: auto;
  }
  .md\:max-w-\[240px\]{
    max-width: 240px;
  }
  .md\:flex-1{
    flex: 1 1 0%;
  }
  .md\:shrink-0{
    flex-shrink: 0;
  }
  .md\:grid-cols-2{
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .md\:grid-cols-3{
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
  .md\:grid-cols-4{
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
  .md\:flex-row{
    flex-direction: row;
  }
  .md\:items-start{
    align-items: flex-start;
  }
  .md\:items-center{
    align-items: center;
  }
  .md\:items-baseline{
    align-items: baseline;
  }
  .md\:items-stretch{
    align-items: stretch;
  }
  .md\:justify-between{
    justify-content: space-between;
  }
  .md\:gap-10{
    gap: 2.5rem;
  }
  .md\:gap-12{
    gap: 3rem;
  }
  .md\:gap-14{
    gap: 3.5rem;
  }
  .md\:gap-16{
    gap: 4rem;
  }
  .md\:gap-24{
    gap: 6rem;
  }
  .md\:gap-4{
    gap: 1rem;
  }
  .md\:gap-5{
    gap: 1.25rem;
  }
  .md\:gap-6{
    gap: 1.5rem;
  }
  .md\:gap-8{
    gap: 2rem;
  }
  .md\:gap-\[12px\]{
    gap: 12px;
  }
  .md\:gap-\[16px\]{
    gap: 16px;
  }
  .md\:gap-\[20px\]{
    gap: 20px;
  }
  .md\:gap-\[24px\]{
    gap: 24px;
  }
  .md\:gap-\[28px\]{
    gap: 28px;
  }
  .md\:gap-\[36px\]{
    gap: 36px;
  }
  .md\:gap-\[64px\]{
    gap: 64px;
  }
  .md\:gap-\[90px\]{
    gap: 90px;
  }
  .md\:gap-x-6{
    -moz-column-gap: 1.5rem;
         column-gap: 1.5rem;
  }
  .md\:gap-y-12{
    row-gap: 3rem;
  }
  .md\:self-auto{
    align-self: auto;
  }
  .md\:self-start{
    align-self: flex-start;
  }
  .md\:border-\[10px\]{
    border-width: 10px;
  }
  .md\:border-\[7px\]{
    border-width: 7px;
  }
  .md\:p-11{
    padding: 2.75rem;
  }
  .md\:p-8{
    padding: 2rem;
  }
  .md\:px-10{
    padding-left: 2.5rem;
    padding-right: 2.5rem;
  }
  .md\:px-8{
    padding-left: 2rem;
    padding-right: 2rem;
  }
  .md\:px-\[15px\]{
    padding-left: 15px;
    padding-right: 15px;
  }
  .md\:px-\[16px\]{
    padding-left: 16px;
    padding-right: 16px;
  }
  .md\:py-16{
    padding-top: 4rem;
    padding-bottom: 4rem;
  }
  .md\:py-20{
    padding-top: 5rem;
    padding-bottom: 5rem;
  }
  .md\:py-24{
    padding-top: 6rem;
    padding-bottom: 6rem;
  }
  .md\:pb-10{
    padding-bottom: 2.5rem;
  }
  .md\:pb-14{
    padding-bottom: 3.5rem;
  }
  .md\:pb-16{
    padding-bottom: 4rem;
  }
  .md\:pb-20{
    padding-bottom: 5rem;
  }
  .md\:pb-24{
    padding-bottom: 6rem;
  }
  .md\:pb-28{
    padding-bottom: 7rem;
  }
  .md\:pb-\[12px\]{
    padding-bottom: 12px;
  }
  .md\:pb-\[152px\]{
    padding-bottom: 152px;
  }
  .md\:pb-\[calc\(3rem\+var\(--tuck\)\)\]{
    padding-bottom: calc(3rem + var(--tuck));
  }
  .md\:pl-12{
    padding-left: 3rem;
  }
  .md\:pr-\[48px\]{
    padding-right: 48px;
  }
  .md\:pt-12{
    padding-top: 3rem;
  }
  .md\:pt-16{
    padding-top: 4rem;
  }
  .md\:pt-20{
    padding-top: 5rem;
  }
  .md\:pt-24{
    padding-top: 6rem;
  }
  .md\:pt-28{
    padding-top: 7rem;
  }
  .md\:pt-\[104px\]{
    padding-top: 104px;
  }
  .md\:pt-\[10px\]{
    padding-top: 10px;
  }
  .md\:pt-\[130px\]{
    padding-top: 130px;
  }
  .md\:pt-\[40px\]{
    padding-top: 40px;
  }
  .md\:pt-\[80px\]{
    padding-top: 80px;
  }
  .md\:pt-\[9px\]{
    padding-top: 9px;
  }
  .md\:pt-\[calc\(5rem\+var\(--tuck\)\)\]{
    padding-top: calc(5rem + var(--tuck));
  }
  .md\:text-2xl{
    font-size: 1.5rem;
    line-height: 2rem;
  }
  .md\:text-3xl{
    font-size: 1.875rem;
    line-height: 2.25rem;
  }
  .md\:text-4xl{
    font-size: 2.25rem;
    line-height: 2.5rem;
  }
  .md\:text-\[100px\]{
    font-size: 100px;
  }
  .md\:text-\[110px\]{
    font-size: 110px;
  }
  .md\:text-\[120px\]{
    font-size: 120px;
  }
  .md\:text-\[140px\]{
    font-size: 140px;
  }
  .md\:text-\[14px\]{
    font-size: 14px;
  }
  .md\:text-\[16px\]{
    font-size: 16px;
  }
  .md\:text-\[180px\]{
    font-size: 180px;
  }
  .md\:text-\[19px\]{
    font-size: 19px;
  }
  .md\:text-\[20px\]{
    font-size: 20px;
  }
  .md\:text-\[22px\]{
    font-size: 22px;
  }
  .md\:text-\[24px\]{
    font-size: 24px;
  }
  .md\:text-\[27px\]{
    font-size: 27px;
  }
  .md\:text-\[28px\]{
    font-size: 28px;
  }
  .md\:text-\[32px\]{
    font-size: 32px;
  }
  .md\:text-\[36px\]{
    font-size: 36px;
  }
  .md\:text-\[44px\]{
    font-size: 44px;
  }
  .md\:text-\[48px\]{
    font-size: 48px;
  }
  .md\:text-\[56px\]{
    font-size: 56px;
  }
  .md\:text-\[64px\]{
    font-size: 64px;
  }
  .md\:text-\[72px\]{
    font-size: 72px;
  }
  .md\:text-\[76px\]{
    font-size: 76px;
  }
  .md\:text-\[84px\]{
    font-size: 84px;
  }
  .md\:text-\[88px\]{
    font-size: 88px;
  }
  .md\:text-\[96px\]{
    font-size: 96px;
  }
  .md\:text-base{
    font-size: 1rem;
    line-height: 1.5rem;
  }
  .md\:text-sm{
    font-size: 0.875rem;
    line-height: 1.25rem;
  }
  .md\:leading-\[22px\]{
    line-height: 22px;
  }
  .md\:leading-\[32px\]{
    line-height: 32px;
  }
  .md\:leading-\[36px\]{
    line-height: 36px;
  }
  .md\:tracking-\[0\.05em\]{
    letter-spacing: 0.05em;
  }
  .md\:tracking-\[0\.06em\]{
    letter-spacing: 0.06em;
  }
  .md\:tracking-\[0\.96px\]{
    letter-spacing: 0.96px;
  }
  .md\:tracking-\[1px\]{
    letter-spacing: 1px;
  }
  .md\:tracking-\[2px\]{
    letter-spacing: 2px;
  }
  .md\:tracking-\[3px\]{
    letter-spacing: 3px;
  }
  .md\:tracking-\[4px\]{
    letter-spacing: 4px;
  }
  .md\:\[--tuck\:104px\]{
    --tuck: 104px;
  }
  .md\:\[clip-path\:polygon\(0_0\2c 100\%_104px\2c 100\%_calc\(100\%_-_104px\)\2c 0_100\%\)\]{
    clip-path: polygon(0 0,100% 104px,100% calc(100% - 104px),0 100%);
  }
  .md\:\[clip-path\:polygon\(0_0\2c 100\%_120px\2c 100\%_100\%\2c 0_100\%\)\]{
    clip-path: polygon(0 0,100% 120px,100% 100%,0 100%);
  }
  .md\:\[clip-path\:polygon\(0_120px\2c 100\%_0\2c 100\%_100\%\2c 0_100\%\)\]{
    clip-path: polygon(0 120px,100% 0,100% 100%,0 100%);
  }
  .md\:\[clip-path\:polygon\(100\%_0\2c 0_120px\2c 0_100\%\2c 100\%_100\%\)\]{
    clip-path: polygon(100% 0,0 120px,0 100%,100% 100%);
  }
}
@media (min-width: 1024px){
  .lg\:px-10{
    padding-left: 2.5rem;
    padding-right: 2.5rem;
  }
}
@media (min-width: 1280px){
  .xl\:absolute{
    position: absolute;
  }
  .xl\:-top-\[112px\]{
    top: -112px;
  }
  .xl\:bottom-\[9\.33\%\]{
    bottom: 9.33%;
  }
  .xl\:bottom-auto{
    bottom: auto;
  }
  .xl\:left-0{
    left: 0px;
  }
  .xl\:left-\[-137px\]{
    left: -137px;
  }
  .xl\:left-\[-8\.46\%\]{
    left: -8.46%;
  }
  .xl\:left-\[1\.51\%\]{
    left: 1.51%;
  }
  .xl\:left-\[1048px\]{
    left: 1048px;
  }
  .xl\:left-\[11\.88\%\]{
    left: 11.88%;
  }
  .xl\:left-\[30\.16\%\]{
    left: 30.16%;
  }
  .xl\:left-\[358px\]{
    left: 358px;
  }
  .xl\:left-\[39\.04\%\]{
    left: 39.04%;
  }
  .xl\:left-\[40\.65\%\]{
    left: 40.65%;
  }
  .xl\:left-\[41\.04\%\]{
    left: 41.04%;
  }
  .xl\:left-\[45\.16\%\]{
    left: 45.16%;
  }
  .xl\:left-\[46\.7\%\]{
    left: 46.7%;
  }
  .xl\:left-\[55\.08\%\]{
    left: 55.08%;
  }
  .xl\:left-\[58\.80\%\]{
    left: 58.80%;
  }
  .xl\:left-\[64\.17\%\]{
    left: 64.17%;
  }
  .xl\:left-\[70\.21\%\]{
    left: 70.21%;
  }
  .xl\:left-\[calc\(10\.417\%_-_2px\)\]{
    left: calc(10.417% - 2px);
  }
  .xl\:left-\[calc\(9\.46\%_-_2px\)\]{
    left: calc(9.46% - 2px);
  }
  .xl\:left-\[min\(15\.62vw\2c 300px\)\]{
    left: min(15.62vw, 300px);
  }
  .xl\:left-\[min\(27\.4vw\2c 526px\)\]{
    left: min(27.4vw, 526px);
  }
  .xl\:right-auto{
    right: auto;
  }
  .xl\:top-0{
    top: 0px;
  }
  .xl\:top-\[-0\.047em\]{
    top: -0.047em;
  }
  .xl\:top-\[-0\.172em\]{
    top: -0.172em;
  }
  .xl\:top-\[-111px\]{
    top: -111px;
  }
  .xl\:top-\[-127px\]{
    top: -127px;
  }
  .xl\:top-\[-143px\]{
    top: -143px;
  }
  .xl\:top-\[105\.7\%\]{
    top: 105.7%;
  }
  .xl\:top-\[114px\]{
    top: 114px;
  }
  .xl\:top-\[14\.94\%\]{
    top: 14.94%;
  }
  .xl\:top-\[151px\]{
    top: 151px;
  }
  .xl\:top-\[15px\]{
    top: 15px;
  }
  .xl\:top-\[187px\]{
    top: 187px;
  }
  .xl\:top-\[32\.84\%\]{
    top: 32.84%;
  }
  .xl\:top-\[40px\]{
    top: 40px;
  }
  .xl\:top-\[46\%\]{
    top: 46%;
  }
  .xl\:top-\[5\.87\%\]{
    top: 5.87%;
  }
  .xl\:top-\[78\.96\%\]{
    top: 78.96%;
  }
  .xl\:top-\[8\.89\%\]{
    top: 8.89%;
  }
  .xl\:top-\[min\(6\.51vw\2c 125px\)\]{
    top: min(6.51vw, 125px);
  }
  .xl\:z-\[1\]{
    z-index: 1;
  }
  .xl\:z-\[2\]{
    z-index: 2;
  }
  .xl\:col-span-1{
    grid-column: span 1 / span 1;
  }
  .xl\:m-0{
    margin: 0px;
  }
  .xl\:mx-0{
    margin-left: 0px;
    margin-right: 0px;
  }
  .xl\:mx-auto{
    margin-left: auto;
    margin-right: auto;
  }
  .xl\:ml-\[18\.45\%\]{
    margin-left: 18.45%;
  }
  .xl\:ml-\[9\.66\%\]{
    margin-left: 9.66%;
  }
  .xl\:mt-0{
    margin-top: 0px;
  }
  .xl\:mt-\[-43px\]{
    margin-top: -43px;
  }
  .xl\:mt-\[104px\]{
    margin-top: 104px;
  }
  .xl\:mt-\[12px\]{
    margin-top: 12px;
  }
  .xl\:mt-\[16px\]{
    margin-top: 16px;
  }
  .xl\:mt-\[20px\]{
    margin-top: 20px;
  }
  .xl\:mt-\[34px\]{
    margin-top: 34px;
  }
  .xl\:mt-\[40px\]{
    margin-top: 40px;
  }
  .xl\:mt-\[46px\]{
    margin-top: 46px;
  }
  .xl\:mt-\[48px\]{
    margin-top: 48px;
  }
  .xl\:mt-\[6px\]{
    margin-top: 6px;
  }
  .xl\:mt-\[87px\]{
    margin-top: 87px;
  }
  .xl\:mt-\[min\(1\.25vw\2c 24px\)\]{
    margin-top: min(1.25vw, 24px);
  }
  .xl\:block{
    display: block;
  }
  .xl\:inline{
    display: inline;
  }
  .xl\:flex{
    display: flex;
  }
  .xl\:contents{
    display: contents;
  }
  .xl\:hidden{
    display: none;
  }
  .xl\:aspect-auto{
    aspect-ratio: auto;
  }
  .xl\:h-\[106px\]{
    height: 106px;
  }
  .xl\:h-\[123px\]{
    height: 123px;
  }
  .xl\:h-\[128px\]{
    height: 128px;
  }
  .xl\:h-\[139px\]{
    height: 139px;
  }
  .xl\:h-\[146px\]{
    height: 146px;
  }
  .xl\:h-\[180px\]{
    height: 180px;
  }
  .xl\:h-\[20px\]{
    height: 20px;
  }
  .xl\:h-\[231px\]{
    height: 231px;
  }
  .xl\:h-\[250px\]{
    height: 250px;
  }
  .xl\:h-\[270px\]{
    height: 270px;
  }
  .xl\:h-\[40px\]{
    height: 40px;
  }
  .xl\:h-\[44\.62\%\]{
    height: 44.62%;
  }
  .xl\:h-\[452px\]{
    height: 452px;
  }
  .xl\:h-\[47px\]{
    height: 47px;
  }
  .xl\:h-\[505px\]{
    height: 505px;
  }
  .xl\:h-\[512px\]{
    height: 512px;
  }
  .xl\:h-\[548px\]{
    height: 548px;
  }
  .xl\:h-\[56px\]{
    height: 56px;
  }
  .xl\:h-\[57\.91\%\]{
    height: 57.91%;
  }
  .xl\:h-\[61\.36\%\]{
    height: 61.36%;
  }
  .xl\:h-\[610px\]{
    height: 610px;
  }
  .xl\:h-\[64px\]{
    height: 64px;
  }
  .xl\:h-\[654px\]{
    height: 654px;
  }
  .xl\:h-\[65px\]{
    height: 65px;
  }
  .xl\:h-\[660px\]{
    height: 660px;
  }
  .xl\:h-\[662px\]{
    height: 662px;
  }
  .xl\:h-\[672px\]{
    height: 672px;
  }
  .xl\:h-\[780px\]{
    height: 780px;
  }
  .xl\:h-\[98px\]{
    height: 98px;
  }
  .xl\:h-\[calc\(1099px\+var\(--tuck\)\)\]{
    height: calc(1099px + var(--tuck));
  }
  .xl\:h-\[min\(11\.77vw\2c 226px\)\]{
    height: min(11.77vw, 226px);
  }
  .xl\:h-\[min\(17\.24vw\2c 331px\)\]{
    height: min(17.24vw, 331px);
  }
  .xl\:h-\[min\(17\.76vw\2c 341px\)\]{
    height: min(17.76vw, 341px);
  }
  .xl\:h-\[min\(5\.52vw\2c 106px\)\]{
    height: min(5.52vw, 106px);
  }
  .xl\:h-\[min\(7\.29vw\2c 140px\)\]{
    height: min(7.29vw, 140px);
  }
  .xl\:h-full{
    height: 100%;
  }
  .xl\:min-h-\[156px\]{
    min-height: 156px;
  }
  .xl\:min-h-\[54px\]{
    min-height: 54px;
  }
  .xl\:min-h-\[553px\]{
    min-height: 553px;
  }
  .xl\:min-h-\[934px\]{
    min-height: 934px;
  }
  .xl\:min-h-\[min\(17\.71vw\2c 340px\)\]{
    min-height: min(17.71vw, 340px);
  }
  .xl\:min-h-\[min\(32\.92vw\2c 632px\)\]{
    min-height: min(32.92vw, 632px);
  }
  .xl\:min-h-\[min\(48\.13vw\2c 924px\)\]{
    min-height: min(48.13vw, 924px);
  }
  .xl\:\!w-\[360px\]{
    width: 360px !important;
  }
  .xl\:w-\[1216px\]{
    width: 1216px;
  }
  .xl\:w-\[1343px\]{
    width: 1343px;
  }
  .xl\:w-\[240px\]{
    width: 240px;
  }
  .xl\:w-\[25\.26\%\]{
    width: 25.26%;
  }
  .xl\:w-\[35\.03\%\]{
    width: 35.03%;
  }
  .xl\:w-\[37\.78\%\]{
    width: 37.78%;
  }
  .xl\:w-\[39\.52\%\]{
    width: 39.52%;
  }
  .xl\:w-\[41\.5\%\]{
    width: 41.5%;
  }
  .xl\:w-\[43\.75\%\]{
    width: 43.75%;
  }
  .xl\:w-\[45\%\]{
    width: 45%;
  }
  .xl\:w-\[45\.38\%\]{
    width: 45.38%;
  }
  .xl\:w-\[45\.79\%\]{
    width: 45.79%;
  }
  .xl\:w-\[46\.03\%\]{
    width: 46.03%;
  }
  .xl\:w-\[47\.46\%\]{
    width: 47.46%;
  }
  .xl\:w-\[48\.54\%\]{
    width: 48.54%;
  }
  .xl\:w-\[49\.69\%\]{
    width: 49.69%;
  }
  .xl\:w-\[52\.39\%\]{
    width: 52.39%;
  }
  .xl\:w-\[52\.56\%\]{
    width: 52.56%;
  }
  .xl\:w-\[54\.95\%\]{
    width: 54.95%;
  }
  .xl\:w-\[56\.25\%\]{
    width: 56.25%;
  }
  .xl\:w-\[57\.15\%\]{
    width: 57.15%;
  }
  .xl\:w-\[59\.29\%\]{
    width: 59.29%;
  }
  .xl\:w-\[60vw\]{
    width: 60vw;
  }
  .xl\:w-\[628px\]{
    width: 628px;
  }
  .xl\:w-\[64px\]{
    width: 64px;
  }
  .xl\:w-\[693px\]{
    width: 693px;
  }
  .xl\:w-\[694\.41px\]{
    width: 694.41px;
  }
  .xl\:w-\[694px\]{
    width: 694px;
  }
  .xl\:w-\[70\.73vw\]{
    width: 70.73vw;
  }
  .xl\:w-\[706px\]{
    width: 706px;
  }
  .xl\:w-\[74\.13\%\]{
    width: 74.13%;
  }
  .xl\:w-\[746px\]{
    width: 746px;
  }
  .xl\:w-\[762px\]{
    width: 762px;
  }
  .xl\:w-\[820px\]{
    width: 820px;
  }
  .xl\:w-\[845px\]{
    width: 845px;
  }
  .xl\:w-\[872px\]{
    width: 872px;
  }
  .xl\:w-\[91\.41vw\]{
    width: 91.41vw;
  }
  .xl\:w-\[min\(18\.18vw\2c 349px\)\]{
    width: min(18.18vw, 349px);
  }
  .xl\:w-\[min\(22\.08vw\2c 424px\)\]{
    width: min(22.08vw, 424px);
  }
  .xl\:w-\[min\(25\.57vw\2c 491px\)\]{
    width: min(25.57vw, 491px);
  }
  .xl\:w-\[min\(26\.25vw\2c 504px\)\]{
    width: min(26.25vw, 504px);
  }
  .xl\:w-\[min\(27\.6vw\2c 530px\)\]{
    width: min(27.6vw, 530px);
  }
  .xl\:w-\[min\(28\.75vw\2c 552px\)\]{
    width: min(28.75vw, 552px);
  }
  .xl\:w-\[min\(29\.17vw\2c 560px\)\]{
    width: min(29.17vw, 560px);
  }
  .xl\:w-\[min\(32\.29vw\2c 620px\)\]{
    width: min(32.29vw, 620px);
  }
  .xl\:w-\[min\(33\.39vw\2c 641px\)\]{
    width: min(33.39vw, 641px);
  }
  .xl\:w-\[min\(35vw\2c 672px\)\]{
    width: min(35vw, 672px);
  }
  .xl\:w-\[min\(45\.42vw\2c 872px\)\]{
    width: min(45.42vw, 872px);
  }
  .xl\:w-\[min\(5\.52vw\2c 106px\)\]{
    width: min(5.52vw, 106px);
  }
  .xl\:w-\[min\(50\.16vw\2c 963px\)\]{
    width: min(50.16vw, 963px);
  }
  .xl\:w-\[min\(6\.2vw\2c 119px\)\]{
    width: min(6.2vw, 119px);
  }
  .xl\:w-\[min\(61\.98vw\2c 1190px\)\]{
    width: min(61.98vw, 1190px);
  }
  .xl\:w-\[min\(7\.29vw\2c 140px\)\]{
    width: min(7.29vw, 140px);
  }
  .xl\:w-\[min\(87\.92vw\2c 1688px\)\]{
    width: min(87.92vw, 1688px);
  }
  .xl\:w-full{
    width: 100%;
  }
  .xl\:min-w-0{
    min-width: 0px;
  }
  .xl\:min-w-\[550px\]{
    min-width: 550px;
  }
  .xl\:max-w-\[1224px\]{
    max-width: 1224px;
  }
  .xl\:max-w-\[489px\]{
    max-width: 489px;
  }
  .xl\:max-w-\[582px\]{
    max-width: 582px;
  }
  .xl\:max-w-\[676px\]{
    max-width: 676px;
  }
  .xl\:max-w-\[min\(30\.31vw\2c 582px\)\]{
    max-width: min(30.31vw, 582px);
  }
  .xl\:max-w-full{
    max-width: 100%;
  }
  .xl\:max-w-none{
    max-width: none;
  }
  .xl\:flex-1{
    flex: 1 1 0%;
  }
  .xl\:flex-none{
    flex: none;
  }
  .xl\:shrink{
    flex-shrink: 1;
  }
  .xl\:shrink-0{
    flex-shrink: 0;
  }
  .xl\:-translate-y-1\/2{
    --tw-translate-y: -50%;
    transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
  }
  .xl\:grid-cols-3{
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
  .xl\:grid-cols-4{
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
  .xl\:grid-cols-6{
    grid-template-columns: repeat(6, minmax(0, 1fr));
  }
  .xl\:grid-cols-\[732fr_936fr\]{
    grid-template-columns: 732fr 936fr;
  }
  .xl\:grid-cols-\[minmax\(0\2c 2fr\)_minmax\(0\2c 1fr\)\]{
    grid-template-columns: minmax(0,2fr) minmax(0,1fr);
  }
  .xl\:flex-row{
    flex-direction: row;
  }
  .xl\:flex-row-reverse{
    flex-direction: row-reverse;
  }
  .xl\:flex-nowrap{
    flex-wrap: nowrap;
  }
  .xl\:items-start{
    align-items: flex-start;
  }
  .xl\:items-end{
    align-items: flex-end;
  }
  .xl\:items-center{
    align-items: center;
  }
  .xl\:justify-end{
    justify-content: flex-end;
  }
  .xl\:justify-center{
    justify-content: center;
  }
  .xl\:gap-0{
    gap: 0px;
  }
  .xl\:gap-10{
    gap: 2.5rem;
  }
  .xl\:gap-16{
    gap: 4rem;
  }
  .xl\:gap-7{
    gap: 1.75rem;
  }
  .xl\:gap-\[11px\]{
    gap: 11px;
  }
  .xl\:gap-\[12px\]{
    gap: 12px;
  }
  .xl\:gap-\[14px\]{
    gap: 14px;
  }
  .xl\:gap-\[154px\]{
    gap: 154px;
  }
  .xl\:gap-\[16px\]{
    gap: 16px;
  }
  .xl\:gap-\[20px\]{
    gap: 20px;
  }
  .xl\:gap-\[22px\]{
    gap: 22px;
  }
  .xl\:gap-\[24px\]{
    gap: 24px;
  }
  .xl\:gap-\[3\.99\%\]{
    gap: 3.99%;
  }
  .xl\:gap-\[32px\]{
    gap: 32px;
  }
  .xl\:gap-\[38px\]{
    gap: 38px;
  }
  .xl\:gap-\[40px\]{
    gap: 40px;
  }
  .xl\:gap-\[44px\]{
    gap: 44px;
  }
  .xl\:gap-\[56px\]{
    gap: 56px;
  }
  .xl\:gap-\[6\.08\%\]{
    gap: 6.08%;
  }
  .xl\:gap-\[64px\]{
    gap: 64px;
  }
  .xl\:gap-\[7\.36\%\]{
    gap: 7.36%;
  }
  .xl\:gap-\[7\.92\%\]{
    gap: 7.92%;
  }
  .xl\:gap-\[80px\]{
    gap: 80px;
  }
  .xl\:gap-\[82px\]{
    gap: 82px;
  }
  .xl\:gap-\[8px\]{
    gap: 8px;
  }
  .xl\:gap-\[9px\]{
    gap: 9px;
  }
  .xl\:gap-\[min\(1\.25vw\2c 24px\)\]{
    gap: min(1.25vw, 24px);
  }
  .xl\:gap-\[min\(2\.08vw\2c 40px\)\]{
    gap: min(2.08vw, 40px);
  }
  .xl\:gap-\[min\(2\.29vw\2c 44px\)\]{
    gap: min(2.29vw, 44px);
  }
  .xl\:gap-\[min\(3\.54vw\2c 68px\)\]{
    gap: min(3.54vw, 68px);
  }
  .xl\:gap-\[min\(5\.0vw\2c 96px\)\]{
    gap: min(5.0vw, 96px);
  }
  .xl\:gap-\[min\(6\.25vw\2c 120px\)\]{
    gap: min(6.25vw, 120px);
  }
  .xl\:gap-\[min\(6\.67vw\2c 128px\)\]{
    gap: min(6.67vw, 128px);
  }
  .xl\:gap-\[min\(8\.33vw\2c 160px\)\]{
    gap: min(8.33vw, 160px);
  }
  .xl\:gap-\[min\(9\.11vw\2c 175px\)\]{
    gap: min(9.11vw, 175px);
  }
  .xl\:gap-x-0{
    -moz-column-gap: 0px;
         column-gap: 0px;
  }
  .xl\:gap-x-\[18px\]{
    -moz-column-gap: 18px;
         column-gap: 18px;
  }
  .xl\:gap-x-\[30px\]{
    -moz-column-gap: 30px;
         column-gap: 30px;
  }
  .xl\:gap-x-\[36px\]{
    -moz-column-gap: 36px;
         column-gap: 36px;
  }
  .xl\:gap-x-\[40px\]{
    -moz-column-gap: 40px;
         column-gap: 40px;
  }
  .xl\:gap-y-8{
    row-gap: 2rem;
  }
  .xl\:gap-y-\[14px\]{
    row-gap: 14px;
  }
  .xl\:gap-y-\[16px\]{
    row-gap: 16px;
  }
  .xl\:gap-y-\[62px\]{
    row-gap: 62px;
  }
  .xl\:self-auto{
    align-self: auto;
  }
  .xl\:self-end{
    align-self: flex-end;
  }
  .xl\:whitespace-nowrap{
    white-space: nowrap;
  }
  .xl\:rounded-\[4px\]{
    border-radius: 4px;
  }
  .xl\:border-\[min\(0\.42vw\2c 8px\)\]{
    border-width: min(0.42vw, 8px);
  }
  .xl\:border-\[min\(0\.625vw\2c 12px\)\]{
    border-width: min(0.625vw, 12px);
  }
  .xl\:p-\[30px\]{
    padding: 30px;
  }
  .xl\:p-\[32px\]{
    padding: 32px;
  }
  .xl\:p-\[36px\]{
    padding: 36px;
  }
  .xl\:p-\[min\(1\.25vw\2c 24px\)\]{
    padding: min(1.25vw, 24px);
  }
  .xl\:px-0{
    padding-left: 0px;
    padding-right: 0px;
  }
  .xl\:px-\[106px\]{
    padding-left: 106px;
    padding-right: 106px;
  }
  .xl\:px-\[15px\]{
    padding-left: 15px;
    padding-right: 15px;
  }
  .xl\:px-\[172px\]{
    padding-left: 172px;
    padding-right: 172px;
  }
  .xl\:px-\[24px\]{
    padding-left: 24px;
    padding-right: 24px;
  }
  .xl\:px-\[40px\]{
    padding-left: 40px;
    padding-right: 40px;
  }
  .xl\:px-\[min\(15\.63vw\2c 300px\)\]{
    padding-left: min(15.63vw, 300px);
    padding-right: min(15.63vw, 300px);
  }
  .xl\:px-\[min\(15\.73vw\2c 302px\)\]{
    padding-left: min(15.73vw, 302px);
    padding-right: min(15.73vw, 302px);
  }
  .xl\:px-\[min\(16\.46vw\2c 316px\)\]{
    padding-left: min(16.46vw, 316px);
    padding-right: min(16.46vw, 316px);
  }
  .xl\:px-\[min\(5\.42vw\2c 104px\)\]{
    padding-left: min(5.42vw, 104px);
    padding-right: min(5.42vw, 104px);
  }
  .xl\:px-\[min\(8\.85vw\2c 170px\)\]{
    padding-left: min(8.85vw, 170px);
    padding-right: min(8.85vw, 170px);
  }
  .xl\:px-\[min\(8\.96vw\2c 172px\)\]{
    padding-left: min(8.96vw, 172px);
    padding-right: min(8.96vw, 172px);
  }
  .xl\:py-0{
    padding-top: 0px;
    padding-bottom: 0px;
  }
  .xl\:py-\[110px\]{
    padding-top: 110px;
    padding-bottom: 110px;
  }
  .xl\:py-\[128px\]{
    padding-top: 128px;
    padding-bottom: 128px;
  }
  .xl\:py-\[24px\]{
    padding-top: 24px;
    padding-bottom: 24px;
  }
  .xl\:py-\[4px\]{
    padding-top: 4px;
    padding-bottom: 4px;
  }
  .xl\:py-\[74px\]{
    padding-top: 74px;
    padding-bottom: 74px;
  }
  .xl\:py-\[76px\]{
    padding-top: 76px;
    padding-bottom: 76px;
  }
  .xl\:py-\[78\.5px\]{
    padding-top: 78.5px;
    padding-bottom: 78.5px;
  }
  .xl\:py-\[83px\]{
    padding-top: 83px;
    padding-bottom: 83px;
  }
  .xl\:py-\[min\(7\.4vw\2c 142px\)\]{
    padding-top: min(7.4vw, 142px);
    padding-bottom: min(7.4vw, 142px);
  }
  .xl\:pb-0{
    padding-bottom: 0px;
  }
  .xl\:pb-\[101px\]{
    padding-bottom: 101px;
  }
  .xl\:pb-\[112px\]{
    padding-bottom: 112px;
  }
  .xl\:pb-\[114px\]{
    padding-bottom: 114px;
  }
  .xl\:pb-\[120px\]{
    padding-bottom: 120px;
  }
  .xl\:pb-\[126px\]{
    padding-bottom: 126px;
  }
  .xl\:pb-\[131px\]{
    padding-bottom: 131px;
  }
  .xl\:pb-\[14px\]{
    padding-bottom: 14px;
  }
  .xl\:pb-\[152px\]{
    padding-bottom: 152px;
  }
  .xl\:pb-\[20px\]{
    padding-bottom: 20px;
  }
  .xl\:pb-\[213px\]{
    padding-bottom: 213px;
  }
  .xl\:pb-\[32px\]{
    padding-bottom: 32px;
  }
  .xl\:pb-\[34px\]{
    padding-bottom: 34px;
  }
  .xl\:pb-\[50px\]{
    padding-bottom: 50px;
  }
  .xl\:pb-\[54px\]{
    padding-bottom: 54px;
  }
  .xl\:pb-\[55px\]{
    padding-bottom: 55px;
  }
  .xl\:pb-\[63px\]{
    padding-bottom: 63px;
  }
  .xl\:pb-\[73px\]{
    padding-bottom: 73px;
  }
  .xl\:pb-\[79px\]{
    padding-bottom: 79px;
  }
  .xl\:pb-\[80px\]{
    padding-bottom: 80px;
  }
  .xl\:pb-\[82px\]{
    padding-bottom: 82px;
  }
  .xl\:pb-\[85px\]{
    padding-bottom: 85px;
  }
  .xl\:pb-\[95px\]{
    padding-bottom: 95px;
  }
  .xl\:pb-\[96px\]{
    padding-bottom: 96px;
  }
  .xl\:pb-\[min\(13\.44vw\2c 258px\)\]{
    padding-bottom: min(13.44vw, 258px);
  }
  .xl\:pb-\[var\(--tuck\)\]{
    padding-bottom: var(--tuck);
  }
  .xl\:pl-\[120px\]{
    padding-left: 120px;
  }
  .xl\:pl-\[16\.46\%\]{
    padding-left: 16.46%;
  }
  .xl\:pl-\[min\(2\.5vw\2c 48px\)\]{
    padding-left: min(2.5vw, 48px);
  }
  .xl\:pr-10{
    padding-right: 2.5rem;
  }
  .xl\:pr-\[80px\]{
    padding-right: 80px;
  }
  .xl\:pr-\[min\(9\.38vw\2c 180px\)\]{
    padding-right: min(9.38vw, 180px);
  }
  .xl\:pt-0{
    padding-top: 0px;
  }
  .xl\:pt-\[100px\]{
    padding-top: 100px;
  }
  .xl\:pt-\[103px\]{
    padding-top: 103px;
  }
  .xl\:pt-\[104px\]{
    padding-top: 104px;
  }
  .xl\:pt-\[107px\]{
    padding-top: 107px;
  }
  .xl\:pt-\[110px\]{
    padding-top: 110px;
  }
  .xl\:pt-\[122px\]{
    padding-top: 122px;
  }
  .xl\:pt-\[127px\]{
    padding-top: 127px;
  }
  .xl\:pt-\[12px\]{
    padding-top: 12px;
  }
  .xl\:pt-\[152px\]{
    padding-top: 152px;
  }
  .xl\:pt-\[155px\]{
    padding-top: 155px;
  }
  .xl\:pt-\[160px\]{
    padding-top: 160px;
  }
  .xl\:pt-\[164px\]{
    padding-top: 164px;
  }
  .xl\:pt-\[190px\]{
    padding-top: 190px;
  }
  .xl\:pt-\[214px\]{
    padding-top: 214px;
  }
  .xl\:pt-\[220px\]{
    padding-top: 220px;
  }
  .xl\:pt-\[24px\]{
    padding-top: 24px;
  }
  .xl\:pt-\[266px\]{
    padding-top: 266px;
  }
  .xl\:pt-\[366px\]{
    padding-top: 366px;
  }
  .xl\:pt-\[49px\]{
    padding-top: 49px;
  }
  .xl\:pt-\[56px\]{
    padding-top: 56px;
  }
  .xl\:pt-\[64px\]{
    padding-top: 64px;
  }
  .xl\:pt-\[67px\]{
    padding-top: 67px;
  }
  .xl\:pt-\[68px\]{
    padding-top: 68px;
  }
  .xl\:pt-\[80px\]{
    padding-top: 80px;
  }
  .xl\:pt-\[min\(10\.83vw\2c 208px\)\]{
    padding-top: min(10.83vw, 208px);
  }
  .xl\:pt-\[min\(11\.77vw\2c 226px\)\]{
    padding-top: min(11.77vw, 226px);
  }
  .xl\:pt-\[min\(4\.74vw\2c 91px\)\]{
    padding-top: min(4.74vw, 91px);
  }
  .xl\:pt-\[min\(9\.27vw\2c 178px\)\]{
    padding-top: min(9.27vw, 178px);
  }
  .xl\:pt-\[var\(--tuck\)\]{
    padding-top: var(--tuck);
  }
  .xl\:text-left{
    text-align: left;
  }
  .xl\:text-\[128px\]{
    font-size: 128px;
  }
  .xl\:text-\[134px\]{
    font-size: 134px;
  }
  .xl\:text-\[14px\]{
    font-size: 14px;
  }
  .xl\:text-\[16px\]{
    font-size: 16px;
  }
  .xl\:text-\[18px\]{
    font-size: 18px;
  }
  .xl\:text-\[24px\]{
    font-size: 24px;
  }
  .xl\:text-\[28px\]{
    font-size: 28px;
  }
  .xl\:text-\[360px\]{
    font-size: 360px;
  }
  .xl\:text-\[40px\]{
    font-size: 40px;
  }
  .xl\:text-\[56px\]{
    font-size: 56px;
  }
  .xl\:text-\[64px\]{
    font-size: 64px;
  }
  .xl\:text-\[70px\]{
    font-size: 70px;
  }
  .xl\:text-\[80px\]{
    font-size: 80px;
  }
  .xl\:text-\[length\:clamp\(12px\2c 0\.83vw\2c 16px\)\]{
    font-size: clamp(12px, 0.83vw, 16px);
  }
  .xl\:text-\[length\:clamp\(17px\2c 1\.25vw\2c 24px\)\]{
    font-size: clamp(17px, 1.25vw, 24px);
  }
  .xl\:text-\[length\:min\(1\.25vw\2c 24px\)\]{
    font-size: min(1.25vw, 24px);
  }
  .xl\:text-\[length\:min\(10\.9vw\2c 214px\)\]{
    font-size: min(10.9vw, 214px);
  }
  .xl\:text-\[length\:min\(11\.15vw\2c 214px\)\]{
    font-size: min(11.15vw, 214px);
  }
  .xl\:text-\[length\:min\(2\.08vw\2c 40px\)\]{
    font-size: min(2.08vw, 40px);
  }
  .xl\:text-\[length\:min\(2\.92vw\2c 56px\)\]{
    font-size: min(2.92vw, 56px);
  }
  .xl\:text-\[length\:min\(3\.33vw\2c 64px\)\]{
    font-size: min(3.33vw, 64px);
  }
  .xl\:text-\[length\:min\(6\.98vw\2c 134px\)\]{
    font-size: min(6.98vw, 134px);
  }
  .xl\:text-\[length\:min\(7\.03vw\2c 135px\)\]{
    font-size: min(7.03vw, 135px);
  }
  .xl\:text-\[length\:min\(7\.81vw\2c 150px\)\]{
    font-size: min(7.81vw, 150px);
  }
  .xl\:text-title{
    font-size: 214px;
  }
  .xl\:leading-\[0\.841\]{
    line-height: 0.841;
  }
  .xl\:leading-\[1\.25\]{
    line-height: 1.25;
  }
  .xl\:leading-\[1\.375\]{
    line-height: 1.375;
  }
  .xl\:leading-\[1\.5\]{
    line-height: 1.5;
  }
  .xl\:leading-\[105px\]{
    line-height: 105px;
  }
  .xl\:leading-\[128px\]{
    line-height: 128px;
  }
  .xl\:leading-\[180px\]{
    line-height: 180px;
  }
  .xl\:leading-\[2\]{
    line-height: 2;
  }
  .xl\:leading-\[32px\]{
    line-height: 32px;
  }
  .xl\:leading-\[36px\]{
    line-height: 36px;
  }
  .xl\:leading-\[44px\]{
    line-height: 44px;
  }
  .xl\:leading-\[64px\]{
    line-height: 64px;
  }
  .xl\:leading-\[72px\]{
    line-height: 72px;
  }
  .xl\:leading-\[80px\]{
    line-height: 80px;
  }
  .xl\:leading-\[85\.68px\]{
    line-height: 85.68px;
  }
  .xl\:leading-\[min\(1\.875vw\2c 36px\)\]{
    line-height: min(1.875vw, 36px);
  }
  .xl\:leading-\[min\(4\.17vw\2c 80px\)\]{
    line-height: min(4.17vw, 80px);
  }
  .xl\:leading-\[min\(6\.67vw\2c 128px\)\]{
    line-height: min(6.67vw, 128px);
  }
  .xl\:tracking-\[0\.028em\]{
    letter-spacing: 0.028em;
  }
  .xl\:tracking-\[0\.0625em\]{
    letter-spacing: 0.0625em;
  }
  .xl\:tracking-\[0\.06em\]{
    letter-spacing: 0.06em;
  }
  .xl\:tracking-\[0\.0833em\]{
    letter-spacing: 0.0833em;
  }
  .xl\:tracking-\[0\.48px\]{
    letter-spacing: 0.48px;
  }
  .xl\:tracking-\[0\.96px\]{
    letter-spacing: 0.96px;
  }
  .xl\:tracking-\[2px\]{
    letter-spacing: 2px;
  }
  .xl\:tracking-\[4px\]{
    letter-spacing: 4px;
  }
  .xl\:tracking-\[6px\]{
    letter-spacing: 6px;
  }
  .xl\:tracking-\[min\(0\.104vw\2c 2px\)\]{
    letter-spacing: min(0.104vw, 2px);
  }
  .xl\:tracking-\[min\(0\.208vw\2c 4px\)\]{
    letter-spacing: min(0.208vw, 4px);
  }
  .xl\:tracking-title{
    letter-spacing: 6px;
  }
  .xl\:opacity-100{
    opacity: 1;
  }
  .xl\:\[--tuck\:min\(9\.27vw\2c 178px\)\]{
    --tuck: min(9.27vw, 178px);
  }
  .xl\:\[clip-path\:polygon\(0_0\2c 100\%_172px\2c 100\%_100\%\2c 0_100\%\)\]{
    clip-path: polygon(0 0,100% 172px,100% 100%,0 100%);
  }
  .xl\:\[clip-path\:polygon\(0_0\2c 100\%_min\(9\.27vw\2c 178px\)\2c 100\%_calc\(100\%_-_min\(9\.27vw\2c 178px\)\)\2c 0_100\%\)\]{
    clip-path: polygon(0 0,100% min(9.27vw, 178px),100% calc(100% - min(9.27vw, 178px)),0 100%);
  }
  .xl\:\[clip-path\:polygon\(0_178px\2c 100\%_0\2c 100\%_100\%\2c 0_100\%\)\]{
    clip-path: polygon(0 178px,100% 0,100% 100%,0 100%);
  }
  .xl\:\[clip-path\:polygon\(100\%_0\2c 0_178px\2c 0_100\%\2c 100\%_100\%\)\]{
    clip-path: polygon(100% 0,0 178px,0 100%,100% 100%);
  }
}
.peer:checked ~ .peer-checked\:\[\&\>span\]\:bg-brand-lightblue>span{
  --tw-bg-opacity: 1;
  background-color: rgb(61 109 220 / var(--tw-bg-opacity, 1));
}
.\[\&_p\:last-child\]\:mb-0 p:last-child{
  margin-bottom: 0px;
}
.\[\&_p\]\:mb-\[1\.5em\] p{
  margin-bottom: 1.5em;
}