/* minimal reset: ref. Josh's Custom CSS Reset https://www.joshwcomeau.com/css/custom-css-reset/ */
*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; /* add */ padding: 0; }
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; }
/* advanced reset: ref. https://www.npmjs.com/package/@acab/reset.css v0.9.0, 2024-04-12 */
*, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; }
:where([hidden]:not([hidden='until-found'])) { display: none !important; }
:where(html) { -webkit-text-size-adjust: none; /*color-scheme: dark light;*/ tab-size: 2; /* v0.9.0- */ scrollbar-gutter: stable; }
/* v0.9.0- */ :where(html:has(dialog:modal[open])) { overflow: clip; }
@media (prefers-reduced-motion: no-preference) { :where(html:focus-within) { scroll-behavior: smooth; } }
:where(body) { line-height: 1.5; font-family: system-ui, sans-serif; -webkit-font-smoothing: antialiased; }
:where(button) { all: unset; }
:where(input, button, textarea, select) { font: inherit; color: inherit; }
:where(textarea) { resize: vertical; resize: block; }
:where(button, label, select, summary, [role='button'], [role='option']) { cursor: pointer; }
:where(:disabled) { cursor: not-allowed; }
:where(label:has(> input:disabled), label:has(+ input:disabled)) { cursor: not-allowed; }
:where(a) { color: inherit; text-underline-offset: 0.2ex; }
:where(ul, ol) { list-style: none; }
:where(img, svg, video, canvas, audio, iframe, embed, object) { display: block; }
:where(img, picture, svg, video) { max-inline-size: 100%; block-size: auto; }
:where(p, h1, h2, h3, h4, h5, h6) { overflow-wrap: break-word; }
:where(h1, h2, h3) { line-height: calc(1em + 0.5rem); /*text-wrap: balance;*/ }
:where(hr) { border: none; border-block-start: 1px solid; color: inherit; block-size: 0; overflow: visible; }
/* v0.9.0- */ :where(dialog) { border: none; background: none; inset: unset; max-width: unset; max-height: unset; }
/* v0.9.0- */ :where(dialog:not([open])) { display: none !important; }
:where(:focus-visible) { outline: 3px solid CanvasText; box-shadow: 0 0 0 5px Canvas; outline-offset: 1px; }
:where(:focus-visible, :target) { scroll-margin-block: 8vh; }
:where(.visually-hidden:not(:focus-within, :active)) { clip-path: inset(50%) !important; height: 1px !important; width: 1px !important; overflow: hidden !important; position: absolute !important; white-space: nowrap !important; border: 0 !important; }
/* basic variables */
:root {
--theme: 19, 220, 235;
--txc: 0, 0, 0;
--bgc: 0, 0, 0;
--bdc: 0, 0, 0;
--anc-txc: 0, 0, 0;
--anc-bgc: 0, 0, 0;
--anc-bdc: var(--theme);
--hvc-txc: 0, 0, 0;
--hvc-bgc: 0, 0, 0;
--hvc-bdc: var(--theme);
--lh: 2.25em;
--sss: 768px; /* 640px iPhone 6-8, SE2: 375×667 */
--lss: 1280px;
}
body::-webkit-scrollbar { width: 14px; height: 14px; }
body::-webkit-scrollbar-track,
body::-webkit-scrollbar-track-piece,
body::-webkit-scrollbar-corner { background-color: rgba(0,0,0,0); }
body::-webkit-scrollbar-thumb {
background-color: rgba(var(--txc),0.3);
background-clip: content-box;
border: 3px solid rgba(0,0,0,0);
border-radius: 9999px;
}
html {
scrollbar-color: rgba(var(--txc),0.3) rgba(0,0,0,0);
scrollbar-gutter: stable;
}
/*
@media (prefers-color-scheme: dark) {
:root {
--txc:245,245,245;
}
}
*/
@media (scripting: none) {
.is-js { display: none !important; }
}
@supports not (inline-size: auto) {
html, body { min-width: 100%; min-height: 100%; }
}
html, body, main { min-width: 100%; max-width: 100%; min-height: 100vh; }
body {
-webkit-font-smoothing: subpixel-antialiased; /*-moz-osx-font-smoothing: grayscale;*/
-webkit-text-size-adjust: 100%; text-size-adjust: 100%
word-break: break-word; word-wrap: break-word; overflow-wrap: break-word; line-break: loose;
font-kerning: auto; font-optical-sizing: auto;
font-feature-settings: "halt", "hkna"; /* 約物半角 */
font-family: "Hiragino Kaku Gothic ProN", "Hiragino Kaku Gothic Pro", "Hiragino Sans", "Meiryo", system-ui, sans-serif;
/*font-family: "Hiragino Mincho ProN", "Hiragino Mincho Pro", "Yu Mincho", YuMincho, serif; */
color: rgba(0,0,0,1); color: rgba(var(--txc),1);
}
/* transition */
_* { -webkit-transition: all .15s; transition: all .15s;}
.no-hit, [href=""], :disabled { cursor: default; pointer-events: none; text-decoration: none !important; }
[class*="no-hit"] a, [class*="no-hit"] .hit { cursor: pointer; pointer-events: auto; }
[class*="no-hit"] > a { cursor: default; pointer-events: none; }
a { text-decoration: none; }
a:hover, [class*="btn"]:hover { opacity: .75; }
[class*="hover"] a:hover, a[class*="hover"]:hover, [class*="btn"]:hover { opacity: initial; }
[class*="btn"] { cursor: pointer; }
a, [class*="btn"] { -webkit-transition: all .15s; transition: all .15s; }
a[href^="tel"] { color: inherit; text-decoration: none !important; }
a.no-deco, .no-deco a { text-decoration: none !important; }
img { pointer-events: none; } /* hide Edge image search icon */
a[data-text-position] { margin-right: 0.75em; vertical-align: baseline; }
a[data-text-position]:before { position: relative; content: attr( data-text-position ) "："; font-size: 0.83em; font-weight: lighter; }
h1 { font-size: 1.5em; }
h2 { font-size: 1.25em; }
h3 { font-size: 1.1em; }
h4 { font-size: 1em; }
h5 { font-size: 0.9em; }
h6 { font-size: 0.75em; }
h1, h2 { font-weight: lighter; }
h1, h2, h3, h4, h5, h6,
p, blockquote, pre, address, figcaption, li, dt, dd, th, td, caption {
font-feature-settings: "hkna";
}
p, blockquote, pre, address, figcaption, li, dt, dd, th, td, caption {
font-size: 1em; line-height: var(--lh);
text-justify: inter-character;
}
:where(p, blockquote, pre, address, figure, ul, ol, dl, table):after { content: ""; display: block; clear: both; }
p:empty { block-size: var(--lh); }
blockquote:has(p:empty) { background-image: none; } /* :has firefox未対応 */
blockquote {
position: relative; padding-left: 2em;
background: 1.25em 50% / 1px calc(100% - var(--lh) + var(--lh) * 0.5 ) no-repeat linear-gradient(to right, rgba(var(--bdc),0.5), rgba(var(--bdc),0.5) 100%);
}
blockquote.double {
position: relative; padding-left: 2em;
background: 1.125em 50% / 3px calc(100% - var(--lh) + var(--lh) * 0.5 ) no-repeat linear-gradient(to right, rgba(var(--bdc),0.5), rgba(var(--bdc),0.5) 33%, rgba(var(--bdc),0) 33%, rgba(var(--bdc),0) 66%, rgba(var(--bdc),0.5) 66%, rgba(var(--bdc),0.5) 100%);
}
blockquote {
position: relative; padding: 1em;
background: rgba(var(--bgc),0.02);
}
pre { overflow: hidden; text-overflow: ellipsis; }
hr {
block-size: 2em; border-block: none;
background: 0 50% / 100% 1px no-repeat linear-gradient(rgba(var(--bdc),0.5), rgba(var(--bdc),0.5) 100%);
}
hr + br { display: none; }
hr + hr,
hr:not(hr + hr ~ hr):not(hr + hr) { block-size: 0.5em;} /* 連続する手前の要素 */
img, svg, video, canvas, audio, iframe, embed, object { margin: 0 auto; }
img {
height: auto; max-width: 100%; object-fit: contain; overflow: hidden;
white-space: nowrap; text-overflow: ellipsis; color: rgba(0,0,0,0.01); font-size: 0.75rem; /* img alt text */
}
video { object-fit: cover; }
iframe, ul, ol, dl, table { width: 100%; max-width: 100%; }
/* legacy styling
ul { list-style-position: outside; list-style-type: disc; }
ol { list-style-position: outside; list-style-type: decimal; }
li { margin-left: 1.875em; }
*/
:where(li,dt,dd,th,td):empty:before { content: "-"; color: rgba(0,0,0,0) !important; }
/*
ul { padding-left: 2em; }
ul li { text-indent: -0.9em; }
ul li::before { content: "\2022 "; font-weight: bolder; letter-spacing: 0.25em; } */ /* li::marker safari v??- */
ol { counter-reset: nestOL; }
ol li { counter-increment: nestOL; }
ol li::before { content: counters(nestOL, "-") ". "; font-variant-numeric: tabular-nums; font-size: 0.75em; vertical-align: 0.025em; font-weight: bolder; }
ol { padding-left: 2em; }
ol > li, [class*="sans"] ol > li { text-indent: -1em; }
[class*="serif"] ol > li { text-indent: -0.95em; }
ol ol { padding-left: 2em; }
ol ol > li, [class*="sans"] ol ol > li { text-indent: -1.9em; }
[class*="serif"] ol ol > li { text-indent: -1.7em; }
ol ol ol { padding-left: 3em; }
ol ol ol > li, [class*="sans"] ol ol ol > li { text-indent: -2.8em; }
[class*="serif"] ol ol ol > li { text-indent: -2.4em; }
dl {
display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; display: flex;
-webkit-flex-wrap: wrap; -ms-flex-wrap: wrap; flex-wrap: wrap;
}
dt, dd { -webkit-align-self: stretch; -ms-flex-item-align: stretch; align-self: stretch; }
dt { width: 25%; padding: 0.25em; }
dd { width: 75%; padding: 0.25em; }
dt, dd { background: 0 100% / 100% 1px no-repeat linear-gradient(rgba(var(--bdc),0.05), rgba(var(--bdc),0.05) 100%); }
table { table-layout: auto; }
table th { width: 6em; min-width: 6em; }
table.col-1-1 th { width: 50%; }
table.col-1-2 th { width: 33.3333%; }
table.col-1-3 th { width: 25%; }
table.col-1-4 th { width: 20%; }
table.col-1-5 th { width: 16.6666%; }
table.col-1-7 th { width: 12.5%; }
/* numbering row */
table.num-row { counter-reset: rowCount; }
table.num-row tr:nth-child(n+2) { counter-increment: rowCount; } /* カウント開始行の指定 */
table.num-row tr:nth-child(n+2) > *:first-child::before { content: counter(rowCount) ". "; } /* カウント付加行の指定 */
/* numbering col */
table.num-col tr { counter-reset: colCount; }
table.num-col tr > *:nth-child(n+2) { counter-increment: colCount; } /* カウント開始列の指定 */
table.num-col tr:first-child > *:nth-child(n+2)::before { content: counter(colCount) ". "; } /* カウント付加列の指定 */
/* screen size-(-extra prefix:no, hvr, rev...)-property(-sub property:top, bottom, left, right a, h, v, n...)-value(-sub value:alpha) */
/***** typography *****/
/* writing-mode safari: need height */
.wm-h { -webkit-writing-mode: horizontal-tb; -ms-writing-mode: horizontal-tb; writing-mode: horizontal-tb; transform: rotate(0deg); }
.wm-v { -webkit-writing-mode: vertical-rl; -ms-writing-mode: vertical-rl; writing-mode: vertical-rl; transform: rotate(0deg); } /* 縦組み：読み上げ */
.rev-wm-v { -webkit-writing-mode: vertical-rl; -ms-writing-mode: vertical-rl; writing-mode: vertical-rl; transform: rotate(180deg); } /* 縦組み：読み下げ */
/* text-align */
.tx-l { text-align: left; display: block; }
.tx-r { text-align: right; display: block; }
.tx-c { text-align: center; display: block; }
.tx-j { text-align: justify; text-justify: inter-ideograph; display: block; }
:where(.tx-r, .tx-c, .tx-j) * { text-align: inherit; }
.tx-t { vertical-align: top; }
.tx-m { vertical-align: middle; }
.tx-b { vertical-align: bottom; }
/* white-space */
.tx-nowr { white-space: nowrap; }
.tx-wr { white-space: normal; word-break: break-word; overflow-wrap: break-word; }
/* multi line ellipsis paddingとの併用不可 */
.elp, .elp-1 { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.elp-2 { overflow: hidden; padding: 0 !important; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; }
.elp-3 { overflow: hidden; padding: 0 !important; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3; }
.elp-4 { overflow: hidden; padding: 0 !important; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 4; }
.elp-5 { overflow: hidden; padding: 0 !important; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 5; }
/* line-feed */
.br { content: "\A"; display: block; }
.no-br { content: ""; display: none; }
.hr { content: "\A"; display: block; }
.no-hr { content: ""; display: none; }
.br, .sp, .hr, .vr { content: ""; display: inline; background: none; }
.br:before { content: "\A"; display: block; background: none; }
.hr:before {
content: "\A"; display: block; block-size: 1em; border-block: none;
background: 0 50% / 100% 1px no-repeat linear-gradient(rgba(var(--bdc),0.05), rgba(var(--bdc),0.05) 100%);
}
.sp:before { content: " "; display: inline; background: none; }
.vr:before { content: "｜"; display: inline; background: none; }
.tx-emp { background: top left / 1em 0.5em repeat-x radial-gradient(circle, rgba(var(--txc),0.75) 0.12em, rgba(var(--txc),0) 0.12em); padding-top: 0.55em; } /* 傍点 */
/* ルビ */
ruby { padding-top: 1em; } /* 行間ズレ修正 */
.tx-sup { font-size: 0.6666em; vertical-align: 0.3333em; } /* 上付き */
.tx-sub { font-size: 0.6666em; } /* 下付き */
/* font-feature */
.ff-halt { font-feature-settings: "halt", "hkna"; }
.ff-palt { font-feature-settings: "palt", "hkna"; }
/* font variant */
.tx-cap { text-transform: capitalize; }
.tx-upp { text-transform: uppercase; }
.tx-low { text-transform: lowercase; }
.tx-sc { font-variant-caps: small-caps; }
.tx-asc { font-variant-caps: all-small-caps; }
.num-osf { font-variant-numeric: oldstyle-nums; }
.num-mono { font-variant-numeric: tabular-nums; }
/* palt プロポーショナルメトリクス, pkna プロポーショナルかな, halt 字幅（約物）半角メトリクス, hkna 横組み用かな */
.ffs-p { font-feature-settings: "palt", "nlck", "hkna"; }
.ffs-h { font-feature-settings: "halt", "nlck", "hkna"; }
/* 字形 JIS90 (Pr6), JIS04 (Pr6N), nlck = 印刷標準字形 */
.fv-trad { font-variant-east-asian: traditional; }
.fv-jis78 { font-variant-east-asian: jis78; }
.fv-jis83 { font-variant-east-asian: jis83; }
.fv-jis90 { font-variant-east-asian: jis90; }
.fv-jis04 { font-variant-east-asian: jis04; }
.fv-nlck { font-feature-settings: "nlck"; }
/* font-size */
.fs-s { font-size: smaller; }
.fs-l { font-size: larger; }
.fs-010 { font-size: 0.1em; }
.fs-025 { font-size: 0.25em; }
.fs-033 { font-size: 0.33em; }
.fs-050 { font-size: 0.5em; }
.fs-066 { font-size: 0.66em; }
.fs-075 { font-size: 0.75em; }
.fs-080 { font-size: 0.8em; }
.fs-083 { font-size: 0.83em; }
.fs-090 { font-size: 0.9em; }
.fs-095 { font-size: 0.95em; }
.fs-100 { font-size: 1.0em; }
.fs-105 { font-size: 1.05em; }
.fs-110 { font-size: 1.1em; }
.fs-120 { font-size: 1.2em; }
.fs-125 { font-size: 1.25em; }
.fs-133 { font-size: 1.33em; }
.fs-150 { font-size: 1.5em; }
.fs-166 { font-size: 1.66em; }
.fs-175 { font-size: 1.75em; }
.fs-183 { font-size: 1.83em; }
.fs-200 { font-size: 2.0em; }
.fs-250 { font-size: 2.5em; }
.fs-300 { font-size: 3.0em; }
.fs-350 { font-size: 3.5em; }
.fs-400 { font-size: 4.0em; }
.fs-450 { font-size: 4.5em; }
.fs-500 { font-size: 5.0em; }
.fs-600 { font-size: 6.0em; }
.fs-700 { font-size: 7.0em; }
.fs-800 { font-size: 8.0em; }
.fs-900 { font-size: 9.0em; }
.fs-1000 { font-size: 10.0em; }
/* line-height */
.lh-050 { line-height: 0.50; }
.lh-066 { line-height: 0.66; }
.lh-075 { line-height: 0.75; }
.lh-083 { line-height: 0.83; }
.lh-100 { line-height: 1.00; }
.lh-116 { line-height: 1.16; }
.lh-125 { line-height: 1.25; }
.lh-133 { line-height: 1.33; }
.lh-150 { line-height: 1.5; }
.lh-166 { line-height: 1.66; }
.lh-175 { line-height: 1.75; }
.lh-183 { line-height: 1.83; }
.lh-200 { line-height: 2.00; }
.lh-250 { line-height: 2.50; }
.lh-300 { line-height: 3.00; }
[class*="lh-"] * { line-height: inherit; }
/* letter-spacing */
.ls-n-025 { letter-spacing: -0.25em; }
.ls-n-020 { letter-spacing: -0.2em; }
.ls-n-015 { letter-spacing: -0.15em; }
.ls-n-010 { letter-spacing: -0.1em; }
.ls-n-005 { letter-spacing: -0.05em; }
.ls-n-0025 { letter-spacing: -0.025em; }
.ls-n-001 { letter-spacing: -0.01em; }
.ls-000 { letter-spacing: 0em; }
.ls-001 { letter-spacing: 0.01em; }
.ls-0025 { letter-spacing: 0.025em; }
.ls-005 { letter-spacing: 0.05em; }
.ls-010 { letter-spacing: 0.1em; }
.ls-015 { letter-spacing: 0.15em; }
.ls-020 { letter-spacing: 0.2em; }
.ls-025 { letter-spacing: 0.25em; }
.ls-050 { letter-spacing: 0.5em; }
.ls-075 { letter-spacing: 0.75em; }
.ls-100 { letter-spacing: 1.0em; }
/* font-family */
.ff-sans { font-family: "Hiragino Kaku Gothic ProN", "Hiragino Kaku Gothic Pro", "Hiragino Sans", "Meiryo", system-ui, sans-serif; }
.ff-serif { font-family: "Hiragino Mincho ProN", "Hiragino Mincho Pro", "Yu Mincho", YuMincho, serif; }
/* google fonts */
[class*="arvo"] { font-family: "Arvo", serif; font-style: normal; } /* 400, 700, it */
[class*="bodoni-moda"] { font-family: "Bodoni Moda", serif; font-optical-sizing: auto; font-style: normal; } /* 400-900, it */
[class*="eb-garamond"] { font-family: "EB Garamond", serif; font-optical-sizing: auto; font-style: normal; } /* 400-800, it */
[class*="outfit"] { font-family: "Outfit", sans-serif; font-optical-sizing: auto; font-style: normal; } /* 100-900 */
[class*="zen-kaku"] { font-family: "Zen Kaku Gothic New", sans-serif; font-style: normal; } /* 300-500,700,900 */
[class*="zen-maru"] { font-family: "Zen Maru Gothic", serif; font-style: normal; } /* 300-500,700,900 */
[class*="zen-old"] { font-family: "Zen Old Mincho", serif; font-style: normal; } /* 400-700,900 */
/* font-weight */
.fw-l { font-weight: lighter; }
.fw-b { font-weight: bolder; }
.fw-100 { font-weight: 100; }
.fw-200 { font-weight: 200; }
.fw-300 { font-weight: 300; }
.fw-400 { font-weight: 400; } /* reg */
.fw-500 { font-weight: 500; }
.fw-600 { font-weight: 600; }
.fw-700 { font-weight: 700; }
.fw-800 { font-weight: 800; }
.fw-900 { font-weight: 900; }
/* font-stretch */
.fst-050 { font-stretch: 50%; } /* ultra-condensed */
.fst-062 { font-stretch: 62.5%; } /* extra-condensed */
.fst-075 { font-stretch: 75%; } /* condensed */
.fst-087 { font-stretch: 87.5%; } /* semi-condensed */
.fst-100 { font-stretch: 100%; } /* normal */
.fst-112 { font-stretch: 112.5%; } /* semi-expanded */
.fst-125 { font-stretch: 125%; } /* sexpanded */
.fst-150 { font-stretch: 150%; } /* extra-expanded */
.fst-200 { font-stretch: 200%; } /* ultra-expanded */
/***** color, filter *****/
/* text color */
.no-txc { color: rgba(0,0,0,0) !important; }
.txc-theme, .txc-theme-100 { color: rgba(var(--theme),1); }
.txc-theme-001 { color: rgba(var(--theme),0.01); }
.txc-theme-002 { color: rgba(var(--theme),0.02); }
.txc-theme-003 { color: rgba(var(--theme),0.03); }
.txc-theme-004 { color: rgba(var(--theme),0.04); }
.txc-theme-005 { color: rgba(var(--theme),0.05); }
.txc-theme-010 { color: rgba(var(--theme),0.1); }
.txc-theme-025 { color: rgba(var(--theme),0.25); }
.txc-theme-050 { color: rgba(var(--theme),0.5); }
.txc-theme-075 { color: rgba(var(--theme),0.75); }
.txc-theme-090 { color: rgba(var(--theme),0.9); }
.txc-theme-095 { color: rgba(var(--theme),0.95); }
.txc-000, .txc-000-100 { color: rgba(0,0,0,1); }
.txc-000-001 { color: rgba(0,0,0,0.01); }
.txc-000-002 { color: rgba(0,0,0,0.02); }
.txc-000-003 { color: rgba(0,0,0,0.03); }
.txc-000-004 { color: rgba(0,0,0,0.04); }
.txc-000-005 { color: rgba(0,0,0,0.05); }
.txc-000-010 { color: rgba(0,0,0,0.1); }
.txc-000-025 { color: rgba(0,0,0,0.25); }
.txc-000-050 { color: rgba(0,0,0,0.5); }
.txc-000-075 { color: rgba(0,0,0,0.75); }
.txc-000-090 { color: rgba(0,0,0,0.9); }
.txc-000-095 { color: rgba(0,0,0,0.95); }
.txc-128, .txc-128-100 { color: rgba(128,128,128,1); }
.txc-128-001 { color: rgba(128,128,128,0.01); }
.txc-128-002 { color: rgba(128,128,128,0.02); }
.txc-128-003 { color: rgba(128,128,128,0.03); }
.txc-128-004 { color: rgba(128,128,128,0.04); }
.txc-128-005 { color: rgba(128,128,128,0.05); }
.txc-128-010 { color: rgba(128,128,128,0.1); }
.txc-128-025 { color: rgba(128,128,128,0.25); }
.txc-128-050 { color: rgba(128,128,128,0.5); }
.txc-128-075 { color: rgba(128,128,128,0.75); }
.txc-128-090 { color: rgba(128,128,128,0.9); }
.txc-128-095 { color: rgba(128,128,128,0.95); }
.txc-255, .txc-255-100 { color: rgba(255,255,255,1); }
.txc-255-001 { color: rgba(255,255,255,0.01); }
.txc-255-002 { color: rgba(255,255,255,0.02); }
.txc-255-003 { color: rgba(255,255,255,0.03); }
.txc-255-004 { color: rgba(255,255,255,0.04); }
.txc-255-005 { color: rgba(255,255,255,0.05); }
.txc-255-010 { color: rgba(255,255,255,0.1); }
.txc-255-025 { color: rgba(255,255,255,0.25); }
.txc-255-050 { color: rgba(255,255,255,0.5); }
.txc-255-075 { color: rgba(255,255,255,0.75); }
.txc-255-090 { color: rgba(255,255,255,0.9); }
.txc-255-095 { color: rgba(255,255,255,0.95); }
.txc-111 { color: #111; } /* rgb: 17 or a: 0.0666 */
.txc-222 { color: #222; } /* rgb: 34 or a: 0.1333 */
.txc-333 { color: #333; } /* rgb: 51 or a: 0.2 */
.txc-444 { color: #444; } /* rgb: 68 or a: 0.2666 */
.txc-555 { color: #555; } /* rgb: 85 or a: 0.3333 */
.txc-666 { color: #666; } /* rgb:102 or a: 0.4 */
.txc-777 { color: #777; } /* rgb:119 or a: 0.4666 */
.txc-888 { color: #888; } /* rgb:136 or a: 0.5333 */
.txc-999 { color: #999; } /* rgb:153 or a: 0.6 */
.txc-aaa { color: #aaa; } /* rgb:170 or a: 0.6666 */
.txc-bbb { color: #bbb; } /* rgb:187 or a: 0.7333 */
.txc-ccc { color: #ccc; } /* rgb:204 or a: 0.8 */
.txc-ddd { color: #ddd; } /* rgb:221 or a: 0.8666 */
.txc-eee { color: #eee; } /* rgb:238 or a: 0.9333 */
.txc-fff { color: #fff; } /* rgb:255 or a: 1.0 */
.txc-b { color: rgba(0,0,255,1); } /* blue */
.txc-l { color: rgba(0,255,0,1); } /* lime */
.txc-r { color: rgba(255,0,0,1); } /* red */
.txc-a { color: rgba(0,255,255,1); } /* aqua */
.txc-y { color: rgba(255,255,0,1); } /* yellow */
.txc-f { color: rgba(255,0,255,1); } /* fuchsia */
/* background color */
.no-bgc { border-color: rgba(0,0,0,0) !important; }
.bgc-theme, .bgc-theme-100 { background-color: rgba(var(--theme),1); }
.bgc-theme-001 { background-color: rgba(var(--theme),0.01); }
.bgc-theme-002 { background-color: rgba(var(--theme),0.02); }
.bgc-theme-003 { background-color: rgba(var(--theme),0.03); }
.bgc-theme-004 { background-color: rgba(var(--theme),0.04); }
.bgc-theme-005 { background-color: rgba(var(--theme),0.05); }
.bgc-theme-010 { background-color: rgba(var(--theme),0.1); }
.bgc-theme-025 { background-color: rgba(var(--theme),0.25); }
.bgc-theme-050 { background-color: rgba(var(--theme),0.5); }
.bgc-theme-075 { background-color: rgba(var(--theme),0.75); }
.bgc-theme-090 { background-color: rgba(var(--theme),0.9); }
.bgc-theme-095 { background-color: rgba(var(--theme),0.95); }
.bgc-000, .bgc-000-100 { background-color: rgba(0,0,0,1); }
.bgc-000-001 { background-color: rgba(0,0,0,0.01); }
.bgc-000-002 { background-color: rgba(0,0,0,0.02); }
.bgc-000-003 { background-color: rgba(0,0,0,0.03); }
.bgc-000-004 { background-color: rgba(0,0,0,0.04); }
.bgc-000-005 { background-color: rgba(0,0,0,0.05); }
.bgc-000-010 { background-color: rgba(0,0,0,0.1); }
.bgc-000-025 { background-color: rgba(0,0,0,0.25); }
.bgc-000-050 { background-color: rgba(0,0,0,0.5); }
.bgc-000-075 { background-color: rgba(0,0,0,0.75); }
.bgc-000-090 { background-color: rgba(0,0,0,0.9); }
.bgc-000-095 { background-color: rgba(0,0,0,0.95); }
.bgc-128, .bgc-128-100 { background-color: rgba(128,128,128,1); }
.bgc-128-001 { background-color: rgba(128,128,128,0.01); }
.bgc-128-002 { background-color: rgba(128,128,128,0.02); }
.bgc-128-003 { background-color: rgba(128,128,128,0.03); }
.bgc-128-004 { background-color: rgba(128,128,128,0.04); }
.bgc-128-005 { background-color: rgba(128,128,128,0.05); }
.bgc-128-010 { background-color: rgba(128,128,128,0.1); }
.bgc-128-025 { background-color: rgba(128,128,128,0.25); }
.bgc-128-050 { background-color: rgba(128,128,128,0.5); }
.bgc-128-075 { background-color: rgba(128,128,128,0.75); }
.bgc-128-090 { background-color: rgba(128,128,128,0.9); }
.bgc-128-095 { background-color: rgba(128,128,128,0.95); }
.bgc-255, .bgc-255-100 { background-color: rgba(255,255,255,1); }
.bgc-255-001 { background-color: rgba(255,255,255,0.01); }
.bgc-255-002 { background-color: rgba(255,255,255,0.02); }
.bgc-255-003 { background-color: rgba(255,255,255,0.03); }
.bgc-255-004 { background-color: rgba(255,255,255,0.04); }
.bgc-255-005 { background-color: rgba(255,255,255,0.05); }
.bgc-255-010 { background-color: rgba(255,255,255,0.1); }
.bgc-255-025 { background-color: rgba(255,255,255,0.25); }
.bgc-255-050 { background-color: rgba(255,255,255,0.5); }
.bgc-255-075 { background-color: rgba(255,255,255,0.75); }
.bgc-255-090 { background-color: rgba(255,255,255,0.9); }
.bgc-255-095 { background-color: rgba(255,255,255,0.95); }
.bgc-111 { background-color: #111; }
.bgc-222 { background-color: #222; }
.bgc-333 { background-color: #333; }
.bgc-444 { background-color: #444; }
.bgc-555 { background-color: #555; }
.bgc-666 { background-color: #666; }
.bgc-777 { background-color: #777; }
.bgc-888 { background-color: #888; }
.bgc-999 { background-color: #999; }
.bgc-aaa { background-color: #aaa; }
.bgc-bbb { background-color: #bbb; }
.bgc-ccc { background-color: #ccc; }
.bgc-ddd { background-color: #ddd; }
.bgc-eee { background-color: #eee; }
.bgc-fff { background-color: #fff; }
/* border */
*, *::before, *::after { border-collapse: collapse; }
.no-bd { border: 0 !important; }
.no-bd-t { border-top: 0 !important; }
.no-bd-b { border-bottom: 0 !important; }
.no-bd-l { border-left: 0 !important; }
.no-bd-r { border-right: 0 !important; }
.bd-00 { border: 0; }
.bd-01 { border-style: solid; border-width: 1px; }
.bd-t-01 { border-top-style: solid; border-top-width: 1px; }
.bd-b-01 { border-bottom-style: solid; border-bottom-width: 1px; }
.bd-l-01 { border-left-style: solid; border-left-width: 1px; }
.bd-r-01 { border-right-style: solid; border-right-width: 1px; }
.bd-tb-01 { border-top-style: solid; border-bottom-style: solid; border-top-width: 1px; border-bottom-width: 1px; }
.bd-lr-01 { border-right-style: solid; border-left-style: solid; border-right-width: 1px; border-left-width: 1px; }
.bd-02 { border-style: solid; border-width: 2px; }
.bd-t-02 { border-top-style: solid; border-top-width: 2px; }
.bd-b-02 { border-bottom-style: solid; border-bottom-width: 2px; }
.bd-l-02 { border-left-style: solid; border-left-width: 2px; }
.bd-r-02 { border-right-style: solid; border-right-width: 2px; }
.bd-tb-02 { border-top-style: solid; border-bottom-style: solid; border-top-width: 2px; border-bottom-width: 2px; }
.bd-lr-02 { border-right-style: solid; border-left-style: solid; border-right-width: 2px; border-left-width: 2px; }
.bd-li-01 { border-bottom-style: solid; border-bottom-width: 1px; }
[class*=bd-li-]:first-of-type { border-top-style: solid; border-top-width: 1px; }
.bd-n-li-01 { border-bottom-style: solid; border-bottom-width: 1px; }
[class*=bd-n-li-]:last-of-type { border-bottom-width: 0px; }
[class*=bd-h-] :where(li,dt,dd,th,td) { padding-top: 0.5em; padding-bottom: 0.5em; } /* padding: calc(var(--lh) / 4 ); */
[class*=bd-v-] :where(li,dt,dd,th,td) { padding-left: 0.5em; padding-right: 0.5em; }
.bd-h-01 :where(li,dt,dd,th,td) { border-top-style: solid; border-top-width: 1px; }
.bd-h-01 :where(li:last-of-type, dt:last-of-type, dd:last-of-type, tr:last-of-type th, tr:last-of-type td) { border-top-style: solid; border-bottom-style: solid; border-top-width: 1px; border-bottom-width: 1px; }
.bd-v-01 :where(li,dt,dd,th,td) { border-left-style: solid; border-left-width: 1px; }
.bd-v-01 :where(li:last-of-type, dt:last-of-type, dd:last-of-type, tr :last-child) { border-right-style: solid; border-left-style: solid; border-right-width: 1px; border-left-width: 1px; }
.bd-h-02 :where(li,dt,dd,th,td) { border-top-style: solid; border-top-width: 2px; }
.bd-h-02 :where(li:last-of-type, dt:last-of-type, dd:last-of-type, tr:last-of-type th, tr:last-of-type td) { border-top-style: solid; border-bottom-style: solid; border-top-width: 2px; border-bottom-width: 2px; }
.bd-v-02 :where(li,dt,dd,th,td) { border-left-style: solid; border-left-width: 2px; }
.bd-v-02 :where(li:last-of-type, dt:last-of-type, dd:last-of-type, tr :last-child) { border-right-style: solid; border-left-style: solid; border-right-width: 2px; border-left-width: 2px; }
/* outline */
.ol-off-0025 { outline-offset: 0.25em; }
.ol-off-0050 { outline-offset: 0.5em; }
.ol-off-0075 { outline-offset: 0.75em; }
.ol-off-01 { outline-offset: 1em; }
/* border-radius */
.no-rd { border-radius: 0% !important; }
.rd { border-radius: 50%; }
.rd-99 { border-radius: 9999px; }
.rd-01 { border-radius: 1px; }
.rd-02 { border-radius: 2px; }
.rd-03 { border-radius: 3px; }
.rd-04 { border-radius: 4px; }
.rd-05 { border-radius: 5px; }
.rd-06 { border-radius: 6px; }
.rd-07 { border-radius: 7px; }
.rd-08 { border-radius: 8px; }
.rd-09 { border-radius: 9px; }
.rd-10 { border-radius: 10px; }
/* border color */
.no-bdc { border-color: rgba(0,0,0,0) !important; }
[class*=bdc-] * { border-color: inherit; }
.bdc-theme, .bdc-theme-100 { border-color: rgba(var(--theme),1); }
.bdc-theme-001 { border-color: rgba(var(--theme),0.01); }
.bdc-theme-002 { border-color: rgba(var(--theme),0.02); }
.bdc-theme-003 { border-color: rgba(var(--theme),0.03); }
.bdc-theme-004 { border-color: rgba(var(--theme),0.04); }
.bdc-theme-005 { border-color: rgba(var(--theme),0.05); }
.bdc-theme-010 { border-color: rgba(var(--theme),0.1); }
.bdc-theme-025 { border-color: rgba(var(--theme),0.25); }
.bdc-theme-050 { border-color: rgba(var(--theme),0.5); }
.bdc-theme-075 { border-color: rgba(var(--theme),0.75); }
.bdc-theme-090 { border-color: rgba(var(--theme),0.9); }
.bdc-theme-095 { border-color: rgba(var(--theme),0.95); }
.bdc-000, .bdc-000-100 { border-color: rgba(0,0,0,1); }
.bdc-000-001 { border-color: rgba(0,0,0,0.01); }
.bdc-000-002 { border-color: rgba(0,0,0,0.02); }
.bdc-000-003 { border-color: rgba(0,0,0,0.03); }
.bdc-000-004 { border-color: rgba(0,0,0,0.04); }
.bdc-000-005 { border-color: rgba(0,0,0,0.05); }
.bdc-000-010 { border-color: rgba(0,0,0,0.1); }
.bdc-000-025 { border-color: rgba(0,0,0,0.25); }
.bdc-000-050 { border-color: rgba(0,0,0,0.5); }
.bdc-000-075 { border-color: rgba(0,0,0,0.75); }
.bdc-000-090 { border-color: rgba(0,0,0,0.9); }
.bdc-000-095 { border-color: rgba(0,0,0,0.95); }
.bdc-128, .bdc-128-100 { border-color: rgba(128,128,128,1); }
.bdc-128-001 { border-color: rgba(128,128,128,0.01); }
.bdc-128-002 { border-color: rgba(128,128,128,0.02); }
.bdc-128-003 { border-color: rgba(128,128,128,0.03); }
.bdc-128-004 { border-color: rgba(128,128,128,0.04); }
.bdc-128-005 { border-color: rgba(128,128,128,0.05); }
.bdc-128-010 { border-color: rgba(128,128,128,0.1); }
.bdc-128-025 { border-color: rgba(128,128,128,0.25); }
.bdc-128-050 { border-color: rgba(128,128,128,0.5); }
.bdc-128-075 { border-color: rgba(128,128,128,0.75); }
.bdc-128-090 { border-color: rgba(128,128,128,0.9); }
.bdc-128-095 { border-color: rgba(128,128,128,0.95); }
.bdc-255, .bdc-255-100 { border-color: rgba(255,255,255,1); }
.bdc-255-001 { border-color: rgba(255,255,255,0.01); }
.bdc-255-002 { border-color: rgba(255,255,255,0.02); }
.bdc-255-003 { border-color: rgba(255,255,255,0.03); }
.bdc-255-004 { border-color: rgba(255,255,255,0.04); }
.bdc-255-005 { border-color: rgba(255,255,255,0.05); }
.bdc-255-010 { border-color: rgba(255,255,255,0.1); }
.bdc-255-025 { border-color: rgba(255,255,255,0.25); }
.bdc-255-050 { border-color: rgba(255,255,255,0.5); }
.bdc-255-075 { border-color: rgba(255,255,255,0.75); }
.bdc-255-090 { border-color: rgba(255,255,255,0.9); }
.bdc-255-095 { border-color: rgba(255,255,255,0.95); }
.bdc-111 { border-color: #111; }
.bdc-222 { border-color: #222; }
.bdc-333 { border-color: #333; }
.bdc-444 { border-color: #444; }
.bdc-555 { border-color: #555; }
.bdc-666 { border-color: #666; }
.bdc-777 { border-color: #777; }
.bdc-888 { border-color: #888; }
.bdc-999 { border-color: #999; }
.bdc-aaa { border-color: #aaa; }
.bdc-bbb { border-color: #bbb; }
.bdc-ccc { border-color: #ccc; }
.bdc-ddd { border-color: #ddd; }
.bdc-eee { border-color: #eee; }
.bdc-fff { border-color: #fff; }
/* opacity */
.opc-000 { opacity: 0; }
.opc-001 { opacity: 0.01; }
.opc-002 { opacity: 0.025; }
.opc-005 { opacity: 0.05; }
.opc-007 { opacity: 0.075; }
.opc-010 { opacity: 0.1; }
.opc-020 { opacity: 0.2; }
.opc-025 { opacity: 0.25; }
.opc-030 { opacity: 0.3; }
.opc-040 { opacity: 0.4; }
.opc-050 { opacity: 0.5; }
.opc-060 { opacity: 0.6; }
.opc-070 { opacity: 0.7; }
.opc-075 { opacity: 0.75; }
.opc-080 { opacity: 0.8; }
.opc-090 { opacity: 0.9; }
.opc-092 { opacity: 0.925; }
.opc-095 { opacity: 0.95; }
.opc-097 { opacity: 0.975; }
.opc-100 { opacity: 1; }
/* drop-shadow */
.ds-x1-000-100 { filter: drop-shadow( 0 0 1px rgba(0,0,0,1) ); }
.ds-x2-000-100 { filter: drop-shadow( 0 0 1px rgba(0,0,0,1) ) drop-shadow( 0 0 1px rgba(0,0,0,1) ); }
.ds-x3-000-100 { filter: drop-shadow( 0 0 1px rgba(0,0,0,1) ) drop-shadow( 0 0 1px rgba(0,0,0,1) ) drop-shadow( 0 0 1px rgba(0,0,0,1) ); }
.ds-x4-000-100 { filter: drop-shadow( 0 0 1px rgba(0,0,0,1) ) drop-shadow( 0 0 1px rgba(0,0,0,1) ) drop-shadow( 0 0 1px rgba(0,0,0,1) ) drop-shadow( 0 0 1px rgba(0,0,0,1) ); }
.ds-x5-000-100 { filter: drop-shadow( 0 0 1px rgba(0,0,0,1) ) drop-shadow( 0 0 1px rgba(0,0,0,1) ) drop-shadow( 0 0 1px rgba(0,0,0,1) ) drop-shadow( 0 0 1px rgba(0,0,0,1) ) drop-shadow( 0 0 1px rgba(0,0,0,1) ); }
.ds-x1-000-010 { filter: drop-shadow( 0 0 1px rgba(0,0,0,0.1) ); }
.ds-x2-000-010 { filter: drop-shadow( 0 0 1px rgba(0,0,0,0.1) ) drop-shadow( 0 0 1px rgba(0,0,0,0.1) ); }
.ds-x3-000-010 { filter: drop-shadow( 0 0 1px rgba(0,0,0,0.1) ) drop-shadow( 0 0 1px rgba(0,0,0,0.1) ) drop-shadow( 0 0 1px rgba(0,0,0,0.1) ); }
.ds-x4-000-010 { filter: drop-shadow( 0 0 1px rgba(0,0,0,0.1) ) drop-shadow( 0 0 1px rgba(0,0,0,0.1) ) drop-shadow( 0 0 1px rgba(0,0,0,0.1) ) drop-shadow( 0 0 1px rgba(0,0,0,0.1) ); }
.ds-x5-000-010 { filter: drop-shadow( 0 0 1px rgba(0,0,0,0.1) ) drop-shadow( 0 0 1px rgba(0,0,0,0.1) ) drop-shadow( 0 0 1px rgba(0,0,0,0.1) ) drop-shadow( 0 0 1px rgba(0,0,0,0.1) ) drop-shadow( 0 0 1px rgba(0,0,0,0.1) ); }
.ds-x1-000-025 { filter: drop-shadow( 0 0 1px rgba(0,0,0,0.25) ); }
.ds-x2-000-025 { filter: drop-shadow( 0 0 1px rgba(0,0,0,0.25) ) drop-shadow( 0 0 1px rgba(0,0,0,0.25) ); }
.ds-x3-000-025 { filter: drop-shadow( 0 0 1px rgba(0,0,0,0.25) ) drop-shadow( 0 0 1px rgba(0,0,0,0.25) ) drop-shadow( 0 0 1px rgba(0,0,0,0.25) ); }
.ds-x4-000-025 { filter: drop-shadow( 0 0 1px rgba(0,0,0,0.25) ) drop-shadow( 0 0 1px rgba(0,0,0,0.25) ) drop-shadow( 0 0 1px rgba(0,0,0,0.25) ) drop-shadow( 0 0 1px rgba(0,0,0,0.25) ); }
.ds-x5-000-025 { filter: drop-shadow( 0 0 1px rgba(0,0,0,0.25) ) drop-shadow( 0 0 1px rgba(0,0,0,0.25) ) drop-shadow( 0 0 1px rgba(0,0,0,0.25) ) drop-shadow( 0 0 1px rgba(0,0,0,0.25) ) drop-shadow( 0 0 1px rgba(0,0,0,0.25) ); }
.ds-x1-000-050 { filter: drop-shadow( 0 0 1px rgba(0,0,0,0.5) ); }
.ds-x2-000-050 { filter: drop-shadow( 0 0 1px rgba(0,0,0,0.5) ) drop-shadow( 0 0 1px rgba(0,0,0,0.5) ); }
.ds-x3-000-050 { filter: drop-shadow( 0 0 1px rgba(0,0,0,0.5) ) drop-shadow( 0 0 1px rgba(0,0,0,0.5) ) drop-shadow( 0 0 1px rgba(0,0,0,0.5) ); }
.ds-x4-000-050 { filter: drop-shadow( 0 0 1px rgba(0,0,0,0.5) ) drop-shadow( 0 0 1px rgba(0,0,0,0.5) ) drop-shadow( 0 0 1px rgba(0,0,0,0.5) ) drop-shadow( 0 0 1px rgba(0,0,0,0.5) ); }
.ds-x5-000-050 { filter: drop-shadow( 0 0 1px rgba(0,0,0,0.5) ) drop-shadow( 0 0 1px rgba(0,0,0,0.5) ) drop-shadow( 0 0 1px rgba(0,0,0,0.5) ) drop-shadow( 0 0 1px rgba(0,0,0,0.5) ) drop-shadow( 0 0 1px rgba(0,0,0,0.5) ); }
.ds-x1-000-075 { filter: drop-shadow( 0 0 1px rgba(0,0,0,0.75) ); }
.ds-x2-000-075 { filter: drop-shadow( 0 0 1px rgba(0,0,0,0.75) ) drop-shadow( 0 0 1px rgba(0,0,0,0.75) ); }
.ds-x3-000-075 { filter: drop-shadow( 0 0 1px rgba(0,0,0,0.75) ) drop-shadow( 0 0 1px rgba(0,0,0,0.75) ) drop-shadow( 0 0 1px rgba(0,0,0,0.75) ); }
.ds-x4-000-075 { filter: drop-shadow( 0 0 1px rgba(0,0,0,0.75) ) drop-shadow( 0 0 1px rgba(0,0,0,0.75) ) drop-shadow( 0 0 1px rgba(0,0,0,0.75) ) drop-shadow( 0 0 1px rgba(0,0,0,0.75) ); }
.ds-x5-000-075 { filter: drop-shadow( 0 0 1px rgba(0,0,0,0.75) ) drop-shadow( 0 0 1px rgba(0,0,0,0.75) ) drop-shadow( 0 0 1px rgba(0,0,0,0.75) ) drop-shadow( 0 0 1px rgba(0,0,0,0.75) ) drop-shadow( 0 0 1px rgba(0,0,0,0.75) ); }
.ds-x1-255-100 { filter: drop-shadow( 0 0 1px rgba(255,255,255,1) ); }
.ds-x2-255-100 { filter: drop-shadow( 0 0 1px rgba(255,255,255,1) ) drop-shadow( 0 0 1px rgba(255,255,255,1) ); }
.ds-x3-255-100 { filter: drop-shadow( 0 0 1px rgba(255,255,255,1) ) drop-shadow( 0 0 1px rgba(255,255,255,1) ) drop-shadow( 0 0 1px rgba(255,255,255,1) ); }
.ds-x4-255-100 { filter: drop-shadow( 0 0 1px rgba(255,255,255,1) ) drop-shadow( 0 0 1px rgba(255,255,255,1) ) drop-shadow( 0 0 1px rgba(255,255,255,1) ) drop-shadow( 0 0 1px rgba(255,255,255,1) ); }
.ds-x5-255-100 { filter: drop-shadow( 0 0 1px rgba(255,255,255,1) ) drop-shadow( 0 0 1px rgba(255,255,255,1) ) drop-shadow( 0 0 1px rgba(255,255,255,1) ) drop-shadow( 0 0 1px rgba(255,255,255,1) ) drop-shadow( 0 0 1px rgba(255,255,255,1) ); }
.ds-x1-255-010 { filter: drop-shadow( 0 0 1px rgba(255,255,255,0.1) ); }
.ds-x2-255-010 { filter: drop-shadow( 0 0 1px rgba(255,255,255,0.1) ) drop-shadow( 0 0 1px rgba(255,255,255,0.1) ); }
.ds-x3-255-010 { filter: drop-shadow( 0 0 1px rgba(255,255,255,0.1) ) drop-shadow( 0 0 1px rgba(255,255,255,0.1) ) drop-shadow( 0 0 1px rgba(255,255,255,0.1) ); }
.ds-x4-255-010 { filter: drop-shadow( 0 0 1px rgba(255,255,255,0.1) ) drop-shadow( 0 0 1px rgba(255,255,255,0.1) ) drop-shadow( 0 0 1px rgba(255,255,255,0.1) ) drop-shadow( 0 0 1px rgba(255,255,255,0.1) ); }
.ds-x5-255-010 { filter: drop-shadow( 0 0 1px rgba(255,255,255,0.1) ) drop-shadow( 0 0 1px rgba(255,255,255,0.1) ) drop-shadow( 0 0 1px rgba(255,255,255,0.1) ) drop-shadow( 0 0 1px rgba(255,255,255,0.1) ) drop-shadow( 0 0 1px rgba(255,255,255,0.1) ); }
.ds-x1-255-025 { filter: drop-shadow( 0 0 1px rgba(255,255,255,0.25) ); }
.ds-x2-255-025 { filter: drop-shadow( 0 0 1px rgba(255,255,255,0.25) ) drop-shadow( 0 0 1px rgba(255,255,255,0.25) ); }
.ds-x3-255-025 { filter: drop-shadow( 0 0 1px rgba(255,255,255,0.25) ) drop-shadow( 0 0 1px rgba(255,255,255,0.25) ) drop-shadow( 0 0 1px rgba(255,255,255,0.25) ); }
.ds-x4-255-025 { filter: drop-shadow( 0 0 1px rgba(255,255,255,0.25) ) drop-shadow( 0 0 1px rgba(255,255,255,0.25) ) drop-shadow( 0 0 1px rgba(255,255,255,0.25) ) drop-shadow( 0 0 1px rgba(255,255,255,0.25) ); }
.ds-x5-255-025 { filter: drop-shadow( 0 0 1px rgba(255,255,255,0.25) ) drop-shadow( 0 0 1px rgba(255,255,255,0.25) ) drop-shadow( 0 0 1px rgba(255,255,255,0.25) ) drop-shadow( 0 0 1px rgba(255,255,255,0.25) ) drop-shadow( 0 0 1px rgba(255,255,255,0.25) ); }
.ds-x1-255-050 { filter: drop-shadow( 0 0 1px rgba(255,255,255,0.5) ); }
.ds-x2-255-050 { filter: drop-shadow( 0 0 1px rgba(255,255,255,0.5) ) drop-shadow( 0 0 1px rgba(255,255,255,0.5) ); }
.ds-x3-255-050 { filter: drop-shadow( 0 0 1px rgba(255,255,255,0.5) ) drop-shadow( 0 0 1px rgba(255,255,255,0.5) ) drop-shadow( 0 0 1px rgba(255,255,255,0.5) ); }
.ds-x4-255-050 { filter: drop-shadow( 0 0 1px rgba(255,255,255,0.5) ) drop-shadow( 0 0 1px rgba(255,255,255,0.5) ) drop-shadow( 0 0 1px rgba(255,255,255,0.5) ) drop-shadow( 0 0 1px rgba(255,255,255,0.5) ); }
.ds-x5-255-050 { filter: drop-shadow( 0 0 1px rgba(255,255,255,0.5) ) drop-shadow( 0 0 1px rgba(255,255,255,0.5) ) drop-shadow( 0 0 1px rgba(255,255,255,0.5) ) drop-shadow( 0 0 1px rgba(255,255,255,0.5) ) drop-shadow( 0 0 1px rgba(255,255,255,0.5) ); }
.ds-x1-255-075 { filter: drop-shadow( 0 0 1px rgba(255,255,255,0.75) ); }
.ds-x2-255-075 { filter: drop-shadow( 0 0 1px rgba(255,255,255,0.75) ) drop-shadow( 0 0 1px rgba(255,255,255,0.75) ); }
.ds-x3-255-075 { filter: drop-shadow( 0 0 1px rgba(255,255,255,0.75) ) drop-shadow( 0 0 1px rgba(255,255,255,0.75) ) drop-shadow( 0 0 1px rgba(255,255,255,0.75) ); }
.ds-x4-255-075 { filter: drop-shadow( 0 0 1px rgba(255,255,255,0.75) ) drop-shadow( 0 0 1px rgba(255,255,255,0.75) ) drop-shadow( 0 0 1px rgba(255,255,255,0.75) ) drop-shadow( 0 0 1px rgba(255,255,255,0.75) ); }
.ds-x5-255-075 { filter: drop-shadow( 0 0 1px rgba(255,255,255,0.75) ) drop-shadow( 0 0 1px rgba(255,255,255,0.75) ) drop-shadow( 0 0 1px rgba(255,255,255,0.75) ) drop-shadow( 0 0 1px rgba(255,255,255,0.75) ) drop-shadow( 0 0 1px rgba(255,255,255,0.75) ); }
.ds-050-000-010 { filter: drop-shadow( 0 0.125em 0.5em rgba(0,0,0,0.1) ); }
.ds-050-000-025 { filter: drop-shadow( 0 0.125em 0.5em rgba(0,0,0,0.25) ); }
.ds-050-000-050 { filter: drop-shadow( 0 0.125em 0.5em rgba(0,0,0,0.5) ); }
.ds-050-000-075 { filter: drop-shadow( 0 0.125em 0.5em rgba(0,0,0,0.75) ); }
.ds-050-000-100 { filter: drop-shadow( 0 0.125em 0.5em rgba(0,0,0,1) ); }
.ds-075-000-010 { filter: drop-shadow( 0 0.125em 0.75em rgba(0,0,0,0.1) ); }
.ds-075-000-025 { filter: drop-shadow( 0 0.125em 0.75em rgba(0,0,0,0.25) ); }
.ds-075-000-050 { filter: drop-shadow( 0 0.125em 0.75em rgba(0,0,0,0.5) ); }
.ds-075-000-075 { filter: drop-shadow( 0 0.125em 0.75em rgba(0,0,0,0.75) ); }
.ds-075-000-100 { filter: drop-shadow( 0 0.125em 0.75em rgba(0,0,0,1) ); }
.ds-100-000-010 { filter: drop-shadow( 0 0.125em 1em rgba(0,0,0,0.1) ); }
.ds-100-000-025 { filter: drop-shadow( 0 0.125em 1em rgba(0,0,0,0.25) ); }
.ds-100-000-050 { filter: drop-shadow( 0 0.125em 1em rgba(0,0,0,0.5) ); }
.ds-100-000-075 { filter: drop-shadow( 0 0.125em 1em rgba(0,0,0,0.75) ); }
.ds-100-000-100 { filter: drop-shadow( 0 0.125em 1em rgba(0,0,0,1) ); }
.ds-125-000-010 { filter: drop-shadow( 0 0.125em 1.25em rgba(0,0,0,0.1) ); }
.ds-125-000-025 { filter: drop-shadow( 0 0.125em 1.25em rgba(0,0,0,0.25) ); }
.ds-125-000-050 { filter: drop-shadow( 0 0.125em 1.25em rgba(0,0,0,0.5) ); }
.ds-125-000-075 { filter: drop-shadow( 0 0.125em 1.25em rgba(0,0,0,0.75) ); }
.ds-125-000-100 { filter: drop-shadow( 0 0.125em 1.25em rgba(0,0,0,1) ); }
.ds-150-000-010 { filter: drop-shadow( 0 0.125em 1.5em rgba(0,0,0,0.1) ); }
.ds-150-000-025 { filter: drop-shadow( 0 0.125em 1.5em rgba(0,0,0,0.25) ); }
.ds-150-000-050 { filter: drop-shadow( 0 0.125em 1.5em rgba(0,0,0,0.5) ); }
.ds-150-000-075 { filter: drop-shadow( 0 0.125em 1.5em rgba(0,0,0,0.75) ); }
.ds-150-000-100 { filter: drop-shadow( 0 0.125em 1.5em rgba(0,0,0,1) ); }
.ds-050-255-010 { filter: drop-shadow( 0 0.125em 0.5em rgba(255,255,255,0.1) ); }
.ds-050-255-025 { filter: drop-shadow( 0 0.125em 0.5em rgba(255,255,255,0.25) ); }
.ds-050-255-050 { filter: drop-shadow( 0 0.125em 0.5em rgba(255,255,255,0.5) ); }
.ds-050-255-075 { filter: drop-shadow( 0 0.125em 0.5em rgba(255,255,255,0.75) ); }
.ds-050-255-100 { filter: drop-shadow( 0 0.125em 0.5em rgba(255,255,255,1) ); }
.ds-075-255-010 { filter: drop-shadow( 0 0.125em 0.75em rgba(255,255,255,0.1) ); }
.ds-075-255-025 { filter: drop-shadow( 0 0.125em 0.75em rgba(255,255,255,0.25) ); }
.ds-075-255-050 { filter: drop-shadow( 0 0.125em 0.75em rgba(255,255,255,0.5) ); }
.ds-075-255-075 { filter: drop-shadow( 0 0.125em 0.75em rgba(255,255,255,0.75) ); }
.ds-075-255-100 { filter: drop-shadow( 0 0.125em 0.75em rgba(255,255,255,1) ); }
.ds-100-255-010 { filter: drop-shadow( 0 0.125em 1em rgba(255,255,255,0.1) ); }
.ds-100-255-025 { filter: drop-shadow( 0 0.125em 1em rgba(255,255,255,0.25) ); }
.ds-100-255-050 { filter: drop-shadow( 0 0.125em 1em rgba(255,255,255,0.5) ); }
.ds-100-255-075 { filter: drop-shadow( 0 0.125em 1em rgba(255,255,255,0.75) ); }
.ds-100-255-100 { filter: drop-shadow( 0 0.125em 1em rgba(255,255,255,1) ); }
.ds-125-255-010 { filter: drop-shadow( 0 0.125em 1.25em rgba(255,255,255,0.1) ); }
.ds-125-255-025 { filter: drop-shadow( 0 0.125em 1.25em rgba(255,255,255,0.25) ); }
.ds-125-255-050 { filter: drop-shadow( 0 0.125em 1.25em rgba(255,255,255,0.5) ); }
.ds-125-255-075 { filter: drop-shadow( 0 0.125em 1.25em rgba(255,255,255,0.75) ); }
.ds-125-255-100 { filter: drop-shadow( 0 0.125em 1.25em rgba(255,255,255,1) ); }
.ds-150-255-010 { filter: drop-shadow( 0 0.125em 1.5em rgba(255,255,255,0.1) ); }
.ds-150-255-025 { filter: drop-shadow( 0 0.125em 1.5em rgba(255,255,255,0.25) ); }
.ds-150-255-050 { filter: drop-shadow( 0 0.125em 1.5em rgba(255,255,255,0.5) ); }
.ds-150-255-075 { filter: drop-shadow( 0 0.125em 1.5em rgba(255,255,255,0.75) ); }
.ds-150-255-100 { filter: drop-shadow( 0 0.125em 1.5em rgba(255,255,255,1) ); }
.ds-050-theme-010 { filter: drop-shadow( 0 0.125em 0.5em rgba(var(--theme),0.1) ); }
.ds-050-theme-025 { filter: drop-shadow( 0 0.125em 0.5em rgba(var(--theme),0.25) ); }
.ds-050-theme-050 { filter: drop-shadow( 0 0.125em 0.5em rgba(var(--theme),0.5) ); }
.ds-050-theme-075 { filter: drop-shadow( 0 0.125em 0.5em rgba(var(--theme),0.75) ); }
.ds-050-theme-100 { filter: drop-shadow( 0 0.125em 0.5em rgba(var(--theme),1) ); }
.ds-075-theme-010 { filter: drop-shadow( 0 0.125em 0.75em rgba(var(--theme),0.1) ); }
.ds-075-theme-025 { filter: drop-shadow( 0 0.125em 0.75em rgba(var(--theme),0.25) ); }
.ds-075-theme-050 { filter: drop-shadow( 0 0.125em 0.75em rgba(var(--theme),0.5) ); }
.ds-075-theme-075 { filter: drop-shadow( 0 0.125em 0.75em rgba(var(--theme),0.75) ); }
.ds-075-theme-100 { filter: drop-shadow( 0 0.125em 0.75em rgba(var(--theme),1) ); }
.ds-100-theme-010 { filter: drop-shadow( 0 0.125em 1em rgba(var(--theme),0.1) ); }
.ds-100-theme-025 { filter: drop-shadow( 0 0.125em 1em rgba(var(--theme),0.25) ); }
.ds-100-theme-050 { filter: drop-shadow( 0 0.125em 1em rgba(var(--theme),0.5) ); }
.ds-100-theme-075 { filter: drop-shadow( 0 0.125em 1em rgba(var(--theme),0.75) ); }
.ds-100-theme-100 { filter: drop-shadow( 0 0.125em 1em rgba(var(--theme),1) ); }
.ds-125-theme-010 { filter: drop-shadow( 0 0.125em 1.25em rgba(var(--theme),0.1) ); }
.ds-125-theme-025 { filter: drop-shadow( 0 0.125em 1.25em rgba(var(--theme),0.25) ); }
.ds-125-theme-050 { filter: drop-shadow( 0 0.125em 1.25em rgba(var(--theme),0.5) ); }
.ds-125-theme-075 { filter: drop-shadow( 0 0.125em 1.25em rgba(var(--theme),0.75) ); }
.ds-125-theme-100 { filter: drop-shadow( 0 0.125em 1.25em rgba(var(--theme),1) ); }
.ds-150-theme-010 { filter: drop-shadow( 0 0.125em 1.5em rgba(var(--theme),0.1) ); }
.ds-150-theme-025 { filter: drop-shadow( 0 0.125em 1.5em rgba(var(--theme),0.25) ); }
.ds-150-theme-050 { filter: drop-shadow( 0 0.125em 1.5em rgba(var(--theme),0.5) ); }
.ds-150-theme-075 { filter: drop-shadow( 0 0.125em 1.5em rgba(var(--theme),0.75) ); }
.ds-150-theme-100 { filter: drop-shadow( 0 0.125em 1.5em rgba(var(--theme),1) ); }
.ds-021-000-005 {
position: absolute; bottom: 0; z-index: -1;
filter: grayscale(100%) blur(30px) drop-shadow( 0 1em 2em rgba(000,000,000,0.3) );
transform: translate(3%, 15%) scale(0.66,0.25);
}
/* blur */
.blr,
.hvr-blr { filter: blur(5px); } /* webkit filter 単位vw不可*/
.hvr-blr:hover { filter: blur(0px); }
.gs,
.hvr-gs { filter: grayscale(100%); }
.hvr-gs:hover { filter: grayscale(0%); }
.gs-br-090,
.hvr-gs-br-090 { filter: grayscale(100%) brightness(90%); }
.hvr-gs-br-090:hover { filter: grayscale(0%) brightness(100%); }
.gs-cn-090,
.hvr-gs-cn-090 { filter: grayscale(100%) contrast(90%); }
.hvr-gs-cn-090:hover { filter: grayscale(0%) contrast(100%); }
.gs-cn-080,
.hvr-gs-cn-080 { filter: grayscale(100%) contrast(80%); }
.hvr-gs-cn-080:hover { filter: grayscale(0%) contrast(100%); }
.gs-cn-070,
.hvr-gs-cn-070 { filter: grayscale(100%) contrast(70%); }
.hvr-gs-cn-070:hover { filter: grayscale(0%) contrast(100%); }
.gs-br-090-cn-090,
.hvr-gs-br-090-cn-090 { filter: grayscale(100%) brightness(90%) contrast(90%); }
.hvr-gs-br-090-cn-090:hover { filter: grayscale(0%) brightness(100%) contrast(100%); }
.rev-gs,
.hvr-rev-gs { filter: grayscale(0%); }
.hvr-rev-gs:hover { filter: grayscale(100%); }
.blr-gs, .gs-blr,
.hvr-blr-gs, .hvr-gs-blr { filter: blur(10px) grayscale(100%); }
.hvr-blr-gs:hover, .hvr-gs-blr:hover { filter: blur(0px) grayscale(0%); }
.rev-blr-gs, .rev-gs-blr,
.hvr-rev-blr-gs, .hvr-rev-gs-blr { filter: blur(10px) grayscale(0%); }
.hvr-rev-blr-gs:hover, .hvr-rev-gs-blr:hover { filter: blur(0px) grayscale(100%); }
.bg-blr { backdrop-filter: blur(10px); } /* Chome body: background-color ? */
.bg-blr-01 { backdrop-filter: blur(5px); }
.bg-blr-10 { z-index: 0; position: relative; }
.bg-blr-10:before{
content: ''; position: absolute; top: 0; left: 0; z-index: -1; width: 100%; height: 100%;
background-color: rgba(255,255,255,0.66); backdrop-filter: blur(10px);
}
.hvr-zm, .hvr-rev-zm { overflow: hidden; }
a.hvr-zm, a.hvr-rev-zm { display: block; }
.hvr-zm:hover > *,
.hvr-rev-zm > * { transform: scale(1.02,1.02); }
.hvr-rev-zm:hover > * { transform: scale(1,1); }
.hvr-ivt { -webkit-transition: 0.15s ease-in-out; transition: 0.15s ease-in-out; }
.hvr-ivt:hover { filter: invert(1); }
.hvr-c, .hvr-c-a { filter: brightness(0) invert(0); opacity: 0.5; }
.hvr-c:hover, .hvr-c-a:hover { filter: initial; opacity: 1; }
.hvr-c-a:active { filter: brightness(2) invert(0); opacity: 1; }
.img-w { filter: brightness(0) invert(1); }
.img-b { filter: brightness(0) invert(0); }
/* mix blend mode, Firefox body: background-color 併用注意 */
.mix-dg { mix-blend-mode: color-dodge; filter: brightness(101%); }
.mix-dg { color: rgba(128,128,128,1); }
_::-webkit-full-page-media, _:future, :root .wr-mix { isolation: isolate; } /* Safari */
.ro-000 { transform: rotate( 0deg); }
.ro-003 { transform: rotate( 3deg); }
.ro-005 { transform: rotate( 5deg); }
.ro-010 { transform: rotate( 10deg); }
.ro-090 { transform: rotate( 90deg); }
.ro-180 { transform: rotate(180deg); }
.ro-n-003 { transform: rotate( -3deg); }
.ro-n-005 { transform: rotate( -5deg); }
.ro-n-010 { transform: rotate( -10deg); }
.ro-n-090 { transform: rotate( -90deg); }
.ro-n-180 { transform: rotate(-180deg); }
/***** layout *****/
/* flex */
.fln { display: initial; }
.fl, .fll, .flr, .flc, .flcl, .fls, .flcs { display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; display: flex; }
.fl, .fl-row { -webkit-box-orient: horizontal; -webkit-box-direction: normal; -webkit-flex-direction: row; -ms-flex-direction: row; flex-direction: row; }
.fl-col { -webkit-box-orient: vertical; -webkit-box-direction: normal; -webkit-flex-direction: column; -ms-flex-direction: column; flex-direction: column; }
.fl, .fll, .flr, .flc, .flcl, .fls, .flcs, fl-wr { -webkit-flex-wrap: wrap; -ms-flex-wrap: wrap; flex-wrap: wrap; }
.fl-nowr { -webkit-flex-wrap: nowrap; -ms-flex-wrap: nowrap; flex-wrap: nowrap; }
.fl, .fll {
-webkit-box-pack: start; -webkit-justify-content: flex-start; -ms-flex-pack: start; justify-content: flex-start;
-webkit-box-align: start; -webkit-align-items: flex-start; -ms-flex-align: start; align-items: flex-start;
-webkit-align-content: flex-start; -ms-flex-line-pack: start; align-content: flex-start;
}
.flr {
-webkit-box-pack: end; -webkit-justify-content: flex-end; -ms-flex-pack: end; justify-content: flex-end;
-webkit-box-align: start; -webkit-align-items: flex-start; -ms-flex-align: start; align-items: flex-start;
-webkit-align-content: flex-start; -ms-flex-line-pack: start; align-content: flex-start;
}
.flc {
-webkit-box-pack: center; -webkit-justify-content: center; -ms-flex-pack: center; justify-content: center;
-webkit-box-align: center; -webkit-align-items: center; -ms-flex-align: center; align-items: center;
-webkit-align-content: center; -ms-flex-line-pack: center; align-content: center;
}
.flcl {
-webkit-box-pack: start; -webkit-justify-content: flex-start; -ms-flex-pack: start; justify-content: flex-start;
-webkit-align-content: center; -ms-flex-line-pack: center; align-content: center;
-webkit-box-align: center; -webkit-align-items: center; -ms-flex-align: center; align-items: center;
}
.fls {
-webkit-box-pack: stretch; -webkit-justify-content: stretch; -ms-flex-pack: stretch; justify-content: stretch;
-webkit-box-align: stretch; -webkit-align-items: stretch; -ms-flex-align: stretch; align-items: stretch;
-webkit-align-content: stretch; -ms-flex-line-pack: stretch; align-content: stretch;
}
.flcs {
-webkit-box-pack: center; -webkit-justify-content: center; -ms-flex-pack: center; justify-content: center;
-webkit-box-align: center; -webkit-align-items: center; -ms-flex-align: center; align-items: center;
-webkit-align-content: center; -ms-flex-line-pack: center; align-content: center;
}
.fl-sb { justify-content: space-between; flex-wrap: nowrap; }
.fl > *,
.fll > * { -webkit-align-self: flex-start; -ms-flex-item-align: start; align-self: flex-start; }
.flr > * { -webkit-align-self: flex-end; -ms-flex-item-align: end; align-self: flex-end; }
.flc > * { -webkit-align-self: center; -ms-flex-item-align: center; align-self: center; }
.flcl > * { -webkit-align-self: stretch; -ms-flex-item-align: stretch; align-self: stretch; }
.fls > * { -webkit-align-self: stretch; -ms-flex-item-align: stretch; align-self: stretch; }
.flcs > * { -webkit-align-self: stretch; -ms-flex-item-align: stretch; align-self: stretch; }
:where(.fl, .fll, .flr, .flc, .flcl, .fls, .flcs) * { min-height: 0%; }
.fl *, .fll *, .flr *, .flc *, .flcl *, .fls *, .flcs * { min-height: 0%; }
[class*=fl] * { min-height: 0%; }
[class*=fl] > * { height: auto; }
/*
[class*=fl] { -webkit-box-pack: justify; -webkit-justify-content: space-between; -ms-flex-pack: justify; justify-content: space-between; }
[class*=fl] > * { -webkit-flex-grow: 1; -ms-flex-positive: 1; flex-grow: 1; }
*/
.gap-0001 { gap: 1px; }
.gap-0025 { gap: 0.25em; }
.gap-0050 { gap: 0.5em; }
.gap-0075 { gap: 0.75em; }
.gap-01 { gap: 1em; }
.gap-0150 { gap: 1.5em; }
.gap-02 { gap: 2em; }
.gap-03 { gap: 3em; }
.row-rev { flex-direction: row-reverse; }
.col-3-2 > *:nth-of-type(4n), .col-3-2 > *:nth-of-type(9n), .col-3-2 > *:nth-of-type(14n) { margin-left: 16.66%;}
.col-3-2 > *:nth-of-type(5n) { margin-right: 16.66%;}
.col-3-2 > *:nth-of-type(8n), .col-3-2 > *:nth-of-type(12n) { margin-left: 0%; margin-right: 0%;}
/* legacy
.row, .fl, .fll, .flr, .flc, .fls { margin-right: auto; margin-left: auto; }
.row:after, .fl:after, .fll:after, .flr:after, .flc:after, .fls:after, { content: ""; display: block; clear: both; }
.col, .fl > *, .fll > *, .flr > *, .flc > *, .fls > * { display: block; float: left; }
.clr:after { content: ""; display: block; clear: both; }
*/
/* object-fit: img, iframe ... */
.fit-cnt { object-fit: contain; width: 100%; height: 100%; }
.fit-cvr { object-fit: cover; width: 100%; height: 100%; }
@media all and (-ms-high-contrast: none) {
.fit-cnt {
position: absolute; top: 50%; left: 50%; width: auto; height: auto; max-height: 100%; max-width: 100%;
-ms-transform: translateX(-50%) translateY(-50%); -moz-transform: translateX(-50%) translateY(-50%);
-webkit-transform: translateX(-50%) translateY(-50%); transform: translateX(-50%) translateY(-50%);
}
.fit-cvr {
position: absolute; top: 50%; left: 50%; width: auto; height: auto; min-height: 100%; min-width: 100%;
-ms-transform: translateX(-50%) translateY(-50%); -moz-transform: translateX(-50%) translateY(-50%);
-webkit-transform: translateX(-50%) translateY(-50%); transform: translateX(-50%) translateY(-50%);
}
}
/* aspect-ratio: warpper: width > ar */
.ar-0101 { position: relative; overflow: hidden; aspect-ratio: 1/1; }
.ar-0201 { position: relative; overflow: hidden; aspect-ratio: 2/1; } /* 100/50 */
.ar-0301 { position: relative; overflow: hidden; aspect-ratio: 3/1; }
.ar-0302 { position: relative; overflow: hidden; aspect-ratio: 3/2; } /* 480x320 100/66 */
.ar-0401 { position: relative; overflow: hidden; aspect-ratio: 4/1; }
.ar-0403 { position: relative; overflow: hidden; aspect-ratio: 4/3; } /* 320x240, 640x480(SD), 1280x960 100/75 */
.ar-0504 { position: relative; overflow: hidden; aspect-ratio: 5/4; } /* 100/80 */
.ar-1609 { position: relative; overflow: hidden; aspect-ratio: 16/9; } /* 1280x720(HD), 1600x900, 1920x1080(FHD), 2560x1440, 3840x2160(4K) */
.ar-1610 { position: relative; overflow: hidden; aspect-ratio: 16/10; } /* 1280x800, 1440x900, 1680x1050, 1920x1200, 2560x1600, 3840x2400 */
.ar-OGPI { position: relative; overflow: hidden; aspect-ratio: 1.91/1; } /* 1200x630(OGP) */
.ar-aOGPI { position: relative; overflow: hidden; aspect-ratio: 1.875/1; } /* 1200x640(approximately equal OGP) */
.ar-0102, .ar-v-0201 { position: relative; overflow: hidden; aspect-ratio: 1/2; }
.ar-0103, .ar-v-0301 { position: relative; overflow: hidden; aspect-ratio: 1/3; }
.ar-0104, .ar-v-0401 { position: relative; overflow: hidden; aspect-ratio: 1/4; }
.ar-0203, .ar-v-0302 { position: relative; overflow: hidden; aspect-ratio: 2/3; }
.ar-0304, .ar-v-0403 { position: relative; overflow: hidden; aspect-ratio: 3/4; }
.ar-0405, .ar-v-0504 { position: relative; overflow: hidden; aspect-ratio: 4/5; }
.ar-0916, .ar-v-1609 { position: relative; overflow: hidden; aspect-ratio: 9/16; }
.ar-1016, .ar-v-1610 { position: relative; overflow: hidden; aspect-ratio: 10/16; }
[class*=ar-] { height: 100%; min-width: 0; }
[class*="ar-"] > * { aspect-ratio: inherit; }
[class*=ar-] img { width: 100%; height: 100%; }
[class*=ar-] img:not(.fit-cnt) { object-fit: cover; }
@media all and (-ms-high-contrast: none) {
.ar-0101 { position: relative; overflow: hidden; width: 100%; padding-top: 100%; }
.ar-0201 { position: relative; overflow: hidden; width: 100%; padding-top: 50%; }
.ar-0301 { position: relative; overflow: hidden; width: 100%; padding-top: 33.3333%; }
.ar-0302 { position: relative; overflow: hidden; width: 100%; padding-top: 66.6666%; }
.ar-0401 { position: relative; overflow: hidden; width: 100%; padding-top: 25%; }
.ar-0403 { position: relative; overflow: hidden; width: 100%; padding-top: 75%; }
.ar-0504 { position: relative; overflow: hidden; width: 100%; padding-top: 80%; }
.ar-1609 { position: relative; overflow: hidden; width: 100%; padding-top: 56.25%; }
.ar-1610 { position: relative; overflow: hidden; width: 100%; padding-top: 62.5%; }
.ar-OGPI { position: relative; overflow: hidden; width: 100%; padding-top: 52.3560%; }
.ar-aOGPI { position: relative; overflow: hidden; width: 100%; padding-top: 53.3333%; }
.ar-0102, .ar-v-0201 { position: relative; overflow: hidden; width: 100%; padding-top: 200%; }
.ar-0103, .ar-v-0301 { position: relative; overflow: hidden; width: 100%; padding-top: 300%; }
.ar-0104, .ar-v-0401 { position: relative; overflow: hidden; width: 100%; padding-top: 400%; }
.ar-0203, .ar-v-0302 { position: relative; overflow: hidden; width: 100%; padding-top: 150%; }
.ar-0304, .ar-v-0403 { position: relative; overflow: hidden; width: 100%; padding-top: 133.3333%; }
.ar-0405, .ar-v-0504 { position: relative; overflow: hidden; width: 100%; padding-top: 125%; }
.ar-0916, .ar-v-1609 { position: relative; overflow: hidden; width: 100%; padding-top: 177.7777%; }
.ar-1016, .ar-v-1610 { position: relative; overflow: hidden; width: 100%; padding-top: 160%; }
[class*=ar-] > * {
position: absolute; top: 50%; left: 50%; width: auto; height: auto; min-height: 100%; min-width: 100%;
-ms-transform: translateX(-50%) translateY(-50%); -moz-transform: translateX(-50%) translateY(-50%);
-webkit-transform: translateX(-50%) translateY(-50%); transform: translateX(-50%) translateY(-50%);
}
}
/* Safari, ...worked iOS Chrome */
/*
_::-webkit-full-page-media, _:future, :root .ar-0101 { position: relative; overflow: hidden; width: 100%; padding-top: 100%; }
_::-webkit-full-page-media, _:future, :root .ar-0201 { position: relative; overflow: hidden; width: 100%; padding-top: 50%; }
_::-webkit-full-page-media, _:future, :root .ar-0301 { position: relative; overflow: hidden; width: 100%; padding-top: 33.3333%; }
_::-webkit-full-page-media, _:future, :root .ar-0302 { position: relative; overflow: hidden; width: 100%; padding-top: 66.6666%; }
_::-webkit-full-page-media, _:future, :root .ar-0401 { position: relative; overflow: hidden; width: 100%; padding-top: 25%; }
_::-webkit-full-page-media, _:future, :root .ar-0403 { position: relative; overflow: hidden; width: 100%; padding-top: 75%; }
_::-webkit-full-page-media, _:future, :root .ar-0504 { position: relative; overflow: hidden; width: 100%; padding-top: 80%; }
_::-webkit-full-page-media, _:future, :root .ar-1609 { position: relative; overflow: hidden; width: 100%; padding-top: 56.25%; }
_::-webkit-full-page-media, _:future, :root .ar-1610 { position: relative; overflow: hidden; width: 100%; padding-top: 62.5%; }
_::-webkit-full-page-media, _:future, :root .ar-OGPI { position: relative; overflow: hidden; width: 100%; padding-top: 52.3560%; }
_::-webkit-full-page-media, _:future, :root .ar-aOGPI { position: relative; overflow: hidden; width: 100%; padding-top: 53.3333%; }
_::-webkit-full-page-media, _:future, :root .ar-0102,
_::-webkit-full-page-media, _:future, :root .ar-v-0201 { position: relative; overflow: hidden; width: 100%; padding-top: 200%; }
_::-webkit-full-page-media, _:future, :root .ar-0103,
_::-webkit-full-page-media, _:future, :root .ar-v-0301 { position: relative; overflow: hidden; width: 100%; padding-top: 300%; }
_::-webkit-full-page-media, _:future, :root .ar-0104,
_::-webkit-full-page-media, _:future, :root .ar-v-0401 { position: relative; overflow: hidden; width: 100%; padding-top: 400%; }
_::-webkit-full-page-media, _:future, :root .ar-0203,
_::-webkit-full-page-media, _:future, :root .ar-v-0302 { position: relative; overflow: hidden; width: 100%; padding-top: 150%; }
_::-webkit-full-page-media, _:future, :root .ar-0304,
_::-webkit-full-page-media, _:future, :root .ar-v-0403 { position: relative; overflow: hidden; width: 100%; padding-top: 133.3333%; }
_::-webkit-full-page-media, _:future, :root .ar-0405,
_::-webkit-full-page-media, _:future, :root .ar-v-0504 { position: relative; overflow: hidden; width: 100%; padding-top: 125%; }
_::-webkit-full-page-media, _:future, :root .ar-0916,
_::-webkit-full-page-media, _:future, :root .ar-v-1609 { position: relative; overflow: hidden; width: 100%; padding-top: 177.7777%; }
_::-webkit-full-page-media, _:future, :root .ar-1016,
_::-webkit-full-page-media, _:future, :root .ar-v-1610 { position: relative; overflow: hidden; width: 100%; padding-top: 160%; }
_::-webkit-full-page-media, _:future, :root [class*=ar-] > * {
position: absolute; top: 50%; left: 50%; width: auto; height: auto; min-height: 100%; min-width: 100%;
-ms-transform: translateX(-50%) translateY(-50%); -moz-transform: translateX(-50%) translateY(-50%);
-webkit-transform: translateX(-50%) translateY(-50%); transform: translateX(-50%) translateY(-50%);
}
_::-webkit-full-page-media, _:future, :root [class*=ar-] > .fit-cnt {
position: absolute; top: 50%; left: 50%; width: 100%; height: 100%; min-height: auto; min-width: auto; max-height: 100%; max-width: 100%;
-ms-transform: translateX(-50%) translateY(-50%); -moz-transform: translateX(-50%) translateY(-50%);
-webkit-transform: translateX(-50%) translateY(-50%); transform: translateX(-50%) translateY(-50%);
}
*/
/* visibility */
.vis { visibility: visible; }
.vih { visibility: hidden; }
.vic { visibility: collapse; }
/* display */
.din { display: initial; }
.dno { display: none; }
.dil { display: inline; }
.dbl { display: block; }
.dib { display: inline-block; }
.dff { display: none; }
@-moz-document url-prefix(){ .dff { display: flex; } }
/* overflow */
.of-v { overflow: visible; }
.of-h { overflow: hidden; }
.of-c { overflow: clip; }
.ofx-v { overflow-x: visible; }
.ofx-h { overflow-x: hidden; overflow-y: auto; }
.ofx-c { overflow-x: clip; }
.ofy-v { overflow-y: visible; }
.ofy-h { overflow-x: auto; overflow-y: hidden; }
.ofy-c { overflow-y: clip; }
/* position */
.stt { position: static; }
.rlt { position: relative; }
.abs { position: absolute; z-index: 5; }
.fix { position: fixed; z-index: 5; }
.sti { position: -webkit-sticky; position: sticky; z-index: 5; }
:where(.abs, .fix, .sti):not([class*=pos-b]) { top: 0; }
.z-n-02 { z-index: -2; }
.z-n-01 { z-index: -1; }
.z-00 { z-index: 0; }
.z-01 { z-index: 1; }
.z-02 { z-index: 2; }
.z-03 { z-index: 3; }
.z-04 { z-index: 4; }
.z-05 { z-index: 5; }
.z-10 { z-index: 10; }
.z-50 { z-index: 50; }
.z-99 { z-index: 99; }
.z-999 { z-index: 999; }
.z-9999 { z-index: 9999; }
.pos-0000 { top: 0; bottom: 0; left: 0; right: 0; margin: auto; }
.pos-tb-0000 { top: 0; bottom: 0; margin-top: auto; margin-bottom: auto; }
.pos-lr-0000 { left: 0; right: 0; margin-left: auto; margin-right: auto; }
.pos-tb-00 { top: 0; bottom: 0; }
.pos-lr-00 { left: 0; right: 0; }
.pos-tl-00 { top: 0; left: 0; }
.pos-br-00 { bottom: 0; right: 0; }
.pos-t-00 { top: 0; } .pos-b-00 { bottom: 0; } .pos-l-00 { left: 0; } .pos-r-00 { right: 0; }
.pos-t-0025 { top: 0.25em; } .pos-b-0025 { bottom: 0.25em; } .pos-l-0025 { left: 0.25em; } .pos-r-0025 { right: 0.25em; }
.pos-t-0050 { top: 0.5em; } .pos-b-0050 { bottom: 0.5em; } .pos-l-0050 { left: 0.5em; } .pos-r-0050 { right: 0.5em; }
.pos-t-0075 { top: 0.75em; } .pos-b-0075 { bottom: 0.75em; } .pos-l-0075 { left: 0.75em; } .pos-r-0075 { right: 0.75em; }
.pos-t-01 { top: 1em; } .pos-b-01 { bottom: 1em; } .pos-l-01 { left: 1em; } .pos-r-01 { right: 1em; }
.pos-t-02 { top: 2em; } .pos-b-02 { bottom: 2em; } .pos-l-02 { left: 2em; } .pos-r-02 { right: 2em; }
.pos-t-0250 { top: 2.5em; } .pos-b-0250 { bottom: 2.5em; } .pos-l-0250 { left: 2.5em; } .pos-r-0250 { right: 2.5em; }
.pos-t-03 { top: 3em; } .pos-b-03 { bottom: 3em; } .pos-l-03 { left: 3em; } .pos-r-03 { right: 3em; }
.pos-t-04 { top: 4em; } .pos-b-04 { bottom: 4em; } .pos-l-04 { left: 4em; } .pos-r-04 { right: 4em; }
.pos-t-05 { top: 5em; } .pos-b-05 { bottom: 5em; } .pos-l-05 { left: 5em; } .pos-r-05 { right: 5em; }
.pos-t-06 { top: 6em; } .pos-b-06 { bottom: 6em; } .pos-l-06 { left: 6em; } .pos-r-06 { right: 6em; }
.pos-t-07 { top: 7em; } .pos-b-07 { bottom: 7em; } .pos-l-07 { left: 7em; } .pos-r-07 { right: 7em; }
.pos-t-0750 { top: 7.5em; } .pos-b-0750 { bottom: 7.5em; } .pos-l-0750 { left: 7.5em; } .pos-r-0750 { right: 7.5em; }
.pos-t-08 { top: 8em; } .pos-b-08 { bottom: 8em; } .pos-l-08 { left: 8em; } .pos-r-08 { right: 8em; }
.pos-t-09 { top: 9em; } .pos-b-09 { bottom: 9em; } .pos-l-09 { left: 9em; } .pos-r-09 { right: 9em; }
.pos-t-10 { top: 10em; } .pos-b-10 { bottom: 10em; } .pos-l-10 { left: 10em; } .pos-r-10 { right: 10em; }
.pos-t-n-0025 { top: -0.25em; } .pos-b-n-0025 { bottom: -0.25em; } .pos-l-n-0025 { left: -0.25em; } .pos-r-n-0025 { right: -0.25em; }
.pos-t-n-0050 { top: -0.5em; } .pos-b-n-0050 { bottom: -0.5em; } .pos-l-n-0050 { left: -0.5em; } .pos-r-n-0050 { right: -0.5em; }
.pos-t-n-0075 { top: -0.75em; } .pos-b-n-0075 { bottom: -0.75em; } .pos-l-n-0075 { left: -0.75em; } .pos-r-n-0075 { right: -0.75em; }
.pos-t-n-01 { top: -1em; } .pos-b-n-01 { bottom: -1em; } .pos-l-n-01 { left: -1em; } .pos-r-n-01 { right: -1em; }
.pos-t-n-02 { top: -2em; } .pos-b-n-02 { bottom: -2em; } .pos-l-n-02 { left: -2em; } .pos-r-n-02 { right: -2em; }
.pos-t-n-0250 { top: -2.5em; } .pos-b-n-0250 { bottom: -2.5em; } .pos-l-n-0250 { left: -2.5em; } .pos-r-n-0250 { right: -2.5em; }
.pos-t-n-03 { top: -3em; } .pos-b-n-03 { bottom: -3em; } .pos-l-n-03 { left: -3em; } .pos-r-n-03 { right: -3em; }
.pos-t-n-04 { top: -4em; } .pos-b-n-04 { bottom: -4em; } .pos-l-n-04 { left: -4em; } .pos-r-n-04 { right: -4em; }
.pos-t-n-05 { top: -5em; } .pos-b-n-05 { bottom: -5em; } .pos-l-n-05 { left: -5em; } .pos-r-n-05 { right: -5em; }
.pos-t-n-06 { top: -6em; } .pos-b-n-06 { bottom: -6em; } .pos-l-n-06 { left: -6em; } .pos-r-n-06 { right: -6em; }
.pos-t-n-07 { top: -7em; } .pos-b-n-07 { bottom: -7em; } .pos-l-n-07 { left: -7em; } .pos-r-n-07 { right: -7em; }
.pos-t-n-0750 { top: -7.5em; } .pos-b-n-0750 { bottom: -7.5em; } .pos-l-n-0750 { left: -7.5em; } .pos-r-n-0750 { right: -7.5em; }
.pos-t-n-08 { top: -8em; } .pos-b-n-08 { bottom: -8em; } .pos-l-n-08 { left: -8em; } .pos-r-n-08 { right: -8em; }
.pos-t-n-09 { top: -9em; } .pos-b-n-09 { bottom: -9em; } .pos-l-n-09 { left: -9em; } .pos-r-n-09 { right: -9em; }
.pos-t-n-10 { top: -10em; } .pos-b-n-10 { bottom: -10em; } .pos-l-n-10 { left: -10em; } .pos-r-n-10 { right: -10em; }
.pos-t-n-11 { top: -11em; } .pos-b-n-11 { bottom: -11em; } .pos-l-n-11 { left: -11em; } .pos-r-n-11 { right: -11em; }
.pos-t-n-12 { top: -12em; } .pos-b-n-12 { bottom: -12em; } .pos-l-n-12 { left: -12em; } .pos-r-n-12 { right: -12em; }
.pos-t-n-13 { top: -13em; } .pos-b-n-13 { bottom: -13em; } .pos-l-n-13 { left: -13em; } .pos-r-n-13 { right: -13em; }
.pos-t-n-14 { top: -14em; } .pos-b-n-14 { bottom: -14em; } .pos-l-n-14 { left: -14em; } .pos-r-n-14 { right: -14em; }
.pos-t-n-15 { top: -15em; } .pos-b-n-15 { bottom: -15em; } .pos-l-n-15 { left: -15em; } .pos-r-n-15 { right: -15em; }
.pos-t-n-20 { top: -20em; } .pos-b-n-20 { bottom: -20em; } .pos-l-n-20 { left: -20em; } .pos-r-n-20 { right: -20em; }
/* width, height */
.wh-auto { width: auto; height: auro; }
.wd-auto { width: auto; }
.hi-auto { height: auto; }
.wd-cnt { width: max-content; } .min-wd-cnt { min-width: max-content; } .max-wd-cnt { max-width: max-content; }
.wh-100 { width: 100%; height: 100%; } .min-wh-100 { min-width: 100%; min-height: 100%; } .max-wh-100 { max-width: 100%; max-height: 100%; }
.wh-075 { width: 75%; height: 75%; }
.wh-066 { width: 66.6666%; height: 66.6666%; }
.wh-050 { width: 50%; height: 50%; }
.wh-033 { width: 33.3333%; height: 33.3333%; }
.wh-025 { width: 25%; height: 25%; }
.wh-020 { width: 20%; height: 20%; }
.wh-001 { width: 1px; height: 1px; }
.vwvh-100 { width: 100vw; height: 100vh; } .min-vwvh-100 { min-width: 100vw; min-height: 100vh; } .max-vwvh-100 { max-width: 100vw; max-height: 100vh; }
.vwvh-075 { width: 75vw; height: 75vh; }
.vwvh-066 { width: 66.6666vw; height: 66.6666vh; }
.vwvh-050 { width: 50vw; height: 50vh; }
.vwvh-033 { width: 33.3333vw; height: 33.3333vh; }
.vwvh-025 { width: 25vw; height: 25vh; }
.vwvh-020 { width: 25vw; height: 20vh; }
.wd-100 { width: 100%; } .min-wd-100 { min-width: 100%; } .max-wd-100 { max-width: 100%; }
.wd-099 { width: calc(100% - 1px); } .min-wd-100 { min-width: calc(100% - 1px); } .max-wd-100 { max-width: calc(100% - 1px); }
.wd-095 { width: 95%; }
.wd-090 { width: 90%; }
.wd-087 { width: 87.5%; }
.wd-085 { width: 85%; }
.wd-083 { width: 83.3333%; } .min-wd-083 { min-width: 83.3333%; } .max-wd-083 { max-width: 83.3333%; }
.wd-080 { width: 80%; }
.wd-075 { width: 75%; } .min-wd-075 { min-width: 75%; } .max-wd-075 { max-width: 75%; }
.wd-070 { width: 70%; }
.wd-066 { width: 66.6666%; } .min-wd-066 { min-width: 66.6666%; } .max-wd-066 { max-width: 66.6666%; }
.wd-065 { width: 65%; }
.wd-060 { width: 60%; }
.wd-055 { width: 55%; }
.wd-050 { width: 50%; } .min-wd-050 { min-width: 50%; } .max-wd-050 { max-width: 50%; }
.wd-045 { width: 45%; }
.wd-040 { width: 40%; }
.wd-035 { width: 35%; }
.wd-033 { width: 33.3333%; } .min-wd-033 { min-width: 33.3333%; } .max-wd-033 { max-width: 33.3333%; }
.wd-030 { width: 30%; }
.wd-025 { width: 25%; } .min-wd-025 { min-width: 25%; } .max-wd-025 { max-width: 25%; }
.wd-020 { width: 20%; }
.wd-016 { width: 16.6666%; } .min-wd-016 { min-width: 16.6666%; } .max-wd-016 { max-width: 16.6666%; }
.wd-015 { width: 15%; }
.wd-012 { width: 12.5%; }
.wd-010 { width: 10%; }
.vw-100 { width: 100vw; } .min-vw-100 { min-width: 100vw; } .max-vw-100 { max-width: 100vw; }
.vw-090 { width: 90vw; } .min-vw-090 { min-width: 90vw; } .max-vw-090 { max-width: 90vw; }
.vw-080 { width: 80vw; } .min-vw-080 { min-width: 80vw; } .max-vw-080 { max-width: 80vw; }
.vw-075 { width: 75vw; } .min-vw-075 { min-width: 75vw; } .max-vw-075 { max-width: 75vw; }
.vw-070 { width: 70vw; } .min-vw-070 { min-width: 70vw; } .max-vw-070 { max-width: 70vw; }
.vw-066 { width: 66.6666vw; } .min-vw-066 { min-width: 66.6666vw; } .max-vw-066 { max-width: 66.6666vw; }
.vw-060 { width: 60vw; } .min-vw-060 { min-width: 60vw; } .max-vw-060 { max-width: 60vw; }
.vw-050 { width: 50vw; } .min-vw-050 { min-width: 50vw; } .max-vw-050 { max-width: 50vw; }
.vw-040 { width: 40vw; } .min-vw-040 { min-width: 40vw; } .max-vw-040 { max-width: 40vw; }
.vw-033 { width: 33.3333vw; } .min-vw-033 { min-width: 33.3333vw; } .max-vw-033 { max-width: 33.3333vw; }
.vw-030 { width: 30vw; } .min-vw-030 { min-width: 30vw; } .max-vw-030 { max-width: 30vw; }
.vw-025 { width: 25vw; } .min-vw-025 { min-width: 25vw; } .max-vw-025 { max-width: 25vw; }
.vw-020 { width: 20vw; } .min-vw-020 { min-width: 20vw; } .max-vw-020 { max-width: 20vw; }
.vw-010 { width: 10vw; } .min-vw-010 { min-width: 10vw; } .max-vw-010 { max-width: 10vw; }
.ww-100 { width: calc(100vw - 20px); } .min-ww-100 { min-width: calc(100vw - 20px); } .max-wwwd-100 { max-width: calc(100vw - 20px); }
.ww-075 { width: calc(75vw - 20px); } .min-ww-75 { min-width: calc(75vw - 20px); } .max-wwwd-75 { max-width: calc(75vw - 20px); }
.ww-066 { width: calc(66vw - 20px); } .min-ww-66 { min-width: calc(66vw - 20px); } .max-wwwd-66 { max-width: calc(66vw - 20px); }
.ww-050 { width: calc(50vw - 20px); } .min-ww-50 { min-width: calc(50vw - 20px); } .max-wwwd-50 { max-width: calc(50vw - 20px); }
.ww-033 { width: calc(33vw - 20px); } .min-ww-33 { min-width: calc(33vw - 20px); } .max-wwwd-33 { max-width: calc(33vw - 20px); }
.ww-025 { width: calc(25vw - 20px); } .min-ww-25 { min-width: calc(25vw - 20px); } .max-wwwd-25 { max-width: calc(25vw - 20px); }
/* use negative margin */
.wd-166 { width: 166.6666%; } .min-wd-166 { min-width: 166.6666%; } .max-wd-166 { max-width: 166.6666%; } /* in 60% */
.wd-150 { width: 150%; } .min-wd-150 { min-width: 150%; } .max-wd-150 { max-width: 150%; } /* in 66.6666% */
.wd-133 { width: 133.3333%; } .min-wd-133 { min-width: 133.3333%; } .max-wd-133 { max-width: 133.3333%; } /* in 75% */
.wd-125 { width: 125%; } .min-wd-125 { min-width: 125%; } .max-wd-125 { max-width: 125%; } /* in 80% */
.wd-xs { width: 512px; } .min-wd-xs { min-width: 512px; } .max-wd-xs { max-width: 512px; }
.wd-s { width: 768px; } .min-wd-s { min-width: 768px; } .max-wd-s { max-width: 768px; }
.wd-m { width: 1024px; } .min-wd-m { min-width: 1024px; } .max-wd-m { max-width: 1024px; } /* XGA */
.wd-l { width: 1280px; } .min-wd-l { min-width: 1280px; } .max-wd-l { max-width: 1280px; }
.wd-xl { width: 1536px; } .min-wd-xl { min-width: 1536px; } .max-wd-xl { max-width: 1536px; }
.wd-001 { width: 1px; } .min-wd-001 { min-width: 1px; } .max-wd-001 { max-width: 1px; }
.wd-240 { width: 240px; } .min-wd-240 { min-width: 240px; } .max-wd-240 { max-width: 240px; }
.wd-320 { width: 320px; } .min-wd-320 { min-width: 320px; } .max-wd-320 { max-width: 320px; } /* QVGA */
.wd-360 { width: 360px; } .min-wd-360 { min-width: 360px; } .max-wd-360 { max-width: 360px; }
.wd-400 { width: 400px; } .min-wd-400 { min-width: 400px; } .max-wd-400 { max-width: 400px; }
.wd-480 { width: 480px; } .min-wd-480 { min-width: 480px; } .max-wd-480 { max-width: 480px; } /* HVGA */
.wd-560 { width: 560px; } .min-wd-560 { min-width: 560px; } .max-wd-560 { max-width: 560px; }
.wd-640 { width: 640px; } .min-wd-640 { min-width: 640px; } .max-wd-640 { max-width: 640px; } /* VGA */
.wd-720 { width: 720px; } .min-wd-720 { min-width: 720px; } .max-wd-720 { max-width: 720px; }
.wd-800 { width: 800px; } .min-wd-800 { min-width: 800px; } .max-wd-800 { max-width: 800px; } /* SVGA */
.wd-880 { width: 880px; } .min-wd-880 { min-width: 880px; } .max-wd-880 { max-width: 880px; }
.wd-960 { width: 960px; } .min-wd-960 { min-width: 960px; } .max-wd-960 { max-width: 960px; }
.wd-1280 { width: 1280px; } .min-wd-1280 { min-width: 1280px; } .max-wd-1280 { max-width: 1280px; } /* HD, WXGA */
.wd-1600 { width: 1600px; } .min-wd-1600 { min-width: 1600px; } .max-wd-1600 { max-width: 1600px; } /* UXGA */
.wd-1920 { width: 1920px; } .min-wd-1920 { min-width: 1920px; } .max-wd-1920 { max-width: 1920px; } /* FHD, WUXGA */
.wd-0050 { width: 0.5em; } .min-wd-0050 { min-width: 0.5em; } .max-wd-0050 { max-width: 0.5em; }
.wd-0075 { width: 0.75em; } .min-wd-0075 { min-width: 0.75em; } .max-wd-0075 { max-width: 0.75em; }
.wd-01 { width: 1em; } .min-wd-01 { min-width: 1em; } .max-wd-01 { max-width: 1em; }
.wd-0150 { width: 1.5em; } .min-wd-0150 { min-width: 1.5em; } .max-wd-0150 { max-width: 1.5em; }
.wd-02 { width: 2em; } .min-wd-02 { min-width: 2em; } .max-wd-02 { max-width: 2em; }
.wd-0250 { width: 2.5em; } .min-wd-0250 { min-width: 2.5em; } .max-wd-0250 { max-width: 2.5em; }
.wd-03 { width: 3em; } .min-wd-03 { min-width: 3em; } .max-wd-03 { max-width: 3em; }
.wd-04 { width: 4em; } .min-wd-04 { min-width: 4em; } .max-wd-04 { max-width: 4em; }
.wd-05 { width: 5em; } .min-wd-05 { min-width: 5em; } .max-wd-05 { max-width: 5em; }
.wd-06 { width: 6em; } .min-wd-06 { min-width: 6em; } .max-wd-06 { max-width: 6em; }
.wd-07 { width: 7em; } .min-wd-07 { min-width: 7em; } .max-wd-07 { max-width: 7em; }
.wd-08 { width: 8em; } .min-wd-08 { min-width: 8em; } .max-wd-08 { max-width: 8em; }
.wd-09 { width: 9em; } .min-wd-09 { min-width: 9em; } .max-wd-09 { max-width: 9em; }
.wd-10 { width: 10em; } .min-wd-10 { min-width: 10em; } .max-wd-10 { max-width: 10em; }
.wd-15 { width: 15em; } .min-wd-15 { min-width: 15em; } .max-wd-15 { max-width: 15em; }
.wd-20 { width: 20em; } .min-wd-20 { min-width: 20em; } .max-wd-20 { max-width: 20em; }
.wd-25 { width: 25em; } .min-wd-25 { min-width: 25em; } .max-wd-25 { max-width: 25em; }
.wd-30 { width: 30em; } .min-wd-30 { min-width: 30em; } .max-wd-30 { max-width: 30em; }
.wd-35 { width: 35em; } .min-wd-35 { min-width: 35em; } .max-wd-35 { max-width: 35em; }
.wd-40 { width: 40em; } .min-wd-40 { min-width: 40em; } .max-wd-40 { max-width: 40em; }
.wd-45 { width: 45em; } .min-wd-45 { min-width: 45em; } .max-wd-45 { max-width: 45em; }
.wd-50 { width: 50em; } .min-wd-50 { min-width: 50em; } .max-wd-50 { max-width: 50em; }
.wd-55 { width: 55em; } .min-wd-55 { min-width: 55em; } .max-wd-55 { max-width: 55em; }
.wd-60 { width: 60em; } .min-wd-60 { min-width: 60em; } .max-wd-60 { max-width: 60em; }
.wd-65 { width: 65em; } .min-wd-65 { min-width: 65em; } .max-wd-65 { max-width: 65em; }
.wd-70 { width: 70em; } .min-wd-70 { min-width: 70em; } .max-wd-70 { max-width: 70em; }
.wd-75 { width: 75em; } .min-wd-75 { min-width: 75em; } .max-wd-75 { max-width: 75em; }
.wd-80 { width: 80em; } .min-wd-80 { min-width: 80em; } .max-wd-80 { max-width: 80em; }
.wd-85 { width: 85em; } .min-wd-85 { min-width: 85em; } .max-wd-85 { max-width: 85em; }
.wd-90 { width: 90em; } .min-wd-90 { min-width: 90em; } .max-wd-90 { max-width: 90em; }
.wd-95 { width: 95em; } .min-wd-95 { min-width: 95em; } .max-wd-95 { max-width: 95em; }
/* 先祖要素のhightに依存、用途は限定的 */
.hi-100 { height: 100%; overflow: hidden; } .min-hi-100 { min-height: 100%; } .max-hi-100 { max-height: 100%; }
.hi-090 { height: 90%; overflow: hidden; } .min-hi-090 { min-height: 90%; } .max-hi-090 { max-height: 90%; }
.hi-080 { height: 80%; overflow: hidden; } .min-hi-080 { min-height: 80%; } .max-hi-080 { max-height: 80%; }
.hi-075 { height: 75%; overflow: hidden; } .min-hi-075 { min-height: 75%; } .max-hi-075 { max-height: 75%; }
.hi-070 { height: 70%; overflow: hidden; } .min-hi-070 { min-height: 70%; } .max-hi-070 { max-height: 70%; }
.hi-066 { height: 66.6666%; overflow: hidden; } .min-hi-066 { min-height: 66.6666%; } .max-hi-066 { max-height: 66.6666%; }
.hi-060 { height: 60%; overflow: hidden; } .min-hi-060 { min-height: 60%; } .max-hi-060 { max-height: 60%; }
.hi-050 { height: 50%; overflow: hidden; } .min-hi-050 { min-height: 50%; } .max-hi-050 { max-height: 50%; }
.hi-040 { height: 40%; overflow: hidden; } .min-hi-040 { min-height: 40%; } .max-hi-040 { max-height: 40%; }
.hi-033 { height: 33.3333%; overflow: hidden; } .min-hi-033 { min-height: 33.3333%; } .max-hi-033 { max-height: 33.3333%; }
.hi-030 { height: 30%; overflow: hidden; } .min-hi-030 { min-height: 30%; } .max-hi-030 { max-height: 30%; }
.hi-025 { height: 25%; overflow: hidden; } .min-hi-025 { min-height: 25%; } .max-hi-025 { max-height: 25%; }
.hi-020 { height: 20%; overflow: hidden; } .min-hi-020 { min-height: 20%; } .max-hi-020 { max-height: 20%; }
.hi-010 { height: 10%; overflow: hidden; } .min-hi-010 { min-height: 10%; } .max-hi-010 { max-height: 10%; }
.vh-100 { height: 100vh; } .min-vh-100 { min-height: 100vh; } .max-vh-100 { max-height: 100vh; }
.vh-090 { height: 90vh; } .min-vh-090 { min-height: 90vh; } .max-vh-090 { max-height: 90vh; }
.vh-080 { height: 80vh; } .min-vh-080 { min-height: 80vh; } .max-vh-080 { max-height: 80vh; }
.vh-075 { height: 75vh; } .min-vh-075 { min-height: 75vh; } .max-vh-075 { max-height: 75vh; }
.vh-070 { height: 70vh; } .min-vh-070 { min-height: 70vh; } .max-vh-070 { max-height: 70vh; }
.vh-066 { height: 66.6666vh; } .min-vh-066 { min-height: 66.6666vh; } .max-vh-066 { max-height: 66.6666vh; }
.vh-060 { height: 60vh; } .min-vh-060 { min-height: 60vh; } .max-vh-060 { max-height: 60vh; }
.vh-050 { height: 50vh; } .min-vh-050 { min-height: 50vh; } .max-vh-050 { max-height: 50vh; }
.vh-040 { height: 40vh; } .min-vh-040 { min-height: 40vh; } .max-vh-040 { max-height: 40vh; }
.vh-033 { height: 33.3333vh; } .min-vh-033 { min-height: 33.3333vh; } .max-vh-033 { max-height: 33.3333vh; }
.vh-030 { height: 30vh; } .min-vh-030 { min-height: 30vh; } .max-vh-030 { max-height: 30vh; }
.vh-025 { height: 25vh; } .min-vh-025 { min-height: 25vh; } .max-vh-025 { max-height: 25vh; }
.vh-020 { height: 20vh; } .min-vh-020 { min-height: 20vh; } .max-vh-020 { max-height: 20vh; }
.vh-010 { height: 10vh; } .min-vh-010 { min-height: 10vh; } .max-vh-010 { max-height: 10vh; }
.hi-xs { height: 512px; } .min-hi-xs { min-height: 512px; } .max-hi-xs { max-height: 512px; }
.hi-s { height: 768px; } .min-hi-s { min-height: 768px; } .max-hi-s { max-height: 768px; }
.hi-m { height: 1024px; } .min-hi-m { min-height: 1024px; } .max-hi-m { max-height: 1024px; } /* XGA */
.hi-l { height: 1280px; } .min-hi-l { min-height: 1280px; } .max-hi-l { max-height: 1280px; }
.hi-xl { height: 1536px; } .min-hi-xl { min-height: 1536px; } .max-hi-xl { max-height: 1536px; }
.hi-001 { height: 1px; } .min-hi-001 { min-height: 1px; } .max-hi-001 { max-height: 1px; }
.hi-240 { height: 240px; } .min-hi-240 { min-height: 240px; } .max-hi-240 { max-height: 240px; }
.hi-320 { height: 320px; } .min-hi-320 { min-height: 320px; } .max-hi-320 { max-height: 320px; } /* QVGA */
.hi-400 { height: 400px; } .min-hi-400 { min-height: 400px; } .max-hi-400 { max-height: 400px; }
.hi-480 { height: 480px; } .min-hi-480 { min-height: 480px; } .max-hi-480 { max-height: 480px; } /* HVGA */
.hi-560 { height: 560px; } .min-hi-560 { min-height: 560px; } .max-hi-560 { max-height: 560px; }
.hi-640 { height: 640px; } .min-hi-640 { min-height: 640px; } .max-hi-640 { max-height: 640px; } /* VGA */
.hi-720 { height: 720px; } .min-hi-720 { min-height: 720px; } .max-hi-720 { max-height: 720px; }
.hi-800 { height: 800px; } .min-hi-800 { min-height: 800px; } .max-hi-800 { max-height: 800px; } /* SVGA */
.hi-880 { height: 880px; } .min-hi-880 { min-height: 880px; } .max-hi-880 { max-height: 880px; }
.hi-960 { height: 960px; } .min-hi-960 { min-height: 960px; } .max-hi-960 { max-height: 960px; }
.hi-1280 { height: 1280px; } .min-hi-1280 { min-height: 1280px; } .max-hi-1280 { max-height: 1280px; } /* HD, WXGA */
.hi-1600 { height: 1600px; } .min-hi-1600 { min-height: 1600px; } .max-hi-1600 { max-height: 1600px; } /* UXGA */
.hi-1920 { height: 1920px; } .min-hi-1920 { min-height: 1920px; } .max-hi-1920 { max-height: 1920px; } /* FHD, WUXGA */
.hi-01 { height: 1em; overflow: hidden; } .min-hi-01 { min-height: 1em; } .max-hi-01 { max-height: 1em; }
.hi-02 { height: 2em; overflow: hidden; } .min-hi-02 { min-height: 2em; } .max-hi-02 { max-height: 2em; }
.hi-0250 { height: 2.5em; overflow: hidden; } .min-hi-0250 { min-height: 2.5em; } .max-hi-0250 { max-height: 2.5em; }
.hi-03 { height: 3em; overflow: hidden; } .min-hi-03 { min-height: 3em; } .max-hi-03 { max-height: 3em; }
.hi-04 { height: 4em; overflow: hidden; } .min-hi-04 { min-height: 4em; } .max-hi-04 { max-height: 4em; }
.hi-05 { height: 5em; overflow: hidden; } .min-hi-05 { min-height: 5em; } .max-hi-05 { max-height: 5em; }
.hi-06 { height: 6em; overflow: hidden; } .min-hi-06 { min-height: 6em; } .max-hi-06 { max-height: 6em; }
.hi-07 { height: 7em; overflow: hidden; } .min-hi-07 { min-height: 7em; } .max-hi-07 { max-height: 7em; }
.hi-0750 { height: 7.5em; overflow: hidden; } .min-hi-0750 { min-height: 7.5em; } .max-hi-0750 { max-height: 7.5em; }
.hi-08 { height: 8em; overflow: hidden; } .min-hi-08 { min-height: 8em; } .max-hi-08 { max-height: 8em; }
.hi-09 { height: 9em; overflow: hidden; } .min-hi-09 { min-height: 9em; } .max-hi-09 { max-height: 9em; }
.hi-10 { height: 10em; overflow: hidden; } .min-hi-10 { min-height: 10em; } .max-hi-10 { max-height: 10em; }
.hi-15 { height: 15em; overflow: hidden; } .min-hi-15 { min-height: 15em; } .max-hi-15 { max-height: 15em; }
.hi-20 { height: 20em; overflow: hidden; } .min-hi-20 { min-height: 20em; } .max-hi-20 { max-height: 20em; }
.hi-25 { height: 25em; overflow: hidden; } .min-hi-25 { min-height: 25em; } .max-hi-25 { max-height: 25em; }
.hi-30 { height: 30em; overflow: hidden; } .min-hi-30 { min-height: 30em; } .max-hi-30 { max-height: 30em; }
.hi-35 { height: 35em; overflow: hidden; } .min-hi-35 { min-height: 35em; } .max-hi-35 { max-height: 35em; }
.hi-40 { height: 40em; overflow: hidden; } .min-hi-40 { min-height: 40em; } .max-hi-40 { max-height: 40em; }
.hi-45 { height: 45em; overflow: hidden; } .min-hi-45 { min-height: 45em; } .max-hi-45 { max-height: 45em; }
.hi-50 { height: 50em; overflow: hidden; } .min-hi-50 { min-height: 50em; } .max-hi-50 { max-height: 50em; }
.hi-55 { height: 55em; overflow: hidden; } .min-hi-55 { min-height: 55em; } .max-hi-55 { max-height: 55em; }
.hi-60 { height: 60em; overflow: hidden; } .min-hi-60 { min-height: 60em; } .max-hi-60 { max-height: 60em; }
.hi-65 { height: 65em; overflow: hidden; } .min-hi-65 { min-height: 65em; } .max-hi-65 { max-height: 65em; }
.hi-70 { height: 70em; overflow: hidden; } .min-hi-70 { min-height: 70em; } .max-hi-70 { max-height: 70em; }
.hi-75 { height: 75em; overflow: hidden; } .min-hi-75 { min-height: 75em; } .max-hi-75 { max-height: 75em; }
.hi-80 { height: 80em; overflow: hidden; } .min-hi-80 { min-height: 80em; } .max-hi-80 { max-height: 80em; }
.hi-85 { height: 85em; overflow: hidden; } .min-hi-85 { min-height: 85em; } .max-hi-85 { max-height: 85em; }
.hi-90 { height: 90em; overflow: hidden; } .min-hi-90 { min-height: 90em; } .max-hi-90 { max-height: 90em; }
.hi-95 { height: 95em; overflow: hidden; } .min-hi-95 { min-height: 95em; } .max-hi-95 { max-height: 95em; }
.col-01 > * { width: 100%; }
.col-02 > * { width: 50%; }
.col-03 > * { width: 33.3333%; }
.col-04 > * { width: 25%; }
.col-05 > * { width: 20%; }
[class*="col-"] > * { padding: 0.33em; }
.col-l { float: left; }
.col-r { float: right; }
/* margin */
.no-mr-a { margin: 0 !important; }
.no-mr-tb { margin-top: 0 !important; margin-bottom: 0 !important; }
.no-mr, .no-mr-lr { margin-right: 0 !important; margin-left: 0 !important; }
.no-mr-l { margin-left: 0 !important; }
.no-mr-r { margin-right: 0 !important; }
.mr-a-auto { margin: auto !important; float: none !important; }
.mr-tb-auto { margin-top: auto !important; margin-bottom: auto !important; float: none !important; }
.mr-auto, .mr-lr-auto { margin-right: auto !important; margin-left: auto !important; float: none !important; }
.mr-l-auto { margin-right: 0 !important; margin-left: auto !important; }
.mr-r-auto { margin-right: auto !important; margin-left: 0 !important; }
.mr-000, .mr-lr-000 { margin-left: 0%; margin-right: 0%; }
.mr-l-000 { margin-left: 0%; } .mr-r-000 { margin-right: 0%; }
.mr-l-066 { margin-left: 66.6666%; } .mr-r-066 { margin-right: 66.6666%; }
.mr-l-050 { margin-left: 50%; } .mr-r-050 { margin-right: 50%; }
.mr-l-040 { margin-left: 40%; } .mr-r-040 { margin-right: 40%; }
.mr-l-033 { margin-left: 33.3333%; } .mr-r-033 { margin-right: 33.3333%; }
.mr-lr-033 { margin-left: 33.3333%; margin-right: 33.3333%; }
.mr-l-030 { margin-left: 30%; } .mr-r-030 { margin-right: 30%; }
.mr-lr-030 { margin-left: 30%; margin-right: 30%; }
.mr-l-025 { margin-left: 25%; } .mr-r-025 { margin-right: 25%; }
.mr-lr-025 { margin-left: 25%; margin-right: 25%; }
.mr-l-020 { margin-left: 20%; } .mr-r-020 { margin-right: 20%; }
.mr-lr-020 { margin-left: 20%; margin-right: 20%; }
.mr-l-016 { margin-left: 16.6666%; } .mr-r-016 { margin-right: 16.6666%; }
.mr-lr-016 { margin-left: 16.6666%; margin-right: 16.6666%; }
.mr-l-015 { margin-left: 15%; } .mr-r-015 { margin-right: 15%; }
.mr-lr-015 { margin-left: 15%; margin-right: 15%; }
.mr-l-010 { margin-left: 10%; } .mr-r-010 { margin-right: 10%; }
.mr-lr-010 { margin-left: 10%; margin-right: 10%; }
.mr-l-005 { margin-left: 5%; } .mr-r-005 { margin-right: 5%; }
.mr-lr-005 { margin-left: 5%; margin-right: 5%; }
.mr-l-n-100 { margin-left: -100%; } .mr-r-n-100 { margin-right: -100%; }
.mr-l-n-066 { margin-left: -66.6666%; } .mr-r-n-066 { margin-right: -66.6666%; }
.mr-l-n-050 { margin-left: -50%; } .mr-r-n-050 { margin-right: -50%; }
.mr-l-n-040 { margin-left: -40%; } .mr-r-n-040 { margin-right: -40%; }
.mr-l-n-033 { margin-left: -33.3333%; } .mr-r-n-033 { margin-right: -33.3333%; }
.mr-lr-n-033 { margin-left: -33.3333%; margin-right: -33.3333%; }
.mr-l-n-030 { margin-left: -30%; } .mr-r-n-030 { margin-right: -30%; }
.mr-l-n-025 { margin-left: -25%; } .mr-r-n-025 { margin-right: -25%; }
.mr-lr-n-025 { margin-left: -25%; margin-right: -25%; }
.mr-l-n-020 { margin-left: -20%; } .mr-r-n-020 { margin-right: -20%; }
.mr-l-n-016 { margin-left: -16.6666%; } .mr-r-n-016 { margin-right: -16.6666%; }
.mr-lr-n-016 { margin-left: -16.6666%; margin-right: -16.6666%; }
.mr-l-n-015 { margin-left: -15%; } .mr-r-n-015 { margin-right: -15%; }
.mr-lr-n-012 { margin-left: -12.5%; margin-right: -12.5%; }
.mr-l-n-010 { margin-left: -10%; } .mr-r-n-010 { margin-right: -10%; }
.mr-lr-n-010 { margin-left: -10%; margin-right: -10%; }
.mr-l-n-005 { margin-left: -5%; } .mr-r-n-005 { margin-right: -5%; }
.mr-lr-n-005 { margin-left: -5%; margin-right: -5%; }
.mr-t-n-100 { margin-top: -100%; } .mr-b-n-100 { margin-bottom: -100%; }
.mr-t-n-066 { margin-top: -66.6666%; } .mr-b-n-066 { margin-bottom: -66.6666%; }
.mr-t-n-050 { margin-top: -50%; } .mr-b-n-050 { margin-bottom: -50%; }
.mr-t-n-040 { margin-top: -40%; } .mr-b-n-040 { margin-bottom: -40%; }
.mr-t-n-033 { margin-top: -33.3333%; } .mr-b-n-033 { margin-bottom: -33.3333%; }
.mr-t-n-030 { margin-top: -30%; } .mr-b-n-030 { margin-bottom: -30%; }
.mr-t-n-025 { margin-top: -25%; } .mr-b-n-025 { margin-bottom: -25%; }
.mr-t-n-020 { margin-top: -20%; } .mr-b-n-020 { margin-bottom: -20%; }
.mr-t-n-016 { margin-top: -16.6666%; } .mr-b-n-016 { margin-bottom: -16.6666%; }
.mr-t-n-015 { margin-top: -15%; } .mr-b-n-015 { margin-bottom: -15%; }
.mr-t-n-010 { margin-top: -10%; } .mr-b-n-010 { margin-bottom: -10%; }
.mr-t-n-005 { margin-top: -5%; } .mr-b-n-005 { margin-bottom: -5%; }
/* padding */
.no-pd { padding: 0 !important; }
.no-pd-tb { padding-top: 0 !important; padding-bottom: 0 !important; }
.no-pd-lr { padding-right: 0 !important; padding-left: 0 !important; }
.no-pd-t { padding-top: 0 !important; }
.no-pd-b { padding-bottom: 0 !important; }
.no-pd-l { padding-left: 0 !important; }
.no-pd-r { padding-right: 0 !important; }
.pd-0001 { padding: 1px; }
.pd-00, .pd-0000 { padding: 0em; }
.pd-t-00, .pd-t-0000 { padding-top: 0em; } .pd-b-00, .pd-b-0000 { padding-bottom: 0em; }
.pd-l-00, .pd-l-0000 { padding-left: 0em; } .pd-r-00, .pd-r-0000 { padding-right: 0em; }
.pd-tb-00, .pd-tb-0000 { padding-top: 0em; padding-bottom: 0em; }
.pd-lr-00, .pd-lr-0000 { padding-right: 0em; padding-left: 0em; }
.pd-0025 { padding: 0.25em; }
.pd-t-0025 { padding-top: 0.25em; } .pd-b-0025 { padding-bottom: 0.25em; }
.pd-l-0025 { padding-left: 0.25em; } .pd-r-0025 { padding-right: 0.25em; }
.pd-tb-0025 { padding-top: 0.25em; padding-bottom: 0.25em; }
.pd-lr-0025 { padding-right: 0.25em; padding-left: 0.25em; }
.pd-0050 { padding: 0.5em; }
.pd-t-0050 { padding-top: 0.5em; } .pd-b-0050 { padding-bottom: 0.5em; }
.pd-l-0050 { padding-left: 0.5em; } .pd-r-0050 { padding-right: 0.5em; }
.pd-tb-0050 { padding-top: 0.5em; padding-bottom: 0.5em; }
.pd-lr-0050 { padding-right: 0.5em; padding-left: 0.5em; }
.pd-0075 { padding: 0.75em; }
.pd-t-0075 { padding-top: 0.75em; } .pd-b-0075 { padding-bottom: 0.75em; }
.pd-l-0075 { padding-left: 0.75em; } .pd-r-0075 { padding-right: 0.75em; }
.pd-tb-0075 { padding-top: 0.75em; padding-bottom: 0.75em; }
.pd-lr-0075 { padding-right: 0.75em; padding-left: 0.75em; }
.pd-01 { padding: 1em; }
.pd-t-01 { padding-top: 1em; } .pd-b-01 { padding-bottom: 1em; }
.pd-l-01 { padding-left: 1em; } .pd-r-01 { padding-right: 1em; }
.pd-tb-01 { padding-top: 1em; padding-bottom: 1em; }
.pd-lr-01 { padding-right: 1em; padding-left: 1em; }
.pd-0150 { padding: 1.5em; }
.pd-t-0150 { padding-top: 1.5em; } .pd-b-0150 { padding-bottom: 1.5em; }
.pd-l-0150 { padding-left: 1.5em; } .pd-r-0150 { padding-right: 1.5em; }
.pd-tb-0150 { padding-top: 1.5em; padding-bottom: 1.5em; }
.pd-lr-0150 { padding-right: 1.5em; padding-left: 1.5em; }
.pd-02 { padding: 2em; }
.pd-t-02 { padding-top: 2em; } .pd-b-02 { padding-bottom: 2em; }
.pd-l-02 { padding-left: 2em; } .pd-r-02 { padding-right: 2em; }
.pd-tb-02 { padding-top: 2em; padding-bottom: 2em; }
.pd-lr-02 { padding-right: 2em; padding-left: 2em; }
.pd-0250 { padding: 2.5em; }
.pd-t-0250 { padding-top: 2.5em; } .pd-b-0250 { padding-bottom: 2.5em; }
.pd-l-0250 { padding-left: 2.5em; } .pd-r-0250 { padding-right: 2.5em; }
.pd-tb-0250 { padding-top: 2.5em; padding-bottom: 2.5em; }
.pd-lr-0250 { padding-right: 2.5em; padding-left: 2.5em; }
.pd-03 { padding: 3em; }
.pd-t-03 { padding-top: 3em; } .pd-b-03 { padding-bottom: 3em; }
.pd-l-03 { padding-left: 3em; } .pd-r-03 { padding-right: 3em; }
.pd-tb-03 { padding-top: 3em; padding-bottom: 3em; }
.pd-lr-03 { padding-right: 3em; padding-left: 3em; }
.pd-04 { padding: 4em; }
.pd-t-04 { padding-top: 4em; } .pd-b-04 { padding-bottom: 4em; }
.pd-l-04 { padding-left: 4em; } .pd-r-04 { padding-right: 4em; }
.pd-tb-04 { padding-top: 4em; padding-bottom: 4em; }
.pd-lr-04 { padding-right: 4em; padding-left: 4em; }
.pd-05 { padding: 5em; }
.pd-t-05 { padding-top: 5em; } .pd-b-05 { padding-bottom: 5em; }
.pd-l-05 { padding-left: 5em; } .pd-r-05 { padding-right: 5em; }
.pd-tb-05 { padding-top: 5em; padding-bottom: 5em; }
.pd-lr-05 { padding-right: 5em; padding-left: 5em; }
.pd-06 { padding: 6em; }
.pd-t-06 { padding-top: 6em; } .pd-b-06 { padding-bottom: 6em; }
.pd-l-06 { padding-left: 6em; } .pd-r-06 { padding-right: 6em; }
.pd-tb-06 { padding-top: 6em; padding-bottom: 6em; }
.pd-lr-06 { padding-right: 6em; padding-left: 6em; }
.pd-07 { padding: 7em; }
.pd-t-07 { padding-top: 7em; } .pd-b-07 { padding-bottom: 7em; }
.pd-l-07 { padding-left: 7em; } .pd-r-07 { padding-right: 7em; }
.pd-tb-07 { padding-top: 7em; padding-bottom: 7em; }
.pd-lr-07 { padding-right: 7em; padding-left: 7em; }
.pd-0750 { padding: 7.5em; }
.pd-t-0750 { padding-top: 7.5em; } .pd-b-0750 { padding-bottom: 7.5em; }
.pd-l-0750 { padding-left: 7.5em; } .pd-r-0750 { padding-right: 7.5em; }
.pd-tb-0750 { padding-top: 7.5em; padding-bottom: 7.5em; }
.pd-lr-0750 { padding-right: 7.5em; padding-left: 7.5em; }
.pd-08 { padding: 8em; }
.pd-t-08 { padding-top: 8em; } .pd-b-08 { padding-bottom: 8em; }
.pd-l-08 { padding-left: 8em; } .pd-r-08 { padding-right: 8em; }
.pd-tb-08 { padding-top: 8em; padding-bottom: 8em; }
.pd-lr-08 { padding-right: 8em; padding-left: 8em; }
.pd-09 { padding: 9em; }
.pd-t-09 { padding-top: 9em; } .pd-b-09 { padding-bottom: 9em; }
.pd-l-09 { padding-left: 9em; } .pd-r-09 { padding-right: 9em; }
.pd-tb-09 { padding-top: 9em; padding-bottom: 9em; }
.pd-lr-09 { padding-right: 9em; padding-left: 9em; }
.pd-10 { padding: 10em; }
.pd-t-10 { padding-top: 10em; } .pd-b-10 { padding-bottom: 10em; }
.pd-l-10 { padding-left: 10em; } .pd-r-10 { padding-right: 10em; }
.pd-tb-10 { padding-top: 10em; padding-bottom: 10em; }
.pd-lr-10 { padding-right: 10em; padding-left: 10em; }
.pd-11 { padding: 11em; }
.pd-t-11 { padding-top: 11em; } .pd-b-11 { padding-bottom: 11em; }
.pd-l-11 { padding-left: 11em; } .pd-r-11 { padding-right: 11em; }
.pd-tb-11 { padding-top: 11em; padding-bottom: 11em; }
.pd-lr-11 { padding-right: 11em; padding-left: 11em; }
.pd-12 { padding: 12em; }
.pd-t-12 { padding-top: 12em; } .pd-b-12 { padding-bottom: 12em; }
.pd-l-12 { padding-left: 12em; } .pd-r-12 { padding-right: 12em; }
.pd-tb-12 { padding-top: 12em; padding-bottom: 12em; }
.pd-lr-12 { padding-right: 12em; padding-left: 12em; }
.pd-1250 { padding: 12.5em; }
.pd-t-1250 { padding-top: 12.5em; } .pd-b-1250 { padding-bottom: 12.5em; }
.pd-l-1250 { padding-left: 12.5em; } .pd-r-1250 { padding-right: 12.5em; }
.pd-tb-1250 { padding-top: 12.5em; padding-bottom: 12.5em; }
.pd-lr-1250 { padding-right: 12.5em; padding-left: 12.5em; }
.pd-15 { padding: 15em; }
.pd-t-15 { padding-top: 15em; } .pd-b-15 { padding-bottom: 15em; }
.pd-l-15 { padding-left: 15em; } .pd-r-15 { padding-right: 15em; }
.pd-tb-15 { padding-top: 15em; padding-bottom: 15em; }
.pd-lr-15 { padding-right: 15em; padding-left: 15em; }
.pd-1750 { padding: 17.5em; }
.pd-t-1750 { padding-top: 17.5em; } .pd-b-1750 { padding-bottom: 17.5em; }
.pd-l-1750 { padding-left: 17.5em; } .pd-r-1750 { padding-right: 17.5em; }
.pd-tb-1750 { padding-top: 17.5em; padding-bottom: 17.5em; }
.pd-lr-1750 { padding-right: 17.5em; padding-left: 17.5em; }
.pd-20 { padding: 20em; }
.pd-t-20 { padding-top: 20em; } .pd-b-20 { padding-bottom: 20em; }
.pd-l-20 { padding-left: 20em; } .pd-r-20 { padding-right: 20em; }
.pd-tb-20 { padding-top: 20em; padding-bottom: 20em; }
.pd-lr-20 { padding-right: 20em; padding-left: 20em; }
.pd-25 { padding: 25em; }
.pd-t-25 { padding-top: 25em; } .pd-b-25 { padding-bottom: 25em; }
.pd-l-25 { padding-left: 25em; } .pd-r-25 { padding-right: 25em; }
.pd-tb-25 { padding-top: 25em; padding-bottom: 25em; }
.pd-lr-25 { padding-right: 25em; padding-left: 25em; }
.pd-30 { padding: 30em; }
.pd-t-30 { padding-top: 30em; } .pd-b-30 { padding-bottom: 30em; }
.pd-l-30 { padding-left: 30em; } .pd-r-30 { padding-right: 30em; }
.pd-tb-30 { padding-top: 30em; padding-bottom: 30em; }
.pd-lr-30 { padding-right: 30em; padding-left: 30em; }
@media screen and ( max-width: 767px ) {
body { background-color: rgba(255,255,255,1); }
.s--no-hit { cursor: default; pointer-events: none; text-decoration: none !important; }
/* background */
.s--no-bg,
.s--no-bgc { border-color: rgba(0,0,0,0) !important; }
/* border */
.s--no-bd { border: 0 !important; }
.s--no-bd-t { border-top: 0 !important; }
.s--no-bd-b { border-bottom: 0 !important; }
.s--no-bd-l { border-left: 0 !important; }
.s--no-bd-r { border-right: 0 !important; }
.s--bd-00 { border: 0; }
.s--bd-01 { border-style: solid; border-width: 1px; }
.s--bd-t-01 { border-top-style: solid; border-top-width: 1px; }
.s--bd-b-01 { border-bottom-style: solid; border-bottom-width: 1px; }
.s--bd-l-01 { border-left-style: solid; border-left-width: 1px; }
.s--bd-r-01 { border-right-style: solid; border-right-width: 1px; }
.s--bd-tb-01 { border-top-style: solid; border-bottom-style: solid; border-top-width: 1px; border-bottom-width: 1px; }
.s--bd-lr-01 { border-right-style: solid; border-left-style: solid; border-right-width: 1px; border-left-width: 1px; }
.s--bd-02 { border-style: solid; border-width: 2px; }
.s--bd-t-02 { border-top-style: solid; border-top-width: 2px; }
.s--bd-b-02 { border-bottom-style: solid; border-bottom-width: 2px; }
.s--bd-l-02 { border-left-style: solid; border-left-width: 2px; }
.s--bd-r-02 { border-right-style: solid; border-right-width: 2px; }
.s--bd-tb-02 { border-top-style: solid; border-bottom-style: solid; border-top-width: 2px; border-bottom-width: 2px; }
.s--bd-lr-02 { border-right-style: solid; border-left-style: solid; border-right-width: 2px; border-left-width: 2px; }
.s--bd-li-01 { border-bottom-style: solid; border-bottom-width: 1px; }
[class*=s--bd-li-]:first-of-type { border-top-style: solid; border-top-width: 1px; }
.s--bd-n-li-01 { border-bottom-style: solid; border-bottom-width: 1px; }
[class*=s--bd-n-li-]:last-of-type { border-bottom-width: 0px; }
table.s--col-1-1 th,
table.s--col-1-1 td { width: 50%; }
table.s--col-1-2 th { width: 33.3333%; }
table.s--col-1-2 td { width: 66.6666%; }
table.s--col-1-3 th { width: 25%; }
table.s--col-1-3 td { width: 75%; }
table.s--col-1-4 th { width: 20%; }
table.s--col-1-4 td { width: 80%; }
table.s--col-1-5 th { width: 16.6666%; }
table.s--col-1-5 td { width: 83.3333%; }
table.s--col-1-7 th { width: 12.5%; }
table.s--col-1-7 td { width: 87.5%; }
.s--no-mix { mix-blend-mode: initial; filter: initial; }
/* writing-mode */
.s--wm-h { -webkit-writing-mode: horizontal-tb; -ms-writing-mode: horizontal-tb; writing-mode: horizontal-tb; transform: rotate(0deg); }
.s--wm-v { -webkit-writing-mode: vertical-rl; -ms-writing-mode: vertical-rl; writing-mode: vertical-rl; transform: rotate(0deg); }
.s--rev-wm-v { -webkit-writing-mode: vertical-rl; -ms-writing-mode: vertical-rl; writing-mode: vertical-rl; transform: rotate(180deg); }
/* text-align */
.s--tx-l { text-align: left; display: block; }
.s--tx-r { text-align: right; display: block; }
.s--tx-c { text-align: center; display: block; }
.s--tx-j { text-align: justify; text-justify: inter-ideograph; }
.s--tx-r * { text-align: inherit; }
.s--tx-c * { text-align: inherit; }
.s--tx-j * { text-align: inherit; }
/* line-feed */
.s--br { content: "\A"; display: block; }
.s--no-br { content: ""; display: none; }
.s--br, .s--sp, .s--hr, .s--vr { content: ""; display: inline; background: none; }
.s--br:before { content: "\A"; display: block; background: none; }
.s--hr:before {
content: "\A"; display: block; block-size: 1em; border-block: none;
background: 0 50% / 100% 1px no-repeat linear-gradient(rgba(var(--bdc),0.05), rgba(var(--bdc),0.05) 100%);
}
.s--sp:before { content: " "; display: inline; background: none; }
.s--vr:before { content: "｜"; display: inline; background: none; }
/* font-size */
.s--fs-s { font-size: smaller; }
.s--fs-l { font-size: larger; }
.s--fs-010 { font-size: 0.1em; }
.s--fs-025 { font-size: 0.25em; }
.s--fs-033 { font-size: 0.33em; }
.s--fs-050 { font-size: 0.5em; }
.s--fs-066 { font-size: 0.66em; }
.s--fs-075 { font-size: 0.75em; }
.s--fs-080 { font-size: 0.8em; }
.s--fs-083 { font-size: 0.83em; }
.s--fs-090 { font-size: 0.9em; }
.s--fs-100 { font-size: 1.0em; }
.s--fs-110 { font-size: 1.1em; }
.s--fs-120 { font-size: 1.2em; }
.s--fs-125 { font-size: 1.25em; }
.s--fs-133 { font-size: 1.33em; }
.s--fs-150 { font-size: 1.5em; }
.s--fs-166 { font-size: 1.66em; }
.s--fs-175 { font-size: 1.75em; }
.s--fs-183 { font-size: 1.83em; }
.s--fs-200 { font-size: 2.0em; }
.s--fs-250 { font-size: 2.5em; }
.s--fs-300 { font-size: 3.0em; }
.s--fs-350 { font-size: 3.5em; }
.s--fs-400 { font-size: 4.0em; }
.s--fs-450 { font-size: 4.5em; }
.s--fs-500 { font-size: 5.0em; }
/* transform */
.s--ro-000 { transform: rotate(0deg); }
.s--ro-090 { transform: rotate(90deg); }
.s--ro-180 { transform: rotate(180deg); }
.s--ro-270 { transform: rotate(270deg); }
/***** layout *****/
/* aspect-ratio: warpper: width > ar */
.s--ar-0101 { position: relative; overflow: hidden; aspect-ratio: 1/1; }
.s--ar-0201 { position: relative; overflow: hidden; aspect-ratio: 2/1; }
.s--ar-0302 { position: relative; overflow: hidden; aspect-ratio: 3/2; }
.s--ar-0403 { position: relative; overflow: hidden; aspect-ratio: 4/3; }
.s--ar-0504 { position: relative; overflow: hidden; aspect-ratio: 5/4; }
.s--ar-1609 { position: relative; overflow: hidden; aspect-ratio: 16/9; }
.s--ar-1610 { position: relative; overflow: hidden; aspect-ratio: 16/10; }
.s--ar-OGPI { position: relative; overflow: hidden; aspect-ratio: 1.91/1; }
.s--ar-aOGPI { position: relative; overflow: hidden; aspect-ratio: 1.875/1; }
.s--ar-0102, .s--ar-v-0201 { position: relative; overflow: hidden; aspect-ratio: 1/2; }
.s--ar-0203, .s--ar-v-0302 { position: relative; overflow: hidden; aspect-ratio: 2/3; }
.s--ar-0304, .s--ar-v-0403 { position: relative; overflow: hidden; aspect-ratio: 3/4; }
.s--ar-0405, .s--ar-v-0504 { position: relative; overflow: hidden; aspect-ratio: 4/5; }
.s--ar-0916, .s--ar-v-1609 { position: relative; overflow: hidden; aspect-ratio: 9/16; }
.s--ar-1016, .s--ar-v-1610 { position: relative; overflow: hidden; aspect-ratio: 10/16; }
@media all and (-ms-high-contrast: none) {
.s--ar-0101 { position: relative; overflow: hidden; width: 100%; padding-top: 100%; }
.s--ar-0201 { position: relative; overflow: hidden; width: 100%; padding-top: 50%; }
.s--ar-0302 { position: relative; overflow: hidden; width: 100%; padding-top: 66.6666%; }
.s--ar-0403 { position: relative; overflow: hidden; width: 100%; padding-top: 75%; }
.s--ar-0504 { position: relative; overflow: hidden; width: 100%; padding-top: 80%; }
.s--ar-1609 { position: relative; overflow: hidden; width: 100%; padding-top: 56.25%; }
.s--ar-1610 { position: relative; overflow: hidden; width: 100%; padding-top: 62.5%; }
.s--ar-OGPI { position: relative; overflow: hidden; width: 100%; padding-top: 52.3560%; }
.s--ar-aOGPI { position: relative; overflow: hidden; width: 100%; padding-top: 53.3333%; }
.s--ar-0102, .s--ar-v-0201 { position: relative; overflow: hidden; width: 100%; padding-top: 200%; }
.s--ar-0203, .s--ar-v-0302 { position: relative; overflow: hidden; width: 100%; padding-top: 150%; }
.s--ar-0304, .s--ar-v-0403 { position: relative; overflow: hidden; width: 100%; padding-top: 133.3333%; }
.s--ar-0405, .s--ar-v-0504 { position: relative; overflow: hidden; width: 100%; padding-top: 125%; }
.s--ar-0916, .s--ar-v-1609 { position: relative; overflow: hidden; width: 100%; padding-top: 177.7777%; }
.s--ar-1016, .s--ar-v-1610 { position: relative; overflow: hidden; width: 100%; padding-top: 160%; }
}
/* visibility */
.s--vis { visibility: visible; }
.s--vih { visibility: hidden; }
.s--vic { visibility: collapse; }
/* display */
.s--din { display: initial; }
.s--dno { display: none; }
.s--dil { display: inline; }
.s--dbl { display: block; }
.s--dib { display: inline-block; }
/* overflow */
.s--of-v { overflow: visible; }
.s--of-h { overflow: hidden; }
.s--of-c { overflow: clip; }
.s--ofx-v { overflow-x: visible; }
.s--ofx-h { overflow-x: hidden; overflow-y: auto; }
.s--ofx-c { overflow-x: clip; }
.s--ofy-v { overflow-y: visible; }
.s--ofy-h { overflow-x: auto; overflow-y: hidden; }
.s--ofy-c { overflow-y: clip; }
/* position */
.s--stt { position: static; }
.s--rlt { position: relative; }
.s--abs { position: absolute; z-index: 10; }
.s--fix { position: fixed; z-index: 10; }
.s--sti { position: -webkit-sticky; position: sticky; z-index: 10; }
.s--pos-0000 { top: 0; bottom: 0; left: 0; right: 0; margin: auto; }
.s--pos-tb-0000 { top: 0; bottom: 0; margin-top: auto; margin-bottom: auto; }
.s--pos-lr-0000 { left: 0; right: 0; margin-left: auto; margin-right: auto; }
.s--pos-t-00 { top: 0; } .s--pos-b-00 { bottom: 0; } .s--pos-l-00 { left: 0; } .s--pos-r-00 { right: 0; }
.s--pos-t-0025 { top: 0.25em; } .s--pos-b-0025 { bottom: 0.25em; } .s--pos-l-0025 { left: 0.25em; } .s--pos-r-0025 { right: 0.25em; }
.s--pos-t-0050 { top: 0.5em; } .s--pos-b-0050 { bottom: 0.5em; } .s--pos-l-0050 { left: 0.5em; } .s--pos-r-0050 { right: 0.5em; }
.s--pos-t-0075 { top: 0.75em; } .s--pos-b-0075 { bottom: 0.75em; } .s--pos-l-0075 { left: 0.75em; } .s--pos-r-0075 { right: 0.75em; }
.s--pos-t-01 { top: 1em; } .s--pos-b-01 { bottom: 1em; } .s--pos-l-01 { left: 1em; } .s--pos-r-01 { right: 1em; }
.s--pos-t-02 { top: 2em; } .s--pos-b-02 { bottom: 2em; } .s--pos-l-02 { left: 2em; } .s--pos-r-02 { right: 2em; }
.s--pos-t-0250 { top: 2.5em; } .s--pos-b-0250 { bottom: 2.5em; } .s--pos-l-0250 { left: 2.5em; } .s--pos-r-0250 { right: 2.5em; }
.s--pos-t-03 { top: 3em; } .s--pos-b-03 { bottom: 3em; } .s--pos-l-03 { left: 3em; } .s--pos-r-03 { right: 3em; }
.s--pos-t-04 { top: 4em; } .s--pos-b-04 { bottom: 4em; } .s--pos-l-04 { left: 4em; } .s--pos-r-04 { right: 4em; }
.s--pos-t-05 { top: 5em; } .s--pos-b-05 { bottom: 5em; } .s--pos-l-05 { left: 5em; } .s--pos-r-05 { right: 5em; }
.s--pos-t-06 { top: 6em; } .s--pos-b-06 { bottom: 6em; } .s--pos-l-06 { left: 6em; } .s--pos-r-06 { right: 6em; }
.s--pos-t-07 { top: 7em; } .s--pos-b-07 { bottom: 7em; } .s--pos-l-07 { left: 7em; } .s--pos-r-07 { right: 7em; }
.s--pos-t-0750 { top: 7.5em; } .s--pos-b-0750 { bottom: 7.5em; } .s--pos-l-0750 { left: 7.5em; } .s--pos-r-0750 { right: 7.5em; }
.s--pos-t-08 { top: 8em; } .s--pos-b-08 { bottom: 8em; } .s--pos-l-08 { left: 8em; } .s--pos-r-08 { right: 8em; }
.s--pos-t-09 { top: 9em; } .s--pos-b-09 { bottom: 9em; } .s--pos-l-09 { left: 9em; } .s--pos-r-09 { right: 9em; }
.s--pos-t-10 { top: 10em; } .s--pos-b-10 { bottom: 10em; } .s--pos-l-10 { left: 10em; } .s--pos-r-10 { right: 10em; }
.s--pos-t-n-0025 { top: -0.25em; } .s--pos-b-n-0025 { bottom: -0.25em; } .s--pos-l-n-0025 { left: -0.25em; } .s--pos-r-n-0025 { right: -0.25em; }
.s--pos-t-n-0050 { top: -0.5em; } .s--pos-b-n-0050 { bottom: -0.5em; } .s--pos-l-n-0050 { left: -0.5em; } .s--pos-r-n-0050 { right: -0.5em; }
.s--pos-t-n-0075 { top: -0.75em; } .s--pos-b-n-0075 { bottom: -0.75em; } .s--pos-l-n-0075 { left: -0.75em; } .s--pos-r-n-0075 { right: -0.75em; }
.s--pos-t-n-01 { top: -1em; } .s--pos-b-n-01 { bottom: -1em; } .s--pos-l-n-01 { left: -1em; } .s--pos-r-n-01 { right: -1em; }
.s--pos-t-n-02 { top: -2em; } .s--pos-b-n-02 { bottom: -2em; } .s--pos-l-n-02 { left: -2em; } .s--pos-r-n-02 { right: -2em; }
.s--pos-t-n-0250 { top: -2.5em; } .s--pos-b-n-0250 { bottom: -2.5em; } .s--pos-l-n-0250 { left: -2.5em; } .s--pos-r-n-0250 { right: -2.5em; }
.s--pos-t-n-03 { top: -3em; } .s--pos-b-n-03 { bottom: -3em; } .s--pos-l-n-03 { left: -3em; } .s--pos-r-n-03 { right: -3em; }
.s--pos-t-n-04 { top: -4em; } .s--pos-b-n-04 { bottom: -4em; } .s--pos-l-n-04 { left: -4em; } .s--pos-r-n-04 { right: -4em; }
.s--pos-t-n-05 { top: -5em; } .s--pos-b-n-05 { bottom: -5em; } .s--pos-l-n-05 { left: -5em; } .s--pos-r-n-05 { right: -5em; }
.s--pos-t-n-06 { top: -6em; } .s--pos-b-n-06 { bottom: -6em; } .s--pos-l-n-06 { left: -6em; } .s--pos-r-n-06 { right: -6em; }
.s--pos-t-n-07 { top: -7em; } .s--pos-b-n-07 { bottom: -7em; } .s--pos-l-n-07 { left: -7em; } .s--pos-r-n-07 { right: -7em; }
.s--pos-t-n-0750 { top: -7.5em; } .s--pos-b-n-0750 { bottom: -7.5em; } .s--pos-l-n-0750 { left: -7.5em; } .s--pos-r-n-0750 { right: -7.5em; }
.s--pos-t-n-08 { top: -8em; } .s--pos-b-n-08 { bottom: -8em; } .s--pos-l-n-08 { left: -8em; } .s--pos-r-n-08 { right: -8em; }
.s--pos-t-n-09 { top: -9em; } .s--pos-b-n-09 { bottom: -9em; } .s--pos-l-n-09 { left: -9em; } .s--pos-r-n-09 { right: -9em; }
.s--pos-t-n-10 { top: -10em; } .s--pos-b-n-10 { bottom: -10em; } .s--pos-l-n-10 { left: -10em; } .s--pos-r-n-10 { right: -10em; }
/* width, height */
.s--wh-auto { width: auto; height: auro; }
.s--wd-auto { width: auto; }
.s--hi-auto { height: auto; }
.s--wh-100 { width: 100%; height: 100%; } .s--min-wh-100 { min-width: 100%; min-height: 100%; } .s--max-wh-100 { max-width: 100%; max-height: 100%; }
.s--wh-075 { width: 75%; height: 75%; }
.s--wh-066 { width: 66.6666%; height: 66.6666%; }
.s--wh-050 { width: 50%; height: 50%; }
.s--wh-033 { width: 33.3333%; height: 33.3333%; }
.s--wh-025 { width: 25%; height: 25%; }
.s--wh-020 { width: 20%; height: 20%; }
.s--vwvh-100 { width: 100vw; height: 100vh; } .s--min-vwvh-100 { min-width: 100vw; min-height: 100vh; } .s--max-vwvh-100 { max-width: 100vw; max-height: 100vh; }
.s--vwvh-075 { width: 75vw; height: 75vh; }
.s--vwvh-066 { width: 66.6666vw; height: 66.6666vh; }
.s--vwvh-050 { width: 50vw; height: 50vh; }
.s--vwvh-033 { width: 33.3333vw; height: 33.3333vh; }
.s--vwvh-025 { width: 25vw; height: 25vh; }
.s--vwvh-020 { width: 25vw; height: 20vh; }
.s--wd-100 { width: 100%; } .s--min-wd-100 { min-width: 100%; } .s--max-wd-100 { max-width: 100%; }
.s--wd-095 { width: 95%; }
.s--wd-090 { width: 90%; }
.s--wd-087 { width: 87.5%; }
.s--wd-085 { width: 85%; }
.s--wd-083 { width: 83.3333%; } .s--min-wd-083 { min-width: 83.3333%; } .s--max-wd-083 { max-width: 83.3333%; }
.s--wd-080 { width: 80%; }
.s--wd-075 { width: 75%; } .s--min-wd-075 { min-width: 75%; } .s--max-wd-075 { max-width: 75%; }
.s--wd-070 { width: 70%; }
.s--wd-066 { width: 66.6666%; } .s--min-wd-066 { min-width: 66.6666%; } .s--max-wd-066 { max-width: 66.6666%; }
.s--wd-065 { width: 65%; }
.s--wd-060 { width: 60%; }
.s--wd-055 { width: 55%; }
.s--wd-050 { width: 50%; } .s--min-wd-050 { min-width: 50%; } .s--max-wd-050 { max-width: 50%; }
.s--wd-045 { width: 45%; }
.s--wd-040 { width: 40%; }
.s--wd-035 { width: 35%; }
.s--wd-033 { width: 33.3333%; } .s--min-wd-033 { min-width: 33.3333%; } .s--max-wd-033 { max-width: 33.3333%; }
.s--wd-030 { width: 30%; }
.s--wd-025 { width: 25%; } .s--min-wd-025 { min-width: 25%; } .s--max-wd-025 { max-width: 25%; }
.s--wd-020 { width: 20%; }
.s--wd-016 { width: 16.6666%; } .s--min-wd-016 { min-width: 16.6666%; } .s--max-wd-016 { max-width: 16.6666%; }
.s--wd-015 { width: 15%; }
.s--wd-012 { width: 12.5%; }
.s--wd-010 { width: 10%; }
.s--vw-100 { width: 100vw; } .s--min-vw-100 { min-width: 100vw; } .s--max-vw-100 { max-width: 100vw; }
.s--vw-075 { width: 75vw; } .s--min-vw-075 { min-width: 75vw; } .s--max-vw-075 { max-width: 75vw; }
.s--vw-066 { width: 66.6666vw; } .s--min-vw-066 { min-width: 66.6666vw; } .s--max-vw-066 { max-width: 66.6666vw; }
.s--vw-050 { width: 50vw; } .s--min-vw-050 { min-width: 50vw; } .s--max-vw-050 { max-width: 50vw; }
.s--vw-033 { width: 33.3333vw; } .s--min-vw-033 { min-width: 33.3333vw; } .s--max-vw-033 { max-width: 33.3333vw; }
.s--vw-025 { width: 25vw; } .s--min-vw-025 { min-width: 25vw; } .s--max-vw-025 { max-width: 25vw; }
.s--vw-020 { width: 20vw; } .s--min-vw-020 { min-width: 20vw; } .s--max-vw-020 { max-width: 20vw; }
.s--wd-xs { width: 512px; } .s--min-wd-xs { min-width: 512px; } .s--max-wd-xs { max-width: 512px; }
.s--wd-s { width: 768px; } .s--min-wd-s { min-width: 768px; } .s--max-wd-s { max-width: 768px; }
.s--wd-240 { width: 240px; } .s--min-wd-240 { min-width: 240px; } .s--max-wd-240 { max-width: 240px; }
.s--wd-320 { width: 320px; } .s--min-wd-320 { min-width: 320px; } .s--max-wd-320 { max-width: 320px; }
.s--wd-400 { width: 400px; } .s--min-wd-400 { min-width: 400px; } .s--max-wd-400 { max-width: 400px; }
.s--wd-480 { width: 480px; } .s--min-wd-480 { min-width: 480px; } .s--max-wd-480 { max-width: 480px; }
.s--wd-560 { width: 560px; } .s--min-wd-560 { min-width: 560px; } .s--max-wd-560 { max-width: 560px; }
.s--wd-640 { width: 640px; } .s--min-wd-640 { min-width: 640px; } .s--max-wd-640 { max-width: 640px; }
.s--wd-720 { width: 720px; } .s--min-wd-720 { min-width: 720px; } .s--max-wd-720 { max-width: 720px; }
.s--wd-800 { width: 800px; } .s--min-wd-800 { min-width: 800px; } .s--max-wd-800 { max-width: 800px; }
.s--wd-880 { width: 880px; } .s--min-wd-880 { min-width: 880px; } .s--max-wd-880 { max-width: 880px; }
.s--wd-960 { width: 960px; } .s--min-wd-960 { min-width: 960px; } .s--max-wd-960 { max-width: 960px; }
.s--wd-0050 { width: 0.5em; } .s--min-wd-0050 { min-width: 0.5em; } .s--max-wd-0050 { max-width: 0.5em; }
.s--wd-0075 { width: 0.75em; } .s--min-wd-0075 { min-width: 0.75em; } .s--max-wd-0075 { max-width: 0.75em; }
.s--wd-01 { width: 1em; } .s--min-wd-01 { min-width: 1em; } .s--max-wd-01 { max-width: 1em; }
.s--wd-0150 { width: 1.5em; } .s--min-wd-0150 { min-width: 1.5em; } .s--max-wd-0150 { max-width: 1.5em; }
.s--wd-02 { width: 2em; } .s--min-wd-02 { min-width: 2em; } .s--max-wd-02 { max-width: 2em; }
.s--wd-0250 { width: 2.5em; } .s--min-wd-0250 { min-width: 2.5em; } .s--max-wd-0250 { max-width: 2.5em; }
.s--wd-03 { width: 3em; } .s--min-wd-03 { min-width: 3em; } .s--max-wd-03 { max-width: 3em; }
.s--wd-04 { width: 4em; } .s--min-wd-04 { min-width: 4em; } .s--max-wd-04 { max-width: 4em; }
.s--wd-05 { width: 5em; } .s--min-wd-05 { min-width: 5em; } .s--max-wd-05 { max-width: 5em; }
.s--wd-06 { width: 6em; } .s--min-wd-06 { min-width: 6em; } .s--max-wd-06 { max-width: 6em; }
.s--wd-07 { width: 7em; } .s--min-wd-07 { min-width: 7em; } .s--max-wd-07 { max-width: 7em; }
.s--wd-08 { width: 8em; } .s--min-wd-08 { min-width: 8em; } .s--max-wd-08 { max-width: 8em; }
.s--wd-09 { width: 9em; } .s--min-wd-09 { min-width: 9em; } .s--max-wd-09 { max-width: 9em; }
.s--wd-10 { width: 10em; } .s--min-wd-10 { min-width: 10em; } .s--max-wd-10 { max-width: 10em; }
.s--wd-15 { width: 15em; } .s--min-wd-15 { min-width: 15em; } .s--max-wd-15 { max-width: 15em; }
.s--wd-20 { width: 20em; } .s--min-wd-20 { min-width: 20em; } .s--max-wd-20 { max-width: 20em; }
.s--wd-25 { width: 25em; } .s--min-wd-25 { min-width: 25em; } .s--max-wd-25 { max-width: 25em; }
.s--wd-30 { width: 30em; } .s--min-wd-30 { min-width: 30em; } .s--max-wd-30 { max-width: 30em; }
.s--wd-35 { width: 35em; } .s--min-wd-35 { min-width: 35em; } .s--max-wd-35 { max-width: 35em; }
.s--wd-40 { width: 40em; } .s--min-wd-40 { min-width: 40em; } .s--max-wd-40 { max-width: 40em; }
.s--wd-45 { width: 45em; } .s--min-wd-45 { min-width: 45em; } .s--max-wd-45 { max-width: 45em; }
.s--wd-50 { width: 50em; } .s--min-wd-50 { min-width: 50em; } .s--max-wd-50 { max-width: 50em; }
.s--wd-55 { width: 55em; } .s--min-wd-55 { min-width: 55em; } .s--max-wd-55 { max-width: 55em; }
.s--wd-60 { width: 60em; } .s--min-wd-60 { min-width: 60em; } .s--max-wd-60 { max-width: 60em; }
.s--wd-65 { width: 65em; } .s--min-wd-65 { min-width: 65em; } .s--max-wd-65 { max-width: 65em; }
.s--wd-70 { width: 70em; } .s--min-wd-70 { min-width: 70em; } .s--max-wd-70 { max-width: 70em; }
.s--wd-75 { width: 75em; } .s--min-wd-75 { min-width: 75em; } .s--max-wd-75 { max-width: 75em; }
.s--wd-80 { width: 80em; } .s--min-wd-80 { min-width: 80em; } .s--max-wd-80 { max-width: 80em; }
.s--wd-85 { width: 85em; } .s--min-wd-85 { min-width: 85em; } .s--max-wd-85 { max-width: 85em; }
.s--wd-90 { width: 90em; } .s--min-wd-90 { min-width: 90em; } .s--max-wd-90 { max-width: 90em; }
.s--wd-95 { width: 95em; } .s--min-wd-95 { min-width: 95em; } .s--max-wd-95 { max-width: 95em; }
.s--hi-100 { height: 100%; overflow: hidden; } .s--min-hi-100 { min-height: 100%; } .s--max-hi-100 { max-height: 100%; }
.s--hi-075 { height: 75%; overflow: hidden; } .s--min-hi-075 { min-height: 75%; } .s--max-hi-075 { max-height: 75%; }
.s--hi-066 { height: 66.6666%; overflow: hidden; } .s--min-hi-066 { min-height: 66.6666%; } .s--max-hi-066 { max-height: 66.6666%; }
.s--hi-050 { height: 50%; overflow: hidden; } .s--min-hi-050 { min-height: 50%; } .s--max-hi-050 { max-height: 50%; }
.s--hi-033 { height: 33.3333%; } .s--min-hi-033 { min-height: 33.3333%; } .s--max-hi-033 { max-height: 33.3333%; }
.s--hi-025 { height: 25%; overflow: hidden; } .s--min-hi-025 { min-height: 25%; } .s--max-hi-025 { max-height: 25%; }
.s--hi-020 { height: 20%; overflow: hidden; } .s--min-hi-020 { min-height: 20%; } .s--max-hi-020 { max-height: 20%; }
.s--vh-100 { height: 100vh; } .s--min-vh-100 { min-height: 100vh; } .s--max-vh-100 { max-height: 100vh; }
.s--vh-075 { height: 75vh; } .s--min-vh-075 { min-height: 75vh; } .s--max-vh-075 { max-height: 75vh; }
.s--vh-066 { height: 66.6666vh; } .s--min-vh-066 { min-height: 66.6666vh; } .s--max-vh-066 { max-height: 66.6666vh; }
.s--vh-050 { height: 50vh; } .s--min-vh-050 { min-height: 50vh; } .s--max-vh-050 { max-height: 50vh; }
.s--vh-033 { height: 33.3333vh; } .s--min-vh-033 { min-height: 33.3333vh; } .s--max-vh-033 { max-height: 33.3333vh; }
.s--vh-025 { height: 25vh; } .s--min-vh-025 { min-height: 25vh; } .s--max-vh-025 { max-height: 25vh; }
.s--vh-020 { height: 20vh; } .s--min-vh-020 { min-height: 20vh; } .s--max-vh-020 { max-height: 20vh; }
.s--hi-01 { height: 1em; overflow: hidden; } .s--min-hi-01 { min-height: 1em; } .s--max-hi-01 { max-height: 1em; }
.s--hi-02 { height: 2em; overflow: hidden; } .s--min-hi-02 { min-height: 2em; } .s--max-hi-02 { max-height: 2em; }
.s--hi-0250 { height: 2.5em; overflow: hidden; } .s--min-hi-0250 { min-height: 2.5em; } .s--max-hi-0250 { max-height: 2.5em; }
.s--hi-03 { height: 3em; overflow: hidden; } .s--min-hi-03 { min-height: 3em; } .s--max-hi-03 { max-height: 3em; }
.s--hi-04 { height: 4em; overflow: hidden; } .s--min-hi-04 { min-height: 4em; } .s--max-hi-04 { max-height: 4em; }
.s--hi-05 { height: 5em; overflow: hidden; } .s--min-hi-05 { min-height: 5em; } .s--max-hi-05 { max-height: 5em; }
.s--hi-06 { height: 6em; overflow: hidden; } .s--min-hi-06 { min-height: 6em; } .s--max-hi-06 { max-height: 6em; }
.s--hi-07 { height: 7em; overflow: hidden; } .s--min-hi-07 { min-height: 7em; } .s--max-hi-07 { max-height: 7em; }
.s--hi-0750 { height: 7.5em; overflow: hidden; } .s--min-hi-0750 { min-height: 7.5em; } .s--max-hi-0750 { max-height: 7.5em; }
.s--hi-08 { height: 8em; overflow: hidden; } .s--min-hi-08 { min-height: 8em; } .s--max-hi-08 { max-height: 8em; }
.s--hi-09 { height: 9em; overflow: hidden; } .s--min-hi-09 { min-height: 9em; } .s--max-hi-09 { max-height: 9em; }
.s--hi-10 { height: 10em; overflow: hidden; } .s--min-hi-10 { min-height: 10em; } .s--max-hi-10 { max-height: 10em; }
.s--hi-15 { height: 15em; overflow: hidden; } .s--min-hi-15 { min-height: 15em; } .s--max-hi-15 { max-height: 15em; }
.s--hi-20 { height: 20em; overflow: hidden; } .s--min-hi-20 { min-height: 20em; } .s--max-hi-20 { max-height: 20em; }
.s--hi-25 { height: 25em; overflow: hidden; } .s--min-hi-25 { min-height: 25em; } .s--max-hi-25 { max-height: 25em; }
.s--hi-30 { height: 30em; overflow: hidden; } .s--min-hi-30 { min-height: 30em; } .s--max-hi-30 { max-height: 30em; }
.s--hi-35 { height: 35em; overflow: hidden; } .s--min-hi-35 { min-height: 35em; } .s--max-hi-35 { max-height: 35em; }
.s--hi-40 { height: 40em; overflow: hidden; } .s--min-hi-40 { min-height: 40em; } .s--max-hi-40 { max-height: 40em; }
.s--hi-45 { height: 45em; overflow: hidden; } .s--min-hi-45 { min-height: 45em; } .s--max-hi-45 { max-height: 45em; }
.s--hi-50 { height: 50em; overflow: hidden; } .s--min-hi-50 { min-height: 50em; } .s--max-hi-50 { max-height: 50em; }
.s--hi-55 { height: 55em; overflow: hidden; } .s--min-hi-55 { min-height: 55em; } .s--max-hi-55 { max-height: 55em; }
.s--hi-60 { height: 60em; overflow: hidden; } .s--min-hi-60 { min-height: 60em; } .s--max-hi-60 { max-height: 60em; }
.s--hi-65 { height: 65em; overflow: hidden; } .s--min-hi-65 { min-height: 65em; } .s--max-hi-65 { max-height: 65em; }
.s--hi-70 { height: 70em; overflow: hidden; } .s--min-hi-70 { min-height: 70em; } .s--max-hi-70 { max-height: 70em; }
.s--hi-75 { height: 75em; overflow: hidden; } .s--min-hi-75 { min-height: 75em; } .s--max-hi-75 { max-height: 75em; }
.s--hi-80 { height: 80em; overflow: hidden; } .s--min-hi-80 { min-height: 80em; } .s--max-hi-80 { max-height: 80em; }
.s--hi-85 { height: 85em; overflow: hidden; } .s--min-hi-85 { min-height: 85em; } .s--max-hi-85 { max-height: 85em; }
.s--hi-90 { height: 90em; overflow: hidden; } .s--min-hi-90 { min-height: 90em; } .s--max-hi-90 { max-height: 90em; }
.s--hi-95 { height: 95em; overflow: hidden; } .s--min-hi-95 { min-height: 95em; } .s--max-hi-95 { max-height: 95em; }
.s--col-01 > * { width: 100%; }
.s--col-02 > * { width: 50%; }
.s--col-03 > * { width: 33.3333%; }
.s--col-04 > * { width: 25%; }
.s--col-05 > * { width: 20%; }
/* margin */
.s--no-mr-a { margin: 0 !important; }
.s--no-mr-tb { margin-top: 0 !important; margin-bottom: 0 !important; }
.s--no-mr, .s--no-mr-lr { margin-right: 0 !important; margin-left: 0 !important; }
.s--no-mr-l { margin-left: 0 !important; }
.s--no-mr-r { margin-right: 0 !important; }
.s--mr-a-auto { margin: auto !important; float: none !important; }
.s--mr-tb-auto { margin-top: auto !important; margin-bottom: auto !important; float: none !important; }
.s--mr-auto, .s--mr-lr-auto { margin-right: auto !important; margin-left: auto !important; float: none !important; }
.s--mr-l-auto { margin-right: 0 !important; margin-left: auto !important; }
.s--mr-r-auto { margin-right: auto !important; margin-left: 0 !important; }
.s--mr-000, .s--mr-lr-000 { margin-left: 0%; margin-right: 0%; }
.s--mr-l-000 { margin-left: 0%; } .s--mr-r-000 { margin-right: 0%; }
/* padding */
.s--no-pd { padding: 0 !important; }
.s--no-pd-tb { padding-top: 0 !important; padding-bottom: 0 !important; }
.s--no-pd-lr { padding-right: 0 !important; padding-left: 0 !important; }
.s--no-pd-l { padding-left: 0 !important; }
.s--no-pd-r { padding-right: 0 !important; }
.s--pd-0001 { padding: 1px; }
.s--pd-00, .s--pd-0000 { padding: 0em; }
.s--pd-t-00, .s--pd-t-0000 { padding-top: 0em; } .s--pd-b-00, .s--pd-b-0000 { padding-bottom: 0em; }
.s--pd-l-00, .s--pd-l-0000 { padding-left: 0em; } .s--pd-r-00, .s--pd-r-0000 { padding-right: 0em; }
.s--pd-tb-00, .s--pd-tb-0000 { padding-top: 0em; padding-bottom: 0em; }
.s--pd-lr-00, .s--pd-lr-0000 { padding-right: 0em; padding-left: 0em; }
.s--pd-0025 { padding: 0.25em; }
.s--pd-t-0025 { padding-top: 0.25em; } .s--pd-b-0025 { padding-bottom: 0.25em; }
.s--pd-l-0025 { padding-left: 0.25em; } .s--pd-r-0025 { padding-right: 0.25em; }
.s--pd-tb-0025 { padding-top: 0.25em; padding-bottom: 0.25em; }
.s--pd-lr-0025 { padding-right: 0.25em; padding-left: 0.25em; }
.s--pd-0050 { padding: 0.5em; }
.s--pd-t-0050 { padding-top: 0.5em; } .s--pd-b-0050 { padding-bottom: 0.5em; }
.s--pd-l-0050 { padding-left: 0.5em; } .s--pd-r-0050 { padding-right: 0.5em; }
.s--pd-tb-0050 { padding-top: 0.5em; padding-bottom: 0.5em; }
.s--pd-lr-0050 { padding-right: 0.5em; padding-left: 0.5em; }
.s--pd-0075 { padding: 0.75em; }
.s--pd-t-0075 { padding-top: 0.75em; } .s--pd-b-0075 { padding-bottom: 0.75em; }
.s--pd-l-0075 { padding-left: 0.75em; } .s--pd-r-0075 { padding-right: 0.75em; }
.s--pd-tb-0075 { padding-top: 0.75em; padding-bottom: 0.75em; }
.s--pd-lr-0075 { padding-right: 0.75em; padding-left: 0.75em; }
.s--pd-01 { padding: 1em; }
.s--pd-t-01 { padding-top: 1em; } .s--pd-b-01 { padding-bottom: 1em; }
.s--pd-l-01 { padding-left: 1em; } .s--pd-r-01 { padding-right: 1em; }
.s--pd-tb-01 { padding-top: 1em; padding-bottom: 1em; }
.s--pd-lr-01 { padding-right: 1em; padding-left: 1em; }
.s--pd-0150 { padding: 2.5em; }
.s--pd-t-0150 { padding-top: 1.5em; } .s--pd-b-0150 { padding-bottom: 1.5em; }
.s--pd-l-0150 { padding-left: 1.5em; } .s--pd-r-0150 { padding-right: 1.5em; }
.s--pd-tb-0150 { padding-top: 1.5em; padding-bottom: 1.5em; }
.s--pd-lr-0150 { padding-right: 1.5em; padding-left: 1.5em; }
.s--pd-02 { padding: 2em; }
.s--pd-t-02 { padding-top: 2em; } .s--pd-b-02 { padding-bottom: 2em; }
.s--pd-l-02 { padding-left: 2em; } .s--pd-r-02 { padding-right: 2em; }
.s--pd-tb-02 { padding-top: 2em; padding-bottom: 2em; }
.s--pd-lr-02 { padding-right: 2em; padding-left: 2em; }
.s--pd-0250 { padding: 2.5em; }
.s--pd-t-0250 { padding-top: 2.5em; } .s--pd-b-0250 { padding-bottom: 2.5em; }
.s--pd-l-0250 { padding-left: 2.5em; } .s--pd-r-0250 { padding-right: 2.5em; }
.s--pd-tb-0250 { padding-top: 2.5em; padding-bottom: 2.5em; }
.s--pd-lr-0250 { padding-right: 2.5em; padding-left: 2.5em; }
.s--pd-03 { padding: 3em; }
.s--pd-t-03 { padding-top: 3em; } .s--pd-b-03 { padding-bottom: 3em; }
.s--pd-l-03 { padding-left: 3em; } .s--pd-r-03 { padding-right: 3em; }
.s--pd-tb-03 { padding-top: 3em; padding-bottom: 3em; }
.s--pd-lr-03 { padding-right: 3em; padding-left: 3em; }
.s--pd-04 { padding: 4em; }
.s--pd-t-04 { padding-top: 4em; } .s--pd-b-04 { padding-bottom: 4em; }
.s--pd-l-04 { padding-left: 4em; } .s--pd-r-04 { padding-right: 4em; }
.s--pd-tb-04 { padding-top: 4em; padding-bottom: 4em; }
.s--pd-lr-04 { padding-right: 4em; padding-left: 4em; }
.s--pd-05 { padding: 5em; }
.s--pd-t-05 { padding-top: 5em; } .s--pd-b-05 { padding-bottom: 5em; }
.s--pd-l-05 { padding-left: 5em; } .s--pd-r-05 { padding-right: 5em; }
.s--pd-tb-05 { padding-top: 5em; padding-bottom: 5em; }
.s--pd-lr-05 { padding-right: 5em; padding-left: 5em; }
}
@media screen and ( min-width: 1281px ) {
.l--no-hit { cursor: default; pointer-events: none; text-decoration: none !important; }
/* border */
.l--no-bd { border: 0 !important; }
.l--no-bd-t { border-top: 0 !important; }
.l--no-bd-b { border-bottom: 0 !important; }
.l--no-bd-l { border-left: 0 !important; }
.l--no-bd-r { border-right: 0 !important; }
.l--bd-00 { border: 0; }
.l--bd-01 { border-style: solid; border-width: 1px; }
.l--bd-t-01 { border-top-style: solid; border-top-width: 1px; }
.l--bd-b-01 { border-bottom-style: solid; border-bottom-width: 1px; }
.l--bd-l-01 { border-left-style: solid; border-left-width: 1px; }
.l--bd-r-01 { border-right-style: solid; border-right-width: 1px; }
.l--bd-tb-01 { border-top-style: solid; border-bottom-style: solid; border-top-width: 1px; border-bottom-width: 1px; }
.l--bd-lr-01 { border-right-style: solid; border-left-style: solid; border-right-width: 1px; border-left-width: 1px; }
.l--bd-02 { border-style: solid; border-width: 2px; }
.l--bd-t-02 { border-top-style: solid; border-top-width: 2px; }
.l--bd-b-02 { border-bottom-style: solid; border-bottom-width: 2px; }
.l--bd-l-02 { border-left-style: solid; border-left-width: 2px; }
.l--bd-r-02 { border-right-style: solid; border-right-width: 2px; }
.l--bd-tb-02 { border-top-style: solid; border-bottom-style: solid; border-top-width: 2px; border-bottom-width: 2px; }
.l--bd-lr-02 { border-right-style: solid; border-left-style: solid; border-right-width: 2px; border-left-width: 2px; }
.l--bd-li-01 { border-bottom-style: solid; border-bottom-width: 1px; }
[class*=l--bd-li-]:first-of-type { border-top-style: solid; border-top-width: 1px; }
.l--bd-n-li-01 { border-bottom-style: solid; border-bottom-width: 1px; }
[class*=l--bd-n-li-]:last-of-type { border-bottom-width: 0px; }
/* text-align */
.l--tx-l { text-align: left; display: block; }
.l--tx-r { text-align: right; display: block; }
.l--tx-c { text-align: center; display: block; }
.l--tx-j { text-align: justify; text-justify: inter-ideograph; }
.l--tx-r * { text-align: inherit; }
.l--tx-c * { text-align: inherit; }
.l--tx-j * { text-align: inherit; }
/* line-feed */
.l--br { content: "\A"; display: block; }
.l--no-br { content: ""; display: none; }
.l--hr { content: "\A"; display: block; }
.l--no-hr { content: ""; display: none; }
.l--br, .l--sp, .l--hr, .l--vr { content: ""; display: inline; background: none; }
.l--br:before { content: "\A"; display: block; background: none; }
.l--hr:before {
content: "\A"; display: block; block-size: 1em; border-block: none;
background: 0 50% / 100% 1px no-repeat linear-gradient(rgba(var(--bdc),0.05), rgba(var(--bdc),0.05) 100%);
}
.l--sp:before { content: " "; display: inline; background: none; }
.l--vr:before { content: "｜"; display: inline; background: none; }
/***** layout *****/
/* visibility */
.l--vis { visibility: visible; }
.l--vih { visibility: hidden; }
.l--vic { visibility: collapse; }
/* display */
.l--din { display: initial; }
.l--dno { display: none; }
.l--dil { display: inline; }
.l--dbl { display: block; }
.l--dib { display: inline-block; }
/* overflow */
.l--of-v { overflow: visible; }
.l--of-h { overflow: hidden; }
.l--of-c { overflow: clip; }
.l--ofx-v { overflow-x: visible; }
.l--ofx-h { overflow-x: hidden; overflow-y: auto; }
.l--ofx-c { overflow-x: clip; }
.l--ofy-v { overflow-y: visible; }
.l--ofy-h { overflow-x: auto; overflow-y: hidden; }
.l--ofy-c { overflow-y: clip; }
/* position */
.l--stt { position: static; }
.l--rlt { position: relative; }
.l--abs { position: absolute; z-index: 5; }
.l--fix { position: fixed; z-index: 5; }
.l--sti { position: -webkit-sticky; position: sticky; z-index: 5; }
.l--pos-0000 { top: 0; bottom: 0; left: 0; right: 0; margin: auto; }
.l--pos-tb-0000 { top: 0; bottom: 0; margin-top: auto; margin-bottom: auto; }
.l--pos-lr-0000 { left: 0; right: 0; margin-left: auto; margin-right: auto; }
.l--pos-t-00 { top: 0; } .l--pos-b-00 { bottom: 0; } .l--pos-l-00 { left: 0; } .l--pos-r-00 { right: 0; }
.l--pos-t-0025 { top: 0.25em; } .l--pos-b-0025 { bottom: 0.25em; } .l--pos-l-0025 { left: 0.25em; } .l--pos-r-0025 { right: 0.25em; }
.l--pos-t-0050 { top: 0.5em; } .l--pos-b-0050 { bottom: 0.5em; } .l--pos-l-0050 { left: 0.5em; } .l--pos-r-0050 { right: 0.5em; }
.l--pos-t-0075 { top: 0.75em; } .l--pos-b-0075 { bottom: 0.75em; } .l--pos-l-0075 { left: 0.75em; } .l--pos-r-0075 { right: 0.75em; }
.l--pos-t-01 { top: 1em; } .l--pos-b-01 { bottom: 1em; } .l--pos-l-01 { left: 1em; } .l--pos-r-01 { right: 1em; }
.l--pos-t-02 { top: 2em; } .l--pos-b-02 { bottom: 2em; } .l--pos-l-02 { left: 2em; } .l--pos-r-02 { right: 2em; }
.l--pos-t-0250 { top: 2.5em; } .l--pos-b-0250 { bottom: 2.5em; } .l--pos-l-0250 { left: 2.5em; } .l--pos-r-0250 { right: 2.5em; }
.l--pos-t-03 { top: 3em; } .l--pos-b-03 { bottom: 3em; } .l--pos-l-03 { left: 3em; } .l--pos-r-03 { right: 3em; }
.l--pos-t-04 { top: 4em; } .l--pos-b-04 { bottom: 4em; } .l--pos-l-04 { left: 4em; } .l--pos-r-04 { right: 4em; }
.l--pos-t-05 { top: 5em; } .l--pos-b-05 { bottom: 5em; } .l--pos-l-05 { left: 5em; } .l--pos-r-05 { right: 5em; }
.l--pos-t-06 { top: 6em; } .l--pos-b-06 { bottom: 6em; } .l--pos-l-06 { left: 6em; } .l--pos-r-06 { right: 6em; }
.l--pos-t-07 { top: 7em; } .l--pos-b-07 { bottom: 7em; } .l--pos-l-07 { left: 7em; } .l--pos-r-07 { right: 7em; }
.l--pos-t-0750 { top: 7.5em; } .l--pos-b-0750 { bottom: 7.5em; } .l--pos-l-0750 { left: 7.5em; } .l--pos-r-0750 { right: 7.5em; }
.l--pos-t-08 { top: 8em; } .l--pos-b-08 { bottom: 8em; } .l--pos-l-08 { left: 8em; } .l--pos-r-08 { right: 8em; }
.l--pos-t-09 { top: 9em; } .l--pos-b-09 { bottom: 9em; } .l--pos-l-09 { left: 9em; } .l--pos-r-09 { right: 9em; }
.l--pos-t-10 { top: 10em; } .l--pos-b-10 { bottom: 10em; } .l--pos-l-10 { left: 10em; } .l--pos-r-10 { right: 10em; }
.l--pos-t-n-0025 { top: -0.25em; } .l--pos-b-n-0025 { bottom: -0.25em; } .l--pos-l-n-0025 { left: -0.25em; } .l--pos-r-n-0025 { right: -0.25em; }
.l--pos-t-n-0050 { top: -0.5em; } .l--pos-b-n-0050 { bottom: -0.5em; } .l--pos-l-n-0050 { left: -0.5em; } .l--pos-r-n-0050 { right: -0.5em; }
.l--pos-t-n-0075 { top: -0.75em; } .l--pos-b-n-0075 { bottom: -0.75em; } .l--pos-l-n-0075 { left: -0.75em; } .l--pos-r-n-0075 { right: -0.75em; }
.l--pos-t-n-01 { top: -1em; } .l--pos-b-n-01 { bottom: -1em; } .l--pos-l-n-01 { left: -1em; } .l--pos-r-n-01 { right: -1em; }
.l--pos-t-n-02 { top: -2em; } .l--pos-b-n-02 { bottom: -2em; } .l--pos-l-n-02 { left: -2em; } .l--pos-r-n-02 { right: -2em; }
.l--pos-t-n-0250 { top: -2.5em; } .l--pos-b-n-0250 { bottom: -2.5em; } .l--pos-l-n-0250 { left: -2.5em; } .l--pos-r-n-0250 { right: -2.5em; }
.l--pos-t-n-03 { top: -3em; } .l--pos-b-n-03 { bottom: -3em; } .l--pos-l-n-03 { left: -3em; } .l--pos-r-n-03 { right: -3em; }
.l--pos-t-n-04 { top: -4em; } .l--pos-b-n-04 { bottom: -4em; } .l--pos-l-n-04 { left: -4em; } .l--pos-r-n-04 { right: -4em; }
.l--pos-t-n-05 { top: -5em; } .l--pos-b-n-05 { bottom: -5em; } .l--pos-l-n-05 { left: -5em; } .l--pos-r-n-05 { right: -5em; }
.l--pos-t-n-06 { top: -6em; } .l--pos-b-n-06 { bottom: -6em; } .l--pos-l-n-06 { left: -6em; } .l--pos-r-n-06 { right: -6em; }
.l--pos-t-n-07 { top: -7em; } .l--pos-b-n-07 { bottom: -7em; } .l--pos-l-n-07 { left: -7em; } .l--pos-r-n-07 { right: -7em; }
.l--pos-t-n-0750 { top: -7.5em; } .l--pos-b-n-0750 { bottom: -7.5em; } .l--pos-l-n-0750 { left: -7.5em; } .l--pos-r-n-0750 { right: -7.5em; }
.l--pos-t-n-08 { top: -8em; } .l--pos-b-n-08 { bottom: -8em; } .l--pos-l-n-08 { left: -8em; } .l--pos-r-n-08 { right: -8em; }
.l--pos-t-n-09 { top: -9em; } .l--pos-b-n-09 { bottom: -9em; } .l--pos-l-n-09 { left: -9em; } .l--pos-r-n-09 { right: -9em; }
.l--pos-t-n-10 { top: -10em; } .l--pos-b-n-10 { bottom: -10em; } .l--pos-l-n-10 { left: -10em; } .l--pos-r-n-10 { right: -10em; }
/* width, height */
.l--wh-auto { width: auto; height: auro; }
.l--wd-auto { width: auto; }
.l--hi-auto { height: auto; }
.l--wh-100 { width: 100%; height: 100%; } .l--min-wh-100 { min-width: 100%; min-height: 100%; } .l--max-wh-100 { max-width: 100%; max-height: 100%; }
.l--wh-075 { width: 75%; height: 75%; }
.l--wh-066 { width: 66.6666%; height: 66.6666%; }
.l--wh-050 { width: 50%; height: 50%; }
.l--wh-033 { width: 33.3333%; height: 33.3333%; }
.l--wh-025 { width: 25%; height: 25%; }
.l--wh-020 { width: 20%; height: 20%; }
.l--vwvh-100 { width: 100vw; height: 100vh; } .l--min-vwvh-100 { min-width: 100vw; min-height: 100vh; } .l--max-vwvh-100 { max-width: 100vw; max-height: 100vh; }
.l--vwvh-075 { width: 75vw; height: 75vh; }
.l--vwvh-066 { width: 66.6666vw; height: 66.6666vh; }
.l--vwvh-050 { width: 50vw; height: 50vh; }
.l--vwvh-033 { width: 33.3333vw; height: 33.3333vh; }
.l--vwvh-025 { width: 25vw; height: 25vh; }
.l--vwvh-020 { width: 20vw; height: 20vh; }
.l--wd-100 { width: 100%; } .l--min-wd-100 { min-width: 100%; } .l--max-wd-100 { max-width: 100%; }
.l--wd-095 { width: 95%; }
.l--wd-090 { width: 90%; }
.l--wd-087 { width: 87.5%; }
.l--wd-085 { width: 85%; }
.l--wd-083 { width: 83.3333%; } .l--min-wd-083 { min-width: 83.3333%; } .l--max-wd-083 { max-width: 83.3333%; }
.l--wd-080 { width: 80%; }
.l--wd-075 { width: 75%; } .l--min-wd-075 { min-width: 75%; } .l--max-wd-075 { max-width: 75%; }
.l--wd-070 { width: 70%; }
.l--wd-066 { width: 66.6666%; } .l--min-wd-066 { min-width: 66.6666%; } .l--max-wd-066 { max-width: 66.6666%; }
.l--wd-065 { width: 65%; }
.l--wd-060 { width: 60%; }
.l--wd-055 { width: 55%; }
.l--wd-050 { width: 50%; } .l--min-wd-050 { min-width: 50%; } .l--max-wd-050 { max-width: 50%; }
.l--wd-045 { width: 45%; }
.l--wd-040 { width: 40%; }
.l--wd-035 { width: 35%; }
.l--wd-033 { width: 33.3333%; } .l--min-wd-033 { min-width: 33.3333%; } .l--max-wd-033 { max-width: 33.3333%; }
.l--wd-030 { width: 30%; }
.l--wd-025 { width: 25%; } .l--min-wd-025 { min-width: 25%; } .l--max-wd-025 { max-width: 25%; }
.l--wd-020 { width: 20%; }
.l--wd-016 { width: 16.6666%; } .l--min-wd-016 { min-width: 16.6666%; } .l--max-wd-016 { max-width: 16.6666%; }
.l--wd-015 { width: 15%; }
.l--wd-012 { width: 12.5%; }
.l--wd-010 { width: 10%; }
.l--vw-100 { width: 100vw; } .l--min-vw-100 { min-width: 100vw; } .l--max-vw-100 { max-width: 100vw; }
.l--vw-075 { width: 75vw; } .l--min-vw-075 { min-width: 75vw; } .l--max-vw-075 { max-width: 75vw; }
.l--vw-066 { width: 66.6666vw; } .l--min-vw-066 { min-width: 66.6666vw; } .l--max-vw-066 { max-width: 66.6666vw; }
.l--vw-050 { width: 50vw; } .l--min-vw-050 { min-width: 50vw; } .l--max-vw-050 { max-width: 50vw; }
.l--vw-033 { width: 33.3333vw; } .l--min-vw-033 { min-width: 33.3333vw; } .l--max-vw-033 { max-width: 33.3333vw; }
.l--vw-025 { width: 25vw; } .l--min-vw-025 { min-width: 25vw; } .l--max-vw-025 { max-width: 25vw; }
.l--vw-020 { width: 20vw; } .l--min-vw-020 { min-width: 20vw; } .l--max-vw-020 { max-width: 20vw; }
.l--wd-xs { width: 512px; } .l--min-wd-xs { min-width: 512px; } .l--max-wd-xs { max-width: 512px; }
.l--wd-s { width: 768px; } .l--min-wd-s { min-width: 768px; } .l--max-wd-s { max-width: 768px; }
.l--wd-m { width: 1024px; } .l--min-wd-m { min-width: 1024px; } .l--max-wd-m { max-width: 1024px; }
.l--wd-l { width: 1280px; } .l--min-wd-l { min-width: 1280px; } .l--max-wd-l { max-width: 1280px; }
.l--wd-xl { width: 1536px; } .l--min-wd-xl { min-width: 1536px; } .l--max-wd-xl { max-width: 1536px; }
.l--wd-240 { width: 240px; } .l--min-wd-240 { min-width: 240px; } .l--max-wd-240 { max-width: 240px; }
.l--wd-320 { width: 320px; } .l--min-wd-320 { min-width: 320px; } .l--max-wd-320 { max-width: 320px; }
.l--wd-400 { width: 400px; } .l--min-wd-400 { min-width: 400px; } .l--max-wd-400 { max-width: 400px; }
.l--wd-480 { width: 480px; } .l--min-wd-480 { min-width: 480px; } .l--max-wd-480 { max-width: 480px; }
.l--wd-560 { width: 560px; } .l--min-wd-560 { min-width: 560px; } .l--max-wd-560 { max-width: 560px; }
.l--wd-640 { width: 640px; } .l--min-wd-640 { min-width: 640px; } .l--max-wd-640 { max-width: 640px; }
.l--wd-720 { width: 720px; } .l--min-wd-720 { min-width: 720px; } .l--max-wd-720 { max-width: 720px; }
.l--wd-800 { width: 800px; } .l--min-wd-800 { min-width: 800px; } .l--max-wd-800 { max-width: 800px; }
.l--wd-880 { width: 880px; } .l--min-wd-880 { min-width: 880px; } .l--max-wd-880 { max-width: 880px; }
.l--wd-960 { width: 960px; } .l--min-wd-960 { min-width: 960px; } .l--max-wd-960 { max-width: 960px; }
.l--wd-1280 { width: 1280px; } .l--min-wd-1280 { min-width: 1280px; } .l--max-wd-1280 { max-width: 1280px; }
.l--wd-1440 { width: 1440px; } .l--min-wd-1440 { min-width: 1440px; } .l--max-wd-1440 { max-width: 1440px; }
.l--wd-1600 { width: 1600px; } .l--min-wd-1600 { min-width: 1600px; } .l--max-wd-1600 { max-width: 1600px; }
.l--wd-1920 { width: 1920px; } .l--min-wd-1920 { min-width: 1920px; } .l--max-wd-1920 { max-width: 1920px; }
.l--wd-0050 { width: 0.5em; } .l--min-wd-0050 { min-width: 0.5em; } .l--max-wd-0050 { max-width: 0.5em; }
.l--wd-0075 { width: 0.75em; } .l--min-wd-0075 { min-width: 0.75em; } .l--max-wd-0075 { max-width: 0.75em; }
.l--wd-01 { width: 1em; } .l--min-wd-01 { min-width: 1em; } .l--max-wd-01 { max-width: 1em; }
.l--wd-0150 { width: 1.5em; } .l--min-wd-0150 { min-width: 1.5em; } .l--max-wd-0150 { max-width: 1.5em; }
.l--wd-02 { width: 2em; } .l--min-wd-02 { min-width: 2em; } .l--max-wd-02 { max-width: 2em; }
.l--wd-0250 { width: 2.5em; } .l--min-wd-0250 { min-width: 2.5em; } .l--max-wd-0250 { max-width: 2.5em; }
.l--wd-03 { width: 3em; } .l--min-wd-03 { min-width: 3em; } .l--max-wd-03 { max-width: 3em; }
.l--wd-04 { width: 4em; } .l--min-wd-04 { min-width: 4em; } .l--max-wd-04 { max-width: 4em; }
.l--wd-05 { width: 5em; } .l--min-wd-05 { min-width: 5em; } .l--max-wd-05 { max-width: 5em; }
.l--wd-06 { width: 6em; } .l--min-wd-06 { min-width: 6em; } .l--max-wd-06 { max-width: 6em; }
.l--wd-07 { width: 7em; } .l--min-wd-07 { min-width: 7em; } .l--max-wd-07 { max-width: 7em; }
.l--wd-08 { width: 8em; } .l--min-wd-08 { min-width: 8em; } .l--max-wd-08 { max-width: 8em; }
.l--wd-09 { width: 9em; } .l--min-wd-09 { min-width: 9em; } .l--max-wd-09 { max-width: 9em; }
.l--wd-10 { width: 10em; } .l--min-wd-10 { min-width: 10em; } .l--max-wd-10 { max-width: 10em; }
.l--wd-15 { width: 15em; } .l--min-wd-15 { min-width: 15em; } .l--max-wd-15 { max-width: 15em; }
.l--wd-20 { width: 20em; } .l--min-wd-20 { min-width: 20em; } .l--max-wd-20 { max-width: 20em; }
.l--wd-25 { width: 25em; } .l--min-wd-25 { min-width: 25em; } .l--max-wd-25 { max-width: 25em; }
.l--wd-30 { width: 30em; } .l--min-wd-30 { min-width: 30em; } .l--max-wd-30 { max-width: 30em; }
.l--wd-35 { width: 35em; } .l--min-wd-35 { min-width: 35em; } .l--max-wd-35 { max-width: 35em; }
.l--wd-40 { width: 40em; } .l--min-wd-40 { min-width: 40em; } .l--max-wd-40 { max-width: 40em; }
.l--wd-45 { width: 45em; } .l--min-wd-45 { min-width: 45em; } .l--max-wd-45 { max-width: 45em; }
.l--wd-50 { width: 50em; } .l--min-wd-50 { min-width: 50em; } .l--max-wd-50 { max-width: 50em; }
.l--wd-55 { width: 55em; } .l--min-wd-55 { min-width: 55em; } .l--max-wd-55 { max-width: 55em; }
.l--wd-60 { width: 60em; } .l--min-wd-60 { min-width: 60em; } .l--max-wd-60 { max-width: 60em; }
.l--wd-65 { width: 65em; } .l--min-wd-65 { min-width: 65em; } .l--max-wd-65 { max-width: 65em; }
.l--wd-70 { width: 70em; } .l--min-wd-70 { min-width: 70em; } .l--max-wd-70 { max-width: 70em; }
.l--wd-75 { width: 75em; } .l--min-wd-75 { min-width: 75em; } .l--max-wd-75 { max-width: 75em; }
.l--wd-80 { width: 80em; } .l--min-wd-80 { min-width: 80em; } .l--max-wd-80 { max-width: 80em; }
.l--wd-85 { width: 85em; } .l--min-wd-85 { min-width: 85em; } .l--max-wd-85 { max-width: 85em; }
.l--wd-90 { width: 90em; } .l--min-wd-90 { min-width: 90em; } .l--max-wd-90 { max-width: 90em; }
.l--wd-95 { width: 95em; } .l--min-wd-95 { min-width: 95em; } .l--max-wd-95 { max-width: 95em; }
.l--hi-100 { height: 100%; overflow: hidden; } .l--min-hi-100 { min-height: 100%; } .l--max-hi-100 { max-height: 100%; }
.l--hi-075 { height: 75%; overflow: hidden; } .l--min-hi-075 { min-height: 75%; } .l--max-hi-075 { max-height: 75%; }
.l--hi-066 { height: 66.6666%; overflow: hidden; } .l--min-hi-066 { min-height: 66.6666%; } .l--max-hi-066 { max-height: 66.6666%; }
.l--hi-050 { height: 50%; overflow: hidden; } .l--min-hi-050 { min-height: 50%; } .l--max-hi-050 { max-height: 50%; }
.l--hi-033 { height: 33.3333%; overflow: hidden; } .l--min-hi-033 { min-height: 33.3333%; } .l--max-hi-033 { max-height: 33.3333%; }
.l--hi-025 { height: 25%; overflow: hidden; } .l--min-hi-025 { min-height: 25%; } .l--max-hi-025 { max-height: 25%; }
.l--hi-020 { height: 20%; overflow: hidden; } .l--min-hi-020 { min-height: 20%; } .l--max-hi-020 { max-height: 20%; }
.l--vh-100 { height: 100vh; } .l--min-vh-100 { min-height: 100vh; } .l--max-vh-100 { max-height: 100vh; }
.l--vh-075 { height: 75vh; } .l--min-vh-075 { min-height: 75vh; } .l--max-vh-075 { max-height: 75vh; }
.l--vh-066 { height: 66.6666vh; } .l--min-vh-066 { min-height: 66.6666vh; } .l--max-vh-066 { max-height: 66.6666vh; }
.l--vh-050 { height: 50vh; } .l--min-vh-050 { min-height: 50vh; } .l--max-vh-050 { max-height: 50vh; }
.l--vh-033 { height: 33.3333vh; } .l--min-vh-033 { min-height: 33.3333vh; } .l--max-vh-033 { max-height: 33.3333vh; }
.l--vh-025 { height: 25vh; } .l--min-vh-025 { min-height: 25vh; } .l--max-vh-025 { max-height: 25vh; }
.l--vh-020 { height: 20vh; } .l--min-vh-020 { min-height: 20vh; } .l--max-vh-020 { max-height: 20vh; }
.l--hi-01 { height: 1em; overflow: hidden; } .l--min-hi-01 { min-height: 1em; } .l--max-hi-01 { max-height: 1em; }
.l--hi-02 { height: 2em; overflow: hidden; } .l--min-hi-02 { min-height: 2em; } .l--max-hi-02 { max-height: 2em; }
.l--hi-0250 { height: 2.5em; overflow: hidden; } .l--min-hi-0250 { min-height: 2.5em; } .l--max-hi-0250 { max-height: 2.5em; }
.l--hi-03 { height: 3em; overflow: hidden; } .l--min-hi-03 { min-height: 3em; } .l--max-hi-03 { max-height: 3em; }
.l--hi-04 { height: 4em; overflow: hidden; } .l--min-hi-04 { min-height: 4em; } .l--max-hi-04 { max-height: 4em; }
.l--hi-05 { height: 5em; overflow: hidden; } .l--min-hi-05 { min-height: 5em; } .l--max-hi-05 { max-height: 5em; }
.l--hi-06 { height: 6em; overflow: hidden; } .l--min-hi-06 { min-height: 6em; } .l--max-hi-06 { max-height: 6em; }
.l--hi-07 { height: 7em; overflow: hidden; } .l--min-hi-07 { min-height: 7em; } .l--max-hi-07 { max-height: 7em; }
.l--hi-0750 { height: 7.5em; overflow: hidden; } .l--min-hi-0750 { min-height: 7.5em; } .l--max-hi-0750 { max-height: 7.5em; }
.l--hi-08 { height: 8em; overflow: hidden; } .l--min-hi-08 { min-height: 8em; } .l--max-hi-08 { max-height: 8em; }
.l--hi-09 { height: 9em; overflow: hidden; } .l--min-hi-09 { min-height: 9em; } .l--max-hi-09 { max-height: 9em; }
.l--hi-10 { height: 10em; overflow: hidden; } .l--min-hi-10 { min-height: 10em; } .l--max-hi-10 { max-height: 10em; }
.l--hi-15 { height: 15em; overflow: hidden; } .l--min-hi-15 { min-height: 15em; } .l--max-hi-15 { max-height: 15em; }
.l--hi-20 { height: 20em; overflow: hidden; } .l--min-hi-20 { min-height: 20em; } .l--max-hi-20 { max-height: 20em; }
.l--hi-25 { height: 25em; overflow: hidden; } .l--min-hi-25 { min-height: 25em; } .l--max-hi-25 { max-height: 25em; }
.l--hi-30 { height: 30em; overflow: hidden; } .l--min-hi-30 { min-height: 30em; } .l--max-hi-30 { max-height: 30em; }
.l--hi-35 { height: 35em; overflow: hidden; } .l--min-hi-35 { min-height: 35em; } .l--max-hi-35 { max-height: 35em; }
.l--hi-40 { height: 40em; overflow: hidden; } .l--min-hi-40 { min-height: 40em; } .l--max-hi-40 { max-height: 40em; }
.l--hi-45 { height: 45em; overflow: hidden; } .l--min-hi-45 { min-height: 45em; } .l--max-hi-45 { max-height: 45em; }
.l--hi-50 { height: 50em; overflow: hidden; } .l--min-hi-50 { min-height: 50em; } .l--max-hi-50 { max-height: 50em; }
.l--hi-55 { height: 55em; overflow: hidden; } .l--min-hi-55 { min-height: 55em; } .l--max-hi-55 { max-height: 55em; }
.l--hi-60 { height: 60em; overflow: hidden; } .l--min-hi-60 { min-height: 60em; } .l--max-hi-60 { max-height: 60em; }
.l--hi-65 { height: 65em; overflow: hidden; } .l--min-hi-65 { min-height: 65em; } .l--max-hi-65 { max-height: 65em; }
.l--hi-70 { height: 70em; overflow: hidden; } .l--min-hi-70 { min-height: 70em; } .l--max-hi-70 { max-height: 70em; }
.l--hi-75 { height: 75em; overflow: hidden; } .l--min-hi-75 { min-height: 75em; } .l--max-hi-75 { max-height: 75em; }
.l--hi-80 { height: 80em; overflow: hidden; } .l--min-hi-80 { min-height: 80em; } .l--max-hi-80 { max-height: 80em; }
.l--hi-85 { height: 85em; overflow: hidden; } .l--min-hi-85 { min-height: 85em; } .l--max-hi-85 { max-height: 85em; }
.l--hi-90 { height: 90em; overflow: hidden; } .l--min-hi-90 { min-height: 90em; } .l--max-hi-90 { max-height: 90em; }
.l--hi-95 { height: 95em; overflow: hidden; } .l--min-hi-95 { min-height: 95em; } .l--max-hi-95 { max-height: 95em; }
.l--col-01 > * { width: 100%; }
.l--col-02 > * { width: 50%; }
.l--col-03 > * { width: 33.3333%; }
.l--col-04 > * { width: 25%; }
.l--col-05 > * { width: 20%; }
/* margin */
.l--no-mr-a { margin: 0 !important; }
.l--no-mr-tb { margin-top: 0 !important; margin-bottom: 0 !important; }
.l--no-mr, .l--no-mr-lr { margin-right: 0 !important; margin-left: 0 !important; }
.l--no-mr-l { margin-left: 0 !important; }
.l--no-mr-r { margin-right: 0 !important; }
.l--mr-a-auto { margin: auto !important; float: none !important; }
.l--mr-tb-auto { margin-top: auto !important; margin-bottom: auto !important; float: none !important; }
.l--mr-auto, .l--mr-lr-auto { margin-right: auto !important; margin-left: auto !important; float: none !important; }
.l--mr-l-auto { margin-right: 0 !important; margin-left: auto !important; }
.l--mr-r-auto { margin-right: auto !important; margin-left: 0 !important; }
.l--mr-000, .l--mr-lr-000 { margin-left: 0%; margin-right: 0%; }
.l--mr-l-000 { margin-left: 0%; } .l--mr-r-000 { margin-right: 0%; }
/* padding */
.l--no-pd { padding: 0 !important; }
.l--no-pd-tb { padding-top: 0 !important; padding-bottom: 0 !important; }
.l--no-pd-lr { padding-right: 0 !important; padding-left: 0 !important; }
.l--no-pd-l { padding-left: 0 !important; }
.l--no-pd-r { padding-right: 0 !important; }
.l--pd-0001 { padding: 1px; }
.l--pd-00, .l--pd-0000 { padding: 0em; }
.l--pd-t-00, .l--pd-t-0000 { padding-top: 0em; } .l--pd-b-00, .l--pd-b-0000 { padding-bottom: 0em; }
.l--pd-l-00, .l--pd-l-0000 { padding-left: 0em; } .l--pd-r-00, .l--pd-r-0000 { padding-right: 0em; }
.l--pd-tb-00, .l--pd-tb-0000 { padding-top: 0em; padding-bottom: 0em; }
.l--pd-lr-00, .l--pd-lr-0000 { padding-right: 0em; padding-left: 0em; }
.l--pd-0025 { padding: 0.25em; }
.l--pd-t-0025 { padding-top: 0.25em; } .l--pd-b-0025 { padding-bottom: 0.25em; }
.l--pd-l-0025 { padding-left: 0.25em; } .l--pd-r-0025 { padding-right: 0.25em; }
.l--pd-tb-0025 { padding-top: 0.25em; padding-bottom: 0.25em; }
.l--pd-lr-0025 { padding-right: 0.25em; padding-left: 0.25em; }
.l--pd-0050 { padding: 0.5em; }
.l--pd-t-0050 { padding-top: 0.5em; } .l--pd-b-0050 { padding-bottom: 0.5em; }
.l--pd-l-0050 { padding-left: 0.5em; } .l--pd-r-0050 { padding-right: 0.5em; }
.l--pd-tb-0050 { padding-top: 0.5em; padding-bottom: 0.5em; }
.l--pd-lr-0050 { padding-right: 0.5em; padding-left: 0.5em; }
.l--pd-0075 { padding: 0.75em; }
.l--pd-t-0075 { padding-top: 0.75em; } .l--pd-b-0075 { padding-bottom: 0.75em; }
.l--pd-l-0075 { padding-left: 0.75em; } .l--pd-r-0075 { padding-right: 0.75em; }
.l--pd-tb-0075 { padding-top: 0.75em; padding-bottom: 0.75em; }
.l--pd-lr-0075 { padding-right: 0.75em; padding-left: 0.75em; }
.l--pd-01 { padding: 1em; }
.l--pd-t-01 { padding-top: 1em; } .l--pd-b-01 { padding-bottom: 1em; }
.l--pd-l-01 { padding-left: 1em; } .l--pd-r-01 { padding-right: 1em; }
.l--pd-tb-01 { padding-top: 1em; padding-bottom: 1em; }
.l--pd-lr-01 { padding-right: 1em; padding-left: 1em; }
.l--pd-0150 { padding: 2.5em; }
.l--pd-t-0150 { padding-top: 1.5em; } .l--pd-b-0150 { padding-bottom: 1.5em; }
.l--pd-l-0150 { padding-left: 1.5em; } .l--pd-r-0150 { padding-right: 1.5em; }
.l--pd-tb-0150 { padding-top: 1.5em; padding-bottom: 1.5em; }
.l--pd-lr-0150 { padding-right: 1.5em; padding-left: 1.5em; }
.l--pd-02 { padding: 2em; }
.l--pd-t-02 { padding-top: 2em; } .l--pd-b-02 { padding-bottom: 2em; }
.l--pd-l-02 { padding-left: 2em; } .l--pd-r-02 { padding-right: 2em; }
.l--pd-tb-02 { padding-top: 2em; padding-bottom: 2em; }
.l--pd-lr-02 { padding-right: 2em; padding-left: 2em; }
.l--pd-0250 { padding: 2.5em; }
.l--pd-t-0250 { padding-top: 2.5em; } .l--pd-b-0250 { padding-bottom: 2.5em; }
.l--pd-l-0250 { padding-left: 2.5em; } .l--pd-r-0250 { padding-right: 2.5em; }
.l--pd-tb-0250 { padding-top: 2.5em; padding-bottom: 2.5em; }
.l--pd-lr-0250 { padding-right: 2.5em; padding-left: 2.5em; }
.l--pd-03 { padding: 3em; }
.l--pd-t-03 { padding-top: 3em; } .l--pd-b-03 { padding-bottom: 3em; }
.l--pd-l-03 { padding-left: 3em; } .l--pd-r-03 { padding-right: 3em; }
.l--pd-tb-03 { padding-top: 3em; padding-bottom: 3em; }
.l--pd-lr-03 { padding-right: 3em; padding-left: 3em; }
.l--pd-04 { padding: 4em; }
.l--pd-t-04 { padding-top: 4em; } .l--pd-b-04 { padding-bottom: 4em; }
.l--pd-l-04 { padding-left: 4em; } .l--pd-r-04 { padding-right: 4em; }
.l--pd-tb-04 { padding-top: 4em; padding-bottom: 4em; }
.l--pd-lr-04 { padding-right: 4em; padding-left: 4em; }
.l--pd-05 { padding: 5em; }
.l--pd-t-05 { padding-top: 5em; } .l--pd-b-05 { padding-bottom: 5em; }
.l--pd-l-05 { padding-left: 5em; } .l--pd-r-05 { padding-right: 5em; }
.l--pd-tb-05 { padding-top: 5em; padding-bottom: 5em; }
.l--pd-lr-05 { padding-right: 5em; padding-left: 5em; }
}
/***** form *****/
input:focus::placeholder { color: transparent; }
input:focus::-webkit-input-placeholder { color:transparent; }
input:focus:-moz-placeholder { color:transparent; } /* FF 4-18 */
input:focus::-moz-placeholder { color:transparent; } /* FF 19+ */
input:focus:-ms-input-placeholder { color:transparent; } /* IE 10+ */
@media screen and ( max-width: 767px ) {
.s--fw-form input {
width: 100% !important;
margin: 0 auto !important;
}
}
/* checkbox, radio */
/* - default checkbox, radio */
[type="checkbox"], [type="radio"] {
position: absolute; overflow: hidden; width: 1px; height: 1px; white-space: nowrap;
clip: rect(0 0 0 0); clip-path: inset(50%);
}
/*
accent-color
appearance
*/
fieldset { border: 0px solid rgba(0,0,0,0); padding: 0; margin: 0; }
input { border:none !important; ountline: none;}
/* button */
.button, button,
[type="submit"],
[type="reset"],
[type="button"] {
padding: 0.5em 0.5em;
color: #555;
font-weight: bolder;
/* border: 1px solid #bbb;*/
border-radius: 4px;
cursor: pointer;
}
.button:hover, button:hover,
[type="submit"]:hover,
[type="reset"]:hover,
[type="button"]:hover,
.button:focus, button:focus,
[type="submit"]:focus,
[type="reset"]:focus,
[type="button"]:focus {
/*
color: #333;
border-color: #888;
*/
-webkit-transition: all .15s; transition: all .15s;
}
[type="email"],
[type="number"],
[type="search"],
[type="text"],
[type="tel"],
[type="url"],
[type="password"],
textarea, select {
max-width: 100%;
padding: 0.5em 0.5em;
background-color: #eee;
border: 1px solid #fff;
border-radius: 4px;
}
select {
-webkit-appearance: none;
-moz-appearance: none; text-indent: 0.01px; text-overflow: '';
appearance: none;
position: relative;
background-image: url(../img/ui_dropdown.png);
background-position: right 50%;
background-repeat: no-repeat;
width: 100%;
}
select::-ms-expand { display: none; }
select:-moz-focusring { color: transparent; text-shadow: 0 0 0 #828c9a; }
[type="email"]:focus,
[type="number"]:focus,
[type="search"]:focus,
[type="text"]:focus,
[type="tel"]:focus,
[type="url"]:focus,
[type="password"]:focus,
textarea:focus, select:focus {
/*
background-color: #fff;
border: 1px solid #33C3F0;
outline: 0;
*/
background-color: rgba(255,255,255,1);
}
[type="search"] {
width: 100%;
/* padding-right: 2.5em; */
}
[type="search"] + [type="submit"] {
margin-left: -2.3em;
border-color: transparent;
border-top-left-radius: 0; border-bottom-left-radius: 0;
}
[type="search"]:focus + [type="submit"] {
/*
background-color: #33C3F0; color: #307aa5;
*/
-webkit-transition: all .15s; transition: all .15s;
}
/* checkbox, radio */
/* - default checkbox, radio */
[type="checkbox"], [type="radio"] {
position: absolute; overflow: hidden;
width: 1px; height: 1px; white-space: nowrap;
clip: rect(0 0 0 0); clip-path: inset(50%);
}
/* - label */
[type="checkbox"] + label, [type="radio"] + label {
display: block;
/* position: relative;
width: 97.5%;
margin: 2px auto; padding: 0.5em 0.5em; +/
border-radius: 4px;
background: ; color: ;
/* -webkit-transition: all .15s; transition: all .15s; */
}
.l [type="checkbox"] + label, .l [type="radio"] + label {
padding-left: 2em;
}
.r [type="checkbox"] + label, .r [type="radio"] + label {
padding-right: 2em;
}
/* - mark */
[type="checkbox"] + label:before, [type="radio"] + label:before,
[type="checkbox"] + label:after, [type="radio"] + label:after {
/*
content: '';
position: absolute; top: 50%;
-webkit-transition: all .15s; transition: all .15s; */
}
/* -- check mark */
.check [type="checkbox"] + label, .check [type="radio"] + label {
padding-left: 1.75em;
color: #fff;
}
.check [type="checkbox"] + label:before, .check [type="radio"] + label:before {
left: 0.5em;
width: 0.8em; height: 0.8em;
margin-top: -0.4em;
border: 1px solid #fff; border-radius: 2px;
/* background: #f4f4f4;*/
}
.check [type="checkbox"] + label:after, .check [type="radio"] + label:after {
left: 0.6em;
width: 0.9em; height: 0.4em;
margin-top: -0.5em;
border-left: 2px solid transparent; border-bottom: 2px solid transparent;
-webkit-transform: rotate(-45deg) scale(.5); transform: rotate(-45deg) scale(.5);
-webkit-transform: rotate(-200deg) scale(.75); transform: rotate(-200deg) scale(.75);
}
.check.r [type="checkbox"] + label:before, .check.r [type="radio"] + label:before {
left: auto; right: 0.75em;
}
.check.r [type="checkbox"] + label:after, .check.r [type="radio"] + label:after {
left: auto; right: 0.75em;
}
/* -- cross mark */
.cross [type="checkbox"] + label:before, .cross [type="radio"] + label:before {
left: 12px;
width: 12px; height: 2px;
margin-top: -1px;
background-color: #666;
-webkit-transform: rotate(0deg); transform: rotate(0deg);
}
.cross [type="checkbox"] + label:after, .cross [type="radio"] + label:after {
left: 18px;
width: 2px; height: 12px;
margin-top: -6px; margin-left: -1px;
background-color: #666;
-webkit-transform: rotate(0deg); transform: rotate(0deg);
}
.cross.r [type="checkbox"] + label:before, .cross.r [type="radio"] + label:before {
left: auto; right: 12px;
}
.cross.r [type="checkbox"] + label:after, .cross.r [type="radio"] + label:after {
left: auto; right: 17px;
}
/* -- arrow mark */
.arrow [type="checkbox"] + label:after, .arrow [type="radio"] + label:after {
left: 0.5em;
width: 0.5em; height: 0.5em;
margin-top: -0.25em;
border-right: 2px solid #666; border-bottom: 2px solid #666;
-webkit-transform: rotate(45deg); transform: rotate(45deg);
}
.arrow.r [type="checkbox"] + label:after, .arrow.r [type="radio"] + label:after {
left: auto; right: 0.75em;
}
/* - : checked */
[type="checkbox"]:checked + label, [type="radio"]:checked + label {
background: ; color: ;
}
[type="checkbox"]:checked + label:after, [type="radio"]:checked + label:after {
opacity: 1;
}
/* -- check mark: checked */
.check [type="checkbox"]:checked + label:before, .check [type="radio"]:checked + label:before {
background: ;
/* border: 1px solid #456;*/
}
.check [type="checkbox"]:checked + label:after, .check [type="radio"]:checked + label:after {
border-color: #fff;
-webkit-transform: rotate(-45deg) scale(1); transform: rotate(-45deg) scale(1);
}
/* -- cross mark: checked */
.cross [type="checkbox"]:checked + label:before, .cross [type="radio"]:checked + label:before {
-webkit-transform: rotate(135deg); transform: rotate(135deg);
}
.cross [type="checkbox"]:checked + label:after, .cross [type="radio"]:checked + label:after {
-webkit-transform: rotate(135deg); transform: rotate(135deg);
}
/* -- arrow mark: checked */
.arrow [type="checkbox"]:checked + label:after, .arrow [type="radio"]:checked + label:after {
margin-top: 0.0em;
-webkit-transform: rotate(225deg); transform: rotate(225deg);
}
/* - : hover */
[type="checkbox"] + label:hover, [type="radio"] + label:hover { color: ; }
[type="checkbox"] + label:hover:before, [type="radio"] + label:hover:before { background: ; }
[type="checkbox"]:checked + label:hover:after,
[type="radio"]:checked + label:hover:after {
opacity: 1;
}
::-webkit-search-cancel-button {
padding-right: 2em;
-webkit-appearance: none;
}
/***** ui *****/
/* ui variables */
:root {
--ui-txc: 0, 0, 0;
--ui-bgc:255,255,255;
--ui-bdc: 0, 0, 0;
--ui-anc-txc: 0, 0, 0;
--ui-anc-bgc: 0, 0, 0;
--ui-anc-bdc: var(--theme);
--ui-hvc-txc: 0, 0, 0;
--ui-hvc-bgc: 0, 0, 0;
--ui-hvc-bdc: var(--theme);
}
/* icon */
[class*=icon--], a[href^="http"].icon {
content: ''; display: inline-block;
width: 2.5em; height: 2.5em; font-size: 1em; color: rgba(0,0,0,0); white-space: nowrap; text-overflow: ellipsis;
background-repeat: no-repeat; background-position: center center; background-size: 75% 75%;
}
.icon--twitter, .icon--x, a[href^="https://twitter."].icon, a[href^="https://x."].icon {
background-image: url('../img/icon_x.svg');
}
.icon--bsky, a[href^="https://bsky."].icon {
background-image: url('../img/icon_bsky.svg');
}
.icon--facebook, a[href^="https://www.facebook."].icon {
background-image: url('../img/icon_facebook.svg');
}
.icon--instagram, a[href^="https://www.instagram."].icon {
background-image: url('../img/icon_instagram.svg');
}
.icon--threads, a[href^="https://www.threads."].icon {
background-image: url('../img/icon_threads.svg');
}
.icon--tiktok, a[href^="https://www.tiktok."].icon {
background-image: url('../img/icon_tiktok.svg');
}
.icon--youtube, a[href^="https://www.youtube."].icon {
background-image: url('../img/icon_youtube.svg');
}
.icon--twitch, a[href^="https://www.twitch."].icon {
background-image: url('../img/icon_twitch.svg');
}
.icon--note, a[href^="https://note."].icon {
background-image: url('../img/icon_note.svg');
}
.icon--line, a[href^="https://line."].icon {
background-image: url('../img/icon_line.svg');
}
.icon--hatena, a[href^="https://b.hatena."].icon {
background-image: url('../img/icon_hatena.svg');
}
.icon--link {
background-image: url('../img/icon_link.svg');
}
.icon--littlemore, a[href^="https://littlemore."].icon {
background-image: url('../img/icon_littlemore.svg');
}
.icon--gridx1 {
width: 2em; height: 2em;
background-image: url('../img/ui_grid_x1.svg');
}
.icon--gridx4 {
width: 2em; height: 2em;
background-image: url('../img/ui_grid_x4.svg');
}
.icon--list {
width: 2em; height: 2em;
background-image: url('../img/ui_list.svg');
}
[class*="icon--"].dno { display:none; }
@media screen and ( max-width: 767px ) {
[class*="icon--"].s--dno { display: none; }
[class*="icon--"].s--dil { display: inline; }
[class*="icon--"].s--dbl { display: block; }
[class*="icon--"].s--dib { display: inline-block; }
}
@media screen and ( min-width: 1281px ) {
[class*="icon--"].l--dno { display: none; }
[class*="icon--"].l--dil { display: inline; }
[class*="icon--"].l--dbl { display: block; }
[class*="icon--"].l--dib { display: inline-block; }
}
/* button */
.btn {
position: relative; display: inline-block; margin: 0.25em; padding: 0.75em 1.5em; border-radius: 9999px; overflow: hidden;
white-space: nowrap; text-overflow: ellipsis; font-weight: bolder; text-align: left;
}
.btn:after { content: "→"; position: absolute; right: 1.5em; transform: scale(1.5,1);
-webkit-transition: 0.15s ease-in-out; transition: 0.15s ease-in-out;
}
.btn:hover:after { right: 1.25em; }
.btn-sq {
position: relative; display: inline-block; margin: 0; padding: 0.75em 1.5em; overflow: hidden;
white-space: nowrap; text-overflow: ellipsis; font-weight: bolder; text-align: left;
}
.btn-sq:after { content: "→"; position: absolute; right: 1.5em; transform: scale(1.5,1);
-webkit-transition: 0.15s ease-in-out; transition: 0.15s ease-in-out;
}
.btn-sq:hover:after { right: 1.25em; }
.btn--x { display: block !important; position: absolute; z-index: 5; width: 3em; height: 3em; margin: 0.5em; padding: 1em; }
.btn--x span, .btn--x span:before, .btn--x span:after {
content: ""; display: block; position: absolute; left: 0; right: 0;
width: 75%; height: 2px; margin: auto; background-color: rgba(var(--ui-txc),1);
-webkit-transition: 0.15s ease-in-out; transition: 0.15s ease-in-out;
}
.btn--x span { top: 0; bottom: 0; } .btn--x span:before { top: -0.75em; width: 100%; } .btn--x span:after { top: 0.75em; width: 100%; }
.item-state:checked ~ .btn--x span,
.item-state:checked ~ .btn--x span:before,
.item-state:checked ~ .btn--x span:after { background-color: rgba(var(--ui-txc),1); }
.item-state:checked ~ .btn--x span { background-color: rgba(var(--ui-txc),0); }
.item-state:checked ~ .btn--x span:before { top: 0; transform: rotate(135deg); }
.item-state:checked ~ .btn--x span:after { top: 0; transform: rotate(-135deg); }
.btn--gd { display: block !important; position: relative; width: 3em; height: 3em; margin: 1em; padding: 1em; }
.btn--gd span, .btn--gd span:before, .btn--gd span:after {
content: ""; display: block; position: absolute; left: 0; right: 0;
width: 75%; height: 2px; margin: auto; background-color: rgba(var(--ui-txc),1);
-webkit-transition: 0.15s ease-in-out; transition: 0.15s ease-in-out;
}
.btn--gd span { top: 0; bottom: 0; } .btn--gd span:before { top: -0.75em; width: 100%; } .btn--gd span:after { top: 0.75em; width: 100%; }
/***** show/hide link target *****/
.ui--hover .item-target { display: none; opacity: 0; }
.ui--hover:hover .item-target { display: block; opacity: 1; }
.ui--hover .item-target,
.ui--hover-toggle .item-target { -webkit-transition: all .3s; transition: all .3s; }
.ui--hover-toggle:not(:hover) .item-target:nth-of-type(1) { opacity: 1; }
.ui--hover-toggle:not(:hover) .item-target:nth-of-type(2) { opacity: 0; }
.ui--hover-toggle:hover > .item-target:nth-of-type(1) { opacity: 0; }
.ui--hover-toggle:hover > .item-target:nth-of-type(2) { opacity: 1; }
.ui--active-toggle:not(:active) .item-target:nth-of-type(1) { opacity: 1; }
.ui--active-toggle:not(:active) .item-target:nth-of-type(2) { opacity: 0; }
.ui--active-toggle:active .item-target:nth-of-type(1) { opacity: 0; }
.ui--active-toggle:active .item-target:nth-of-type(2) { opacity: 1; }
/***** block link target *****/
/*
*/
.ui--blocklink { position: relative; overflow: hidden; }
.ui--blocklink .item-href:before { content: ""; position: absolute; top: -1px; bottom: -1px; left: -1px; right: -1px;
-webkit-transition: all .15s; transition: all .15s; }
.ui--blocklink a:not(.item-href), .ui--blocklink .item-nohref, .ui--blocklink .item-text { position: relative; z-index: 2; }
.ui--blocklink .item-href:hover:before { background-color: rgba(var(--ui-bgc),0.025); }
/* toggle menu */
/*
*/
.ui--toggle-menu { z-index: 999; position: fixed; top: 0; width: 100%; }
.ui--toggle-menu > .hit-box {
display: none; visibility: hidden; opacity: 0; position: absolute; top: 0; z-index: -1;
width: 100%; height: 100vh; background-color: rgba(var(--ui-bgc),0.66); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
}
.ui--toggle-menu > .item-body { display: none; visibility: hidden; opacity: 0; width: 100%; height: 100vh; pointer-events: none; }
@media ( max-width: 511px ) {
.ui--toggle-menu > .hit-box { pointer-events: none; }
.ui--toggle-menu > .item-body { overflow-y: auto; pointer-events: auto; }
}
.ui--toggle-menu > .item-body > * { pointer-events: auto; }
/*
.ui--toggle-menu > .item-body > * { display: block; pointer-events: auto; }
.ui--toggle-menu > .item-body a { display: block; color: rgba(var(--ui-txc),1); }
*/
.ui--toggle-menu > .item-state:checked ~ .hit-box { display: block; visibility: visible; opacity: 1; }
.ui--toggle-menu > .item-state:checked ~ .item-body { display: flex; visibility: visible; opacity: 1; }
.ui--toggle-menu a { color: rgba(var(--ui-anc-txc),1) !important; }
/* blink */
.ui--blink { animation: blinking 1s ease-in-out infinite alternate; }
@keyframes blinking { 0% { opacity: 0; } 100% { opacity: 1; } }
/* flex table */
.ui--table { position: relative; width: 100%; margin: 0 auto; }
.ui--table tr { position: relative; width: 100%; }
.ui--table tr, .ui--table th, .ui--table td { vertical-align: top; text-align: left; }
.ui--table th { font-size: 0.9em; font-weight: lighter; color: rgba(0,0,0,0.5); }
.ui--table th { white-space: nowrap; color: rgba(0,0,0,0); }
.ui--table th, .ui--table td { padding: 0.75em 0.25em; border-bottom: 1px solid rgba(255,255,255,0.75); }
.ui--table a { text-decoration: none !important; }
.ui--table a:after { position: relative; content: " ▶"; display: inline-block; color: rgba(255,255,255,0.75); transform: scale(0.5,0.75); } /* arrow */
.ui--table tr {
display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; display: flex;
-webkit-box-pack: stretch; -webkit-justify-content: stretch; -ms-flex-pack: stretch; justify-content: stretch;
-webkit-box-align: stretch; -webkit-align-items: stretch; -ms-flex-align: stretch; align-items: stretch;
-webkit-align-content: stretch; -ms-flex-line-pack: stretch; align-content: stretch;
}
.ui--table th, .ui--table td {
-webkit-align-self: flex-start; -ms-flex-item-align: start; align-self: flex-start;
-webkit-align-self: stretch; -ms-flex-item-align: stretch; align-self: stretch;
-webkit-flex-grow: 1; -ms-flex-positive: 1; flex-grow: 1;
}
.ui--table th, .ui--table td { width: 15%; }
.ui--table th:nth-of-type(3), .ui--table td:nth-of-type(3) { width: 65%; }
.ui--table th:last-of-type, .ui--table td:last-of-type { width: 5%; }
/*
_::-webkit-full-page-media, _:future, :root .ui--table .ui--blocklink .item-href:before { display: none; }
*/
@media ( max-width: 511px ) {
.ui--table tr { position: relative; display: block; width: 100%; }
.ui--table td { display: block; width: 100% !important; padding: 0.125em 0.5em; }
.ui--table th { display: none; }
.ui--table td:first-of-type { position: relative; z-index: 2; cursor: default; pointer-events: none; }
.ui--table td:first-of-type { background-color: rgba(250,250,250,1); padding-bottom: 0.5em; }
.ui--table td:first-of-type:empty, .ui--table td:first-of-type + td:empty { display: none; }
.ui--table td:first-of-type, .ui--table td:first-of-type + td, .ui--table td:first-of-type:empty + td,
.ui--table td:first-of-type + td:empty + td { padding-top: 0.5em; }
.ui--table td:last-of-type { padding-bottom: 0.5em; }
.ui--table td:not(:first-of-type) { border-top: none; }
.ui--table td:not(:last-of-type) { border-bottom: none; }
/*
.ui--table td { padding-left: 5em; }
.ui--table td:before { position: absolute; left: 0.5em; content: attr( data-text ); display: block; width: 5em; color: rgba(0,0,0,0.5); font-size: 0.9em; }
*/
}
/***** read more / expand more nest support *****/
/*
*/
.ui--expand { display: block; position: relative; }
.ui--expand > .item-head {
position: absolute; bottom: 3em; left: 0; right: 0; z-index: 1;
display: block; width: 30em; max-width: 100%; padding: 0.75em 1.5em; margin: 0 auto;
font-size: .9em; font-weight: bolder; text-align: center;
white-space: nowrap; text-overflow: ellipsis;
border-radius: 9999px;
color: rgba(var(--ui-txc),1); background-color: rgba(var(--ui-bgc),1);
cursor: pointer; pointer-events: auto;
}
.ui--expand > .item-head:after { position: relative; content: attr( data-text-open ); }
.ui--expand > .item-body {
position: relative; bottom: 0; overflow: hidden; width: 100%; max-height: 50em; padding-bottom: 15em;
-webkit-transition: .5s; transition: .5s;
-webkit-mask-image: linear-gradient( to bottom, black 50%, transparent 80% );
mask-image: linear-gradient( to bottom, black 50%, transparent 80% );
}
.ui--expand[data-height^="10"] > .item-body,
.ui--expand[data-height^="20"] > .item-body,
.ui--expand[data-height^="30"] > .item-body { max-height: 30em; }
.ui--expand[data-height^="40"] > .item-body { max-height: 40em; }
.ui--expand[data-height^="50"] > .item-body { max-height: 50em; }
.ui--expand[data-height^="60"] > .item-body { max-height: 60em; }
.ui--expand[data-height^="70"] > .item-body { max-height: 70em; }
.ui--expand[data-height^="80"] > .item-body { max-height: 80em; }
.ui--expand[data-height^="90"] > .item-body { max-height: 90em; }
.ui--expand[data-height^="100"] > .item-body { max-height: 100em; }
.ui--expand[data-height^="1"] > .item-body { max-height: 100em; }
.ui--expand[data-height^="full"] > .item-body { max-height: 99999px; }
.ui--expand[data-height^="full"] > .item-head { display: none; }
.ui--expand > .item-state:checked ~ .item-head:after { content: attr( data-text-close ); }
.ui--expand > .item-state:checked ~ .item-body,
.ui--expand[data-height^="full"] > .item-body { bottom: -1px; max-height: 99999px; -webkit-mask-image: initial; mask-image: initial; }
@media screen and ( max-width: 767px ) {
.ui--expand[data-height*="s-"] > .item-head { display: block; }
.ui--expand > .item-state:checked ~ .item-head { display: none; }
.ui--expand[data-height*="s-"] > .item-body {
-webkit-mask-image: linear-gradient( to bottom, black 50%, transparent 80% );
mask-image: linear-gradient( to bottom, black 50%, transparent 80% );
}
.ui--expand[data-height*="s-25"] > .item-body { max-height: 25em; }
.ui--expand[data-height*="s-50"] > .item-body { max-height: 50em; }
.ui--expand[data-height*="s-75"] > .item-body { max-height: 75em; }
.ui--expand[data-height*="s-100"] > .item-body { max-height: 100em; }
}
/***** folding / tab *****/
/* sample tab: only radio * label内にaを入れない
*/
.ui--fold, .ui--tab, .ui--foldtab { width: 100%; }
.ui--fold > .item-state, .ui--tab > .item-state, .ui--foldtab > .item-state {
}
.ui--fold > .item-head, .ui--tab > .item-head, .ui--foldtab > .item-head {
display: block; position: relative; padding: 1em 0.25em 0.5em 0.25em;
font-size: 1em; font-weight: bolder; line-height: 1.5; letter-spacing: 0.2em; text-align: center;
color: rgba(000,000,000,0.5);
border-top: 1px solid rgba(000,000,000,0.2); border-bottom: 1px solid rgba(000,000,000,0.2);
cursor: default;
}
.ui--fold > .item-body, .ui--tab > .item-body, .ui--foldtab > .item-body {
width: 100%; padding: 3em 1em 3em 1em;
}
.ui--fold > .item-body:blank, .ui--tab > .item-body:blank, .ui--foldtab > .item-body:blank { /* not yet supported */
padding: 0 !important;
}
/* */
.ui--fold_ > .item-head:before, .ui--tab_ > .item-head:before, .ui--foldtab_ > .item-head:before {
content: ">";
z-index: -1; position: absolute; top: 1.5em; bottom: 1.5em; left: 0em; right: auto;
}
.ui--fold { margin-bottom: -1px; }
.ui--fold > .item-body { display: none; -webkit-transition: 1s; transition: 1s; }
.ui--fold > .item-head { cursor: hand; cursor: pointer; -webkit-transition: 0.2s; transition: 0.2s; }
.ui--fold > .item-head:hover { color: rgba(000,000,000,1); background-color: rgba(000,000,000,0.02); }
.ui--fold > .item-head { text-align: left; border-top: 1px solid rgba(000,000,000,0.1); border-bottom: 1px solid rgba(000,000,000,0); }
.ui--fold > *:last-child,
.ui--fold > .item-state:not(:checked) + .item-head:last-of-type { border-bottom: 1px solid rgba(000,000,000,0.1); }
.ui--fold > .item-state:last-of-type:not(:checked) ~ .item-head:not(label) { border-top: 0px solid rgba(000,000,000,0.1); }
.ui--fold > .item-state:checked + .item-head { color: rgba(000,000,000,1); }
.ui--fold > .item-state:checked + .item-head + .item-body { display: block; max-height: 99999px; margin-bottom: 0em;}
.ui--fold > .item-state:checked + .item-head { color: rgba(000,000,000,1); background-color: rgba(000,000,000,00); }
.ui--fold > .item-state[type="radio"]:checked + .item-head { cursor: default; }
.ui--fold > .item-head:before,
.ui--fold > .item-head:after {
content: ""; position: absolute; top: 50%; bottom: 50%; left: auto; right: 1.5em;
}
.ui--fold > .item-head:before,
.ui--fold > .item-head:after { width: 2px; height: 16px; margin-top: -5px; background-color: rgba(000,000,000,0.2); -webkit-transition: 0.2s; transition: 0.2s; }
.ui--fold > .item-head:before { transform: translate( 0, 0 ) rotate( 0deg ); }
.ui--fold > .item-head:after { transform: translate( 0, 0 ) rotate( 90deg ); }
.ui--fold > .item-head:active:before,
.ui--fold > .item-head:active:after { background-color: rgba(000,000,000,00); }
.ui--fold > .item-state:checked + .item-head:not(.arrow):before { opacity: 0; }
.ui--fold > .item-state:checked + .item-head:after { transform: translate( 0, 0 ) rotate( 90deg ); }
.ui--fold > .item-state:checked + .item-head:not(.arrow):before,
.ui--fold > .item-state:checked + .item-head:after { background-color: rgba(000,000,000,0.2); }
.ui--fold > .item-head.arrow:before,
.ui--fold > .item-head.arrow:after { width: 1px; height: 8px; margin-top: -5px; background-color: rgba(000,000,000,0.4); }
.ui--fold > .item-head.arrow:before { transform: translate( -3px, 0 ) rotate( -45deg ); }
.ui--fold > .item-head.arrow:after { transform: translate( 3px, 0 ) rotate( 45deg ); }
.ui--fold > .item-head.arrow:active:before,
.ui--fold > .item-head.arrow:active:after { background-color: rgba(000,000,000,1); }
.ui--fold > .item-state:checked + .item-head.arrow:before { transform: translate( 3px, 0 ) rotate( -45deg ); }
.ui--fold > .item-state:checked + .item-head.arrow:after { transform: translate( -3px, 0 ) rotate( 45deg ); }
.ui--tab { display: flex; justify-content: space-between; flex-wrap: wrap; gap: 0 1em; }
.ui--tab > .item-head { flex: 1; }
.ui--tab > .item-body { flex-shrink: 0; flex-basis: auto; box-shadow: 0px -4px 4px -4px rgba(0, 0, 0, 0.1); }
.ui--tab > .item-head { position: relative;
/*background-color: rgba(000,000,000,0.05);
background: linear-gradient(180deg, rgba(000,000,000,0.02) 0%, rgba(000,000,000,0.02) 90%, rgba(000,000,000,0.03) 100%);*/
border: 1px solid rgba(000,000,000,0.0);
cursor: hand; cursor: pointer;
}
.ui--tab > .item-state:checked + .item-head, .ui--tab > .item-head.is-current {
background-color: rgba(000,000,000,0);
background: linear-gradient(180deg, rgba(000,000,000,0) 0%, rgba(000,000,000,0) 5%, rgba(000,000,000,0) 100%);
}
/*
.ui--tab > .item-state:checked + .item-head:after, .ui--tab > .item-head.is-current:after {
content: "▼"; position: absolute; top: 6em; left: 0; width: 100%; text-align: center; font-size: 0.5em;
}
*/
.ui--tab > .item-head:hover {
/* background-color: rgba(000,000,000,0.05); */
color: rgba(000,000,000,0.75);
}
.ui--tab > .item-body { display: none; min-height: 15em; }
.ui--tab > .item-head:nth-of-type(1) { order: 1; }
.ui--tab > .item-head:nth-of-type(2) { order: 2; }
.ui--tab > .item-head:nth-of-type(3) { order: 3; }
.ui--tab > .item-head:nth-of-type(4) { order: 4; }
.ui--tab > .item-head:nth-of-type(5) { order: 5; }
.ui--tab > .item-body:nth-of-type(1) { order: 6; }
.ui--tab > .item-body:nth-of-type(2) { order: 7; }
.ui--tab > .item-body:nth-of-type(3) { order: 8; }
.ui--tab > .item-body:nth-of-type(4) { order: 9; }
.ui--tab > .item-body:nth-of-type(5) { order: 10; }
.ui--tab > .item-head.is-current,
.ui--tab > .item-state:nth-of-type(1):checked ~ .item-head:nth-of-type(1),
.ui--tab > .item-state:nth-of-type(2):checked ~ .item-head:nth-of-type(2),
.ui--tab > .item-state:nth-of-type(3):checked ~ .item-head:nth-of-type(3),
.ui--tab > .item-state:nth-of-type(4):checked ~ .item-head:nth-of-type(4),
.ui--tab > .item-state:nth-of-type(5):checked ~ .item-head:nth-of-type(5) {
background-color: rgba(255,255,255,1);
border: 0px solid rgba(000,000,000,0.1);
border-bottom: none;
color: rgba(000,000,000,1);
cursor: default;
}
.ui--tab > .item-state:nth-of-type(1):checked ~ .item-body:nth-of-type(1),
.ui--tab > .item-state:nth-of-type(2):checked ~ .item-body:nth-of-type(2),
.ui--tab > .item-state:nth-of-type(3):checked ~ .item-body:nth-of-type(3),
.ui--tab > .item-state:nth-of-type(4):checked ~ .item-body:nth-of-type(4),
.ui--tab > .item-state:nth-of-type(5):checked ~ .item-body:nth-of-type(5) {
display: block;
}
/* folding or expanding */
@media ( max-width: 768px ) {
.ui--fold, .ui--foldtab { margin-top: initial; }
.ui--foldtab > .item-body { display: none; -webkit-transition: 1s; transition: 1s; }
.ui--foldtab > .item-head { cursor: hand; cursor: pointer; -webkit-transition: 0.2s; transition: 0.2s; }
.ui--foldtab > .item-head:hover { color: rgba(000,000,000,1); background-color: rgba(000,000,000,0.02); }
.ui--foldtab > .item-head { text-align: left; border-top: 1px solid rgba(000,000,000,0.1); border-bottom: 1px solid rgba(000,000,000,0); }
.ui--foldtab > *:last-child,
.ui--foldtab > .item-state:not(:checked) + .item-head:last-of-type { border-bottom: 1px solid rgba(000,000,000,0.1); }
.ui--foldtab > .item-state:last-of-type:not(:checked) ~ .item-head:not(label) { border-top: 0px solid rgba(000,000,000,0.1); }
.ui--foldtab > .item-state:checked + .item-head { color: rgba(000,000,000,1); }
.ui--foldtab > .item-state:checked + .item-head + .item-body { display: block; max-height: 99999px; margin-bottom: 0em;}
.ui--foldtab > .item-state:checked + .item-head { color: rgba(000,000,000,1); background-color: rgba(000,000,000,00); }
.ui--foldtab > .item-state[type="radio"]:checked + .item-head { cursor: default; }
.ui--foldtab > .item-head:before,
.ui--foldtab > .item-head:after {
content: ""; position: absolute; top: 50%; bottom: 50%; left: auto; right: 1.5em;
}
.ui--foldtab > .item-head:before,
.ui--foldtab > .item-head:after { width: 2px; height: 16px; margin-top: -5px; background-color: rgba(000,000,000,0.2); -webkit-transition: 0.2s; transition: 0.2s; }
.ui--foldtab > .item-head:before { transform: translate( 0, 0 ) rotate( 0deg ); }
.ui--foldtab > .item-head:after { transform: translate( 0, 0 ) rotate( 90deg ); }
.ui--foldtab > .item-head:active:before,
.ui--foldtab > .item-head:active:after { background-color: rgba(000,000,000,00); }
.ui--foldtab > .item-state:checked + .item-head:not(.arrow):before { opacity: 0; }
.ui--foldtab > .item-state:checked + .item-head:after { transform: translate( 0, 0 ) rotate( 90deg ); }
.ui--foldtab > .item-state:checked + .item-head:not(.arrow):before,
.ui--foldtab > .item-state:checked + .item-head:after { background-color: rgba(000,000,000,0.2); }
.ui--foldtab > .item-head.arrow:before,
.ui--foldtab > .item-head.arrow:after { width: 1px; height: 8px; margin-top: -5px; background-color: rgba(000,000,000,0.4); }
.ui--foldtab > .item-head.arrow:before { transform: translate( -3px, 0 ) rotate( -45deg ); }
.ui--foldtab > .item-head.arrow:after { transform: translate( 3px, 0 ) rotate( 45deg ); }
.ui--foldtab > .item-head.arrow:active:before,
.ui--foldtab > .item-head.arrow:active:after { background-color: rgba(000,000,000,1); }
.ui--foldtab > .item-state:checked + .item-head.arrow:before { transform: translate( 3px, 0 ) rotate( -45deg ); }
.ui--foldtab > .item-state:checked + .item-head.arrow:after { transform: translate( -3px, 0 ) rotate( 45deg ); }
}
@media ( min-width: 768px ) and ( max-width: 1279px ) {
.ui--fold, .ui--foldtab { margin-top: initial; }
}
@media ( min-width: 1280px ) {
.ui--foldtab { display: flex; justify-content: space-between; flex-wrap: wrap; gap: 0 1em; }
.ui--foldtab > .item-head { flex: 1; }
.ui--foldtab > .item-body { flex-shrink: 0; flex-basis: auto; box-shadow: 0px -4px 4px -4px rgba(0, 0, 0, 0.1); }
.ui--foldtab > .item-head { position: relative;
/*background-color: rgba(000,000,000,0.05);
background: linear-gradient(180deg, rgba(000,000,000,0.02) 0%, rgba(000,000,000,0.02) 90%, rgba(000,000,000,0.03) 100%);*/
border: 1px solid rgba(000,000,000,0.0);
cursor: hand; cursor: pointer;
}
/*
.ui--foldtab { position: relative; }
.ui--foldtab > .item-head { position: -webkit-sticky; position: sticky; top: 0; z-index: 10; background: rgba(255,255,255,1); }
*/
.ui--foldtab > .item-state:checked + .item-head {
background-color: rgba(000,000,000,0);
background: linear-gradient(180deg, rgba(000,000,000,0) 0%, rgba(000,000,000,0) 5%, rgba(000,000,000,0) 100%);
}
/*
.ui--foldtab > .item-state:checked + .item-head:after {
content: "▼"; position: absolute; top: 6em; left: 0; width: 100%; text-align: center; font-size: 0.5em;
}
*/
.ui--foldtab > .item-head:hover {
/* background-color: rgba(000,000,000,0.05); */
color: rgba(000,000,000,0.75);
}
.ui--foldtab > .item-body { display: none; min-height: 15em; }
.ui--foldtab > .item-head:nth-of-type(1) { order: 1; }
.ui--foldtab > .item-head:nth-of-type(2) { order: 2; }
.ui--foldtab > .item-head:nth-of-type(3) { order: 3; }
.ui--foldtab > .item-head:nth-of-type(4) { order: 4; }
.ui--foldtab > .item-head:nth-of-type(5) { order: 5; }
.ui--foldtab > .item-body:nth-of-type(1) { order: 6; }
.ui--foldtab > .item-body:nth-of-type(2) { order: 7; }
.ui--foldtab > .item-body:nth-of-type(3) { order: 8; }
.ui--foldtab > .item-body:nth-of-type(4) { order: 9; }
.ui--foldtab > .item-body:nth-of-type(5) { order: 10; }
.ui--foldtab > .item-state:nth-of-type(1):checked ~ .item-head:nth-of-type(1),
.ui--foldtab > .item-state:nth-of-type(2):checked ~ .item-head:nth-of-type(2),
.ui--foldtab > .item-state:nth-of-type(3):checked ~ .item-head:nth-of-type(3),
.ui--foldtab > .item-state:nth-of-type(4):checked ~ .item-head:nth-of-type(4),
.ui--foldtab > .item-state:nth-of-type(5):checked ~ .item-head:nth-of-type(5) {
background-color: rgba(255,255,255,1);
border: 1px solid rgba(000,000,000,0.1);
border-bottom: none;
color: rgba(000,000,000,1);
cursor: default;
}
.ui--foldtab > .item-state:nth-of-type(1):checked ~ .item-body:nth-of-type(1),
.ui--foldtab > .item-state:nth-of-type(2):checked ~ .item-body:nth-of-type(2),
.ui--foldtab > .item-state:nth-of-type(3):checked ~ .item-body:nth-of-type(3),
.ui--foldtab > .item-state:nth-of-type(4):checked ~ .item-body:nth-of-type(4),
.ui--foldtab > .item-state:nth-of-type(5):checked ~ .item-body:nth-of-type(5) {
display: block;
}
}
/*
*/
.ui--parallax {}
.ui--parallax-body {
position: -webkit-sticky; position: sticky; top: 0; left: 0;
width: 100%;
}
@media screen and ( max-width: 767px ) {
.ui--parallax-body { position: relative; }
}
.ui--parallax + *, .ui--parallax-body + * { position: relative; top: 0; left: 0; z-index: initial; }
.ui--parallax-body > * { position: relative; top: 0; left: 0; z-index: 1; }
.ui--parallax-body > .is-front { z-index: 2; pointer-events: none; }
/***** dropdown menu *****/
_* { border: 1px solid red; }
.ui--dd-menu { }
.ui--dd-menu ul { min-width: max-content; }
.ui--dd-menu li { min-width: max-content; transition: background .3s; }
.ui--dd-menu li:hover { background: rgba(255,255,255,0.75); }
.ui--dd-menu a {
position: relative;
display: block;
width: 100%; height: 100%;
padding: 1.125em 0.75em; white-space: nowrap;
}
.ui--dd-menu li li a { padding: 0.5em 0.75em; }
.ui--dd-menu > ul > li > a { padding-right: 0.5em; }
.ui--dd-menu > ul > li > a[href="#"] { cursor: default; text-decoration: none !important; }
@media ( any-hover: hover ) { /* iphone safari で タッチ≒ホバーできるように */
.ui--dd-menu > ul > li > a[href="#"] { pointer-events: none; }
}
.ui--dd-menu > ul > li > a:after {
content: "▼"; position: relative;
display: inline-block; padding-left: 0.5em;
transform: scale(0.66,0.66); opacity: 0.25;
}
.ui--dd-menu > ul > li:has( .current-menu-item, .current-menu-ancestor ) { background-color: rgba(0,0,0,0.75); }
.ui--dd-menu > ul > li:has( .current-menu-item, .current-menu-ancestor ) > a { color: rgba(255,255,255,1); }
.ui--dd-menu > ul > li:has( ul ) > a { padding-right: 1.25em; }
.ui--dd-menu > ul > li:has( ul ) > a:after {
content: "▼"; position: relative;
display: inline-block; padding-left: 0.5em;
transform: scale(0.66,0.66); opacity: 0.25;
}
.ui--dd-menu > ul { height: 100%; _background: #eee;
display: flex; justify-content: center;
-webkit-box-pack: center; -webkit-justify-content: center; -ms-flex-pack: center; justify-content: center;
-webkit-box-align: center; -webkit-align-items: center; -ms-flex-align: center; align-items: center;
-webkit-align-content: center; -ms-flex-line-pack: center; align-content: center;
-webkit-box-pack: center; -webkit-justify-content: center; -ms-flex-pack: center; justify-content: center;
-webkit-box-align: center; -webkit-align-items: center; -ms-flex-align: center; align-items: center;
-webkit-align-content: center; -ms-flex-line-pack: center; align-content: center;
}
.ui--dd-menu > ul > li {
-webkit-align-self: center; -ms-flex-item-align: center; align-self: center;
-webkit-align-self: stretch; -ms-flex-item-align: stretch; align-self: stretch;
display: flex; justify-content: center; flex-direction: column;
position: relative; _background: #ddd;
}
.ui--dd-menu > ul > li:hover > ul { background: rgba(255,255,255,0.95);
position: absolute;
opacity: 1; display: block;
transition: opacity .3s;
}
.ui--dd-menu > ul > li > ul {
position: absolute; top: 100%; left: 0; z-index: 1;
opacity: 0; display: none;
transition: opacity .3s;
}
/***** form styling *****/
.ui--form { display: block; position: relative; padding: 5px; overflow: hidden; }
.ui--form .item-search { position: relative; }
.ui--form .item-input { padding: 0.5em 3em 0.5em 1em; border-radius: 9999px; }
.ui--form .item-reset {
position: absolute; top: 0; bottom: 0; right: 6.5em; width: 2em; height: 2em; padding: 0.25em; margin: auto;
font-size: 0.75em; line-height: 0; font-weight: bolder; text-align: center;
background-color: rgba(var(--ui-bgc),0.15); color: rgba(255,255,255,1);
border-radius: 50%;
/*display: flex; */justify-content: center; align-items: center; cursor: pointer;
}
.ui--form .item-submit {
position: absolute; top: 0; bottom: 0; right: 1px; margin: auto;
padding: 0.5em 1.25em 0.5em 1em;
background-color: rgba(var(--ui-bgc),0.05); border-color: rgba(var(--ui-bdc),0);
border-top-right-radius: 9999px; border-bottom-right-radius: 9999px;
}
@media screen and ( max-width: 767px ) {
.ui--form .item-input { padding: 0.25em 3em 0.25em 0.75em; font-size: 16px; } /* no iPhone zoom */
.ui--form .item-submit { padding: 0.25em 1em 0.25em 0.75em; }
}
.ui--form .item-search:focus ~ fieldset .item-submit { border-color: rgba(var(--ui-bdc),0); }
a[data-state="selected"]
{ background-color: rgba(var(--ui-bgc),0.05); color: rgba(var(--ui-bgc),1); }
.deco--bubble { /*display: inline-block; padding: 1em 0.5em 0.25em 0.5em;*/
_position: absolute; top: -1em; right: -1em; z-index: 2;
display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; display: flex;
-webkit-box-pack: center; -webkit-justify-content: center; -ms-flex-pack: center; justify-content: center;
-webkit-box-align: center; -webkit-align-items: center; -ms-flex-align: center; align-items: center;
-webkit-align-content: center; -ms-flex-line-pack: center; align-content: center;
width: 25em; height: 6em; padding: 0.5em; text-align: center; font-size: 0.8em; line-height: 1; font-weight: bolder;
color: rgba(255,255,255,1); pointer-events: none;
}
.deco--bubble span {
color: rgba( var(--theme),1 );
margin-left: -1.66em;
width: 3em; height: 3em;
line-height: 3;
border-radius: 9999px;
}
.deco--bubble span.bgc {
background-color: rgba( var(--theme),1 );
color: rgba(255,255,255,1);
}
.deco--bubble span.bgc,
.deco--bubble span.bgc + span:not(.bgc) {
margin-left: -0.5em;
}
.wm-v .deco--bubble { /*display: inline-block; padding: 1em 0.5em 0.25em 0.5em;*/
position: absolute; top: -1em; right: -1em; z-index: 2;
display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; display: flex;
-webkit-box-pack: center; -webkit-justify-content: center; -ms-flex-pack: center; justify-content: center;
-webkit-box-align: center; -webkit-align-items: center; -ms-flex-align: center; align-items: center;
-webkit-align-content: center; -ms-flex-line-pack: center; align-content: center;
width: 5.75em; height: 24em; padding: 0.5em; text-align: center; font-size: 0.8em; line-height: 1; font-weight: bolder;
color: rgba(255,255,255,1); pointer-events: none;
}
.wm-v .deco--bubble span {
color: rgba( var(--theme),1 );
margin-top: -1.66em; margin-left: 0;
width: 3em; height: 3em;
line-height: 3;
border-radius: 9999px;
}
.wm-v .deco--bubble span.bgc {
background-color: rgba( var(--theme),1 );
color: rgba(255,255,255,1);
}
.wm-v .deco--bubble span.bgc,
.wm-v .deco--bubble span.bgc + span:not(.bgc) {
margin-top: -0.5em; margin-left: 0;
}
.c-ribbon { /*display: inline-block; padding: 1em 0.5em 0.25em 0.5em;*/
position: absolute; top: -1em; right: -1em; z-index: 2;
display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; display: flex;
-webkit-box-pack: center; -webkit-justify-content: center; -ms-flex-pack: center; justify-content: center;
-webkit-box-align: center; -webkit-align-items: center; -ms-flex-align: center; align-items: center;
-webkit-align-content: center; -ms-flex-line-pack: center; align-content: center;
width: 3.5em; height: 10em; padding: 0.5em; text-align: center; font-size: 0.8em; line-height: 1; font-weight: bolder;
color: rgba(255,255,255,1); pointer-events: none;
}
.c-ribbon:after { content: ''; position: absolute; left: 0; top: 0; z-index: -1; width: 0; height: 0;
border-top: 10em solid #ff785b;border-bottom: 0.75em solid transparent;
border-left: 1.75em solid #ff785b; border-right: 1.75em solid #ff785b;
}
.c-ribbon.now { padding: 0.625em 0.5em 0.25em 0.5em; }
.c-ribbon.now:after { content: ''; position: absolute; left: 0; top: 0; z-index: -1; width: 0; height: 0;
border-top: 3em solid rgba(45,230,136,1); border-bottom: 0.75em solid transparent;
border-left: 1.75em solid rgba(45,230,136,1); border-right: 1.75em solid rgba(45,230,136,1);
}
.c-ribbon.pre:after { content: ''; position: absolute; left: 0; top: 0; z-index: -1; width: 0; height: 0;
border-top: 3em solid rgba(92,204,230,1); border-bottom: 0.75em solid transparent;
border-left: 1.75em solid rgba(92,204,230,1); border-right: 1.75em solid rgba(92,204,230,1);
}
.c-ribbon.recent:after { content: ''; position: absolute; left: 0; top: 0; z-index: -1; width: 0; height: 0;
border-top: 3em solid rgba(45,230,136,1); border-bottom: 0.75em solid transparent;
border-left: 1.75em solid rgba(45,230,136,1); border-right: 1.75em solid rgba(45,230,136,1);
}
.c-pin { display: inline-block; position: absolute; top: 1px; right: 1px; z-index: 2; margin: 0 auto;
width: auto; min-width: 3em; height: 3em;padding: 1em 0.75em 0.1em 0.75em; text-align: center; font-size: 0.8em; line-height: 1; font-weight: bolder;
color: rgba(255,255,255,1); background: rgba(0,0,0,1); pointer-events: none; border-radius: 2px;
}
.swiper-button-next,
.swiper-button-prev {
--swiper-navigation-color: rgba(000,000,000,0.9);
--swiper-navigation-size: 2em;
}
@media screen and ( max-width: 767px ) {
.swiper-button-next,
.swiper-button-prev { }
}
.capsule { display: flex; justify-content: space-between; flex-wrap: wrap;
/*
display: -webkit-box; display: -ms-flexbox; display: flex;
-webkit-box-orient: horizontal; -webkit-box-direction: normal; -ms-flex-direction: row; flex-direction: row;
-ms-flex-wrap: wrap; flex-wrap: wrap;
-webkit-box-pack: center; -ms-flex-pack: center; justify-content: center;
-ms-flex-line-pack: center; align-content: center;
-ms-flex-item-align: stretch; align-self: stretch;*/
}
.capsule > li { flex: 1; border: 1px solid rgba(0,0,0,0.05); padding: 1em 1em; }
.capsule > li:first-of-type { border-top-left-radius: 9px; border-bottom-left-radius: 9px; }
.capsule > li:last-of-type { border-top-right-radius: 9px; border-bottom-right-radius: 9px; }
@media screen and ( min-width: 1281px ) {
.l--fl-row { -webkit-box-orient: horizontal; -webkit-box-direction: normal; -webkit-flex-direction: row; -ms-flex-direction: row; flex-direction: row; }
.l--fl-col { -webkit-box-orient: vertical; -webkit-box-direction: normal; -webkit-flex-direction: column; -ms-flex-direction: column; flex-direction: column; }
.capsule > li:first-of-type { border-top-left-radius: 9px; border-top-right-radius: 9px; border-bottom-left-radius: 0px; }
.capsule > li:last-of-type {border-bottom-right-radius: 9px; border-bottom-left-radius: 9px; border-top-right-radius: 0px; }
}
/***** tooltip *****/
/* inputには擬似クラス不可
または
*/
.ui--tooltip { position: relative; }
/*
.ui--tooltip:not(label) { position: absolute; left: 0; right: 0; pointer-events: none; }
*/
.ui--tooltip:before { display: none; opacity: 0; transition: opacity .15s; cursor: default; pointer-events: none; }
a.ui--tooltip:hover:before,
:focus-visible + .ui--tooltip:before { display: block; opacity: 1; }
.ui--tooltip:before {
position: absolute; top: -2.75em; left: 50%; transform: translate(-50%, 0);
display: inline-block; width: auto; padding: 0.5em 0.5em; margin: 0 auto;
font-size: 1em; text-align: center; letter-spacing: 0em;
content: attr( data-text-tooltip );
background-color: rgba( var(--ui-bgc),0.05 ); color: rgba( var(--ui-txc),1 );
border-radius: 5px;
-webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
}
.ui--tooltip:active:before {
display: block; opacity: 1;
content: attr( data-text-tooltip );
}
.ui--tooltip:after {
}
.enable-pointer { pointer-events: auto; }
.disable-pointer { pointer-events: none; }
/***** modal *****/
/* * label内にaを入れない：要改善
*/
.ui--modal { z-index: 999; position: fixed; top: 0; }
.ui--modal .item-state { display: none; }
.ui--modal .item-head { position: absolute; top: 0; right: 0; cursor: pointer; }
.ui--modal .item-bg {
visibility: hidden; opacity: 0;
display: -webkit-box; display: -ms-flexbox; display: flex;
-webkit-box-orient: horizontal; -webkit-box-direction: normal; -ms-flex-direction: row; flex-direction: row;
-ms-flex-wrap: wrap; flex-wrap: wrap;
-webkit-box-pack: center; -ms-flex-pack: center; justify-content: center;
-ms-flex-line-pack: center; align-content: center;
-webkit-box-align: center; -ms-flex-align: center; align-items: center;
-ms-flex-item-align: stretch; align-self: stretch;
position: fixed; top: 0; bottom: 0; left: 0; right: 0; width: 100vw; height: 100vh;
background-color: rgba(var(--ui-bgc),0.75); backdrop-filter: blur(10px);
-webkit-transition: 0.3s; transition: 0.3s;
cursor: default;
}
.ui--modal .item-state:checked ~ .item-bg { visibility: visible; opacity: 1; }
/***** splide *****/
.splide { position: initial !important; }
.splide__track { overflow: visible !important; }
.splide__arrow { height: 100% !important; }
.splide__arrows--ltr .splide__arrow--prev,
.splide__arrows--rtl .splide__arrow--next {
left: 0 !important; padding-left: 1em !important; padding-right: 1em !important;
background: linear-gradient(270deg, rgba(0,0,0,0) 0%, rgba(0,0,0,0.025) 100%) !important;
}
.splide__arrows--ltr .splide__arrow--next,
.splide__arrows--rtl .splide__arrow--prev {
right: 0 !important; padding-left: 1em !important; padding-right: 1em !important;
background: linear-gradient( 90deg, rgba(0,0,0,0) 0%, rgba(0,0,0,0.025) 100%) !important;
}
.splide__arrows--rtl {}
@media screen and ( max-width: 767px ) {
.splide__arrow--prev, .splide__arrow--next { padding-left: 1em !important; padding-right: 1em !important; }
}
.splide__arrow:not(:hover) svg { opacity: 0.66; transition: all .15s; }
.splide__arrow:hover svg { opacity: 1; transition: all .3s; }
.splide__arrow svg {
fill: rgba(255,255,255,1) !important; filter: drop-shadow( 0 0 1px rgba(0,0,0,0.25) ) drop-shadow( 0 0 1px rgba(0,0,0,0.25) ) drop-shadow( 0 0 1px rgba(0,0,0,0.25) ) drop-shadow( 0 0 1px rgba(0,0,0,0.25) );
}
.splide__pagination__page {
margin: 0.33em !important; background: rgba(255,255,255,1) !important;
filter: drop-shadow( 0 0 1px rgba(0,0,0,0.25) ) drop-shadow( 0 0 1px rgba(0,0,0,0.25) ) drop-shadow( 0 0 1px rgba(0,0,0,0.25) ) drop-shadow( 0 0 1px rgba(0,0,0,0.25) );
}
.splide__pagination__page.is-active { background: rgba(255,255,255,1) !important; }
.splide__pagination__page:not(:hover) { opacity: 0.66; transition: all .15s; }
.splide__pagination__page:hover { opacity: 1; transition: all .3s; }
.fwd-100 { margin-right: calc(50% - 50vw); margin-left: calc(50% - 50vw); }
/***** wordpress *****/
/* default, required */
.wp-caption, .wp-caption-text,
.sticky,
.gallery-caption,
.bypostauthor,
.alignright, .alignleft, .aligncenter {}
.alignnone { margin: initial; }
.aligncenter { margin-left: auto; margin-right: auto; }
.alignleft { float: left; margin-right: 1em; }
.alignright { float: right; margin-left: 1em; }
img.alignnone { display: inline-block; }
.screen-reader-text {
border: 0;
clip: rect( 1px, 1px, 1px, 1px );
-webkit-clip-path: inset( 50% );
clip-path: inset( 50% );
height: 1px;
margin: -1px;
overflow: hidden;
padding: 0;
position: absolute !important;
width: 1px;
word-wrap: normal !important;
word-break: normal;
}
/*
.menu-item .sub-menu { display: none; }
.current-menu-item .sub-menu,
.current-menu-ancestor .sub-menu,
.current-post-ancestor .sub-menu
{ display: block; }
*/
.menu-item a { display: block; }
.sub-menu { padding-left: 0em; }
.current-menu-item > a,
.current-post-parent > a { font-weight: bolder; }
.sub-menu a:before { content: "─ "; }
@media screen and ( min-width: 768px ) {
.home .sub-menu { display: none; }
}
@media screen and ( max-width: 767px ) {
.home hr { border-block-start: 0px solid; }
}
.page-numbers.current,
.post-page-numbers.current { font-weight: bolder; }
a.page-numbers { color: rgba(var(--anc-txc),1); }
.post-edit-link,
.wp-post-more { color: rgba(var(--txc),0.5); }
.wp-post-content:after { content: ""; display: block; clear: both; }
.wp-post-content a {
text-decoration: underline; text-decoration-color: rgba(var(--anc-bdc),1);
text-underline-offset: 0.25em; text-decoration-thickness: 1px; text-decoration-skip-ink: none;
}
.wp-post-content a:hover {
text-decoration-color: rgba(var(--hvc-bdc),1);
}
.wp-post-content [class*="btn"] { display: block; width: 100%; padding: 0.5em; text-align: center; color: rgba(var(--anc-txc),0.5); background-color: rgba(var(--anc-bgc),1); border-radius: 0.25em; }
.wp-post-content h3 { padding-top: 1em; }
.wp-post-content h3:first-of-type { padding-top: 0em; }
.wp-post-content ul { padding-left: 2em; }
.wp-post-content ul li { text-indent: -0.9em; }
.wp-post-content ul li::before { content: "\2022 "; font-weight: bolder; letter-spacing: 0.25em; } /* li::marker safari v??- */
.wp-post-content table { text-align: left; }
.wp-post-content th, .wp-post-content td { vertical-align: top; }
.wp-post-content th { font-weight: lighter; }
.wp-post-content :where(p:not(:empty), blockquote, pre, ul, ol, dl, table, iframe) + :where(ul, ol, dl, table, iframe) { margin-top: calc(var(--lh) * 0.5 ); }
.wp-post-content :where(li + li, li > ul, li > ol) { margin-top: 0.5em; }
.wp-post-embed { max-width: 100%; aspect-ratio: 16 / 9; }
.wp-embedded-content { display: flex; width: 100%; margin-left: auto; margin-right: auto; justify-content: center; align-items: center; }
iframe[src^="https://www.youtube"] { display: flex; width: 100%; height: 100%; margin-left: auto; margin-right: auto; justify-content: center; align-items: center; }
.wp-post-state { font-size: 0.33em; vertical-align: 0.66em; font-style: normal; display: block; padding-bottom: 0.66em; }
/* temporary */
.txc-theme { color: rgba(var(--theme),1); }
.bgc-theme { background-color: rgba(var(--theme),1); }
.txc-01 a:hover,
a.txc-01:hover {
background: linear-gradient(0deg, rgba(215, 132, 255, 1) 0%, rgba(223, 16, 234, 1) 33%, rgba(255, 78, 78, 1) 100%);
background: -webkit-linear-gradient(0deg, rgba(215, 132, 255, 1) 0%, rgba(223, 16, 234, 1) 33%, rgba(255, 78, 78, 1) 100%);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
}
.bgc-01 {
background: linear-gradient(60deg, rgba(215, 132, 255, 0.5) 0%, rgba(223, 16, 234, 0.5) 33%, rgba(255, 78, 78, 0.5) 100%);
background: -webkit-linear-gradient(60deg, rgba(215, 132, 255, 0.5) 0%, rgba(223, 16, 234, 0.5) 33%, rgba(255, 78, 78, 0.5) 100%);
}
.bgc-01 {
background: rgb(201,255,253);
background: linear-gradient(190deg, rgba(201,255,253,1) 0%, rgba(195,255,254,1) 20%, rgba(252,255,250,1) 90%);
}
.bg-scrl {
position: fixed; top: 0; z-index: -2;
width: 100%; height: 100%;
opacity: 1;
background-image: url("../img/site_bg600.png");
background-repeat: repeat;
transition: opacity ease .75s;
animation-timing-function: ease-in-out;
animation-delay: 1s;
}
.bg-scrl:before {
content: "";
position: absolute; top: 0; z-index: -1;
width: 100%; height: 100%;
opacity: 0.5;
background-image: url("../img/site_bg900.png");
background-repeat: repeat;
transition: opacity ease 1s;
animation-timing-function: ease-in-out;
animation-delay: 1s;
}
.is-scroll-down .bg-scrl {
animation: fall 10s infinite linear;
}
@keyframes fall {
0% { background-position-y: 0; }
100% { background-position-y: -600px; }
}
.is-scroll-up .bg-scrl {
animation: rise 10s infinite linear;
}
@keyframes rise {
0% { background-position-y: 600px; }
100% { background-position-y: 0; }
}
.is-scroll-down .bg-scrl:before {
animation: fall2 10s infinite linear;
}
@keyframes fall2 {
0% { background-position-y: 0; }
100% { background-position-y: -900px; }
}
.is-scroll-up .bg-scrl:before {
animation: rise2 10s infinite linear;
}
@keyframes rise2 {
0% { background-position-y: 900px; }
100% { background-position-y: 0; }
}
@media screen and ( max-width: 767px ) {
.bg-scrl { background-size: 300px 300px; transition: opacity ease 0.66s; }
.bg-scrl:before { background-size: 450px 450px; transition: opacity ease 0.66s; }
@keyframes fall {
0% { background-position-y: 0; }
100% { background-position-y: -300px; }
}
@keyframes rise {
0% { background-position-y: 300px; }
100% { background-position-y: 0; }
}
.is-scroll-down .bg-scrl:before {
animation: fall2 10s infinite linear;
}
@keyframes fall2 {
0% { background-position-y: 0; }
100% { background-position-y: -450px; }
}
@keyframes rise2 {
0% { background-position-y: 450px; }
100% { background-position-y: 0; }
}
}
.is-scroll-down.is-paused .bg-scrl, .is-scroll-up.is-paused .bg-scrl {
/*animation-play-state: paused; */
opacity: 0.50;
}
.is-scroll-down.is-paused .bg-scrl:before, .is-scroll-up.is-paused .bg-scrl:before {
/*animation-play-state: paused; */
opacity: 0.25;
}
/*
body.is-scroll .bg-scrl { background-color: rgba(255,255,255,1); }
/*
body:not(.is-scroll) .bg-scrl { background-color: rgba(222,222,200,0.5); }
*/
/* fallアニメーションの定義 */
.circle {
width: 300px;
height: 300px;
border: 3px solid rgba(200,255,200,0.5);
border-radius: 50% 50% 50% 50% / 50% 50% 50% 50%;
animation: shape-limp 8s linear infinite;
}
@keyframes shape-limp {
25% { border-radius: 80% 20% 59% 41% / 72% 21% 79% 28%; }
50% { border-radius: 80% 20% 59% 41% / 72% 21% 79% 28%; }
75% { border-radius: 100% 69% 100% 83% / 68% 99% 53% 93%; }
}
.ui--mask { border: 1px solid #666;
position: relative; bottom: 0; width: 100%; max-height: 50em; padding-bottom: 15em;
-webkit-transition: .5s; transition: .5s;
-webkit-mask-image: linear-gradient( to bottom, black 50%, transparent 80% );
mask-image: linear-gradient( to bottom, black 50%, transparent 80% );
}
.custom-shape-divider-bottom-1730819312 {
position: absolute;
bottom: 0;
left: 0;
width: 100%;
overflow: hidden;
line-height: 0;
}