@charset "utf-8";
@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@100..900&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Shippori+Mincho:wght@400;500;600;700;800&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@100..900&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Cormorant:wght@300..700&display=swap');
/*--------------------------------------------------------------------------------
  reset
--------------------------------------------------------------------------------*/
/*! destyle.css v4.0.1 | MIT License | https://github.com/nicolas-cusan/destyle.css */
*,:after,:before{box-sizing:border-box;border-style:solid;border-width:0;min-width:0}html{line-height:1.15;-webkit-text-size-adjust:100%;-webkit-tap-highlight-color:rgba(0,0,0,0)}body{margin:0}main{display:block}h1,h2,h3,h4,h5,h6{font-size:inherit;font-weight:inherit;margin:0}address,blockquote,dl,figure,form,iframe,ol,p,pre,table,ul{margin:0}ol,ul{padding:0;list-style:none}dt{font-weight:700}dd{margin-left:0}hr{box-sizing:content-box;height:0;overflow:visible;border-top-width:1px;margin:0;clear:both;color:inherit}pre{font-family:monospace;font-size:inherit}address{font-style:inherit}a{background-color:transparent;text-decoration:none;color:inherit}abbr[title]{text-decoration:underline dotted}b,strong{font-weight:bolder}code,kbd,samp{font-family:monospace;font-size:inherit}small{font-size:80%}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline}sub{bottom:-.25em}sup{top:-.5em}embed,iframe,img,object,svg{vertical-align:bottom}button,input,optgroup,select,textarea{-webkit-appearance:none;appearance:none;vertical-align:middle;color:inherit;font:inherit;background:transparent;padding:0;margin:0;border-radius:0;text-align:inherit;text-transform:inherit}[type=button],[type=reset],[type=submit],button{cursor:pointer}[type="button"]:disabled,[type="reset"]:disabled,[type="submit"]:disabled,button:disabled{cursor:default}:-moz-focusring{outline:auto}select:disabled{opacity:inherit}fieldset,option{padding:0}fieldset{margin:0;min-width:0}legend{padding:0}progress{vertical-align:baseline}textarea{overflow:auto}[type="number"]::-webkit-inner-spin-button,[type="number"]::-webkit-outer-spin-button{height:auto}[type=search]{outline-offset:-2px}[type="search"]::-webkit-search-decoration{-webkit-appearance:none}::-webkit-file-upload-button{-webkit-appearance:button;font:inherit}[type=number]{-moz-appearance:textfield}label[for]{cursor:pointer}details{display:block}summary{display:list-item}[contenteditable]:focus{outline:auto}table{border-color:inherit;border-collapse:collapse}caption{text-align:left}td,th{vertical-align:top;padding:0}th{text-align:left;font-weight:700}
a:focus,button:focus,input:focus,select:focus,textarea:focus{outline:none;}

/*--------------------------------------------------------------------------------
  base
--------------------------------------------------------------------------------*/
:root {
  --pc-min-width: 1100;
  --base-width: 1300;

  /* body */
  --bg-color: #FFF;
  --txt-color: #282828;
  
  /* font */
  --ff-go: 'Noto Sans JP', sans-serif;
  --ff-min: 'Shippori Mincho', serif;
  --ff-en: 'Cormorant', serif;
  
  /* link color */
  --link-color: var(--color-primary);
  --link-color-hover: var(--color-secondary);
  --link-deco: underline;
  --link-deco-hover: none;

  /* primary color(blue) */
  --color-primary-dark: #1482D2;
  --color-primary: #3296E1;
  --color-primary-light: #46AAF5;
  --color-primary-lighter: #5FB9FA;
  --color-primary-lightest: #F2F8FD;
  /* pale */
  --pale-color-primary: #82C8FC;
  --pale-color-primary-light: #9ED4FC;
  --pale-color-primary-lighter: #C7E6FD;
  --pale-color-primary-lightest: #E8F9FD;
  
  /* secondary color(light blue) */
  --color-secondary-dark: #14B4E6;
  --color-secondary: #41C3F0;
  --color-secondary-light: #5FD2FA;
  --color-secondary-lighter: #80DCFC;
  
  /* tertiary color(navy) */
  --color-tertiary-dark: #2E404E;
  --rgb-tertiary-dark: 46,64,78;
  --color-tertiary: #3A4A58;
  --color-tertiary-light: #505F6E;
  --color-tertiary-lighter: #647382;
  
  /* quaternary color(yellow) */
  --color-quaternary: #FFCD4B;
  /* pale */
  --pale-color-quaternary: #FCDE8E;
  --pale-color-quaternary-light: #FCE6AC;
  --pale-color-quaternary-lighter: #FCF2CD;
  --pale-color-quaternary-lightest: #FDFAE8;
  
  /* quinary color */
  --color-quinary: #f99a5a;
  
  /* senary color */
  --color-senary: ;
  
  /* red color */
  --color-red: #E65064;
  --color-red-light: #FA697D;
  --color-red-lighter: #FF8291;
  /* pale */
  --pale-color-red: #FFB6C0;
  --pale-color-red-light: #FECDD4;
  --pale-color-red-lighter: #FEE1E2;
  --pale-color-red-lightest: #FFF2F4;
  
  /* gray color */
  --color-gray-dark: #869198;
  --rgb-gray-dark: 134,145,152;
  --color-gray: #B6BDC1;
  --color-gray-light: #C8CDD1;
  --color-gray-lighter: #DADEE0;
  --color-gray-lighter2: #E9EBEC;
  --color-gray-lightest: #F4F6F8;
  
  /* border color */
  --border-color: var(--color-gray-lighter);
  --border-color-light: var(--color-gray-lighter2);
  
  --cubic-bezier: cubic-bezier(.23,1,.32,1);
  --hover-trans: color 0.2s ease-in-out, opacity 0.2s ease-in-out, background 0.2s ease-in-out, border 0.15s ease-in-out, fill 0.2s ease-in-out, filter 0.2s ease-in-out, transform 0.2s ease-in-out;
}

body { font-family: 'Roboto','Helvetica Neue',Arial,'Hiragino Kaku Gothic ProN','Hiragino Sans','BIZ UDPGothic',Meiryo,sans-serif; }
.u-ff-go { font-family: var(--ff-go); }
.u-ff-min { font-family: var(--ff-min); }
.u-ff-en { font-family: var(--ff-en); }

html, body { height: 100%; }
@media (min-width: 761px) { body { min-width: calc(var(--pc-min-width) * 1px); } }
body {
  font-weight: 400;
  word-wrap: break-word;
  line-height: var(--line-height);
  background-color: var(--bg-color);
  color: var(--txt-color);
}

/* side space
----------------------------------------*/
:root {
  --side-space-unit-max: 40;
}
@media (min-width: 761px) {
  :root {
    --side-space-unit-min: 40px;
    --side-space-break-point: var(--base-width);
  }
}
@media (max-width: 760px) {
  :root {
    --side-space-unit-min: 1rem;
    --side-space-break-point: var(--pc-min-width);
  }
}
:root {
  --side-space: clamp((var(--side-space-unit-min) * 1), (var(--side-space-unit-max) / var(--side-space-break-point) * 100vw), var(--side-space-unit-max) * 1px);
}
  
/* space
----------------------------------------*/
@media (min-width: 761px) {
  :root {
    --space-unit-max: 15;
    --space-unit-mag: 1.5;
    /*--space-unit-min: calc((var(--space-unit-max) * var(--space-unit-mag)) * 1px);*/
    --space-unit-min: calc((((var(--space-unit-max) * var(--space-unit-mag)) / var(--base-width)) * var(--pc-min-width)) * 1px);
    --space-break-point: var(--base-width);
  }
}
@media (max-width: 760px) {
  :root {
    --space-unit-max: 12.5;
    --space-unit-mag: 1.25;
    --space-unit-min: 0.75rem;
    --space-break-point: 400;
  }
}
@media (max-width: 600px) {
  :root { --space-unit-mag: 1; }
}
:root {
  --space-4l: clamp((var(--space-unit-min) * 7), ((var(--space-unit-max) * (7 * var(--space-unit-mag))) / var(--space-break-point) * 100vw), (var(--space-unit-max) * (7 * var(--space-unit-mag))) * 1px);
  --space-3l: clamp((var(--space-unit-min) * 6), ((var(--space-unit-max) * (6 * var(--space-unit-mag))) / var(--space-break-point) * 100vw), (var(--space-unit-max) * (6 * var(--space-unit-mag))) * 1px);
  --space-2l: clamp((var(--space-unit-min) * 5), ((var(--space-unit-max) * (5 * var(--space-unit-mag))) / var(--space-break-point) * 100vw), (var(--space-unit-max) * (5 * var(--space-unit-mag))) * 1px);
  --space-l: clamp((var(--space-unit-min) * 4), ((var(--space-unit-max) * (4 * var(--space-unit-mag))) / var(--space-break-point) * 100vw), (var(--space-unit-max) * (4 * var(--space-unit-mag))) * 1px);
  --space-m: clamp((var(--space-unit-min) * 3), ((var(--space-unit-max) * (3 * var(--space-unit-mag))) / var(--space-break-point) * 100vw), (var(--space-unit-max) * (3 * var(--space-unit-mag))) * 1px);
  --space-s: clamp((var(--space-unit-min) * 2.5), ((var(--space-unit-max) * (2 * var(--space-unit-mag))) / var(--space-break-point) * 100vw), (var(--space-unit-max) * (2 * var(--space-unit-mag))) * 1px);
  --space-2s: clamp((var(--space-unit-min) * 2), ((var(--space-unit-max) * (1.5 * var(--space-unit-mag))) / var(--space-break-point) * 100vw), (var(--space-unit-max) * (1.5 * var(--space-unit-mag))) * 1px);
  --space-3s: clamp((var(--space-unit-min) * 1.5), ((var(--space-unit-max) * (1 * var(--space-unit-mag))) / var(--space-break-point) * 100vw), (var(--space-unit-max) * (1 * var(--space-unit-mag))) * 1px);
}

/* box space */
@media (min-width: 761px) {
  :root {
    --box-space-unit-max: 15;
    --box-space-unit-mag: 1.25;
    /*--box-space-unit-min: calc((var(--box-space-unit-max) * var(--box-space-unit-mag)) * 1px);*/
    --box-space-unit-min: calc((((var(--box-space-unit-max) * var(--box-space-unit-mag)) / var(--base-width)) * var(--pc-min-width)) * 1px);
    --box-space-break-point: var(--base-width);
  }
}
@media (max-width: 760px) {
  :root {
    --box-space-unit-max: 10;
    --box-space-unit-mag: 1.25;
    --box-space-unit-min: 0.75rem;
    --box-space-break-point: 400;
  }
}
@media (max-width: 600px) {
  :root { --box-space-unit-mag: 1; }
}
:root {
  --box-space-2l: clamp((var(--box-space-unit-min) * 4), ((var(--box-space-unit-max) * (4 * var(--box-space-unit-mag))) / var(--box-space-break-point) * 100vw), (var(--box-space-unit-max) * (4 * var(--box-space-unit-mag))) * 1px);
  --box-space-l: clamp((var(--box-space-unit-min) * 3), ((var(--box-space-unit-max) * (3 * var(--box-space-unit-mag))) / var(--box-space-break-point) * 100vw), (var(--box-space-unit-max) * (3 * var(--box-space-unit-mag))) * 1px);
  --box-space-m: clamp((var(--box-space-unit-min) * 2), ((var(--box-space-unit-max) * (2 * var(--box-space-unit-mag))) / var(--box-space-break-point) * 100vw), (var(--box-space-unit-max) * (2 * var(--box-space-unit-mag))) * 1px);
  --box-space-s: clamp((var(--box-space-unit-min) * 1.5), ((var(--box-space-unit-max) * (1.5 * var(--box-space-unit-mag))) / var(--box-space-break-point) * 100vw), (var(--box-space-unit-max) * (1.5 * var(--box-space-unit-mag))) * 1px);
  --box-space-2s: clamp((var(--box-space-unit-min) * 1), ((var(--box-space-unit-max) * (1 * var(--box-space-unit-mag))) / var(--box-space-break-point) * 100vw), (var(--box-space-unit-max) * (1 * var(--box-space-unit-mag))) * 1px);
}

/* font size
----------------------------------------*/
:root {
  --line-height: 1.8;
  --line-height-s: 1.6;
  --line-height-2s: 1.4;
}
@media (min-width: 761px) {
  :root {
    --fs-break-point: var(--pc-min-width);
    --fs-break-point-max: var(--base-width);
    --fs-break-point-min: var(--pc-min-width);
    --fs-min: 16;
    --fs-max: 17;
    --fs-type-scale: 1.22;
    --line-height-l: 2;
  }
}
@media (max-width: 760px) {
  :root {
    --fs-break-point: 0;
    --fs-break-point-max: 600;
    --fs-break-point-min: calc(var(--fs-break-point-max) - 400);
    --fs-min: 0;
    --fs-max: 17;
    --fs-type-scale: 1.18;
  }
}
@media (max-width: 600px) {
  :root {
    --fs-max: 16;
    --fs-type-scale: 1.16;
    --line-height-l: 1.8;
    --line-height: 1.7;
    --line-height-s: 1.5;
  }
}
:root {
  --fs-ratio: calc((var(--fs-max) - var(--fs-min)) / (var(--fs-break-point-max) - var(--fs-break-point-min)));
  --fs-3s: 0.7em;
  --fs-2s: 0.8em;
  --fs-s: 0.9em;
  --fs-n: 1em;
  --fs-m: calc(var(--fs-n) + ((var(--fs-l) - var(--fs-n)) / 2));
  --fs-l: calc(var(--fs-n) * var(--fs-type-scale));
  --fs-2l: calc(var(--fs-l) * var(--fs-type-scale));
  --fs-3l: calc(var(--fs-2l) * var(--fs-type-scale));
  --fs-4l: calc(var(--fs-3l) * var(--fs-type-scale));
  --fs-5l: calc(var(--fs-4l) * var(--fs-type-scale));
  --fs-6l: calc(var(--fs-5l) * var(--fs-type-scale));
  
  --fs-3s-rem: 0.7rem;
  --fs-2s-rem: 0.8rem;
  --fs-s-rem: 0.9rem;
  --fs-n-rem: 1rem;
  --fs-m-rem: calc(var(--fs-n-rem) + ((var(--fs-l-rem) - var(--fs-n-rem)) / 2));
  --fs-l-rem: calc(var(--fs-n-rem) * var(--fs-type-scale));
  --fs-2l-rem: calc(var(--fs-l-rem) * var(--fs-type-scale));
  --fs-3l-rem: calc(var(--fs-2l-rem) * var(--fs-type-scale));
  --fs-4l-rem: calc(var(--fs-3l-rem) * var(--fs-type-scale));
  --fs-5l-rem: calc(var(--fs-4l-rem) * var(--fs-type-scale));
  --fs-6l-rem: calc(var(--fs-5l-rem) * var(--fs-type-scale));
}
html { font-size: clamp((var(--fs-min) * 1px), (100vw - calc(var(--fs-break-point) * 1px)) * var(--fs-ratio) + (var(--fs-min) * 1px), (var(--fs-max) * 1px)); }

.u-fs-6l { font-size: var(--fs-6l); }
.u-fs-5l { font-size: var(--fs-5l); }
.u-fs-4l { font-size: var(--fs-4l); }
.u-fs-3l { font-size: var(--fs-3l); }
.u-fs-2l { font-size: var(--fs-2l); }
.u-fs-l { font-size: var(--fs-l); }
.u-fs-m { font-size: var(--fs-m); }
.u-fs-n { font-size: var(--fs-n); }
.u-fs-s { font-size: var(--fs-s); line-height: var(--line-height); }
small, .u-fs-2s { font-size: var(--fs-2s); line-height: var(--line-height); }
.u-fs-3s { font-size: var(--fs-3s); line-height: var(--line-height); }

.u-fs-6l-rem { font-size: var(--fs-6l-rem); }
.u-fs-5l-rem { font-size: var(--fs-5l-rem); }
.u-fs-4l-rem { font-size: var(--fs-4l-rem); }
.u-fs-3l-rem { font-size: var(--fs-3l-rem); }
.u-fs-2l-rem { font-size: var(--fs-2l-rem); }
.u-fs-l-rem { font-size: var(--fs-l-rem); }
.u-fs-m-rem { font-size: var(--fs-m-rem); }
.u-fs-n-rem { font-size: var(--fs-n-rem); }
.u-fs-s-rem { font-size: var(--fs-s-rem); line-height: var(--line-height); }
.u-fs-2s-rem { font-size: var(--fs-2s-rem); line-height: var(--line-height); }
.u-fs-3s-rem { font-size: var(--fs-3s-rem); line-height: var(--line-height); }

/* text
----------------------------------------*/
.u-line1 { line-height: 1; }
.u-line-l { line-height: var(--line-height-l); }
.u-line-n { line-height: var(--line-height); }
.u-line-s { line-height: var(--line-height-s); }
.u-line-2s { line-height: var(--line-height-2s); }

.u-txt-left { text-align: left; }
.u-txt-center { text-align: center; }
.u-txt-right { text-align: right; }

.u-fw-9 { font-weight: 900; }
.u-fw-8 { font-weight: 800; }
.u-fw-7 { font-weight: 700; }
.u-fw-6 { font-weight: 600; }
.u-fw-5 { font-weight: 500; }
.u-fw-4 { font-weight: 400; }
.u-fw-3 { font-weight: 300; }
.u-fw-b { font-weight: bold; }
.u-fw-n { font-weight: normal; }

.u-fc-primary, a.u-fc-primary:hover { color: var(--color-primary); }
.u-fc-secondary, a.u-fc-secondary:hover { color: var(--color-secondary); }
.u-fc-tertiary, a.u-fc-tertiary:hover { color: var(--color-tertiary); }
.u-fc-quaternary, a.u-fc-quaternary:hover { color: var(--color-quaternary); }
.u-fc-quinary, a.u-fc-quinary:hover { color: var(--color-quinary); }
.u-fc-senary, a.u-fc-senary:hover { color: var(--color-senary); }

.u-fc-normal, a.u-fc-normal:hover { color: var(--txt-color); }
.u-fc-blue, a.u-fc-blue:hover { color: var(--color-primary); }
.u-fc-lblue, a.u-fc-lblue:hover { color: var(--color-secondary); }
.u-fc-yellow, a.u-fc-yellow:hover { color: var(--color-quaternary); }
.u-fc-red, a.u-fc-red:hover { color: var(--color-red); }
.u-fc-gray, a.u-fc-gray:hover { color: var(--color-gray-dark); }

.u-cap { font-size: var(--fs-s); display: block; line-height: var(--line-height-s); padding-top: 0.75em; }
@media (max-width: 760px) { .u-cap { font-size: var(--fs-2s); } }
.u-block { display: block; }
.u-no-break:not(.-pc) { display: inline-block; }
.u-keep-break:not(.-pc) { word-break: keep-all; overflow-wrap: anywhere; }
@media (min-width: 761px) {
  .u-no-break.-pc { display: inline-block; }
  .u-keep-break.-pc { word-break: keep-all; overflow-wrap: anywhere; }
}

/* link
----------------------------------------*/
.js_linkblock:has(a) { cursor: pointer; }
a { outline: none; transition: var(--hover-trans); }
a, a:hover { color: var(--link-color); text-decoration: var(--link-deco); }

@media (hover: hover) {
  a:hover, .js_linkblock:hover a:not(.js_linkblock-exclink) { color: var(--link-color-hover); text-decoration: var(--link-deco-hover); }
  .u-alpha, .u-alpha-img { transition: opacity 0.2s ease-in-out; }
  .u-alpha:hover, a:hover .u-alpha-img,
  .js_linkblock:hover .u-alpha, .js_linkblock:hover .u-alpha-img { opacity: 0.6; }
}

.u-zoom { display: block; }
.u-zoom,
.u-zoom:hover { text-decoration: none; }
.u-zoom_img { display: block; overflow: hidden; }
.u-zoom_img img { transition: transform 1s var(--cubic-bezier), filter 0.3s ease-in-out; }
@media (hover: hover) { .u-zoom:hover .u-zoom_img img { transform: scale(1.08); } }

@media (hover: hover) {
  a[href^="tel:"] { pointer-events: none; cursor: default; }
  a[href^="tel:"], a[href^="tel:"]:hover { color: inherit; text-decoration: none; }
}
@media (hover: none) {
  a[href^="tel:"] {
    color: var(--link-color, inherit);
    text-decoration: var(--link-deco, none);
  }
}

/* img
----------------------------------------*/
img { max-width: 100%; height: auto; }
.u-img-cover { width: 100%; height: 100%; object-fit: cover; }

/* clear both
----------------------------------------*/
.u-clear:after { content: ""; display: block; height: 0; clear: both; }

/* responsive
----------------------------------------*/
.js_rps-tbl,
.js_rps-block { overflow: hidden; }
@media (min-width: 761px) { .u-sp-only { display: none !important; } }
@media (min-width: 601px) { .u-sp2-only { display: none !important; } }
@media (max-width: 760px) { .u-pc-only { display: none !important; } }

/* accordion
----------------------------------------*/
.js_acod-trigger { cursor: pointer; }
.js_acod-item { display: none; opacity: 0; transition: opacity 0.15s ease-out; }
.js_acod-item.is-active { opacity: 1; }

/* tab
----------------------------------------*/
.js_tab-content { display: none; }
@media (min-width: 761px) { .js_tab.tab-sp-only .js_tab-content { display: block !important; } }
@media (max-width: 760px) { .js_tab.tab-pc-only .js_tab-content { display: block !important; } }

/* scroll-x
----------------------------------------*/
.u-scroll-x { overflow-x: auto; }


/* ruby
----------------------------------------*/
rt { display: none; }
[data-ruby] { position: relative; }
[data-ruby]:before {
  content: attr(data-ruby);
  position: absolute;
  top: -1.5em;
  left: 50%;
  transform: translateX(-50%);
  white-space: nowrap;
  margin: auto;
  font-size: var(--fs-2s-rem);
}

/* sub sup
----------------------------------------*/
sub, sup {
  font-size: 70%;
  display: inline-block;
  margin: 0 0.25rem;
}

/* fancybox
----------------------------------------*/
:root { --fancybox-zIndex: 9999; }
.fancybox-slide--html { padding: var(--side-space) !important; }
.fancybox-container * { transition: none; }
.fancybox__container { --fancybox-bg: rgba(24, 24, 27, 0.9) !important; }
.fancybox__caption { text-align: center; }

/* swiper
----------------------------------------*/
.swiper-slide { height: auto !important; }
.swiper-scrollbar,
.swiper-scrollbar-horizontal,
.swiper-scrollbar-drag {
  height: 3px !important;
  border-radius: 0 !important;
}
.swiper-scrollbar { background: var(--border-color) !important; display: none; }
.swiper-scrollbar-drag { background: var(--color-primary) !important; }
.swiper-scrollbar.swiper-scrollbar-horizontal { display: inherit; }

/* slick
----------------------------------------*/
.slick-list,
.slick-track { width: 100%; height: 100%; }
.slick-list { padding: 0 0 !important; }

/* gap
----------------------------------------*/
.u-gap-4l { gap: var(--space-4l); }
.u-gap-3l { gap: var(--space-3l); }
.u-gap-2l { gap: var(--space-2l); }
.u-gap-l { gap: var(--space-l); }
.u-gap-m { gap: var(--space-m); }
.u-gap-s { gap: var(--space-s); }
.u-gap-2s { gap: var(--space-2s); }
.u-gap-3s { gap: var(--space-3s); }

.u-gap0 { gap: 0; }
.u-gap-h2 { gap: 0.25rem; }
.u-gap-h { gap: 0.5rem; }
.u-gap-1 { gap: 1rem; }
.u-gap-1h { gap: 1.5rem; }
.u-gap-1h { gap: 1.5rem; }
.u-gap-2 { gap: 2rem; }
.u-gap-2h { gap: 2.5rem; }
.u-gap-3 { gap: 3.5rem; }
.u-gap-3h { gap: 3.5rem; }

.u-gap-h2-em { gap: 0.25em; }
.u-gap-h-em { gap: 0.5em; }
.u-gap-1-em { gap: 1em; }
.u-gap-1h-em { gap: 1.5em; }
.u-gap-2-em { gap: 2em; }
.u-gap-2h-em { gap: 2.5em; }
.u-gap-3-em { gap: 3.5em; }
.u-gap-3h-em { gap: 3.5em; }

.u-cgap-4l { column-gap: var(--space-4l); }
.u-cgap-3l { column-gap: var(--space-3l); }
.u-cgap-2l { column-gap: var(--space-2l); }
.u-cgap-l { column-gap: var(--space-l); }
.u-cgap-m { column-gap: var(--space-m); }
.u-cgap-s { column-gap: var(--space-s); }
.u-cgap-2s { column-gap: var(--space-2s); }
.u-cgap-3s { column-gap: var(--space-3s); }

.u-cgap0 { column-gap: 0; }
.u-cgap-h2 { column-gap: 0.25rem; }
.u-cgap-h { column-gap: 0.5rem; }
.u-cgap-1 { column-gap: 1rem; }
.u-cgap-1h { column-gap: 1.5rem; }
.u-cgap-2 { column-gap: 2rem; }
.u-cgap-2h { column-gap: 2.5rem; }
.u-cgap-3 { column-gap: 3.5rem; }
.u-cgap-3h { column-gap: 3.5rem; }

.u-cgap-h2-em { column-gap: 0.25em; }
.u-cgap-h-em { column-gap: 0.5em; }
.u-cgap-1-em { column-gap: 1em; }
.u-cgap-1h-em { column-gap: 1.5em; }
.u-cgap-2-em { column-gap: 2em; }
.u-cgap-2h-em { column-gap: 2.5em; }
.u-cgap-3-em { column-gap: 3.5em; }
.u-cgap-3h-em { column-gap: 3.5em; }

.u-rgap-4l { row-gap: var(--space-4l); }
.u-rgap-3l { row-gap: var(--space-3l); }
.u-rgap-2l { row-gap: var(--space-2l); }
.u-rgap-l { row-gap: var(--space-l); }
.u-rgap-m { row-gap: var(--space-m); }
.u-rgap-s { row-gap: var(--space-s); }
.u-rgap-2s { row-gap: var(--space-2s); }
.u-rgap-3s { row-gap: var(--space-3s); }

.u-rgap0 { row-gap: 0; }
.u-rgap-h2 { row-gap: 0.25rem; }
.u-rgap-h { row-gap: 0.5rem; }
.u-rgap-1 { row-gap: 1rem; }
.u-rgap-1h { row-gap: 1.5rem; }
.u-rgap-2 { row-gap: 2rem; }
.u-rgap-2h { row-gap: 2.5rem; }
.u-rgap-3 { row-gap: 3.5rem; }
.u-rgap-3h { row-gap: 3.5rem; }

.u-rgap-h2-em { row-gap: 0.25em; }
.u-rgap-h-em { row-gap: 0.5em; }
.u-rgap-1-em { row-gap: 1em; }
.u-rgap-1h-em { row-gap: 1.5em; }
.u-rgap-2-em { row-gap: 2em; }
.u-rgap-2h-em { row-gap: 2.5em; }
.u-rgap-3-em{ row-gap: 3.5em; }
.u-rgap-3h-em { row-gap: 3.5em; }

/* margin
----------------------------------------*/
.u-mgt-4l { margin-top: var(--space-4l); }
.u-mgt-3l { margin-top: var(--space-3l); }
.u-mgt-2l { margin-top: var(--space-2l); }
.u-mgt-l { margin-top: var(--space-l); }
.u-mgt-m { margin-top: var(--space-m); }
.u-mgt-s { margin-top: var(--space-s); }
.u-mgt-2s { margin-top: var(--space-2s); }
.u-mgt-3s { margin-top: var(--space-3s); }
.u-mgb-4l { margin-bottom: var(--space-4l); }
.u-mgb-3l { margin-bottom: var(--space-3l); }
.u-mgb-2l { margin-bottom: var(--space-2l); }
.u-mgb-l { margin-bottom: var(--space-l); }
.u-mgb-m { margin-bottom: var(--space-m); }
.u-mgb-s { margin-bottom: var(--space-s); }
.u-mgb-2s { margin-bottom: var(--space-2s); }
.u-mgb-3s { margin-bottom: var(--space-3s); }
.u-mgl-4l { margin-left: var(--space-4l); }
.u-mgl-3l { margin-left: var(--space-3l); }
.u-mgl-2l { margin-left: var(--space-2l); }
.u-mgl-l { margin-left: var(--space-l); }
.u-mgl-m { margin-left: var(--space-m); }
.u-mgl-s { margin-left: var(--space-s); }
.u-mgl-2s { margin-left: var(--space-2s); }
.u-mgl-3s { margin-left: var(--space-3s); }
.u-mgr-4l { margin-right: var(--space-4l); }
.u-mgr-3l { margin-right: var(--space-3l); }
.u-mgr-2l { margin-right: var(--space-2l); }
.u-mgr-l { margin-right: var(--space-l); }
.u-mgr-m { margin-right: var(--space-m); }
.u-mgr-s { margin-right: var(--space-s); }
.u-mgr-2s { margin-right: var(--space-2s); }
.u-mgr-3s { margin-right: var(--space-3s); }

.u-mgt-h2 { margin-top: 0.25rem; }
.u-mgt-h { margin-top: 0.5rem; }
.u-mgt-1 { margin-top: 1rem; }
.u-mgt-1h { margin-top: 1.5rem; }
.u-mgt-2 { margin-top: 2rem; }
.u-mgt-2h { margin-top: 2.5rem; }
.u-mgt-3 { margin-top: 3rem; }
.u-mgb-h2 { margin-bottom: 0.25rem; }
.u-mgb-h { margin-bottom: 0.5rem; }
.u-mgb-1 { margin-bottom: 1rem; }
.u-mgb-1h { margin-bottom: 1.5rem; }
.u-mgb-2 { margin-bottom: 2rem; }
.u-mgb-2h { margin-bottom: 2.5rem; }
.u-mgb-3 { margin-bottom: 3rem; }
.u-mgl-h2 { margin-left: 0.25rem; }
.u-mgl-h { margin-left: 0.5rem; }
.u-mgl-1 { margin-left: 1rem; }
.u-mgl-1h { margin-left: 1.5rem; }
.u-mgl-2 { margin-left: 2rem; }
.u-mgl-2h { margin-left: 2.5rem; }
.u-mgl-3 { margin-left: 3rem; }
.u-mgr-h2 { margin-right: 0.25rem; }
.u-mgr-h { margin-right: 0.5rem; }
.u-mgr-1 { margin-right: 1rem; }
.u-mgr-1h { margin-right: 1.5rem; }
.u-mgr-2 { margin-right: 2rem; }
.u-mgr-2h { margin-right: 2.5rem; }
.u-mgr-3 { margin-right: 3rem; }

.u-mgt-h2-em { margin-top: 0.25em; }
.u-mgt-h-em { margin-top: 0.5em; }
.u-mgt-1-em { margin-top: 1em; }
.u-mgt-1h-em { margin-top: 1.5em; }
.u-mgt-2-em { margin-top: 2em; }
.u-mgt-2h-em { margin-top: 2.5em; }
.u-mgt-3-em { margin-top: 3em; }
.u-mgb-h2-em { margin-bottom: 0.25em; }
.u-mgb-h-em { margin-bottom: 0.5em; }
.u-mgb-1-em { margin-bottom: 1em; }
.u-mgb-1h-em { margin-bottom: 1.5em; }
.u-mgb-2-em { margin-bottom: 2em; }
.u-mgb-2h-em { margin-bottom: 2.5em; }
.u-mgb-3-em { margin-bottom: 3em; }
.u-mgl-h2-em { margin-left: 0.25em; }
.u-mgl-h-em { margin-left: 0.5em; }
.u-mgl-1-em { margin-left: 1em; }
.u-mgl-1h-em { margin-left: 1.5em; }
.u-mgl-2-em { margin-left: 2em; }
.u-mgl-2h-em { margin-left: 2.5em; }
.u-mgl-3-em { margin-left: 3em; }
.u-mgr-h2-em { margin-right: 0.25em; }
.u-mgr-h-em { margin-right: 0.5em; }
.u-mgr-1-em { margin-right: 1em; }
.u-mgr-1h-em { margin-right: 1.5em; }
.u-mgr-2-em { margin-right: 2em; }
.u-mgr-2h-em { margin-right: 2.5em; }
.u-mgr-3-em { margin-right: 3em; }

.u-mgtb-4l { margin-top: var(--space-4l); margin-bottom: var(--space-4l); }
.u-mgtb-3l { margin-top: var(--space-3l); margin-bottom: var(--space-3l); }
.u-mgtb-2l { margin-top: var(--space-2l); margin-bottom: var(--space-2l); }
.u-mgtb-l { margin-top: var(--space-l); margin-bottom: var(--space-l); }
.u-mgtb-m { margin-top: var(--space-m); margin-bottom: var(--space-m); }
.u-mgtb-s { margin-top: var(--space-s); margin-bottom: var(--space-s); }
.u-mgtb-2s { margin-top: var(--space-2s); margin-bottom: var(--space-2s); }
.u-mgtb-3s { margin-top: var(--space-3s); margin-bottom: var(--space-3s); }

.u-mglr-4l { margin-left: var(--space-4l); margin-right: var(--space-4l); }
.u-mglr-3l { margin-left: var(--space-3l); margin-right: var(--space-3l); }
.u-mglr-2l { margin-left: var(--space-2l); margin-right: var(--space-2l); }
.u-mglr-l { margin-left: var(--space-l); margin-right: var(--space-l); }
.u-mglr-m { margin-left: var(--space-m); margin-right: var(--space-m); }
.u-mglr-s { margin-left: var(--space-s); margin-right: var(--space-s); }
.u-mglr-2s { margin-left: var(--space-2s); margin-right: var(--space-2s); }
.u-mglr-3s { margin-left: var(--space-3s); margin-right: var(--space-3s); }

.u-mgtb-h2 { margin-top: 0.25rem; margin-bottom: 0.25rem; }
.u-mgtb-h { margin-top: 0.5rem; margin-bottom: 0.5rem; }
.u-mgtb-1 { margin-top: 1rem; margin-bottom: 1rem; }
.u-mgtb-1h { margin-top: 1.5rem; margin-bottom: 1.5rem; }
.u-mgtb-2 { margin-top: 2rem; margin-bottom: 2rem; }
.u-mgtb-2h { margin-top: 2.5rem; margin-bottom: 2.5rem; }
.u-mgtb-3 { margin-top: 3rem; margin-bottom: 3rem; }

.u-mglr-h2 { margin-left: 0.25rem; margin-right: 0.25rem; }
.u-mglr-h { margin-left: 0.5rem; margin-right: 0.5rem; }
.u-mglr-1 { margin-left: 1rem; margin-right: 1rem; }
.u-mglr-1h { margin-left: 1.5rem; margin-right: 1.5rem; }
.u-mglr-2 { margin-left: 2rem; margin-right: 2rem; }
.u-mglr-2h { margin-left: 2.5rem; margin-right: 2.5rem; }
.u-mglr-3 { margin-left: 3rem; margin-right: 3rem; }

.u-mgtb-h2-em { margin-top: 0.25em; margin-bottom: 0.25em; }
.u-mgtb-h-em { margin-top: 0.5em; margin-bottom: 0.5em; }
.u-mgtb-1-em { margin-top: 1em; margin-bottom: 1em; }
.u-mgtb-1h-em { margin-top: 1.5em; margin-bottom: 1.5em; }
.u-mgtb-2-em { margin-top: 2em; margin-bottom: 2em; }
.u-mgtb-2h-em { margin-top: 2.5em; margin-bottom: 2.5em; }
.u-mgtb-3-em { margin-top: 3em; margin-bottom: 3em; }

.u-mglr-h2-em { margin-left: 0.25em; margin-right: 0.25em; }
.u-mglr-h-em { margin-left: 0.5em; margin-right: 0.5em; }
.u-mglr-1-em { margin-left: 1em; margin-right: 1em; }
.u-mglr-1h-em { margin-left: 1.5em; margin-right: 1.5em; }
.u-mglr-2-em { margin-left: 2em; margin-right: 2em; }
.u-mglr-2h-em { margin-left: 2.5em; margin-right: 2.5em; }
.u-mglr-3-em { margin-left: 3em; margin-right: 3em; }

.u-mg-h2 { margin: 0.25rem; }
.u-mg-h { margin: 0.5rem; }
.u-mg-1 { margin: 1rem; }
.u-mg-1h { margin: 1.5rem; }
.u-mg-2 { margin: 2rem; }
.u-mg-2h { margin: 2.5rem; }
.u-mg-3 { margin: 3rem; }

.u-mg-h2-em { marginmargin: 0.25em; }
.u-mg-h-em { marginmargin: 0.5em; }
.u-mg-1-em { padding: 1em; }
.u-mg-1h-em { margin: 1.5em; }
.u-mg-2-em { margin: 2em; }
.u-mg-2h-em { margin: 2.5em; }
.u-mg-3-em { margin: 3em; }

.u-mg-side-space { margin-left: var(--side-space); margin-right: var(--side-space); }
.u-mg-side-auto { margin-inline: auto; }

/* padding
----------------------------------------*/
.u-pdt-4l { padding-top: var(--space-4l); }
.u-pdt-3l { padding-top: var(--space-3l); }
.u-pdt-2l { padding-top: var(--space-2l); }
.u-pdt-l { padding-top: var(--space-l); }
.u-pdt-m { padding-top: var(--space-m); }
.u-pdt-s { padding-top: var(--space-s); }
.u-pdt-2s { padding-top: var(--space-2s); }
.u-pdt-3s { padding-top: var(--space-3s); }
.u-pdb-4l { padding-bottom: var(--space-4l); }
.u-pdb-3l { padding-bottom: var(--space-3l); }
.u-pdb-2l { padding-bottom: var(--space-2l); }
.u-pdb-l { padding-bottom: var(--space-l); }
.u-pdb-m { padding-bottom: var(--space-m); }
.u-pdb-s { padding-bottom: var(--space-s); }
.u-pdb-2s { padding-bottom: var(--space-2s); }
.u-pdb-3s { padding-bottom: var(--space-3s); }
.u-pdl-4l { padding-left: var(--space-4l); }
.u-pdl-3l { padding-left: var(--space-3l); }
.u-pdl-2l { padding-left: var(--space-2l); }
.u-pdl-l { padding-left: var(--space-l); }
.u-pdl-m { padding-left: var(--space-m); }
.u-pdl-s { padding-left: var(--space-s); }
.u-pdl-2s { padding-left: var(--space-2s); }
.u-pdl-3s { padding-left: var(--space-3s); }
.u-pdr-4l { padding-right: var(--space-4l); }
.u-pdr-3l { padding-right: var(--space-3l); }
.u-pdr-2l { padding-right: var(--space-2l); }
.u-pdr-l { padding-right: var(--space-l); }
.u-pdr-m { padding-right: var(--space-m); }
.u-pdr-s { padding-right: var(--space-s); }
.u-pdr-2s { padding-right: var(--space-2s); }
.u-pdr-3s { padding-right: var(--space-3s); }

.u-pdt-h2 { padding-top: 0.25rem; }
.u-pdt-h { padding-top: 0.5rem; }
.u-pdt-1 { padding-top: 1rem; }
.u-pdt-1h { padding-top: 1.5rem; }
.u-pdt-2 { padding-top: 2rem; }
.u-pdt-2h { padding-top: 2.5rem; }
.u-pdt-3 { padding-top: 3rem; }
.u-pdb-h2 { padding-bottom: 0.25rem; }
.u-pdb-h { padding-bottom: 0.5rem; }
.u-pdb-1 { padding-bottom: 1rem; }
.u-pdb-1h { padding-bottom: 1.5rem; }
.u-pdb-2 { padding-bottom: 2rem; }
.u-pdb-2h { padding-bottom: 2.5rem; }
.u-pdb-3 { padding-bottom: 3rem; }
.u-pdl-h2 { padding-left: 0.25rem; }
.u-pdl-h { padding-left: 0.5rem; }
.u-pdl-1 { padding-left: 1rem; }
.u-pdl-1h { padding-left: 1.5rem; }
.u-pdl-2 { padding-left: 2rem; }
.u-pdl-2h { padding-left: 2.5rem; }
.u-pdl-3 { padding-left: 3rem; }
.u-pdr-h2 { padding-right: 0.25rem; }
.u-pdr-h { padding-right: 0.5rem; }
.u-pdr-1 { padding-right: 1rem; }
.u-pdr-1h { padding-right: 1.5rem; }
.u-pdr-2 { padding-right: 2rem; }
.u-pdr-2h { padding-right: 2.5rem; }
.u-pdr-3 { padding-right: 3rem; }

.u-pdt-h2-em { padding-top: 0.25em; }
.u-pdt-h-em { padding-top: 0.5em; }
.u-pdt-1-em { padding-top: 1em; }
.u-pdt-1h-em { padding-top: 1.5em; }
.u-pdt-2-em { padding-top: 2em; }
.u-pdt-2h-em { padding-top: 2.5em; }
.u-pdt-3-em { padding-top: 3em; }
.u-pdb-h2-em { padding-bottom: 0.25em; }
.u-pdb-h-em { padding-bottom: 0.5em; }
.u-pdb-1-em { padding-bottom: 1em; }
.u-pdb-1h-em { padding-bottom: 1.5em; }
.u-pdb-2-em { padding-bottom: 2em; }
.u-pdb-2h-em { padding-bottom: 2.5em; }
.u-pdb-3-em { padding-bottom: 3em; }
.u-pdl-h2-em { padding-left: 0.25em; }
.u-pdl-h-em { padding-left: 0.5em; }
.u-pdl-1-em { padding-left: 1em; }
.u-pdl-1h-em { padding-left: 1.5em; }
.u-pdl-2-em { padding-left: 2em; }
.u-pdl-2h-em { padding-left: 2.5em; }
.u-pdl-3-em { padding-left: 3em; }
.u-pdr-h2-em { padding-right: 0.25em; }
.u-pdr-h-em { padding-right: 0.5em; }
.u-pdr-1-em { padding-right: 1em; }
.u-pdr-1h-em { padding-right: 1.5em; }
.u-pdr-2-em { padding-right: 2em; }
.u-pdr-2h-em { padding-right: 2.5em; }
.u-pdr-3-em { padding-right: 3em; }

.u-pdtb-4l { padding-top: var(--space-4l); padding-bottom: var(--space-4l); }
.u-pdtb-3l { padding-top: var(--space-3l); padding-bottom: var(--space-3l); }
.u-pdtb-2l { padding-top: var(--space-2l); padding-bottom: var(--space-2l); }
.u-pdtb-l { padding-top: var(--space-l); padding-bottom: var(--space-l); }
.u-pdtb-m { padding-top: var(--space-m); padding-bottom: var(--space-m); }
.u-pdtb-s { padding-top: var(--space-s); padding-bottom: var(--space-s); }
.u-pdtb-2s { padding-top: var(--space-2s); padding-bottom: var(--space-2s); }
.u-pdtb-3s { padding-top: var(--space-3s); padding-bottom: var(--space-3s); }

.u-pdlr-4l { padding-left: var(--space-4l); padding-right: var(--space-4l); }
.u-pdlr-3l { padding-left: var(--space-3l); padding-right: var(--space-3l); }
.u-pdlr-2l { padding-left: var(--space-2l); padding-right: var(--space-2l); }
.u-pdlr-l { padding-left: var(--space-l); padding-right: var(--space-l); }
.u-pdlr-m { padding-left: var(--space-m); padding-right: var(--space-m); }
.u-pdlr-s { padding-left: var(--space-s); padding-right: var(--space-s); }
.u-pdlr-2s { padding-left: var(--space-2s); padding-right: var(--space-2s); }
.u-pdlr-3s { padding-left: var(--space-3s); padding-right: var(--space-3s); }

.u-pdtb-h2 { padding-top: 0.25rem; padding-bottom: 0.25rem; }
.u-pdtb-h { padding-top: 0.5rem; padding-bottom: 0.5rem; }
.u-pdtb-1 { padding-top: 1rem; padding-bottom: 1rem; }
.u-pdtb-1h { padding-top: 1.5rem; padding-bottom: 1.5rem; }
.u-pdtb-2 { padding-top: 2rem; padding-bottom: 2rem; }
.u-pdtb-2h { padding-top: 2.5rem; padding-bottom: 2.5rem; }
.u-pdtb-3 { padding-top: 3rem; padding-bottom: 3rem; }

.u-pdlr-h2 { padding-left: 0.25rem; padding-right: 0.25rem; }
.u-pdlr-h { padding-left: 0.5rem; padding-right: 0.5rem; }
.u-pdlr-1 { padding-left: 1rem; padding-right: 1rem; }
.u-pdlr-1h { padding-left: 1.5rem; padding-right: 1.5rem; }
.u-pdlr-2 { padding-left: 2rem; padding-right: 2rem; }
.u-pdlr-2h { padding-left: 2.5rem; padding-right: 2.5rem; }
.u-pdlr-3 { padding-left: 3rem; padding-right: 3rem; }

.u-pdtb-h2-em { padding-top: 0.25em; padding-bottom: 0.25em; }
.u-pdtb-h-em { padding-top: 0.5em; padding-bottom: 0.5em; }
.u-pdtb-1-em { padding-top: 1em; padding-bottom: 1em; }
.u-pdtb-1h-em { padding-top: 1.5em; padding-bottom: 1.5em; }
.u-pdtb-2-em { padding-top: 2em; padding-bottom: 2em; }
.u-pdtb-2h-em { padding-top: 2.5em; padding-bottom: 2.5em; }
.u-pdtb-3-em { padding-top: 3em; padding-bottom: 3em; }

.u-pdlr-h2-em { padding-left: 0.25em; padding-right: 0.25em; }
.u-pdlr-h-em { padding-left: 0.5em; padding-right: 0.5em; }
.u-pdlr-1-em { padding-left: 1em; padding-right: 1em; }
.u-pdlr-1h-em { padding-left: 1.5em; padding-right: 1.5em; }
.u-pdlr-2-em { padding-left: 2em; padding-right: 2em; }
.u-pdlr-2h-em { padding-left: 2.5em; padding-right: 2.5em; }
.u-pdlr-3-em { padding-left: 3em; padding-right: 3em; }

.u-pd-h2 { padding: 0.25rem; }
.u-pd-h { padding: 0.5rem; }
.u-pd-1 { padding: 1rem; }
.u-pd-1h { padding: 1.5rem; }
.u-pd-2 { padding: 2rem; }
.u-pd-2h { padding: 2.5rem; }
.u-pd-3 { padding: 3rem; }

.u-pd-h2-em { padding: 0.25em; }
.u-pd-h-em { padding: 0.5em; }
.u-pd-1-em { padding: 1em; }
.u-pd-1h-em { padding: 1.5em; }
.u-pd-2-em { padding: 2em; }
.u-pd-2h-em { padding: 2.5em; }
.u-pd-3-em { padding: 3em; }

.u-pd-side-space { padding-left: var(--side-space); padding-right: var(--side-space); }

/* !important
----------------------------------------*/
.u-mgt-0 { margin-top: 0 !important; }
.u-mgb-0 { margin-bottom: 0 !important; }
.u-mgl-0 { margin-left: 0 !important; }
.u-mgr-0 { margin-right: 0 !important; }
.u-pdt-0 { padding-top: 0 !important; }
.u-pdb-0 { padding-bottom: 0 !important; }
.u-pdl-0 { padding-left: 0 !important; }
.u-pdr-0 { padding-right: 0 !important; }
.u-rd-0 { border-radius: 0 !important; }