@charset "UTF-8"; /*! normalize.css v7.0.0 | MIT License | github.com/necolas/normalize.css */ /* Document ========================================================================== */ html { line-height: 1.15; font-size: 62.5%; font-weight: 400; -ms-text-size-adjust: 100%; -webkit-text-size-adjust: 100%; } body { margin: 0; font-size: 62.5%; font-weight: 400; } h1 { font-size: 2em; margin: 0.67em 0; } figure { margin: 1em 40px; } hr { box-sizing: content-box; height: 0; overflow: visible; } a { background-color: transparent; -webkit-text-decoration-skip: objects; } abbr[title] { border-bottom: none; text-decoration: underline dotted; } b, strong { font-weight: bolder; } dfn { font-style: italic; } mark { background-color: #ff0; color: #000; } small { font-size: 80%; } sub, sup { font-size: 75%; line-height: 0; position: relative; vertical-align: baseline; } sub { bottom: -0.25em; } sup { top: -0.5em; } audio:not([controls]) { display: none; height: 0; } img { border-style: none; } svg:not(:root) { overflow: hidden; } button, input, optgroup, select, textarea { font-family: sans-serif; font-size: 100%; line-height: 1.15; margin: 0; } button, input { overflow: visible; } button, select { text-transform: none; } button, html [type="button"], [type="reset"], [type="submit"] { -webkit-appearance: button; } button::-moz-focus-inner, [type="button"]::-moz-focus-inner, [type="reset"]::-moz-focus-inner, [type="submit"]::-moz-focus-inner { border-style: none; padding: 0; } button:-moz-focusring, [type="button"]:-moz-focusring, [type="reset"]:-moz-focusring, [type="submit"]:-moz-focusring { outline: 1px dotted ButtonText; } fieldset { padding: 0.35em 0.75em 0.625em; } legend { box-sizing: border-box; color: inherit; display: table; max-width: 100%; white-space: normal; padding: 0; } progress { display: inline-block; vertical-align: baseline; } textarea { overflow: auto; } [type="checkbox"], [type="radio"] { box-sizing: border-box; padding: 0; } [type="number"]::-webkit-inner-spin-button, [type="number"]::-webkit-outer-spin-button { height: auto; } [type="search"] { -webkit-appearance: textfield; outline-offset: -2px; } [type="search"]::-webkit-search-cancel-button, [type="search"]::-webkit-search-decoration { -webkit-appearance: none; } ::-webkit-file-upload-button { -webkit-appearance: button; font: inherit; } summary { display: list-item; } article, aside, footer, header, nav, section, figcaption, figure, main, details, menu { display: block; } pre, code, kbd, samp { font-family: monospace, monospace; font-size: 1em; } audio, video, canvas { display: inline-block; } template, [hidden] { display: none; } /* ================================================ Font */ /* link 用 */ /* ------------------- google fonts, Work Sans (local asset) */ @font-face { font-family: 'Work Sans'; font-style: normal; font-weight: 400; src: local("Work Sans"), local("WorkSans-Regular"), url(./_font/Work_Sans/WorkSans-Medium.woff) format("woff"); } /* latin-ext */ @font-face { font-family: 'Work Sans'; font-style: normal; font-weight: 700; src: local("Work Sans Bold"), local("WorkSans-Bold"), url(./_font/Work_Sans/WorkSans-Bold.woff) format("woff"); } /* ------------------- google fonts, Roboto (local asset) */ @font-face { font-family: 'Roboto'; font-style: normal; font-weight: 400; src: local("Roboto"), local("Roboto-Regular"), url(./_font/Roboto/Roboto-Medium.woff) format("woff"); } @font-face { font-family: 'Roboto'; font-style: normal; font-weight: 700; src: local("Roboto Bold"), local("Roboto-Bold"), url(./_font/Roboto/Roboto-Bold.ttf) format("woff"); } /* ------------------- google fonts, Noto Sans Japanese (local asset) http://www.google.com/fonts/earlyaccess */ @font-face { font-family: 'Noto Sans Japanese'; font-style: normal; font-weight: 300; src: url(./_font/NotoSansJP/NotoSansJP-DemiLight.woff2) format("woff2"), url(./_font/NotoSansJP/NotoSansJP-DemiLight.woff) format("woff"), url(./_font/NotoSansJP/NotoSansJP-DemiLight.otf) format("opentype"); } @font-face { font-family: 'Noto Sans Japanese'; font-style: normal; font-weight: 400; src: url(./_font/NotoSansJP/NotoSansJP-Regular.woff2) format("woff2"), url(./_font/NotoSansJP/NotoSansJP-Regular.woff) format("woff"), url(./_font/NotoSansJP/NotoSansJP-Regular.otf) format("opentype"); } @font-face { font-family: 'Noto Sans Japanese'; font-style: normal; font-weight: 700; src: url(./_font/NotoSansJP/NotoSansJP-Bold.woff2) format("woff2"), url(./_font/NotoSansJP/NotoSansJP-Bold.woff) format("woff"), url(./_font/NotoSansJP/NotoSansJP-Bold.otf) format("opentype"); } /* ------------------- google fonts, Raleway (local asset) */ /* @font-face { font-family: 'Raleway'; font-style: normal; font-weight: 400; src: local('Raleway'), local('Raleway-Regular'), url(./_font/Raleway/Raleway-Regular.woff2) format('woff2'); unicode-range: U+0100-024F, U+1E00-1EFF, U+20A0-20AB, U+20AD-20CF, U+2C60-2C7F, U+A720-A7FF; } @font-face { font-family: 'Raleway'; font-style: normal; font-weight: 400; src: local('Raleway'), local('Raleway-Regular'), url(./_font/Raleway/Raleway-Regular2.woff2) format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2212, U+2215; } @font-face { font-family: 'Raleway'; font-style: normal; font-weight: 700; src: local('Raleway Bold'), local('Raleway-Bold'), url(./_font/Raleway/Raleway-Bold.woff2) format('woff2'); unicode-range: U+0100-024F, U+1E00-1EFF, U+20A0-20AB, U+20AD-20CF, U+2C60-2C7F, U+A720-A7FF; } @font-face { font-family: 'Raleway'; font-style: normal; font-weight: 700; src: local('Raleway Bold'), local('Raleway-Bold'), url(./_font/Raleway/Raleway-Bold2.woff2) format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2212, U+2215; } */ @font-face { font-family: 'Raleway'; font-style: normal; font-weight: 800; src: local("Raleway ExtraBold"), local("Raleway-ExtraBold"), url(./_font/Raleway/Raleway-ExtraBold.woff2) format("woff2"); unicode-range: U+0100-024F, U+1E00-1EFF, U+20A0-20AB, U+20AD-20CF, U+2C60-2C7F, U+A720-A7FF; } @font-face { font-family: 'Raleway'; font-style: normal; font-weight: 800; src: local("Raleway ExtraBold"), local("Raleway-ExtraBold"), url(./_font/Raleway/Raleway-ExtraBold2.woff2) format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2212, U+2215; } @font-face { font-family: 'Raleway'; font-style: normal; font-weight: 900; src: local("Raleway Black"), local("Raleway-Black"), url(./_font/Raleway/Raleway-Black.woff2) format("woff2"); unicode-range: U+0100-024F, U+1E00-1EFF, U+20A0-20AB, U+20AD-20CF, U+2C60-2C7F, U+A720-A7FF; } @font-face { font-family: 'Raleway'; font-style: normal; font-weight: 900; src: local("Raleway Black"), local("Raleway-Black"), url(./_font/Raleway/Raleway-Black2.woff2) format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2212, U+2215; } /* ------------------- fix */ @font-face { /* firefox on windows issue */ font-family: "YuGothic M"; src: local("Yu Gothic Medium"); } body, input, textarea, select, option, button { text-rendering: auto; font-smooth: always; -webkit-font-smoothing: subpixel-antialiased; -moz-osx-font-smoothing: auto; font-family: -apple-system, 'Work Sans', 'Roboto', Avenir, 'Helvetica Neue', 'Lucida Grande', Arial , Roboto, 'Segoe UI', 'ヒラギノ角ゴシック Pro', 'Hiragino Kaku Gothic Pro', 'メイリオ', Meiryo, '游ゴシック Medium', 'Yu Gothic Medium', 'YuGothic M', 'ＭＳ Ｐゴシック', 'MS PGothic', sans-serif; } b, strong, h1, h2, h3, h4, h5, .bold, .bolder, th, title, dt, *[type="submit"] { font-weight: 700; font-family: 'Roboto', -apple-system, Avenir, 'Helvetica Neue', 'Lucida Grande', Arial , Roboto, 'Segoe UI', 'Noto Sans Japanese', 'ヒラギノ角ゴシック Pro', 'Hiragino Kaku Gothic Pro', 'メイリオ', Meiryo, '游ゴシック Medium', 'Yu Gothic Medium', 'YuGothic M', 'ＭＳ Ｐゴシック', 'MS PGothic', sans-serif; } b.extra-bold, strong.extra-bold, h1.extra-bold, h2.extra-bold, h3.extra-bold, h4.extra-bold, h5.extra-bold, .bold.extra-bold, .bolder.extra-bold, th.extra-bold, title.extra-bold, dt.extra-bold, *[type="submit"].extra-bold { font-weight: 800; font-family: 'Raleway', 'Roboto', -apple-system, Avenir, 'Helvetica Neue', 'Lucida Grande', Arial , Roboto, 'Segoe UI', 'Noto Sans Japanese', 'ヒラギノ角ゴシック Pro', 'Hiragino Kaku Gothic Pro', 'メイリオ', Meiryo, '游ゴシック Medium', 'Yu Gothic Medium', 'YuGothic M', 'ＭＳ Ｐゴシック', 'MS PGothic', sans-serif; } b.black, strong.black, h1.black, h2.black, h3.black, h4.black, h5.black, .bold.black, .bolder.black, th.black, title.black, dt.black, *[type="submit"].black { font-weight: 900; font-family: 'Raleway', 'Roboto', -apple-system, Avenir, 'Helvetica Neue', 'Lucida Grande', Arial , Roboto, 'Segoe UI', 'Noto Sans Japanese', 'ヒラギノ角ゴシック Pro', 'Hiragino Kaku Gothic Pro', 'メイリオ', Meiryo, '游ゴシック Medium', 'Yu Gothic Medium', 'YuGothic M', 'ＭＳ Ｐゴシック', 'MS PGothic', sans-serif; } .en, .us { font-weight: 400; font-family: 'Work Sans', 'Roboto', -apple-system, Avenir, 'Helvetica Neue', 'Lucida Grande', Arial , Roboto, 'Segoe UI', 'Noto Sans Japanese', 'ヒラギノ角ゴシック Pro', 'Hiragino Kaku Gothic Pro', 'メイリオ', Meiryo, '游ゴシック Medium', 'Yu Gothic Medium', 'YuGothic M', 'ＭＳ Ｐゴシック', 'MS PGothic', sans-serif; } /* ===================================== AVT Contents Reset */ html { position: relative; height: 100%; min-height: 100%; background: #fdfdfd none; } body { position: relative; height: 100%; min-height: 100%; margin: 0; padding: 0; background: #222; } a:link { color: #1168a4; text-decoration: none; } a:visited { color: #1168a4; text-decoration: none; } a:hover { color: #da0000; text-decoration: none; } /* ===================================== global define */ /* ===================================== layout Base define */ /* ~~~~ Progress bar */ .c-progbar { background: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4gPHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGRlZnM+PGxpbmVhckdyYWRpZW50IGlkPSJncmFkIiBncmFkaWVudFVuaXRzPSJvYmplY3RCb3VuZGluZ0JveCIgeDE9IjAuNSIgeTE9IjAuMCIgeDI9IjAuNSIgeTI9IjEuMCI+PHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iIzIyMjIyMiIvPjxzdG9wIG9mZnNldD0iNTAlIiBzdG9wLWNvbG9yPSIjNTU1NTU1Ii8+PHN0b3Agb2Zmc2V0PSIxMDAlIiBzdG9wLWNvbG9yPSIjMzMzMzMzIi8+PC9saW5lYXJHcmFkaWVudD48L2RlZnM+PHJlY3QgeD0iMCIgeT0iMCIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgZmlsbD0idXJsKCNncmFkKSIgLz48L3N2Zz4g'); background: -moz-linear-gradient(270deg, #222222, #555555 50%, #333333 100%); background: -webkit-linear-gradient(270deg, #222222, #555555 50%, #333333 100%); background: linear-gradient(180deg, #222222, #555555 50%, #333333 100%); } .c-progbar .x-bar { background: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4gPHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGRlZnM+PGxpbmVhckdyYWRpZW50IGlkPSJncmFkIiBncmFkaWVudFVuaXRzPSJvYmplY3RCb3VuZGluZ0JveCIgeDE9IjAuNSIgeTE9IjAuMCIgeDI9IjAuNSIgeTI9IjEuMCI+PHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iI2ZmMzMzMyIvPjxzdG9wIG9mZnNldD0iNDAlIiBzdG9wLWNvbG9yPSIjZGQwMDAwIi8+PHN0b3Agb2Zmc2V0PSIxMDAlIiBzdG9wLWNvbG9yPSIjYWEwMDAwIi8+PC9saW5lYXJHcmFkaWVudD48L2RlZnM+PHJlY3QgeD0iMCIgeT0iMCIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgZmlsbD0idXJsKCNncmFkKSIgLz48L3N2Zz4g'); background: -moz-linear-gradient(270deg, #ff3333, #dd0000 40%, #aa0000 100%); background: -webkit-linear-gradient(270deg, #ff3333, #dd0000 40%, #aa0000 100%); background: linear-gradient(180deg, #ff3333, #dd0000 40%, #aa0000 100%); } /* ~~~~ header */ .c-head { background: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4gPHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGRlZnM+PGxpbmVhckdyYWRpZW50IGlkPSJncmFkIiBncmFkaWVudFVuaXRzPSJvYmplY3RCb3VuZGluZ0JveCIgeDE9IjAuNSIgeTE9IjAuMCIgeDI9IjAuNSIgeTI9IjEuMCI+PHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iIzAwMDAwMCIvPjxzdG9wIG9mZnNldD0iNDAlIiBzdG9wLWNvbG9yPSIjMjIyMjIyIi8+PC9saW5lYXJHcmFkaWVudD48L2RlZnM+PHJlY3QgeD0iMCIgeT0iMCIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgZmlsbD0idXJsKCNncmFkKSIgLz48L3N2Zz4g'); background: -moz-linear-gradient(270deg, #000000, #222222 40%); background: -webkit-linear-gradient(270deg, #000000, #222222 40%); background: linear-gradient(180deg, #000000, #222222 40%); } /* ~~~~ footer */ /* ~~~~ Sidenav */ .c-main .c-sidenav .x-back { background: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4gPHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGRlZnM+PGxpbmVhckdyYWRpZW50IGlkPSJncmFkIiBncmFkaWVudFVuaXRzPSJvYmplY3RCb3VuZGluZ0JveCIgeDE9IjAuMjgwODE0IiB5MT0iLTAuMTAyMjA4IiB4Mj0iMC43MTkxODYiIHkyPSIxLjEwMjIwOCI+PHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iIzNkNjZiMiIvPjxzdG9wIG9mZnNldD0iNDUlIiBzdG9wLWNvbG9yPSIjMzQ1ODliIi8+PC9saW5lYXJHcmFkaWVudD48L2RlZnM+PHJlY3QgeD0iMCIgeT0iMCIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgZmlsbD0idXJsKCNncmFkKSIgLz48L3N2Zz4g'); background: -moz-linear-gradient(290deg, #3d66b2, #34589b 45%); background: -webkit-linear-gradient(290deg, #3d66b2, #34589b 45%); background: linear-gradient(160deg, #3d66b2, #34589b 45%); } body.basecolor-b .c-main .c-sidenav .x-back { background: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4gPHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGRlZnM+PGxpbmVhckdyYWRpZW50IGlkPSJncmFkIiBncmFkaWVudFVuaXRzPSJvYmplY3RCb3VuZGluZ0JveCIgeDE9IjAuMjgwODE0IiB5MT0iLTAuMTAyMjA4IiB4Mj0iMC43MTkxODYiIHkyPSIxLjEwMjIwOCI+PHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iIzNkYTViMiIvPjxzdG9wIG9mZnNldD0iNDUlIiBzdG9wLWNvbG9yPSIjMzU5MDljIi8+PC9saW5lYXJHcmFkaWVudD48L2RlZnM+PHJlY3QgeD0iMCIgeT0iMCIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgZmlsbD0idXJsKCNncmFkKSIgLz48L3N2Zz4g'); background: -moz-linear-gradient(290deg, #3da5b2, #35909c 45%); background: -webkit-linear-gradient(290deg, #3da5b2, #35909c 45%); background: linear-gradient(160deg, #3da5b2, #35909c 45%); } body.basecolor-c .c-main .c-sidenav .x-back { background: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4gPHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGRlZnM+PGxpbmVhckdyYWRpZW50IGlkPSJncmFkIiBncmFkaWVudFVuaXRzPSJvYmplY3RCb3VuZGluZ0JveCIgeDE9IjAuMjgwODE0IiB5MT0iLTAuMTAyMjA4IiB4Mj0iMC43MTkxODYiIHkyPSIxLjEwMjIwOCI+PHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iIzNkYjI4ZCIvPjxzdG9wIG9mZnNldD0iNDUlIiBzdG9wLWNvbG9yPSIjMzU5YzdlIi8+PC9saW5lYXJHcmFkaWVudD48L2RlZnM+PHJlY3QgeD0iMCIgeT0iMCIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgZmlsbD0idXJsKCNncmFkKSIgLz48L3N2Zz4g'); background: -moz-linear-gradient(290deg, #3db28d, #359c7e 45%); background: -webkit-linear-gradient(290deg, #3db28d, #359c7e 45%); background: linear-gradient(160deg, #3db28d, #359c7e 45%); } body.basecolor-d .c-main .c-sidenav .x-back { background: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4gPHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGRlZnM+PGxpbmVhckdyYWRpZW50IGlkPSJncmFkIiBncmFkaWVudFVuaXRzPSJvYmplY3RCb3VuZGluZ0JveCIgeDE9IjAuMjgwODE0IiB5MT0iLTAuMTAyMjA4IiB4Mj0iMC43MTkxODYiIHkyPSIxLjEwMjIwOCI+PHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iI2IyYWQzZCIvPjxzdG9wIG9mZnNldD0iNDUlIiBzdG9wLWNvbG9yPSIjOWE5YzM1Ii8+PC9saW5lYXJHcmFkaWVudD48L2RlZnM+PHJlY3QgeD0iMCIgeT0iMCIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgZmlsbD0idXJsKCNncmFkKSIgLz48L3N2Zz4g'); background: -moz-linear-gradient(290deg, #b2ad3d, #9a9c35 45%); background: -webkit-linear-gradient(290deg, #b2ad3d, #9a9c35 45%); background: linear-gradient(160deg, #b2ad3d, #9a9c35 45%); } body.basecolor-e .c-main .c-sidenav .x-back { background: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4gPHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGRlZnM+PGxpbmVhckdyYWRpZW50IGlkPSJncmFkIiBncmFkaWVudFVuaXRzPSJvYmplY3RCb3VuZGluZ0JveCIgeDE9IjAuMjgwODE0IiB5MT0iLTAuMTAyMjA4IiB4Mj0iMC43MTkxODYiIHkyPSIxLjEwMjIwOCI+PHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iI2IyOTMzZCIvPjxzdG9wIG9mZnNldD0iNDUlIiBzdG9wLWNvbG9yPSIjOWM4MDM1Ii8+PC9saW5lYXJHcmFkaWVudD48L2RlZnM+PHJlY3QgeD0iMCIgeT0iMCIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgZmlsbD0idXJsKCNncmFkKSIgLz48L3N2Zz4g'); background: -moz-linear-gradient(290deg, #b2933d, #9c8035 45%); background: -webkit-linear-gradient(290deg, #b2933d, #9c8035 45%); background: linear-gradient(160deg, #b2933d, #9c8035 45%); } body.basecolor-f .c-main .c-sidenav .x-back { background: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4gPHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGRlZnM+PGxpbmVhckdyYWRpZW50IGlkPSJncmFkIiBncmFkaWVudFVuaXRzPSJvYmplY3RCb3VuZGluZ0JveCIgeDE9IjAuMjgwODE0IiB5MT0iLTAuMTAyMjA4IiB4Mj0iMC43MTkxODYiIHkyPSIxLjEwMjIwOCI+PHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iI2IyM2Q4OSIvPjxzdG9wIG9mZnNldD0iNDUlIiBzdG9wLWNvbG9yPSIjOWMzNTc4Ii8+PC9saW5lYXJHcmFkaWVudD48L2RlZnM+PHJlY3QgeD0iMCIgeT0iMCIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgZmlsbD0idXJsKCNncmFkKSIgLz48L3N2Zz4g'); background: -moz-linear-gradient(290deg, #b23d89, #9c3578 45%); background: -webkit-linear-gradient(290deg, #b23d89, #9c3578 45%); background: linear-gradient(160deg, #b23d89, #9c3578 45%); } .c-main .c-sidenav .x-title { background-color: #fdfdfd; } body.basecolor-b .c-main .c-sidenav .x-title { background-color: #fdfdfd; } body.basecolor-c .c-main .c-sidenav .x-title { background-color: #fdfdfd; } body.basecolor-d .c-main .c-sidenav .x-title { background-color: #fdfdfd; } body.basecolor-e .c-main .c-sidenav .x-title { background-color: #fdfdfd; } body.basecolor-f .c-main .c-sidenav .x-title { background-color: #fdfdfd; } .c-main .c-sidecover { background: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4gPHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGRlZnM+PGxpbmVhckdyYWRpZW50IGlkPSJncmFkIiBncmFkaWVudFVuaXRzPSJvYmplY3RCb3VuZGluZ0JveCIgeDE9IjAuMjgwODE0IiB5MT0iLTAuMTAyMjA4IiB4Mj0iMC43MTkxODYiIHkyPSIxLjEwMjIwOCI+PHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iIzQ1NzZkMSIvPjxzdG9wIG9mZnNldD0iMjUlIiBzdG9wLWNvbG9yPSIjMzQ1ODliIi8+PHN0b3Agb2Zmc2V0PSI1Ny41JSIgc3RvcC1jb2xvcj0iIzM0NTg5YiIvPjxzdG9wIG9mZnNldD0iOTAlIiBzdG9wLWNvbG9yPSIjMjg0NjdkIi8+PC9saW5lYXJHcmFkaWVudD48L2RlZnM+PHJlY3QgeD0iMCIgeT0iMCIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgZmlsbD0idXJsKCNncmFkKSIgLz48L3N2Zz4g'); background: -moz-linear-gradient(290deg, #4576d1, #34589b 25%, #34589b, #28467d 90%); background: -webkit-linear-gradient(290deg, #4576d1, #34589b 25%, #34589b, #28467d 90%); background: linear-gradient(160deg, #4576d1, #34589b 25%, #34589b, #28467d 90%); } body.basecolor-b .c-main .c-sidecover { background: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4gPHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGRlZnM+PGxpbmVhckdyYWRpZW50IGlkPSJncmFkIiBncmFkaWVudFVuaXRzPSJvYmplY3RCb3VuZGluZ0JveCIgeDE9IjAuMjgwODE0IiB5MT0iLTAuMTAyMjA4IiB4Mj0iMC43MTkxODYiIHkyPSIxLjEwMjIwOCI+PHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iIzQ1YjVkMSIvPjxzdG9wIG9mZnNldD0iMjUlIiBzdG9wLWNvbG9yPSIjMzU5MzljIi8+PHN0b3Agb2Zmc2V0PSI1Ny41JSIgc3RvcC1jb2xvcj0iIzM1N2U5YyIvPjxzdG9wIG9mZnNldD0iOTAlIiBzdG9wLWNvbG9yPSIjMjg2ODdkIi8+PC9saW5lYXJHcmFkaWVudD48L2RlZnM+PHJlY3QgeD0iMCIgeT0iMCIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgZmlsbD0idXJsKCNncmFkKSIgLz48L3N2Zz4g'); background: -moz-linear-gradient(290deg, #45b5d1, #35939c 25%, #357e9c, #28687d 90%); background: -webkit-linear-gradient(290deg, #45b5d1, #35939c 25%, #357e9c, #28687d 90%); background: linear-gradient(160deg, #45b5d1, #35939c 25%, #357e9c, #28687d 90%); } body.basecolor-c .c-main .c-sidecover { background: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4gPHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGRlZnM+PGxpbmVhckdyYWRpZW50IGlkPSJncmFkIiBncmFkaWVudFVuaXRzPSJvYmplY3RCb3VuZGluZ0JveCIgeDE9IjAuMjgwODE0IiB5MT0iLTAuMTAyMjA4IiB4Mj0iMC43MTkxODYiIHkyPSIxLjEwMjIwOCI+PHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iIzQ1ZDFhNSIvPjxzdG9wIG9mZnNldD0iMjUlIiBzdG9wLWNvbG9yPSIjMzU5YzdlIi8+PHN0b3Agb2Zmc2V0PSI1Ny41JSIgc3RvcC1jb2xvcj0iIzM1OWM3YiIvPjxzdG9wIG9mZnNldD0iOTAlIiBzdG9wLWNvbG9yPSIjMjg3ZDYxIi8+PC9saW5lYXJHcmFkaWVudD48L2RlZnM+PHJlY3QgeD0iMCIgeT0iMCIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgZmlsbD0idXJsKCNncmFkKSIgLz48L3N2Zz4g'); background: -moz-linear-gradient(290deg, #45d1a5, #359c7e 25%, #359c7b, #287d61 90%); background: -webkit-linear-gradient(290deg, #45d1a5, #359c7e 25%, #359c7b, #287d61 90%); background: linear-gradient(160deg, #45d1a5, #359c7e 25%, #359c7b, #287d61 90%); } body.basecolor-d .c-main .c-sidecover { background: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4gPHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGRlZnM+PGxpbmVhckdyYWRpZW50IGlkPSJncmFkIiBncmFkaWVudFVuaXRzPSJvYmplY3RCb3VuZGluZ0JveCIgeDE9IjAuMjgwODE0IiB5MT0iLTAuMTAyMjA4IiB4Mj0iMC43MTkxODYiIHkyPSIxLjEwMjIwOCI+PHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iI2QxY2E0NSIvPjxzdG9wIG9mZnNldD0iMjUlIiBzdG9wLWNvbG9yPSIjOWM5NjM1Ii8+PHN0b3Agb2Zmc2V0PSI1Ny41JSIgc3RvcC1jb2xvcj0iIzljOTgzNSIvPjxzdG9wIG9mZnNldD0iOTAlIiBzdG9wLWNvbG9yPSIjN2Q3YTI4Ii8+PC9saW5lYXJHcmFkaWVudD48L2RlZnM+PHJlY3QgeD0iMCIgeT0iMCIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgZmlsbD0idXJsKCNncmFkKSIgLz48L3N2Zz4g'); background: -moz-linear-gradient(290deg, #d1ca45, #9c9635 25%, #9c9835, #7d7a28 90%); background: -webkit-linear-gradient(290deg, #d1ca45, #9c9635 25%, #9c9835, #7d7a28 90%); background: linear-gradient(160deg, #d1ca45, #9c9635 25%, #9c9835, #7d7a28 90%); } body.basecolor-e .c-main .c-sidecover { background: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4gPHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGRlZnM+PGxpbmVhckdyYWRpZW50IGlkPSJncmFkIiBncmFkaWVudFVuaXRzPSJvYmplY3RCb3VuZGluZ0JveCIgeDE9IjAuMjgwODE0IiB5MT0iLTAuMTAyMjA4IiB4Mj0iMC43MTkxODYiIHkyPSIxLjEwMjIwOCI+PHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iI2QxYTU0NSIvPjxzdG9wIG9mZnNldD0iMjUlIiBzdG9wLWNvbG9yPSIjOWM3MjM1Ii8+PHN0b3Agb2Zmc2V0PSI1Ny41JSIgc3RvcC1jb2xvcj0iIzljNzgzNSIvPjxzdG9wIG9mZnNldD0iOTAlIiBzdG9wLWNvbG9yPSIjOWM3MjM1Ii8+PC9saW5lYXJHcmFkaWVudD48L2RlZnM+PHJlY3QgeD0iMCIgeT0iMCIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgZmlsbD0idXJsKCNncmFkKSIgLz48L3N2Zz4g'); background: -moz-linear-gradient(290deg, #d1a545, #9c7235 25%, #9c7835, #9c7235 90%); background: -webkit-linear-gradient(290deg, #d1a545, #9c7235 25%, #9c7835, #9c7235 90%); background: linear-gradient(160deg, #d1a545, #9c7235 25%, #9c7835, #9c7235 90%); } body.basecolor-f .c-main .c-sidecover { background: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4gPHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGRlZnM+PGxpbmVhckdyYWRpZW50IGlkPSJncmFkIiBncmFkaWVudFVuaXRzPSJvYmplY3RCb3VuZGluZ0JveCIgeDE9IjAuMjgwODE0IiB5MT0iLTAuMTAyMjA4IiB4Mj0iMC43MTkxODYiIHkyPSIxLjEwMjIwOCI+PHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iI2QxNDViNyIvPjxzdG9wIG9mZnNldD0iMjUlIiBzdG9wLWNvbG9yPSIjOWMzNTkwIi8+PHN0b3Agb2Zmc2V0PSI1Ny41JSIgc3RvcC1jb2xvcj0iIzljMzU3ZSIvPjxzdG9wIG9mZnNldD0iOTAlIiBzdG9wLWNvbG9yPSIjOWMzNThhIi8+PC9saW5lYXJHcmFkaWVudD48L2RlZnM+PHJlY3QgeD0iMCIgeT0iMCIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgZmlsbD0idXJsKCNncmFkKSIgLz48L3N2Zz4g'); background: -moz-linear-gradient(290deg, #d145b7, #9c3590 25%, #9c357e, #9c358a 90%); background: -webkit-linear-gradient(290deg, #d145b7, #9c3590 25%, #9c357e, #9c358a 90%); background: linear-gradient(160deg, #d145b7, #9c3590 25%, #9c357e, #9c358a 90%); } .c-main .c-sidecover-tgl { background: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4gPHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGRlZnM+PGxpbmVhckdyYWRpZW50IGlkPSJncmFkIiBncmFkaWVudFVuaXRzPSJvYmplY3RCb3VuZGluZ0JveCIgeDE9IjAuMjgwODE0IiB5MT0iLTAuMTAyMjA4IiB4Mj0iMC43MTkxODYiIHkyPSIxLjEwMjIwOCI+PHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iIzQ1NzZkMSIvPjxzdG9wIG9mZnNldD0iMjUlIiBzdG9wLWNvbG9yPSIjMzQ1ODliIi8+PHN0b3Agb2Zmc2V0PSI1Ny41JSIgc3RvcC1jb2xvcj0iIzM0NTg5YiIvPjxzdG9wIG9mZnNldD0iOTAlIiBzdG9wLWNvbG9yPSIjMjg0NjdkIi8+PC9saW5lYXJHcmFkaWVudD48L2RlZnM+PHJlY3QgeD0iMCIgeT0iMCIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgZmlsbD0idXJsKCNncmFkKSIgLz48L3N2Zz4g'); background: -moz-linear-gradient(290deg, #4576d1, #34589b 25%, #34589b, #28467d 90%); background: -webkit-linear-gradient(290deg, #4576d1, #34589b 25%, #34589b, #28467d 90%); background: linear-gradient(160deg, #4576d1, #34589b 25%, #34589b, #28467d 90%); } body.basecolor-b .c-main .c-sidecover-tgl { background: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4gPHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGRlZnM+PGxpbmVhckdyYWRpZW50IGlkPSJncmFkIiBncmFkaWVudFVuaXRzPSJvYmplY3RCb3VuZGluZ0JveCIgeDE9IjAuMjgwODE0IiB5MT0iLTAuMTAyMjA4IiB4Mj0iMC43MTkxODYiIHkyPSIxLjEwMjIwOCI+PHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iIzQ1YjVkMSIvPjxzdG9wIG9mZnNldD0iMjUlIiBzdG9wLWNvbG9yPSIjMzU5MzljIi8+PHN0b3Agb2Zmc2V0PSI1Ny41JSIgc3RvcC1jb2xvcj0iIzM1N2U5YyIvPjxzdG9wIG9mZnNldD0iOTAlIiBzdG9wLWNvbG9yPSIjMjg2ODdkIi8+PC9saW5lYXJHcmFkaWVudD48L2RlZnM+PHJlY3QgeD0iMCIgeT0iMCIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgZmlsbD0idXJsKCNncmFkKSIgLz48L3N2Zz4g'); background: -moz-linear-gradient(290deg, #45b5d1, #35939c 25%, #357e9c, #28687d 90%); background: -webkit-linear-gradient(290deg, #45b5d1, #35939c 25%, #357e9c, #28687d 90%); background: linear-gradient(160deg, #45b5d1, #35939c 25%, #357e9c, #28687d 90%); } body.basecolor-c .c-main .c-sidecover-tgl { background: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4gPHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGRlZnM+PGxpbmVhckdyYWRpZW50IGlkPSJncmFkIiBncmFkaWVudFVuaXRzPSJvYmplY3RCb3VuZGluZ0JveCIgeDE9IjAuMjgwODE0IiB5MT0iLTAuMTAyMjA4IiB4Mj0iMC43MTkxODYiIHkyPSIxLjEwMjIwOCI+PHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iIzQ1ZDFhNSIvPjxzdG9wIG9mZnNldD0iMjUlIiBzdG9wLWNvbG9yPSIjMzU5YzdlIi8+PHN0b3Agb2Zmc2V0PSI1Ny41JSIgc3RvcC1jb2xvcj0iIzM1OWM3YiIvPjxzdG9wIG9mZnNldD0iOTAlIiBzdG9wLWNvbG9yPSIjMjg3ZDYxIi8+PC9saW5lYXJHcmFkaWVudD48L2RlZnM+PHJlY3QgeD0iMCIgeT0iMCIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgZmlsbD0idXJsKCNncmFkKSIgLz48L3N2Zz4g'); background: -moz-linear-gradient(290deg, #45d1a5, #359c7e 25%, #359c7b, #287d61 90%); background: -webkit-linear-gradient(290deg, #45d1a5, #359c7e 25%, #359c7b, #287d61 90%); background: linear-gradient(160deg, #45d1a5, #359c7e 25%, #359c7b, #287d61 90%); } body.basecolor-d .c-main .c-sidecover-tgl { background: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4gPHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGRlZnM+PGxpbmVhckdyYWRpZW50IGlkPSJncmFkIiBncmFkaWVudFVuaXRzPSJvYmplY3RCb3VuZGluZ0JveCIgeDE9IjAuMjgwODE0IiB5MT0iLTAuMTAyMjA4IiB4Mj0iMC43MTkxODYiIHkyPSIxLjEwMjIwOCI+PHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iI2QxY2E0NSIvPjxzdG9wIG9mZnNldD0iMjUlIiBzdG9wLWNvbG9yPSIjOWM5NjM1Ii8+PHN0b3Agb2Zmc2V0PSI1Ny41JSIgc3RvcC1jb2xvcj0iIzljOTgzNSIvPjxzdG9wIG9mZnNldD0iOTAlIiBzdG9wLWNvbG9yPSIjN2Q3YTI4Ii8+PC9saW5lYXJHcmFkaWVudD48L2RlZnM+PHJlY3QgeD0iMCIgeT0iMCIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgZmlsbD0idXJsKCNncmFkKSIgLz48L3N2Zz4g'); background: -moz-linear-gradient(290deg, #d1ca45, #9c9635 25%, #9c9835, #7d7a28 90%); background: -webkit-linear-gradient(290deg, #d1ca45, #9c9635 25%, #9c9835, #7d7a28 90%); background: linear-gradient(160deg, #d1ca45, #9c9635 25%, #9c9835, #7d7a28 90%); } body.basecolor-e .c-main .c-sidecover-tgl { background: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4gPHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGRlZnM+PGxpbmVhckdyYWRpZW50IGlkPSJncmFkIiBncmFkaWVudFVuaXRzPSJvYmplY3RCb3VuZGluZ0JveCIgeDE9IjAuMjgwODE0IiB5MT0iLTAuMTAyMjA4IiB4Mj0iMC43MTkxODYiIHkyPSIxLjEwMjIwOCI+PHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iI2QxYTA0NSIvPjxzdG9wIG9mZnNldD0iMjUlIiBzdG9wLWNvbG9yPSIjOWM3MjM1Ii8+PHN0b3Agb2Zmc2V0PSI1Ny41JSIgc3RvcC1jb2xvcj0iIzljNzgzNSIvPjxzdG9wIG9mZnNldD0iOTAlIiBzdG9wLWNvbG9yPSIjOWM3MjM1Ii8+PC9saW5lYXJHcmFkaWVudD48L2RlZnM+PHJlY3QgeD0iMCIgeT0iMCIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgZmlsbD0idXJsKCNncmFkKSIgLz48L3N2Zz4g'); background: -moz-linear-gradient(290deg, #d1a045, #9c7235 25%, #9c7835, #9c7235 90%); background: -webkit-linear-gradient(290deg, #d1a045, #9c7235 25%, #9c7835, #9c7235 90%); background: linear-gradient(160deg, #d1a045, #9c7235 25%, #9c7835, #9c7235 90%); } body.basecolor-f .c-main .c-sidecover-tgl { background: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4gPHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGRlZnM+PGxpbmVhckdyYWRpZW50IGlkPSJncmFkIiBncmFkaWVudFVuaXRzPSJvYmplY3RCb3VuZGluZ0JveCIgeDE9IjAuMjgwODE0IiB5MT0iLTAuMTAyMjA4IiB4Mj0iMC43MTkxODYiIHkyPSIxLjEwMjIwOCI+PHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iI2QxNDViYSIvPjxzdG9wIG9mZnNldD0iMjUlIiBzdG9wLWNvbG9yPSIjOWMzNTkwIi8+PHN0b3Agb2Zmc2V0PSI1Ny41JSIgc3RvcC1jb2xvcj0iIzljMzU3ZSIvPjxzdG9wIG9mZnNldD0iOTAlIiBzdG9wLWNvbG9yPSIjOWMzNThhIi8+PC9saW5lYXJHcmFkaWVudD48L2RlZnM+PHJlY3QgeD0iMCIgeT0iMCIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgZmlsbD0idXJsKCNncmFkKSIgLz48L3N2Zz4g'); background: -moz-linear-gradient(290deg, #d145ba, #9c3590 25%, #9c357e, #9c358a 90%); background: -webkit-linear-gradient(290deg, #d145ba, #9c3590 25%, #9c357e, #9c358a 90%); background: linear-gradient(160deg, #d145ba, #9c3590 25%, #9c357e, #9c358a 90%); } /* ~~~~ Rightbox */ .c-main .c-rightbox { background: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4gPHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGRlZnM+PGxpbmVhckdyYWRpZW50IGlkPSJncmFkIiBncmFkaWVudFVuaXRzPSJvYmplY3RCb3VuZGluZ0JveCIgeDE9IjAuMjgwODE0IiB5MT0iLTAuMTAyMjA4IiB4Mj0iMC43MTkxODYiIHkyPSIxLjEwMjIwOCI+PHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iIzU1NTU1NSIvPjxzdG9wIG9mZnNldD0iNjUlIiBzdG9wLWNvbG9yPSIjNDA0MDQwIi8+PC9saW5lYXJHcmFkaWVudD48L2RlZnM+PHJlY3QgeD0iMCIgeT0iMCIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgZmlsbD0idXJsKCNncmFkKSIgLz48L3N2Zz4g'); background: -moz-linear-gradient(290deg, #555555, #404040 65%); background: -webkit-linear-gradient(290deg, #555555, #404040 65%); background: linear-gradient(160deg, #555555, #404040 65%); } /* ~~~~ Content */ .c-main .c-content { background-color: #fdfdfd; } /* ~~~~ Document */ /* ===================================== mixin */ /* ===================================== Responsive .show-smf : スマートフォン時のみ表示 .show-tab_p : タブレット時のみ表示 縦 .show-tab_l : タブレット時のみ表示 横 .show-pc : PC（デスクトップ）時のみ表示 .show-wide : PC（デスクトップ）時のみ表示 その他のクラスに実装する場合、 次のクラスを継承するように実装する html.smf * : スマートフォン時のみ html.tab_p * : タブレット時のみ 縦 html.tab_l * : タブレット時のみ 横 html.pc * : PC（デスクトップ）時のみ html.wide * : PC（デスクトップ）時のみ */ .show-smf { display: none; } .show-tab_p { display: none; } .show-tab_l { display: none; } .show-pc { display: none; } .show-wide { display: none; } html.smf .show-smf { display: block; } html.smf table.show-smf { display: table; } html.smf tbody.show-smf { display: table-row-group; } html.smf thead.show-smf { display: table-header-group; } html.smf tfoot.show-smf { display: table-footer-group; } html.smf tr.show-smf { display: table-row; } html.smf td.show-smf, html.smf th.show-smf { display: table-cell; } html.smf span.show-smf { display: inline; } html.tab_p .show-tab_p { display: block; } html.tab_p table.show-tab_p { display: table; } html.tab_p tbody.show-tab_p { display: table-row-group; } html.tab_p thead.show-tab_p { display: table-header-group; } html.tab_p tfoot.show-tab_p { display: table-footer-group; } html.tab_p tr.show-tab_p { display: table-row; } html.tab_p td.show-tab_p, html.tab_p th.show-tab_p { display: table-cell; } html.tab_p span.show-tab_p { display: inline; } html.tab_l .show-tab_l { display: block; } html.tab_l table.show-tab_l { display: table; } html.tab_l tbody.show-tab_l { display: table-row-group; } html.tab_l thead.show-tab_l { display: table-header-group; } html.tab_l tfoot.show-tab_l { display: table-footer-group; } html.tab_l tr.show-tab_l { display: table-row; } html.tab_l td.show-tab_l, html.tab_l th.show-tab_l { display: table-cell; } html.tab_l span.show-tab_l { display: inline; } html.pc .show-pc { display: block; } html.pc pcle.show-pc { display: table; } html.pc tbody.show-pc { display: table-row-group; } html.pc thead.show-pc { display: table-header-group; } html.pc tfoot.show-pc { display: table-footer-group; } html.pc tr.show-pc { display: table-row; } html.pc td.show-pc, html.pc th.show-pc { display: table-cell; } html.pc span.show-pc { display: inline; } html.wide .show-wide { display: block; } html.wide pcle.show-wide { display: table; } html.wide tbody.show-wide { display: table-row-group; } html.wide thead.show-wide { display: table-header-group; } html.wide tfoot.show-wide { display: table-footer-group; } html.wide tr.show-wide { display: table-row; } html.wide td.show-wide, html.wide th.show-wide { display: table-cell; } html.wide span.show-wide { display: inline; } /* Scrollbar "simple" */ .scrbar-slim::-webkit-scrollbar { overflow: hidden; width: 7px; background: rgba(0, 0, 0, 0.5); border-radius: 3px; } .scrbar-slim::-webkit-scrollbar:horizontal { height: 5px; } .scrbar-slim::-webkit-scrollbar-button { display: none; } .scrbar-slim::-webkit-scrollbar-piece { background: #ddd; } .scrbar-slim::-webkit-scrollbar-piece:start { background: #ddd; } .scrbar-slim::-webkit-scrollbar-thumb { overflow: hidden; background: #c0c0c0; border: 1px solid rgba(0, 0, 0, 0.5); margin: 1px; border-radius: 3px; } .scrbar-slim::-webkit-scrollbar-corner { overflow: hidden; background: #333; border-radius: 3px; } /* Scrollbar "wide" */ .scrbar-wide::-webkit-scrollbar { overflow: hidden; width: 12px; background: rgba(0, 0, 0, 0.5); border-radius: 8px; } .scrbar-wide::-webkit-scrollbar:horizontal { height: 5px; } .scrbar-wide::-webkit-scrollbar-button { display: none; } .scrbar-wide::-webkit-scrollbar-piece { background: #ddd; } .scrbar-wide::-webkit-scrollbar-piece:start { background: #ddd; } .scrbar-wide::-webkit-scrollbar-thumb { overflow: hidden; background: #c0c0c0; border: 1px solid rgba(0, 0, 0, 0.5); margin: 1px; border-radius: 8px; } .scrbar-wide::-webkit-scrollbar-corner { overflow: hidden; background: #333; border-radius: 8px; } /* unique */ /* ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ Common Style : Rev 2017-10-03 */ .box { display: block; overflow: hidden; position: relative; } /* text wrapper */ .elp { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; /* 改行も禁止 */ } .elt { overflow: hidden; text-overflow: ellipsis; } /* Scrollbar "simple" */ .slim-scrbar::-webkit-scrollbar { overflow: hidden; width: 7px; background: #efefef; border-radius: 3px; } .slim-scrbar::-webkit-scrollbar:horizontal { height: 5px; } .slim-scrbar::-webkit-scrollbar-button { display: none; } .slim-scrbar::-webkit-scrollbar-piece { background: #ddd; } .slim-scrbar::-webkit-scrollbar-piece:start { background: #ddd; } .slim-scrbar::-webkit-scrollbar-thumb { overflow: hidden; background: #c0c0c0; border: 1px solid #efefef; margin: 1px; border-radius: 3px; } .slim-scrbar::-webkit-scrollbar-corner { overflow: hidden; background: #333; border-radius: 3px; } /* Scrollbar "wide" */ .wide-scrbar::-webkit-scrollbar { overflow: hidden; width: 12px; background: #efefef; border-radius: 8px; } .wide-scrbar::-webkit-scrollbar:horizontal { height: 5px; } .wide-scrbar::-webkit-scrollbar-button { display: none; } .wide-scrbar::-webkit-scrollbar-piece { background: #ddd; } .wide-scrbar::-webkit-scrollbar-piece:start { background: #ddd; } .wide-scrbar::-webkit-scrollbar-thumb { overflow: hidden; background: #c0c0c0; border: 1px solid #efefef; margin: 1px; border-radius: 8px; } .wide-scrbar::-webkit-scrollbar-corner { overflow: hidden; background: #333; border-radius: 8px; } /* YouTube */ .c-widemov { overflow: hidden; position: relative; width: 100%; height: auto; margin: 15px 0; text-align: center; } .c-widemov iframe { width: 853px; height: 480px; margin: 0 auto; outline: 0; border-style: none; } @media screen and (min-width: 0px) and (max-width: 379px) { .c-widemov iframe { width: 320px; height: 180px; } } @media screen and (min-width: 380px) and (max-width: 519px) { .c-widemov iframe { width: 360px; height: 202px; } } @media screen and (min-width: 520px) and (max-width: 739px) { .c-widemov iframe { width: 500px; height: 281px; } } @media screen and (min-width: 740px) { .c-widemov iframe { width: 720px; height: 405px; } } /* Basic */ p { font-size: 1.3rem; line-height: 1.6em; margin: 0; padding: 1em 0 0 0; } p.ind, b.ind, span.ind { text-indent: 1em; } p.small, b.small, span.small { font-size: 1.1rem; } p.large, b.large, span.large { font-size: 1.5rem; } p.xlarge, b.xlarge, span.xlarge { font-size: 1.8rem; } p.xxlarge, b.xxlarge, span.xxlarge { font-size: 2.2rem; } html.smf p.large, html.smf b.large, html.smf span.large { font-size: 1.3rem; } html.smf p.xlarge, html.smf b.xlarge, html.smf span.xlarge { font-size: 1.5rem; } html.smf p.xxlarge, html.smf b.xxlarge, html.smf span.xxlarge { font-size: 1.8rem; } /* ===================================== C-ICN 共通アイコン c-icn クラスと i1_2 などの位置クラスをあわせて指定する。 SCSS では、@include c-icn() で指定する。 */ .c-icn, .c-head .x-logout, .c-foot .x-icn-usr, .c-foot .x-icn-usr.x-is-sales, .c-foot .x-icn-usr.x-is-admin, .c-foot .x-icn-secure, .c-foot .x-icn-secure.x-is-secure, .c-main .c-sidenav .x-back .x-icn, .c-main .c-sidecover-tgl:before, html.ipad_pro .c-main .c-sidecover-tgl:before, .c-main .c-rightbox > .x-rcloser:before, .c-btn:before, .c-dsb .x-box .x-gridhd .x-useicn.icn-hint:before, .c-dsb .x-box .x-gridhd .x-useicn.icn-alert:before, .c-dsb .x-box .x-gridhd .x-useicn.icn-caution:before, .c-dsb .x-box .x-gridhd .x-useicn.icn-info:before, .c-dsb .x-box .x-gridhd .x-useicn.icn-gear:before, .c-dsb .x-box .x-gridhd .x-useicn.icn-plus:before, .c-dsb .x-box .x-gridhd .x-useicn.icn-minus:before, .c-dsb .x-box .x-gridhd .x-useicn.icn-top:before, .c-dsb .x-box .x-gridhd .x-useicn.icn-end:before, .c-dsb .x-box .x-gridhd .x-useicn.icn-next:before, .c-dsb .x-box .x-gridhd .x-useicn.icn-prev:before, .c-dsb .x-box .x-gridhd .x-useicn.icn-reload:before, .c-dsb .x-box .x-gridhd .x-useicn.icn-select:before, .c-dsb .x-box .x-gridhd .x-useicn.icn-unselect:before, .c-dsb .x-box .x-gridhd .x-useicn.icn-lupe:before, .c-dsb .x-box .x-gridhd .x-useicn.icn-order:before, .c-dsb .x-box .x-gridhd .x-useicn.icn-asc:before, .c-dsb .x-box .x-gridhd .x-useicn.icn-desc:before, .c-dsb .x-box .x-gridhd .x-useicn.icn-sort:before, .xbs-findbox .x-findbox .x-closer:before { position: absolute; width: 100px; height: 100px; margin: 0; padding: 0; background-color: transparent; background-image: url(../imgs/vp.iconset_white.svg?r=171030); background-repeat: no-repeat; background-position: 0px 0px; background-size: 2000px 3000px; transform-origin: 0 0 0; transform: scale(1); } .c-icn.k { background-image: url(../imgs/vp.iconset_black.svg); } .c-icn.i1_1 { background-position: 0px 0px; } .c-icn.i1_2 { background-position: 0px -100px; } .c-icn.i1_3 { background-position: 0px -200px; } .c-icn.i1_4 { background-position: 0px -300px; } .c-icn.i1_5 { background-position: 0px -400px; } .c-icn.i1_6 { background-position: 0px -500px; } .c-icn.i1_7 { background-position: 0px -600px; } .c-icn.i1_8 { background-position: 0px -700px; } .c-icn.i1_9 { background-position: 0px -800px; } .c-icn.i1_10 { background-position: 0px -900px; } .c-icn.i1_11 { background-position: 0px -1000px; } .c-icn.i1_12 { background-position: 0px -1100px; } .c-icn.i1_13 { background-position: 0px -1200px; } .c-icn.i1_14 { background-position: 0px -1300px; } .c-icn.i1_15 { background-position: 0px -1400px; } .c-icn.i1_16 { background-position: 0px -1500px; } .c-icn.i1_17 { background-position: 0px -1600px; } .c-icn.i1_18 { background-position: 0px -1700px; } .c-icn.i1_19 { background-position: 0px -1800px; } .c-icn.i1_20 { background-position: 0px -1900px; } .c-icn.i2_1 { background-position: -100px 0px; } .c-icn.i2_2 { background-position: -100px -100px; } .c-icn.i2_3 { background-position: -100px -200px; } .c-icn.i2_4 { background-position: -100px -300px; } .c-icn.i2_5 { background-position: -100px -400px; } .c-icn.i2_6 { background-position: -100px -500px; } .c-icn.i2_7 { background-position: -100px -600px; } .c-icn.i2_8 { background-position: -100px -700px; } .c-icn.i2_9 { background-position: -100px -800px; } .c-icn.i2_10 { background-position: -100px -900px; } .c-icn.i2_11 { background-position: -100px -1000px; } .c-icn.i2_12 { background-position: -100px -1100px; } .c-icn.i2_13 { background-position: -100px -1200px; } .c-icn.i2_14 { background-position: -100px -1300px; } .c-icn.i2_15 { background-position: -100px -1400px; } .c-icn.i2_16 { background-position: -100px -1500px; } .c-icn.i2_17 { background-position: -100px -1600px; } .c-icn.i2_18 { background-position: -100px -1700px; } .c-icn.i2_19 { background-position: -100px -1800px; } .c-icn.i2_20 { background-position: -100px -1900px; } .c-icn.i3_1 { background-position: -200px 0px; } .c-icn.i3_2 { background-position: -200px -100px; } .c-icn.i3_3 { background-position: -200px -200px; } .c-icn.i3_4 { background-position: -200px -300px; } .c-icn.i3_5 { background-position: -200px -400px; } .c-icn.i3_6 { background-position: -200px -500px; } .c-icn.i3_7 { background-position: -200px -600px; } .c-icn.i3_8 { background-position: -200px -700px; } .c-icn.i3_9 { background-position: -200px -800px; } .c-icn.i3_10 { background-position: -200px -900px; } .c-icn.i3_11 { background-position: -200px -1000px; } .c-icn.i3_12 { background-position: -200px -1100px; } .c-icn.i3_13 { background-position: -200px -1200px; } .c-icn.i3_14 { background-position: -200px -1300px; } .c-icn.i3_15 { background-position: -200px -1400px; } .c-icn.i3_16 { background-position: -200px -1500px; } .c-icn.i3_17 { background-position: -200px -1600px; } .c-icn.i3_18 { background-position: -200px -1700px; } .c-icn.i3_19 { background-position: -200px -1800px; } .c-icn.i3_20 { background-position: -200px -1900px; } .c-icn.i4_1 { background-position: -300px 0px; } .c-icn.i4_2 { background-position: -300px -100px; } .c-icn.i4_3 { background-position: -300px -200px; } .c-icn.i4_4 { background-position: -300px -300px; } .c-icn.i4_5 { background-position: -300px -400px; } .c-icn.i4_6 { background-position: -300px -500px; } .c-icn.i4_7 { background-position: -300px -600px; } .c-icn.i4_8 { background-position: -300px -700px; } .c-icn.i4_9 { background-position: -300px -800px; } .c-icn.i4_10 { background-position: -300px -900px; } .c-icn.i4_11 { background-position: -300px -1000px; } .c-icn.i4_12 { background-position: -300px -1100px; } .c-icn.i4_13 { background-position: -300px -1200px; } .c-icn.i4_14 { background-position: -300px -1300px; } .c-icn.i4_15 { background-position: -300px -1400px; } .c-icn.i4_16 { background-position: -300px -1500px; } .c-icn.i4_17 { background-position: -300px -1600px; } .c-icn.i4_18 { background-position: -300px -1700px; } .c-icn.i4_19 { background-position: -300px -1800px; } .c-icn.i4_20 { background-position: -300px -1900px; } .c-icn.i5_1 { background-position: -400px 0px; } .c-icn.i5_2 { background-position: -400px -100px; } .c-icn.i5_3 { background-position: -400px -200px; } .c-icn.i5_4 { background-position: -400px -300px; } .c-icn.i5_5 { background-position: -400px -400px; } .c-icn.i5_6 { background-position: -400px -500px; } .c-icn.i5_7 { background-position: -400px -600px; } .c-icn.i5_8 { background-position: -400px -700px; } .c-icn.i5_9 { background-position: -400px -800px; } .c-icn.i5_10 { background-position: -400px -900px; } .c-icn.i5_11 { background-position: -400px -1000px; } .c-icn.i5_12 { background-position: -400px -1100px; } .c-icn.i5_13 { background-position: -400px -1200px; } .c-icn.i5_14 { background-position: -400px -1300px; } .c-icn.i5_15 { background-position: -400px -1400px; } .c-icn.i5_16 { background-position: -400px -1500px; } .c-icn.i5_17 { background-position: -400px -1600px; } .c-icn.i5_18 { background-position: -400px -1700px; } .c-icn.i5_19 { background-position: -400px -1800px; } .c-icn.i5_20 { background-position: -400px -1900px; } .c-icn.i6_1 { background-position: -500px 0px; } .c-icn.i6_2 { background-position: -500px -100px; } .c-icn.i6_3 { background-position: -500px -200px; } .c-icn.i6_4 { background-position: -500px -300px; } .c-icn.i6_5 { background-position: -500px -400px; } .c-icn.i6_6 { background-position: -500px -500px; } .c-icn.i6_7 { background-position: -500px -600px; } .c-icn.i6_8 { background-position: -500px -700px; } .c-icn.i6_9 { background-position: -500px -800px; } .c-icn.i6_10 { background-position: -500px -900px; } .c-icn.i6_11 { background-position: -500px -1000px; } .c-icn.i6_12 { background-position: -500px -1100px; } .c-icn.i6_13 { background-position: -500px -1200px; } .c-icn.i6_14 { background-position: -500px -1300px; } .c-icn.i6_15 { background-position: -500px -1400px; } .c-icn.i6_16 { background-position: -500px -1500px; } .c-icn.i6_17 { background-position: -500px -1600px; } .c-icn.i6_18 { background-position: -500px -1700px; } .c-icn.i6_19 { background-position: -500px -1800px; } .c-icn.i6_20 { background-position: -500px -1900px; } .c-icn.i7_1 { background-position: -600px 0px; } .c-icn.i7_2 { background-position: -600px -100px; } .c-icn.i7_3 { background-position: -600px -200px; } .c-icn.i7_4 { background-position: -600px -300px; } .c-icn.i7_5 { background-position: -600px -400px; } .c-icn.i7_6 { background-position: -600px -500px; } .c-icn.i7_7 { background-position: -600px -600px; } .c-icn.i7_8 { background-position: -600px -700px; } .c-icn.i7_9 { background-position: -600px -800px; } .c-icn.i7_10 { background-position: -600px -900px; } .c-icn.i7_11 { background-position: -600px -1000px; } .c-icn.i7_12 { background-position: -600px -1100px; } .c-icn.i7_13 { background-position: -600px -1200px; } .c-icn.i7_14 { background-position: -600px -1300px; } .c-icn.i7_15 { background-position: -600px -1400px; } .c-icn.i7_16 { background-position: -600px -1500px; } .c-icn.i7_17 { background-position: -600px -1600px; } .c-icn.i7_18 { background-position: -600px -1700px; } .c-icn.i7_19 { background-position: -600px -1800px; } .c-icn.i7_20 { background-position: -600px -1900px; } .c-icn.i8_1 { background-position: -700px 0px; } .c-icn.i8_2 { background-position: -700px -100px; } .c-icn.i8_3 { background-position: -700px -200px; } .c-icn.i8_4 { background-position: -700px -300px; } .c-icn.i8_5 { background-position: -700px -400px; } .c-icn.i8_6 { background-position: -700px -500px; } .c-icn.i8_7 { background-position: -700px -600px; } .c-icn.i8_8 { background-position: -700px -700px; } .c-icn.i8_9 { background-position: -700px -800px; } .c-icn.i8_10 { background-position: -700px -900px; } .c-icn.i8_11 { background-position: -700px -1000px; } .c-icn.i8_12 { background-position: -700px -1100px; } .c-icn.i8_13 { background-position: -700px -1200px; } .c-icn.i8_14 { background-position: -700px -1300px; } .c-icn.i8_15 { background-position: -700px -1400px; } .c-icn.i8_16 { background-position: -700px -1500px; } .c-icn.i8_17 { background-position: -700px -1600px; } .c-icn.i8_18 { background-position: -700px -1700px; } .c-icn.i8_19 { background-position: -700px -1800px; } .c-icn.i8_20 { background-position: -700px -1900px; } .c-icn.i9_1 { background-position: -800px 0px; } .c-icn.i9_2 { background-position: -800px -100px; } .c-icn.i9_3 { background-position: -800px -200px; } .c-icn.i9_4 { background-position: -800px -300px; } .c-icn.i9_5 { background-position: -800px -400px; } .c-icn.i9_6 { background-position: -800px -500px; } .c-icn.i9_7 { background-position: -800px -600px; } .c-icn.i9_8 { background-position: -800px -700px; } .c-icn.i9_9 { background-position: -800px -800px; } .c-icn.i9_10 { background-position: -800px -900px; } .c-icn.i9_11 { background-position: -800px -1000px; } .c-icn.i9_12 { background-position: -800px -1100px; } .c-icn.i9_13 { background-position: -800px -1200px; } .c-icn.i9_14 { background-position: -800px -1300px; } .c-icn.i9_15 { background-position: -800px -1400px; } .c-icn.i9_16 { background-position: -800px -1500px; } .c-icn.i9_17 { background-position: -800px -1600px; } .c-icn.i9_18 { background-position: -800px -1700px; } .c-icn.i9_19 { background-position: -800px -1800px; } .c-icn.i9_20 { background-position: -800px -1900px; } .c-icn.i10_1 { background-position: -900px 0px; } .c-icn.i10_2 { background-position: -900px -100px; } .c-icn.i10_3 { background-position: -900px -200px; } .c-icn.i10_4 { background-position: -900px -300px; } .c-icn.i10_5 { background-position: -900px -400px; } .c-icn.i10_6 { background-position: -900px -500px; } .c-icn.i10_7 { background-position: -900px -600px; } .c-icn.i10_8 { background-position: -900px -700px; } .c-icn.i10_9 { background-position: -900px -800px; } .c-icn.i10_10 { background-position: -900px -900px; } .c-icn.i10_11 { background-position: -900px -1000px; } .c-icn.i10_12 { background-position: -900px -1100px; } .c-icn.i10_13 { background-position: -900px -1200px; } .c-icn.i10_14 { background-position: -900px -1300px; } .c-icn.i10_15 { background-position: -900px -1400px; } .c-icn.i10_16 { background-position: -900px -1500px; } .c-icn.i10_17 { background-position: -900px -1600px; } .c-icn.i10_18 { background-position: -900px -1700px; } .c-icn.i10_19 { background-position: -900px -1800px; } .c-icn.i10_20 { background-position: -900px -1900px; } .c-icn.i11_1 { background-position: -1000px 0px; } .c-icn.i11_2 { background-position: -1000px -100px; } .c-icn.i11_3 { background-position: -1000px -200px; } .c-icn.i11_4 { background-position: -1000px -300px; } .c-icn.i11_5 { background-position: -1000px -400px; } .c-icn.i11_6 { background-position: -1000px -500px; } .c-icn.i11_7 { background-position: -1000px -600px; } .c-icn.i11_8 { background-position: -1000px -700px; } .c-icn.i11_9 { background-position: -1000px -800px; } .c-icn.i11_10 { background-position: -1000px -900px; } .c-icn.i11_11 { background-position: -1000px -1000px; } .c-icn.i11_12 { background-position: -1000px -1100px; } .c-icn.i11_13 { background-position: -1000px -1200px; } .c-icn.i11_14 { background-position: -1000px -1300px; } .c-icn.i11_15 { background-position: -1000px -1400px; } .c-icn.i11_16 { background-position: -1000px -1500px; } .c-icn.i11_17 { background-position: -1000px -1600px; } .c-icn.i11_18 { background-position: -1000px -1700px; } .c-icn.i11_19 { background-position: -1000px -1800px; } .c-icn.i11_20 { background-position: -1000px -1900px; } .c-icn.i12_1 { background-position: -1100px 0px; } .c-icn.i12_2 { background-position: -1100px -100px; } .c-icn.i12_3 { background-position: -1100px -200px; } .c-icn.i12_4 { background-position: -1100px -300px; } .c-icn.i12_5 { background-position: -1100px -400px; } .c-icn.i12_6 { background-position: -1100px -500px; } .c-icn.i12_7 { background-position: -1100px -600px; } .c-icn.i12_8 { background-position: -1100px -700px; } .c-icn.i12_9 { background-position: -1100px -800px; } .c-icn.i12_10 { background-position: -1100px -900px; } .c-icn.i12_11 { background-position: -1100px -1000px; } .c-icn.i12_12 { background-position: -1100px -1100px; } .c-icn.i12_13 { background-position: -1100px -1200px; } .c-icn.i12_14 { background-position: -1100px -1300px; } .c-icn.i12_15 { background-position: -1100px -1400px; } .c-icn.i12_16 { background-position: -1100px -1500px; } .c-icn.i12_17 { background-position: -1100px -1600px; } .c-icn.i12_18 { background-position: -1100px -1700px; } .c-icn.i12_19 { background-position: -1100px -1800px; } .c-icn.i12_20 { background-position: -1100px -1900px; } .c-icn.i13_1 { background-position: -1200px 0px; } .c-icn.i13_2 { background-position: -1200px -100px; } .c-icn.i13_3 { background-position: -1200px -200px; } .c-icn.i13_4 { background-position: -1200px -300px; } .c-icn.i13_5 { background-position: -1200px -400px; } .c-icn.i13_6 { background-position: -1200px -500px; } .c-icn.i13_7 { background-position: -1200px -600px; } .c-icn.i13_8 { background-position: -1200px -700px; } .c-icn.i13_9 { background-position: -1200px -800px; } .c-icn.i13_10 { background-position: -1200px -900px; } .c-icn.i13_11 { background-position: -1200px -1000px; } .c-icn.i13_12 { background-position: -1200px -1100px; } .c-icn.i13_13 { background-position: -1200px -1200px; } .c-icn.i13_14 { background-position: -1200px -1300px; } .c-icn.i13_15 { background-position: -1200px -1400px; } .c-icn.i13_16 { background-position: -1200px -1500px; } .c-icn.i13_17 { background-position: -1200px -1600px; } .c-icn.i13_18 { background-position: -1200px -1700px; } .c-icn.i13_19 { background-position: -1200px -1800px; } .c-icn.i13_20 { background-position: -1200px -1900px; } .c-icn.i14_1 { background-position: -1300px 0px; } .c-icn.i14_2 { background-position: -1300px -100px; } .c-icn.i14_3 { background-position: -1300px -200px; } .c-icn.i14_4 { background-position: -1300px -300px; } .c-icn.i14_5 { background-position: -1300px -400px; } .c-icn.i14_6 { background-position: -1300px -500px; } .c-icn.i14_7 { background-position: -1300px -600px; } .c-icn.i14_8 { background-position: -1300px -700px; } .c-icn.i14_9 { background-position: -1300px -800px; } .c-icn.i14_10 { background-position: -1300px -900px; } .c-icn.i14_11 { background-position: -1300px -1000px; } .c-icn.i14_12 { background-position: -1300px -1100px; } .c-icn.i14_13 { background-position: -1300px -1200px; } .c-icn.i14_14 { background-position: -1300px -1300px; } .c-icn.i14_15 { background-position: -1300px -1400px; } .c-icn.i14_16 { background-position: -1300px -1500px; } .c-icn.i14_17 { background-position: -1300px -1600px; } .c-icn.i14_18 { background-position: -1300px -1700px; } .c-icn.i14_19 { background-position: -1300px -1800px; } .c-icn.i14_20 { background-position: -1300px -1900px; } .c-icn.i15_1 { background-position: -1400px 0px; } .c-icn.i15_2 { background-position: -1400px -100px; } .c-icn.i15_3 { background-position: -1400px -200px; } .c-icn.i15_4 { background-position: -1400px -300px; } .c-icn.i15_5 { background-position: -1400px -400px; } .c-icn.i15_6 { background-position: -1400px -500px; } .c-icn.i15_7 { background-position: -1400px -600px; } .c-icn.i15_8 { background-position: -1400px -700px; } .c-icn.i15_9 { background-position: -1400px -800px; } .c-icn.i15_10 { background-position: -1400px -900px; } .c-icn.i15_11 { background-position: -1400px -1000px; } .c-icn.i15_12 { background-position: -1400px -1100px; } .c-icn.i15_13 { background-position: -1400px -1200px; } .c-icn.i15_14 { background-position: -1400px -1300px; } .c-icn.i15_15 { background-position: -1400px -1400px; } .c-icn.i15_16 { background-position: -1400px -1500px; } .c-icn.i15_17 { background-position: -1400px -1600px; } .c-icn.i15_18 { background-position: -1400px -1700px; } .c-icn.i15_19 { background-position: -1400px -1800px; } .c-icn.i15_20 { background-position: -1400px -1900px; } .c-icn.i16_1 { background-position: -1500px 0px; } .c-icn.i16_2 { background-position: -1500px -100px; } .c-icn.i16_3 { background-position: -1500px -200px; } .c-icn.i16_4 { background-position: -1500px -300px; } .c-icn.i16_5 { background-position: -1500px -400px; } .c-icn.i16_6 { background-position: -1500px -500px; } .c-icn.i16_7 { background-position: -1500px -600px; } .c-icn.i16_8 { background-position: -1500px -700px; } .c-icn.i16_9 { background-position: -1500px -800px; } .c-icn.i16_10 { background-position: -1500px -900px; } .c-icn.i16_11 { background-position: -1500px -1000px; } .c-icn.i16_12 { background-position: -1500px -1100px; } .c-icn.i16_13 { background-position: -1500px -1200px; } .c-icn.i16_14 { background-position: -1500px -1300px; } .c-icn.i16_15 { background-position: -1500px -1400px; } .c-icn.i16_16 { background-position: -1500px -1500px; } .c-icn.i16_17 { background-position: -1500px -1600px; } .c-icn.i16_18 { background-position: -1500px -1700px; } .c-icn.i16_19 { background-position: -1500px -1800px; } .c-icn.i16_20 { background-position: -1500px -1900px; } .c-icn.i17_1 { background-position: -1600px 0px; } .c-icn.i17_2 { background-position: -1600px -100px; } .c-icn.i17_3 { background-position: -1600px -200px; } .c-icn.i17_4 { background-position: -1600px -300px; } .c-icn.i17_5 { background-position: -1600px -400px; } .c-icn.i17_6 { background-position: -1600px -500px; } .c-icn.i17_7 { background-position: -1600px -600px; } .c-icn.i17_8 { background-position: -1600px -700px; } .c-icn.i17_9 { background-position: -1600px -800px; } .c-icn.i17_10 { background-position: -1600px -900px; } .c-icn.i17_11 { background-position: -1600px -1000px; } .c-icn.i17_12 { background-position: -1600px -1100px; } .c-icn.i17_13 { background-position: -1600px -1200px; } .c-icn.i17_14 { background-position: -1600px -1300px; } .c-icn.i17_15 { background-position: -1600px -1400px; } .c-icn.i17_16 { background-position: -1600px -1500px; } .c-icn.i17_17 { background-position: -1600px -1600px; } .c-icn.i17_18 { background-position: -1600px -1700px; } .c-icn.i17_19 { background-position: -1600px -1800px; } .c-icn.i17_20 { background-position: -1600px -1900px; } .c-icn.i18_1 { background-position: -1700px 0px; } .c-icn.i18_2 { background-position: -1700px -100px; } .c-icn.i18_3 { background-position: -1700px -200px; } .c-icn.i18_4 { background-position: -1700px -300px; } .c-icn.i18_5 { background-position: -1700px -400px; } .c-icn.i18_6 { background-position: -1700px -500px; } .c-icn.i18_7 { background-position: -1700px -600px; } .c-icn.i18_8 { background-position: -1700px -700px; } .c-icn.i18_9 { background-position: -1700px -800px; } .c-icn.i18_10 { background-position: -1700px -900px; } .c-icn.i18_11 { background-position: -1700px -1000px; } .c-icn.i18_12 { background-position: -1700px -1100px; } .c-icn.i18_13 { background-position: -1700px -1200px; } .c-icn.i18_14 { background-position: -1700px -1300px; } .c-icn.i18_15 { background-position: -1700px -1400px; } .c-icn.i18_16 { background-position: -1700px -1500px; } .c-icn.i18_17 { background-position: -1700px -1600px; } .c-icn.i18_18 { background-position: -1700px -1700px; } .c-icn.i18_19 { background-position: -1700px -1800px; } .c-icn.i18_20 { background-position: -1700px -1900px; } .c-icn.i19_1 { background-position: -1800px 0px; } .c-icn.i19_2 { background-position: -1800px -100px; } .c-icn.i19_3 { background-position: -1800px -200px; } .c-icn.i19_4 { background-position: -1800px -300px; } .c-icn.i19_5 { background-position: -1800px -400px; } .c-icn.i19_6 { background-position: -1800px -500px; } .c-icn.i19_7 { background-position: -1800px -600px; } .c-icn.i19_8 { background-position: -1800px -700px; } .c-icn.i19_9 { background-position: -1800px -800px; } .c-icn.i19_10 { background-position: -1800px -900px; } .c-icn.i19_11 { background-position: -1800px -1000px; } .c-icn.i19_12 { background-position: -1800px -1100px; } .c-icn.i19_13 { background-position: -1800px -1200px; } .c-icn.i19_14 { background-position: -1800px -1300px; } .c-icn.i19_15 { background-position: -1800px -1400px; } .c-icn.i19_16 { background-position: -1800px -1500px; } .c-icn.i19_17 { background-position: -1800px -1600px; } .c-icn.i19_18 { background-position: -1800px -1700px; } .c-icn.i19_19 { background-position: -1800px -1800px; } .c-icn.i19_20 { background-position: -1800px -1900px; } .c-icn.i20_1 { background-position: -1900px 0px; } .c-icn.i20_2 { background-position: -1900px -100px; } .c-icn.i20_3 { background-position: -1900px -200px; } .c-icn.i20_4 { background-position: -1900px -300px; } .c-icn.i20_5 { background-position: -1900px -400px; } .c-icn.i20_6 { background-position: -1900px -500px; } .c-icn.i20_7 { background-position: -1900px -600px; } .c-icn.i20_8 { background-position: -1900px -700px; } .c-icn.i20_9 { background-position: -1900px -800px; } .c-icn.i20_10 { background-position: -1900px -900px; } .c-icn.i20_11 { background-position: -1900px -1000px; } .c-icn.i20_12 { background-position: -1900px -1100px; } .c-icn.i20_13 { background-position: -1900px -1200px; } .c-icn.i20_14 { background-position: -1900px -1300px; } .c-icn.i20_15 { background-position: -1900px -1400px; } .c-icn.i20_16 { background-position: -1900px -1500px; } .c-icn.i20_17 { background-position: -1900px -1600px; } .c-icn.i20_18 { background-position: -1900px -1700px; } .c-icn.i20_19 { background-position: -1900px -1800px; } .c-icn.i20_20 { background-position: -1900px -1900px; } .c-icn.i21_1 { background-position: -2000px 0px; } .c-icn.i21_2 { background-position: -2000px -100px; } .c-icn.i21_3 { background-position: -2000px -200px; } .c-icn.i21_4 { background-position: -2000px -300px; } .c-icn.i21_5 { background-position: -2000px -400px; } .c-icn.i21_6 { background-position: -2000px -500px; } .c-icn.i21_7 { background-position: -2000px -600px; } .c-icn.i21_8 { background-position: -2000px -700px; } .c-icn.i21_9 { background-position: -2000px -800px; } .c-icn.i21_10 { background-position: -2000px -900px; } .c-icn.i21_11 { background-position: -2000px -1000px; } .c-icn.i21_12 { background-position: -2000px -1100px; } .c-icn.i21_13 { background-position: -2000px -1200px; } .c-icn.i21_14 { background-position: -2000px -1300px; } .c-icn.i21_15 { background-position: -2000px -1400px; } .c-icn.i21_16 { background-position: -2000px -1500px; } .c-icn.i21_17 { background-position: -2000px -1600px; } .c-icn.i21_18 { background-position: -2000px -1700px; } .c-icn.i21_19 { background-position: -2000px -1800px; } .c-icn.i21_20 { background-position: -2000px -1900px; } .c-icn.i22_1 { background-position: -2100px 0px; } .c-icn.i22_2 { background-position: -2100px -100px; } .c-icn.i22_3 { background-position: -2100px -200px; } .c-icn.i22_4 { background-position: -2100px -300px; } .c-icn.i22_5 { background-position: -2100px -400px; } .c-icn.i22_6 { background-position: -2100px -500px; } .c-icn.i22_7 { background-position: -2100px -600px; } .c-icn.i22_8 { background-position: -2100px -700px; } .c-icn.i22_9 { background-position: -2100px -800px; } .c-icn.i22_10 { background-position: -2100px -900px; } .c-icn.i22_11 { background-position: -2100px -1000px; } .c-icn.i22_12 { background-position: -2100px -1100px; } .c-icn.i22_13 { background-position: -2100px -1200px; } .c-icn.i22_14 { background-position: -2100px -1300px; } .c-icn.i22_15 { background-position: -2100px -1400px; } .c-icn.i22_16 { background-position: -2100px -1500px; } .c-icn.i22_17 { background-position: -2100px -1600px; } .c-icn.i22_18 { background-position: -2100px -1700px; } .c-icn.i22_19 { background-position: -2100px -1800px; } .c-icn.i22_20 { background-position: -2100px -1900px; } .c-icn.i23_1 { background-position: -2200px 0px; } .c-icn.i23_2 { background-position: -2200px -100px; } .c-icn.i23_3 { background-position: -2200px -200px; } .c-icn.i23_4 { background-position: -2200px -300px; } .c-icn.i23_5 { background-position: -2200px -400px; } .c-icn.i23_6 { background-position: -2200px -500px; } .c-icn.i23_7 { background-position: -2200px -600px; } .c-icn.i23_8 { background-position: -2200px -700px; } .c-icn.i23_9 { background-position: -2200px -800px; } .c-icn.i23_10 { background-position: -2200px -900px; } .c-icn.i23_11 { background-position: -2200px -1000px; } .c-icn.i23_12 { background-position: -2200px -1100px; } .c-icn.i23_13 { background-position: -2200px -1200px; } .c-icn.i23_14 { background-position: -2200px -1300px; } .c-icn.i23_15 { background-position: -2200px -1400px; } .c-icn.i23_16 { background-position: -2200px -1500px; } .c-icn.i23_17 { background-position: -2200px -1600px; } .c-icn.i23_18 { background-position: -2200px -1700px; } .c-icn.i23_19 { background-position: -2200px -1800px; } .c-icn.i23_20 { background-position: -2200px -1900px; } .c-icn.i24_1 { background-position: -2300px 0px; } .c-icn.i24_2 { background-position: -2300px -100px; } .c-icn.i24_3 { background-position: -2300px -200px; } .c-icn.i24_4 { background-position: -2300px -300px; } .c-icn.i24_5 { background-position: -2300px -400px; } .c-icn.i24_6 { background-position: -2300px -500px; } .c-icn.i24_7 { background-position: -2300px -600px; } .c-icn.i24_8 { background-position: -2300px -700px; } .c-icn.i24_9 { background-position: -2300px -800px; } .c-icn.i24_10 { background-position: -2300px -900px; } .c-icn.i24_11 { background-position: -2300px -1000px; } .c-icn.i24_12 { background-position: -2300px -1100px; } .c-icn.i24_13 { background-position: -2300px -1200px; } .c-icn.i24_14 { background-position: -2300px -1300px; } .c-icn.i24_15 { background-position: -2300px -1400px; } .c-icn.i24_16 { background-position: -2300px -1500px; } .c-icn.i24_17 { background-position: -2300px -1600px; } .c-icn.i24_18 { background-position: -2300px -1700px; } .c-icn.i24_19 { background-position: -2300px -1800px; } .c-icn.i24_20 { background-position: -2300px -1900px; } .c-icn.i25_1 { background-position: -2400px 0px; } .c-icn.i25_2 { background-position: -2400px -100px; } .c-icn.i25_3 { background-position: -2400px -200px; } .c-icn.i25_4 { background-position: -2400px -300px; } .c-icn.i25_5 { background-position: -2400px -400px; } .c-icn.i25_6 { background-position: -2400px -500px; } .c-icn.i25_7 { background-position: -2400px -600px; } .c-icn.i25_8 { background-position: -2400px -700px; } .c-icn.i25_9 { background-position: -2400px -800px; } .c-icn.i25_10 { background-position: -2400px -900px; } .c-icn.i25_11 { background-position: -2400px -1000px; } .c-icn.i25_12 { background-position: -2400px -1100px; } .c-icn.i25_13 { background-position: -2400px -1200px; } .c-icn.i25_14 { background-position: -2400px -1300px; } .c-icn.i25_15 { background-position: -2400px -1400px; } .c-icn.i25_16 { background-position: -2400px -1500px; } .c-icn.i25_17 { background-position: -2400px -1600px; } .c-icn.i25_18 { background-position: -2400px -1700px; } .c-icn.i25_19 { background-position: -2400px -1800px; } .c-icn.i25_20 { background-position: -2400px -1900px; } .c-icn.i26_1 { background-position: -2500px 0px; } .c-icn.i26_2 { background-position: -2500px -100px; } .c-icn.i26_3 { background-position: -2500px -200px; } .c-icn.i26_4 { background-position: -2500px -300px; } .c-icn.i26_5 { background-position: -2500px -400px; } .c-icn.i26_6 { background-position: -2500px -500px; } .c-icn.i26_7 { background-position: -2500px -600px; } .c-icn.i26_8 { background-position: -2500px -700px; } .c-icn.i26_9 { background-position: -2500px -800px; } .c-icn.i26_10 { background-position: -2500px -900px; } .c-icn.i26_11 { background-position: -2500px -1000px; } .c-icn.i26_12 { background-position: -2500px -1100px; } .c-icn.i26_13 { background-position: -2500px -1200px; } .c-icn.i26_14 { background-position: -2500px -1300px; } .c-icn.i26_15 { background-position: -2500px -1400px; } .c-icn.i26_16 { background-position: -2500px -1500px; } .c-icn.i26_17 { background-position: -2500px -1600px; } .c-icn.i26_18 { background-position: -2500px -1700px; } .c-icn.i26_19 { background-position: -2500px -1800px; } .c-icn.i26_20 { background-position: -2500px -1900px; } .c-icn.i27_1 { background-position: -2600px 0px; } .c-icn.i27_2 { background-position: -2600px -100px; } .c-icn.i27_3 { background-position: -2600px -200px; } .c-icn.i27_4 { background-position: -2600px -300px; } .c-icn.i27_5 { background-position: -2600px -400px; } .c-icn.i27_6 { background-position: -2600px -500px; } .c-icn.i27_7 { background-position: -2600px -600px; } .c-icn.i27_8 { background-position: -2600px -700px; } .c-icn.i27_9 { background-position: -2600px -800px; } .c-icn.i27_10 { background-position: -2600px -900px; } .c-icn.i27_11 { background-position: -2600px -1000px; } .c-icn.i27_12 { background-position: -2600px -1100px; } .c-icn.i27_13 { background-position: -2600px -1200px; } .c-icn.i27_14 { background-position: -2600px -1300px; } .c-icn.i27_15 { background-position: -2600px -1400px; } .c-icn.i27_16 { background-position: -2600px -1500px; } .c-icn.i27_17 { background-position: -2600px -1600px; } .c-icn.i27_18 { background-position: -2600px -1700px; } .c-icn.i27_19 { background-position: -2600px -1800px; } .c-icn.i27_20 { background-position: -2600px -1900px; } .c-icn.i28_1 { background-position: -2700px 0px; } .c-icn.i28_2 { background-position: -2700px -100px; } .c-icn.i28_3 { background-position: -2700px -200px; } .c-icn.i28_4 { background-position: -2700px -300px; } .c-icn.i28_5 { background-position: -2700px -400px; } .c-icn.i28_6 { background-position: -2700px -500px; } .c-icn.i28_7 { background-position: -2700px -600px; } .c-icn.i28_8 { background-position: -2700px -700px; } .c-icn.i28_9 { background-position: -2700px -800px; } .c-icn.i28_10 { background-position: -2700px -900px; } .c-icn.i28_11 { background-position: -2700px -1000px; } .c-icn.i28_12 { background-position: -2700px -1100px; } .c-icn.i28_13 { background-position: -2700px -1200px; } .c-icn.i28_14 { background-position: -2700px -1300px; } .c-icn.i28_15 { background-position: -2700px -1400px; } .c-icn.i28_16 { background-position: -2700px -1500px; } .c-icn.i28_17 { background-position: -2700px -1600px; } .c-icn.i28_18 { background-position: -2700px -1700px; } .c-icn.i28_19 { background-position: -2700px -1800px; } .c-icn.i28_20 { background-position: -2700px -1900px; } .c-icn.i29_1 { background-position: -2800px 0px; } .c-icn.i29_2 { background-position: -2800px -100px; } .c-icn.i29_3 { background-position: -2800px -200px; } .c-icn.i29_4 { background-position: -2800px -300px; } .c-icn.i29_5 { background-position: -2800px -400px; } .c-icn.i29_6 { background-position: -2800px -500px; } .c-icn.i29_7 { background-position: -2800px -600px; } .c-icn.i29_8 { background-position: -2800px -700px; } .c-icn.i29_9 { background-position: -2800px -800px; } .c-icn.i29_10 { background-position: -2800px -900px; } .c-icn.i29_11 { background-position: -2800px -1000px; } .c-icn.i29_12 { background-position: -2800px -1100px; } .c-icn.i29_13 { background-position: -2800px -1200px; } .c-icn.i29_14 { background-position: -2800px -1300px; } .c-icn.i29_15 { background-position: -2800px -1400px; } .c-icn.i29_16 { background-position: -2800px -1500px; } .c-icn.i29_17 { background-position: -2800px -1600px; } .c-icn.i29_18 { background-position: -2800px -1700px; } .c-icn.i29_19 { background-position: -2800px -1800px; } .c-icn.i29_20 { background-position: -2800px -1900px; } .c-icn.i30_1 { background-position: -2900px 0px; } .c-icn.i30_2 { background-position: -2900px -100px; } .c-icn.i30_3 { background-position: -2900px -200px; } .c-icn.i30_4 { background-position: -2900px -300px; } .c-icn.i30_5 { background-position: -2900px -400px; } .c-icn.i30_6 { background-position: -2900px -500px; } .c-icn.i30_7 { background-position: -2900px -600px; } .c-icn.i30_8 { background-position: -2900px -700px; } .c-icn.i30_9 { background-position: -2900px -800px; } .c-icn.i30_10 { background-position: -2900px -900px; } .c-icn.i30_11 { background-position: -2900px -1000px; } .c-icn.i30_12 { background-position: -2900px -1100px; } .c-icn.i30_13 { background-position: -2900px -1200px; } .c-icn.i30_14 { background-position: -2900px -1300px; } .c-icn.i30_15 { background-position: -2900px -1400px; } .c-icn.i30_16 { background-position: -2900px -1500px; } .c-icn.i30_17 { background-position: -2900px -1600px; } .c-icn.i30_18 { background-position: -2900px -1700px; } .c-icn.i30_19 { background-position: -2900px -1800px; } .c-icn.i30_20 { background-position: -2900px -1900px; } /* ===================================== Progress bar */ .c-progbar { z-index: 21; display: block; position: fixed; top: -5px; left: 0; right: 0; bottom: auto; height: 5px; pointer-events: none; opacity: 0; transition: all 0.6s cubic-bezier(0.07, 0.86, 0.41, 0.99); /* progress bar is active */ } .c-progbar .x-bar { display: block; width: 100%; height: 5px; margin: 0; padding: 0; transition: width 0.5s cubic-bezier(0.11, 0.57, 0.36, 1); } .c-progbar.active { opacity: 1; top: 0px; } /* ===================================== Header */ .c-head { z-index: 20; display: block; position: fixed; top: 0px; left: 0px; right: 0px; bottom: auto; width: 100%; height: 46px; box-sizing: border-box; /* border-width:0 0 1px 0; border-style:solid; border-color:$color_base; */ -moz-box-shadow: 0 0 15px 0 rgba(0, 0, 0, 0.5); -webkit-box-shadow: 0 0 15px 0 rgba(0, 0, 0, 0.5); box-shadow: 0 0 15px 0 rgba(0, 0, 0, 0.5); } .c-head .x-logout { transition: all 0.5s cubic-bezier(0, 0, 0.02, 0.99); opacity: 0; background-position: -100px -1900px; background-image: url(../imgs/vp.iconset_white.svg); transform-origin: 100% 0%; transform: scale(0.41); top: 2px; left: auto; right: 2px; bottom: auto; cursor: pointer; } .c-head .x-logout else { background-image: url(../imgs/vp.iconset_black.svg); } .c-head .x-logout.active { opacity: 1; } .c-head .x-logout.h { opacity: 0.8; } .c-head .x-logo { transition: all 0.5s cubic-bezier(0, 0, 0.02, 0.99); display: block; position: relative; opacity: 1; width: 150px; height: 45px; margin: 0 auto; cursor: pointer; background: transparent url(../imgs/cmn/hdr_logo.svg) no-repeat center center; } .c-head .x-logo.h { opacity: 0.8; } html.smf .c-head, html.tab_p .c-head { height: 36px; } html.smf .c-head .x-logout, html.tab_p .c-head .x-logout { transform: scale(0.31); } html.smf .c-head .x-logo, html.tab_p .c-head .x-logo { height: 36px; float: right; margin: 0 0 0 auto; } @-moz-keyframes c-head-division { 0% { opacity: 0; } 100% { opacity: 1; } } @-webkit-keyframes c-head-division { 0% { opacity: 0; } 100% { opacity: 1; } } /* ===================================== Footer */ .c-foot { z-index: 20; display: block; position: fixed; top: auto; left: 0px; right: 0px; bottom: 0px; width: 100%; height: 30px; background: #000; } .c-foot .x-notice { position: absolute; top: 0; left: 60px; width: 100%; height: 100%; pointer-events: none; } .c-foot .x-notice p { font-size: 1.2rem; line-height: 30px; height: 30px; color: #eee; margin: 0; padding: 0 15px 0 0; } .c-foot .x-userstat { position: absolute; top: 0; left: 0; width: 100%; height: 100%; pointer-events: none; } .c-foot .x-userstat p { text-align: right; font-size: 1.2rem; line-height: 30px; height: 30px; color: #eee; margin: 0; padding: 0 15px 0 0; } .c-foot .x-icn-usr { top: 1px; left: 30px; right: auto; bottom: auto; cursor: pointer; box-sizing: border-box; background-color: #222; background-position: -1100px -1300px; background-image: url(../imgs/vp.iconset_white.svg); transform-origin: 0% 0%; transform: scale(0.28); } .c-foot .x-icn-usr else { background-image: url(../imgs/vp.iconset_black.svg); } .c-foot .x-icn-usr.x-is-sales { background-position: -600px -1900px; background-image: url(../imgs/vp.iconset_white.svg); transform-origin: 0% 0%; transform: scale(0.28); } .c-foot .x-icn-usr.x-is-sales else { background-image: url(../imgs/vp.iconset_black.svg); } .c-foot .x-icn-usr.x-is-admin { background-position: -300px -1900px; background-image: url(../imgs/vp.iconset_white.svg); transform-origin: 0% 0%; transform: scale(0.28); } .c-foot .x-icn-usr.x-is-admin else { background-image: url(../imgs/vp.iconset_black.svg); } .c-foot .x-icn-secure { top: 1px; left: 1px; right: auto; bottom: auto; cursor: pointer; box-sizing: border-box; background-color: #222; background-position: -1300px -700px; background-image: url(../imgs/vp.iconset_white.svg); transform-origin: 0% 0%; transform: scale(0.28); } .c-foot .x-icn-secure else { background-image: url(../imgs/vp.iconset_black.svg); } .c-foot .x-icn-secure.x-is-secure { background-position: -1200px -700px; background-image: url(../imgs/vp.iconset_white.svg); transform-origin: 0% 0%; transform: scale(0.28); background-color: #917c13; } .c-foot .x-icn-secure.x-is-secure else { background-image: url(../imgs/vp.iconset_black.svg); } /* ===================================== Main Progress */ .c-main-prog { z-index: 19; display: block; position: fixed; top: 46px; left: 0px; right: 0px; bottom: 30px; transform-origin: 50% 50%; transform: scale(1.25); pointer-events: none; opacity: 0; transition: all 0.5s cubic-bezier(0, 0, 0.02, 0.99); /* ~~~~~~~~~~~~~~~ main ビジー状態 */ } .c-main-prog .c-load-anim1 { display: block; position: absolute; top: 50%; left: 50%; margin: -35px 0 0 -35px; padding: 0; } .c-main-prog p { position: absolute; top: auto; left: 0; right: 0; bottom: 0; font-size: 1.1rem; line-height: 1.3rem; color: #fdfdfd; text-align: right; margin: 0; padding: 10px; } html.smf .c-main-prog, html.tab_p .c-main-prog { top: 36px; } body.status-main-busy .c-main-prog { z-index: 19; opacity: 1; transform: scale(1); overflow: hidden; pointer-events: auto; background-color: rgba(0, 0, 0, 0.4); } /* ===================================== Main */ .c-main { z-index: 1; display: block; position: fixed; top: 46px; left: 0px; right: 0px; bottom: 30px; /* =-=-=-=-=-=-=-=-=-=-=-= side nav .c-main クラスに "show-sidenav" を付与すると表示される */ /* =-=-=-=-=-=-=-=-=-=-=-= side cover .c-main クラスに "show-sidenav" と "show-sidecover" を付与すると表示される */ /* =-=-=-=-=-=-=-=-=-=-=-= rightbox .c-main クラスに "show-rightbox" を付与すると表示される .c-main クラスに data-rightbox-width="wide" を指定すると、横幅 $rightbox_widewidth のサイズになる（通常は $rightbox_basicwidth） */ /* =-=-=-=-=-=-=-=-=-=-=-= content */ /* ~~~~~~~~~~~~~~~ main ビジー状態 */ } html.smf .c-main, html.tab_p .c-main { top: 36px; } .c-main .c-main-backart { z-index: 0; position: absolute; top: 0; left: 0; right: 0; bottom: 0; width: 100%; height: 100%; background-color: transparent; background-repeat: no-repeat; background-position: center center; background-size: cover; pointer-events: none; opacity: 0; transform-origin: 50% 50%; transform: scale(1.2); transition: all 2s cubic-bezier(0, 0, 0.02, 0.99); } .c-main .c-main-backart.x-show { opacity: 1; transform: scale(1); } .c-main .c-main-inner { z-index: 1; position: relative; overflow: hidden; width: 100%; height: 100%; min-width: 100px; min-height: 200px; margin: 0 auto; padding: 0; background-color: #fdfdfd; } html.ipad_pro .c-main .c-main-inner, html.ipad .c-main .c-main-inner { width: 100%; height: 100%; } .c-main .c-sidenav { z-index: 10; display: block; position: absolute; top: 0px; left: -70px; right: auto; bottom: 0px; width: 40px; background: transparent none; overflow: visible; transition: all 0.25s cubic-bezier(0, 0, 0.02, 0.99); -moz-box-shadow: 0 0 20px 0 transparent; -webkit-box-shadow: 0 0 20px 0 transparent; box-shadow: 0 0 20px 0 transparent; /* ------- 戻るボタン */ /* ------- タイトル */ } .c-main .c-sidenav .x-back { position: absolute; top: 0; left: 0; width: 40px; height: 40px; display: block; overflow: hidden; cursor: pointer; box-sizing: border-box; transition: box-shadow 1s cubic-bezier(0, 0, 0.02, 0.99); } .c-main .c-sidenav .x-back .x-icn { top: 0; left: 0; background-position: -200px -100px; background-image: url(../imgs/vp.iconset_white.svg); transform-origin: 0 0; transform: scale(0.4); } .c-main .c-sidenav .x-back .x-icn else { background-image: url(../imgs/vp.iconset_black.svg); } .c-main .c-sidenav .x-title { position: absolute; top: 40px; left: 0px; right: auto; bottom: 0px; width: 40px; display: block; overflow: hidden; cursor: pointer; box-sizing: border-box; transition: background-color 1.2s linear, box-shadow 1s cubic-bezier(0, 0, 0.02, 0.99); } .c-main .c-sidenav .x-title h1 { margin: 0; padding: 0 0 20px 0; line-height: 40px; font-size: 2rem; color: #555; -webkit-writing-mode: vertical-rl; -ms-writing-mode: tb-rl; writing-mode: vertical-rl; text-align: right; transform-origin: 50% 50%; transform: rotateZ(180deg); transition: all 0.25s cubic-bezier(0, 0, 0.02, 0.99); animation-fill-mode: both; -moz-animation: a-c-main-sidenav-title-h1 1s 1 ease-in-out; -webkit-animation: a-c-main-sidenav-title-h1 1s 1 linear; } body.basecolor-a .c-main .c-sidenav .x-title h1 { color: #34589b; } body.basecolor-b .c-main .c-sidenav .x-title h1 { color: #35969c; } body.basecolor-c .c-main .c-sidenav .x-title h1 { color: #359c7e; } body.basecolor-d .c-main .c-sidenav .x-title h1 { color: #9c9c35; } body.basecolor-e .c-main .c-sidenav .x-title h1 { color: #9c7235; } body.basecolor-f .c-main .c-sidenav .x-title h1 { color: #9c358a; } .c-main .c-sidenav .x-cover { display: none; } .c-main.show-sidenav .c-sidenav { left: 0px; -moz-box-shadow: 0 0 20px 0 rgba(0, 0, 0, 0.5); -webkit-box-shadow: 0 0 20px 0 rgba(0, 0, 0, 0.5); box-shadow: 0 0 20px 0 rgba(0, 0, 0, 0.5); } .c-main .c-sidecover { z-index: 5; display: block; position: absolute; top: 0px; left: -310px; right: auto; bottom: 0px; width: 240px; overflow-x: hidden; overflow-y: auto; -webkit-overflow-scrolling: touch; -moz-box-shadow: 0 0 20px 0 transparent; -webkit-box-shadow: 0 0 20px 0 transparent; box-shadow: 0 0 20px 0 transparent; transition: all 0.33s cubic-bezier(0, 0, 0.02, 0.99); } .c-main .c-sidecover p { margin: 0; padding: 0 20px 20px 30px; font-size: 1.2rem; color: #fdfdfd; } .c-main .c-sidecover .x-tt1 { margin: 0; padding: 36px 20px 0 30px; font-size: 3rem; line-height: 1em; color: #fdfdfd; } .c-main .c-sidecover .x-tt2 { margin: 0; padding: 0 20px 15px 30px; font-size: 1.6rem; line-height: 1em; color: #fdfdfd; } .c-main .c-sidecover .x-tt3 { margin: 0; padding: 0 20px 20px 30px; font-size: 1.6rem; color: #fdfdfd; } .c-main .c-sidecover h2 { margin: 0; padding: 10px 20px 20px 30px; font-size: 1.5rem; color: #fdfdfd; } .c-main .c-sidecover img.x-cover { width: 100%; height: auto; margin: 0; border-top: 1px solid rgba(255, 255, 255, 0.8); } html.ipad_pro .c-main .c-sidecover { left: -370px; width: 300px; } html.ipad_pro .c-main .c-sidecover p { margin: 0; padding: 0 20px 20px 30px; font-size: 1.5rem; } html.ipad_pro .c-main .c-sidecover .x-tt1 { margin: 0; padding: 46px 20px 0 30px; font-size: 4rem; } html.ipad_pro .c-main .c-sidecover .x-tt2 { margin: 0; padding: 0 20px 15px 30px; font-size: 2rem; } html.ipad_pro .c-main .c-sidecover .x-tt3 { margin: 0; padding: 0 20px 20px 30px; font-size: 2rem; } html.ipad_pro .c-main .c-sidecover h2 { margin: 0; padding: 10px 20px 20px 30px; font-size: 1.8rem; } .c-main.show-sidenav.show-sidecover .c-sidecover { left: 40px; -moz-box-shadow: 0 0 20px 0 rgba(0, 0, 0, 0.5); -webkit-box-shadow: 0 0 20px 0 rgba(0, 0, 0, 0.5); box-shadow: 0 0 20px 0 rgba(0, 0, 0, 0.5); } .c-main .c-sidecover-tgl { z-index: 4; display: block; position: absolute; top: auto; left: 40px; right: auto; bottom: 20px; opacity: 0; pointer-events: none; width: 41px; height: 41px; overflow: hidden; -moz-border-radius: 0 10px 10px 0; -webkit-border-radius: 0; border-radius: 0 10px 10px 0; -moz-box-shadow: 0 0 20px 0 transparent; -webkit-box-shadow: 0 0 20px 0 transparent; box-shadow: 0 0 20px 0 transparent; transition: all 0.33s cubic-bezier(0, 0, 0.02, 0.99); } .c-main .c-sidecover-tgl:before { content: ' '; position: absolute; top: 0; left: 0; margin: 0; background-position: -300px -100px; background-image: url(../imgs/vp.iconset_white.svg); transform-origin: 0 0; transform: scale(0.4); } .c-main .c-sidecover-tgl:before else { background-image: url(../imgs/vp.iconset_black.svg); } .c-main .c-sidecover-tgl.active { opacity: 1; pointer-events: auto; } html.ipad_pro .c-main .c-sidecover-tgl { width: 51px; height: 51px; } html.ipad_pro .c-main .c-sidecover-tgl:before { background-position: -300px -100px; background-image: url(../imgs/vp.iconset_white.svg); transform-origin: 0 0; transform: scale(0.5); } html.ipad_pro .c-main .c-sidecover-tgl:before else { background-image: url(../imgs/vp.iconset_black.svg); } .c-main.show-sidenav.show-sidecover .c-sidecover-tgl { left: 280px; opacity: 0; pointer-events: none; } html.ipad_pro .c-main.show-sidenav.show-sidecover .c-sidecover-tgl { left: 340px; } .c-main .c-rightbox { z-index: 12; display: block; position: absolute; top: 0px; left: auto; right: -450px; bottom: 0px; width: 450px; overflow-x: hidden; overflow-y: auto; -webkit-overflow-scrolling: touch; -moz-box-shadow: 0 0 25px 5px transparent; -webkit-box-shadow: 0 0 25px 5px transparent; box-shadow: 0 0 25px 5px transparent; transition: all 0.33s cubic-bezier(0, 0, 0.02, 0.99); } .c-main .c-rightbox > .x-rcloser { position: relative; overflow: hidden; width: 40px; height: 40px; margin: 0; background: transparent; cursor: pointer; } .c-main .c-rightbox > .x-rcloser:before { content: ' '; position: absolute; top: 0; left: 0; width: 100px; height: 100px; pointer-events: none; background-position: -700px 0px; background-image: url(../imgs/vp.iconset_white.svg); transform-origin: 0px 0px; transform: scale(0.4); } .c-main .c-rightbox > .x-rcloser:before else { background-image: url(../imgs/vp.iconset_black.svg); } .c-main[data-rightbox-width=wide] .c-rightbox { right: -90%; width: 90%; } .c-main.show-rightbox .c-rightbox { right: 0px; -moz-box-shadow: 0 0 25px 5px rgba(0, 0, 0, 0.4); -webkit-box-shadow: 0 0 25px 5px rgba(0, 0, 0, 0.4); box-shadow: 0 0 25px 5px rgba(0, 0, 0, 0.4); } .c-main .c-rightbox-closer { z-index: 11; position: fixed; top: 0; left: 0; right: 0; bottom: 0; width: 100%; height: 100%; pointer-events: none; opacity: 0; background: rgba(0, 0, 0, 0.3); transition: all 0.33s cubic-bezier(0, 0, 0.02, 0.99); } .c-main.show-rightbox:not(.hide-rightbox-mask) .c-rightbox-closer { pointer-events: auto; opacity: 1; } .c-main .c-content { z-index: 1; display: block; position: absolute; top: 0px; left: 0px; right: 0px; bottom: 0px; overflow-x: hidden; overflow-y: auto; -webkit-overflow-scrolling: touch; opacity: 0; transition: all 0.45s cubic-bezier(0, 0, 0.02, 0.99); } .c-main .c-content .x-backart { position: absolute; top: 0; left: 0; right: 0; bottom: 0; width: 100%; max-width: 1200px; background-repeat: no-repeat; background-position: left top; background-size: 100% auto; } .c-main .c-content.active { opacity: 1; } .c-main.show-sidenav .c-content { left: 40px; } .c-main.show-sidenav.show-sidecover .c-content { left: 280px; } html.ipad_pro .c-main.show-sidenav.show-sidecover .c-content { left: 340px; } html.smf .c-main.show-sidenav.show-sidecover .c-content { left: 340px; right: -340px; } .c-main.show-rightbox .c-content { margin-left: -50px; margin-right: 50px; } body.status-main-busy .c-main { pointer-events: none; } @-moz-keyframes a-c-main-sidenav-title-h1 { 0% { opacity: 0; } 100% { opacity: 1; } } @-webkit-keyframes a-c-main-sidenav-title-h1 { 0% { opacity: 0; } 100% { opacity: 1; } } /* ===================================== Loading animation
*/ .c-load-anim1 { position: relative; width: 70px; height: 70px; margin: 0px auto; overflow: hidden; background: transparent; } .c-load-anim1 .c1 { border: 5px solid rgba(255, 255, 255, 0.9); opacity: .9; border-right: 5px solid transparent; border-left: 5px solid transparent; border-radius: 50px; -moz-box-shadow: 0 0 10px #555; -webkit-box-shadow: 0 0 10px #555; box-shadow: 0 0 10px #555; width: 50px; height: 50px; margin: 5px auto; -moz-animation: a-c-load-anim1-c1 1s infinite ease-in-out; -webkit-animation: a-c-load-anim1-c1 1s infinite ease-in-out; animation: a-c-load-anim1-c1 1s infinite ease-in-out; } .c-load-anim1 .c2 { border: 5px solid rgba(255, 255, 255, 0.9); opacity: .9; border-left: 5px solid transparent; border-right: 5px solid transparent; border-radius: 50px; -moz-box-shadow: 0 0 10px #555; -webkit-box-shadow: 0 0 10px #555; box-shadow: 0 0 10px #555; width: 30px; height: 30px; margin: -55px auto 0 auto; position: relative; -moz-animation: a-c-load-anim1-c2 1s infinite linear; -webkit-animation: a-c-load-anim1-c2 1s infinite linear; animation: a-c-load-anim1-c2 1s infinite linear; } @-moz-keyframes a-c-load-anim1-c1 { 0% { -moz-transform: rotate(160deg); opacity: 0; -moz-box-shadow: 0 0 1px #fff; -webkit-box-shadow: 0 0 1px #fff; box-shadow: 0 0 1px #fff; } 50% { -moz-transform: rotate(145deg); opacity: 1; } 100% { -moz-transform: rotate(-320deg); opacity: 0; } } @-moz-keyframes a-c-load-anim1-c2 { 0% { -moz-transform: rotate(0deg); } 100% { -moz-transform: rotate(360deg); } } @-webkit-keyframes a-c-load-anim1-c1 { 0% { -webkit-transform: rotate(160deg); opacity: 0; -moz-box-shadow: 0 0 1px #fff; -webkit-box-shadow: 0 0 1px #fff; box-shadow: 0 0 1px #fff; } 50% { -webkit-transform: rotate(145deg); opacity: 1; } 100% { -webkit-transform: rotate(-320deg); opacity: 0; } } @-webkit-keyframes a-c-load-anim1-c2 { 0% { -webkit-transform: rotate(0deg); } 100% { -webkit-transform: rotate(360deg); } } /* Button */ .c-btn { position: relative; overflow: hidden; display: inline-block; box-sizing: border-box; border-radius: 4px; margin: 10px 0 0 0; padding: 0 32px 0 15px; white-space: nowrap; height: 32px; font-size: 1.25rem; line-height: 32px; background: #1086b5; color: #fdfdfd !important; } .c-btn:before { content: ' '; position: absolute; top: 0; left: auto; right: 0; background-position: -700px -100px; background-image: url(../imgs/vp.iconset_white.svg); transform-origin: 100% 0px; transform: scale(0.32); } .c-btn:before else { background-image: url(../imgs/vp.iconset_black.svg); } html.smf .c-btn { font-size: 1.2rem; padding: 0 32px 0 10px; } .c-btn:hover { background-color: #6bd2fa; color: #222 !important; } .c-more { position: inherit; overflow: hidden; display: inline-block; box-sizing: border-box; border-radius: 4px; vertical-align: bottom; white-space: nowrap; height: inherit; padding-left: 0.7em; padding-right: 0.7em; font-size: 1.1rem; line-height: inherit; background: #6bd2fa; color: #fdfdfd !important; } html.smf .c-more { font-size: 1rem; } .c-more:hover { background-color: #34aad9; color: #fdfdfd !important; } /* ===================================== メニューボックス */ .c-mnu { /* Color */ position: relative; width: auto; height: auto; margin: 0; padding: 10px 0 0 10px; overflow: visible; } .c-mnu.top-margin { margin-top: 20px; } .c-mnu.btm-margin { margin-bottom: 30px; } .c-mnu > ul { position: relative; width: auto; height: auto; white-space: nowrap; overflow: hidden; margin: 0; padding: 0; opacity: 0; pointer-events: none; } .c-mnu > ul li { position: relative; display: block; float: left; overflow: hidden; width: 180px; height: 180px; margin-top: 5px; margin-right: 5px; margin-bottom: 5px; margin-left: 5px; padding: 0; background: transparent; opacity: 0; pointer-events: none; -moz-box-shadow: 0 0 5px rgba(0, 0, 0, 0.5); -webkit-box-shadow: 0 0 5px rgba(0, 0, 0, 0.5); box-shadow: 0 0 5px rgba(0, 0, 0, 0.5); -moz-border-radius: 3px; -webkit-border-radius: 3px; border-radius: 3px; transition: all 0.5s cubic-bezier(0.18, 0.09, 0.55, 1); } .c-mnu > ul li p { height: 35px; font-size: 1.3rem; line-height: 35px; color: #222; margin: 0; padding: 0 10px; background: rgba(255, 255, 255, 0.8); -moz-border-radius: 3px 3px 0 0; -webkit-border-radius: 3px; border-radius: 3px 3px 0 0; } .c-mnu > ul li.color-a p { color: #2d4c85; } .c-mnu > ul li.color-b p { color: #2d7f8a; } .c-mnu > ul li.color-c p { color: #28785e; } .c-mnu > ul li.color-d p { color: #6b6824; } .c-mnu > ul li.color-e p { color: #635221; } .c-mnu > ul li.color-f p { color: #61204a; } .c-mnu > ul li .x-img { position: relative; overflow: hidden; width: 180px; height: 145px; margin: 0; padding: 0; box-sizing: border-box; background: rgba(0, 0, 0, 0.75) none no-repeat center center; background-size: cover; border-top: 2px solid #555; -moz-border-radius: 0 0 3px 3px; -webkit-border-radius: 0; border-radius: 0 0 3px 3px; } .c-mnu > ul li .x-img .x-ovr { position: absolute; top: 0; left: 0; right: 0; bottom: 0; margin: 0; background: transparent none; background-repeat: no-repeat; background-position: center center; background-size: contain; pointer-events: none; transition: all 1s cubic-bezier(0.25, 0.33, 0.33, 0.98); } .c-mnu > ul li.color-a .x-img { border-top: 2px solid #2d4c85; } .c-mnu > ul li.color-b .x-img { border-top: 2px solid #2d7f8a; } .c-mnu > ul li.color-c .x-img { border-top: 2px solid #28785e; } .c-mnu > ul li.color-d .x-img { border-top: 2px solid #6b6824; } .c-mnu > ul li.color-e .x-img { border-top: 2px solid #635221; } .c-mnu > ul li.color-f .x-img { border-top: 2px solid #61204a; } .c-mnu > ul li.active { opacity: 1; pointer-events: auto; } .c-mnu > ul li.active.h .x-img .x-ovr { transform: scale(1.15); } .c-mnu > ul.active { opacity: 1; pointer-events: auto; } html.ipad_pro .c-mnu > ul li { width: 220px; height: 220px; } html.ipad_pro .c-mnu > ul li p { font-size: 1.4rem; } html.ipad_pro .c-mnu > ul li .x-img { width: 220px; height: 185px; } html.smf .c-mnu > ul li { float: none; width: auto; height: auto; margin-top: 5px; margin-right: 5px; margin-bottom: 15px; margin-left: 5px; } html.smf .c-mnu > ul li .x-img { width: 100%; } /* ===================================== メディアボックス */ .c-mdbox { position: relative; width: 100%; height: auto; margin: 0; padding: 10px 0 0 10px; overflow: visible; } .c-mdbox.top-margin { margin-top: 20px; } .c-mdbox.btm-margin { margin-bottom: 30px; } .c-mdbox > ul { position: relative; width: auto; height: auto; white-space: nowrap; overflow: hidden; margin: 0; padding: 0; opacity: 0; pointer-events: none; } .c-mdbox > ul li { position: relative; display: block; float: left; overflow: hidden; width: 210px; height: 145px; margin-top: 5px; margin-right: 5px; margin-bottom: 5px; margin-left: 5px; padding: 0; background: transparent; opacity: 0; pointer-events: none; -moz-box-shadow: 0 0 5px rgba(0, 0, 0, 0.5); -webkit-box-shadow: 0 0 5px rgba(0, 0, 0, 0.5); box-shadow: 0 0 5px rgba(0, 0, 0, 0.5); -moz-border-radius: 3px; -webkit-border-radius: 3px; border-radius: 3px; transition: all 0.5s cubic-bezier(0.18, 0.09, 0.55, 1); } .c-mdbox > ul li p { z-index: 2; position: absolute; top: auto; left: 0; right: 0; bottom: 0; font-size: 1.3rem; line-height: 1.25em; color: #fdfdfd; margin: 0; padding: 25px 10px 10px 10px; background: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4gPHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGRlZnM+PGxpbmVhckdyYWRpZW50IGlkPSJncmFkIiBncmFkaWVudFVuaXRzPSJvYmplY3RCb3VuZGluZ0JveCIgeDE9IjAuNSIgeTE9IjAuMCIgeDI9IjAuNSIgeTI9IjEuMCI+PHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iIzAwMDAwMCIgc3RvcC1vcGFjaXR5PSIwLjAiLz48c3RvcCBvZmZzZXQ9IjIwcHgiIHN0b3AtY29sb3I9IiMwMDAwMDAiIHN0b3Atb3BhY2l0eT0iMC40Ii8+PHN0b3Agb2Zmc2V0PSI4MCUiIHN0b3AtY29sb3I9IiMwMDAwMDAiIHN0b3Atb3BhY2l0eT0iMC43Ii8+PC9saW5lYXJHcmFkaWVudD48L2RlZnM+PHJlY3QgeD0iMCIgeT0iMCIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgZmlsbD0idXJsKCNncmFkKSIgLz48L3N2Zz4g'); background: -moz-linear-gradient(270deg, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.4) 20px, rgba(0, 0, 0, 0.7) 80%); background: -webkit-linear-gradient(270deg, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.4) 20px, rgba(0, 0, 0, 0.7) 80%); background: linear-gradient(180deg, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.4) 20px, rgba(0, 0, 0, 0.7) 80%); -moz-border-radius: 0 0 3px 3px; -webkit-border-radius: 0; border-radius: 0 0 3px 3px; } .c-mdbox > ul li .x-img { z-index: 1; position: relative; overflow: hidden; width: 210px; height: 145px; margin: 0; padding: 0; box-sizing: border-box; background: rgba(255, 255, 255, 0.5); -moz-border-radius: 3px; -webkit-border-radius: 3px; border-radius: 3px; } .c-mdbox > ul li .x-img .x-ovr { position: absolute; top: 0; left: 0; right: 0; bottom: 0; margin: 0; background: transparent none; background-repeat: no-repeat; background-position: center center; background-size: contain; pointer-events: none; transition: all 1s cubic-bezier(0.25, 0.33, 0.33, 0.98); } .c-mdbox > ul li.active { opacity: 1; pointer-events: auto; } .c-mdbox > ul li.active.h .x-img .x-ovr { transform: scale(0.95); } .c-mdbox > ul.active { opacity: 1; pointer-events: auto; } html.ipad_pro .c-mdbox > ul li { width: 260px; height: 178x; } html.ipad_pro .c-mdbox > ul li p { font-size: 1.4rem; } html.ipad_pro .c-mdbox > ul li .x-img { width: 260px; height: 178x; } /* ===================================== progress 1
*/ .c-prog-cube { width: 33px; height: 33px; margin: 0 auto; display: block; position: relative; pointer-events: none; user-select: none; } .c-prog-cube * div { display: block; position: relative; pointer-events: none; user-select: none; } .c-prog-cube > .x-cube { width: 33%; height: 33%; background-color: #ccc; float: left; -webkit-animation: x-cubeGridScaleDelay 1.3s infinite ease-in-out; animation: x-cubeGridScaleDelay 1.3s infinite ease-in-out; } .c-prog-cube > .x-cube1 { -webkit-animation-delay: 0.2s; animation-delay: 0.2s; } .c-prog-cube > .x-cube2 { -webkit-animation-delay: 0.3s; animation-delay: 0.3s; } .c-prog-cube > .x-cube3 { -webkit-animation-delay: 0.4s; animation-delay: 0.4s; } .c-prog-cube > .x-cube4 { -webkit-animation-delay: 0.1s; animation-delay: 0.1s; } .c-prog-cube > .x-cube5 { -webkit-animation-delay: 0.2s; animation-delay: 0.2s; } .c-prog-cube > .x-cube6 { -webkit-animation-delay: 0.3s; animation-delay: 0.3s; } .c-prog-cube > .x-cube7 { -webkit-animation-delay: 0s; animation-delay: 0s; } .c-prog-cube > .x-cube8 { -webkit-animation-delay: 0.1s; animation-delay: 0.1s; } .c-prog-cube > .x-cube9 { -webkit-animation-delay: 0.2s; animation-delay: 0.2s; } @-webkit-keyframes x-cubeGridScaleDelay { 0%, 70%, 100% { -webkit-transform: scale3D(1, 1, 1); transform: scale3D(1, 1, 1); } 35% { -webkit-transform: scale3D(0, 0, 1); transform: scale3D(0, 0, 1); } } @keyframes x-cubeGridScaleDelay { 0%, 70%, 100% { -webkit-transform: scale3D(1, 1, 1); transform: scale3D(1, 1, 1); } 35% { -webkit-transform: scale3D(0, 0, 1); transform: scale3D(0, 0, 1); } } /* ===================================== progress 2
*/ .c-prog-circle { width: 40px; height: 40px; position: relative; } .c-prog-circle .x-cc { width: 100%; height: 100%; position: absolute; left: 0; top: 0; } .c-prog-circle .x-cc:before { content: ''; display: block; margin: 0 auto; width: 15%; height: 15%; background-color: #ccc; border-radius: 100%; -webkit-animation: x-ccFadeDelay 1.2s infinite ease-in-out both; animation: x-ccFadeDelay 1.2s infinite ease-in-out both; } .c-prog-circle .x-cc2 { -webkit-transform: rotate(30deg); -ms-transform: rotate(30deg); transform: rotate(30deg); } .c-prog-circle .x-cc3 { -webkit-transform: rotate(60deg); -ms-transform: rotate(60deg); transform: rotate(60deg); } .c-prog-circle .x-cc4 { -webkit-transform: rotate(90deg); -ms-transform: rotate(90deg); transform: rotate(90deg); } .c-prog-circle .x-cc5 { -webkit-transform: rotate(120deg); -ms-transform: rotate(120deg); transform: rotate(120deg); } .c-prog-circle .x-cc6 { -webkit-transform: rotate(150deg); -ms-transform: rotate(150deg); transform: rotate(150deg); } .c-prog-circle .x-cc7 { -webkit-transform: rotate(180deg); -ms-transform: rotate(180deg); transform: rotate(180deg); } .c-prog-circle .x-cc8 { -webkit-transform: rotate(210deg); -ms-transform: rotate(210deg); transform: rotate(210deg); } .c-prog-circle .x-cc9 { -webkit-transform: rotate(240deg); -ms-transform: rotate(240deg); transform: rotate(240deg); } .c-prog-circle .x-cc10 { -webkit-transform: rotate(270deg); -ms-transform: rotate(270deg); transform: rotate(270deg); } .c-prog-circle .x-cc11 { -webkit-transform: rotate(300deg); -ms-transform: rotate(300deg); transform: rotate(300deg); } .c-prog-circle .x-cc12 { -webkit-transform: rotate(330deg); -ms-transform: rotate(330deg); transform: rotate(330deg); } .c-prog-circle .x-cc2:before { -webkit-animation-delay: -1.1s; animation-delay: -1.1s; } .c-prog-circle .x-cc3:before { -webkit-animation-delay: -1s; animation-delay: -1s; } .c-prog-circle .x-cc4:before { -webkit-animation-delay: -0.9s; animation-delay: -0.9s; } .c-prog-circle .x-cc5:before { -webkit-animation-delay: -0.8s; animation-delay: -0.8s; } .c-prog-circle .x-cc6:before { -webkit-animation-delay: -0.7s; animation-delay: -0.7s; } .c-prog-circle .x-cc7:before { -webkit-animation-delay: -0.6s; animation-delay: -0.6s; } .c-prog-circle .x-cc8:before { -webkit-animation-delay: -0.5s; animation-delay: -0.5s; } .c-prog-circle .x-cc9:before { -webkit-animation-delay: -0.4s; animation-delay: -0.4s; } .c-prog-circle .x-cc10:before { -webkit-animation-delay: -0.3s; animation-delay: -0.3s; } .c-prog-circle .x-cc11:before { -webkit-animation-delay: -0.2s; animation-delay: -0.2s; } .c-prog-circle .x-cc12:before { -webkit-animation-delay: -0.1s; animation-delay: -0.1s; } @-webkit-keyframes x-ccFadeDelay { 0%, 39%, 100% { opacity: 0; } 40% { opacity: 1; } } @keyframes x-ccFadeDelay { 0%, 39%, 100% { opacity: 0; } 40% { opacity: 1; } } /* ===================================== progress 3
*/ .c-prog-spinner { width: 40px; height: 40px; background-color: #ccc; margin: 0; -webkit-animation: sk-rotateplane 1.2s infinite ease-in-out; animation: sk-rotateplane 1.2s infinite ease-in-out; } @-webkit-keyframes sk-rotateplane { 0% { -webkit-transform: perspective(120px); } 50% { -webkit-transform: perspective(120px) rotateY(180deg); } 100% { -webkit-transform: perspective(120px) rotateY(180deg) rotateX(180deg); } } @keyframes sk-rotateplane { 0% { transform: perspective(120px) rotateX(0deg) rotateY(0deg); -webkit-transform: perspective(120px) rotateX(0deg) rotateY(0deg); } 50% { transform: perspective(120px) rotateX(-180.1deg) rotateY(0deg); -webkit-transform: perspective(120px) rotateX(-180.1deg) rotateY(0deg); } 100% { transform: perspective(120px) rotateX(-180deg) rotateY(-179.9deg); -webkit-transform: perspective(120px) rotateX(-180deg) rotateY(-179.9deg); } } /* _cmn_docs.scss */ .c-doc { /* テーブル .x-char を付与すること .x-hold が付与されていると、スマフォになってもテーブルの表レイアウトを維持する */ /* -------------------------------------------------------------- リスト .x-char を付与すること */ } .c-doc p { font-size: 1.6rem; line-height: 1.5em; } .c-doc h1 { font-size: 5rem; line-height: 1.2em; margin: 0; padding: 10px 0 5px 0; color: #3d66b2; } body.basecolor-b .c-doc h1 { color: #36a1a8; } body.basecolor-c .c-doc h1 { color: #36a880; } body.basecolor-d .c-doc h1 { color: #a8a136; } body.basecolor-e .c-doc h1 { color: #a87b36; } body.basecolor-f .c-doc h1 { color: #a8368c; } .c-doc h2 { font-size: 3rem; margin: 0; padding: 10px 0 5px 0; } .c-doc h3 { font-size: 2.5rem; margin: 0; padding: 10px 0 5px 0; } .c-doc h4 { font-size: 2rem; margin: 0; padding: 10px 0 5px 0; } .c-doc h5 { font-size: 1.7rem; margin: 0; padding: 10px 0 5px 0; } html.tab_l:not(.ipad_pro) .c-doc p, html.tab_p .c-doc p { font-size: 1.33; } html.tab_l:not(.ipad_pro) .c-doc h1, html.tab_p .c-doc h1 { font-size: 4rem; } html.tab_l:not(.ipad_pro) .c-doc h2, html.tab_p .c-doc h2 { font-size: 2.5rem; padding: 10px 0 5px 0; } html.tab_l:not(.ipad_pro) .c-doc h3, html.tab_p .c-doc h3 { font-size: 2rem; padding: 10px 0 5px 0; } html.tab_l:not(.ipad_pro) .c-doc h4, html.tab_p .c-doc h4 { font-size: 1.7rem; padding: 10px 0 5px 0; } html.tab_l:not(.ipad_pro) .c-doc h5, html.tab_p .c-doc h5 { font-size: 1.4rem; padding: 10px 0 5px 0; } html.smf .c-doc p { font-size: 1.2rem; } html.smf .c-doc h1 { font-size: 3.5rem; } html.smf .c-doc h2 { font-size: 2rem; padding: 10px 0 5px 0; } html.smf .c-doc h3 { font-size: 1.7rem; padding: 10px 0 5px 0; } html.smf .c-doc h4 { font-size: 1.5rem; padding: 10px 0 5px 0; } html.smf .c-doc h5 { font-size: 1.3rem; padding: 10px 0 5px 0; } .c-doc p.x-subtitle { display: inline-block; margin: 15px 0 0 0; padding: 0.5em 0.7em; font-size: 1.8rem; line-height: 1em; color: #fdfdfd; background-color: #3d66b2; -moz-border-radius: 6px; -webkit-border-radius: 6px; border-radius: 6px; } body.basecolor-b .c-doc p.x-subtitle { background-color: #36a1a8; } body.basecolor-c .c-doc p.x-subtitle { background-color: #36a880; } body.basecolor-d .c-doc p.x-subtitle { background-color: #a8a136; } body.basecolor-e .c-doc p.x-subtitle { background-color: #a87b36; } body.basecolor-f .c-doc p.x-subtitle { background-color: #a8368c; } html.smf .c-doc p.x-subtitle { font-size: 1.4rem; } .c-doc .x-box { position: relative; overflow: hidden; margin: 0; padding: 0; } .c-doc .x-docbox { position: relative; overflow: hidden; margin: 0; padding: 20px 40px; max-width: 1200px; width: auto; } html.smf .c-doc .x-docbox { padding: 10px 15px; } .c-doc p.small { font-size: 1.2rem; } .c-doc input, .c-doc option, .c-doc select { padding: 0.75rem 1rem; font-size: 1.5rem; } .c-doc button[type="button"], .c-doc button[type="submit"] { padding: 0.75rem 1rem; border-width: 1px; background-color: #34589b; color: #fdfdfd; font-size: 1.5rem; } .c-doc button[type="submit"] { padding: 1.2rem 1.5rem; } .c-doc input[type="submit"] { -webkit-appearance: none; border-radius: 0; vertical-align: middle; text-align: center; } .c-doc table.x-char { position: relative; table-layout: auto; border-collapse: collapse; border-spacing: 0; width: auto; height: auto; margin: 15px 0 15px 5px; } .c-doc table.x-char.x-wide { width: 100%; box-sizing: border-box; margin: 15px 0; } .c-doc table.x-char tr { margin: 0; padding: 0; } .c-doc table.x-char th, .c-doc table.x-char td { border: 1px solid #ccc; margin: 0; padding: 10px; font-size: 1.25rem; line-height: 1.5em; font-weight: normal; text-align: left; vertical-align: top; } .c-doc table.x-char th { font-weight: bold; background-color: #fff6f2; } .c-doc table.x-char .nowrap, .c-doc table.x-char .x-nrp { text-overflow: ellipsis; white-space: nowrap; } .c-doc table.x-char .t-c { text-align: center; } .c-doc table.x-char .t-r { text-align: right; } .c-doc table.x-char .t-l { text-align: left; } html.tab_p .c-doc table.x-char, html.smf .c-doc table.x-char { display: block; margin: 10px 0 !important; padding: 0; overflow: hidden; margin: 15px 0 15px 10px; } html.tab_p .c-doc table.x-char.x-hold th, html.tab_p .c-doc table.x-char.x-hold td, html.smf .c-doc table.x-char.x-hold th, html.smf .c-doc table.x-char.x-hold td { font-size: 1.15rem; } html.tab_p .c-doc table.x-char:not(.x-hold) tbody, html.tab_p .c-doc table.x-char:not(.x-hold) tr, html.tab_p .c-doc table.x-char:not(.x-hold) td, html.tab_p .c-doc table.x-char:not(.x-hold) th, html.smf .c-doc table.x-char:not(.x-hold) tbody, html.smf .c-doc table.x-char:not(.x-hold) tr, html.smf .c-doc table.x-char:not(.x-hold) td, html.smf .c-doc table.x-char:not(.x-hold) th { display: block; position: relative; overflow: hidden; } html.tab_p .c-doc table.x-char:not(.x-hold) th, html.tab_p .c-doc table.x-char:not(.x-hold) td, html.smf .c-doc table.x-char:not(.x-hold) th, html.smf .c-doc table.x-char:not(.x-hold) td { border: 0px none; font-size: 1.3rem; } html.tab_p .c-doc table.x-char:not(.x-hold) th, html.smf .c-doc table.x-char:not(.x-hold) th { border-left: 2px solid #1086b5; padding: 0.2em 0 0.2em 0.5em; margin: 0.5em 0 0 0; } html.tab_p .c-doc table.x-char:not(.x-hold) td, html.smf .c-doc table.x-char:not(.x-hold) td { border-left: 2px solid #ddd; padding: 0.2em 0.2em 0.2em 1em; margin: 0.25em 0 0 0; } html.tab_p .c-doc table.x-char:not(.x-hold) .nowrap, html.smf .c-doc table.x-char:not(.x-hold) .nowrap { text-overflow: clip; white-space: normal; } .c-doc table.x-admin { position: relative; table-layout: auto; border-collapse: collapse; border-spacing: 0; width: auto; height: auto; margin: 15px 0 15px 5px; } .c-doc table.x-admin.x-wide { width: 100%; box-sizing: border-box; margin: 15px 0; } .c-doc table.x-admin tr { margin: 0; padding: 0; } .c-doc table.x-admin th, .c-doc table.x-admin td { color: #333; border-bottom: 1px solid #e5e5e5; margin: 0; padding: 10px; font-size: 1.25rem; line-height: 1.5em; font-weight: normal; text-align: left; vertical-align: top; } .c-doc table.x-admin th.x-noborder, .c-doc table.x-admin td.x-noborder { border-style: none; } .c-doc table.x-admin th { font-weight: bold; background-color: #dae2f5; } .c-doc table.x-admin .nowrap, .c-doc table.x-admin .x-nrp { text-overflow: ellipsis; white-space: nowrap; } .c-doc table.x-admin .t-c { text-align: center; } .c-doc table.x-admin .t-r { text-align: right; } .c-doc table.x-admin .t-l { text-align: left; } html.tab_p .c-doc table.x-admin, html.smf .c-doc table.x-admin { display: block; margin: 10px 0 !important; padding: 0; overflow: hidden; margin: 15px 0 15px 10px; } html.tab_p .c-doc table.x-admin.x-hold th, html.tab_p .c-doc table.x-admin.x-hold td, html.smf .c-doc table.x-admin.x-hold th, html.smf .c-doc table.x-admin.x-hold td { font-size: 1.15rem; } html.tab_p .c-doc table.x-admin:not(.x-hold) tbody, html.tab_p .c-doc table.x-admin:not(.x-hold) tr, html.tab_p .c-doc table.x-admin:not(.x-hold) td, html.tab_p .c-doc table.x-admin:not(.x-hold) th, html.smf .c-doc table.x-admin:not(.x-hold) tbody, html.smf .c-doc table.x-admin:not(.x-hold) tr, html.smf .c-doc table.x-admin:not(.x-hold) td, html.smf .c-doc table.x-admin:not(.x-hold) th { display: block; position: relative; overflow: hidden; } html.tab_p .c-doc table.x-admin:not(.x-hold) th, html.tab_p .c-doc table.x-admin:not(.x-hold) td, html.smf .c-doc table.x-admin:not(.x-hold) th, html.smf .c-doc table.x-admin:not(.x-hold) td { border: 0px none; font-size: 1.3rem; } html.tab_p .c-doc table.x-admin:not(.x-hold) th, html.smf .c-doc table.x-admin:not(.x-hold) th { border-left: 2px solid #1086b5; padding: 0.2em 0 0.2em 0.5em; margin: 0.5em 0 0 0; } html.tab_p .c-doc table.x-admin:not(.x-hold) td, html.smf .c-doc table.x-admin:not(.x-hold) td { border-left: 2px solid #ddd; padding: 0.2em 0.2em 0.2em 1em; margin: 0.25em 0 0 0; } html.tab_p .c-doc table.x-admin:not(.x-hold) .nowrap, html.smf .c-doc table.x-admin:not(.x-hold) .nowrap { text-overflow: clip; white-space: normal; } .c-doc table.x-editlist { position: relative; table-layout: auto; border-collapse: collapse; border-spacing: 0; width: auto; height: auto; margin: 15px 0 15px 5px; } .c-doc table.x-editlist.x-wide { width: 100%; box-sizing: border-box; margin: 15px 0; } .c-doc table.x-editlist tr { margin: 0; padding: 0; } .c-doc table.x-editlist th, .c-doc table.x-editlist td { color: #333; border-bottom: 1px solid #e5e5e5; margin: 0; padding: 3px; font-size: 1.25rem; line-height: 1.5em; font-weight: normal; text-align: left; vertical-align: top; } .c-doc table.x-editlist th.x-noborder, .c-doc table.x-editlist td.x-noborder { border-style: none; } .c-doc table.x-editlist th { font-weight: bold; background-color: #dae2f5; } .c-doc table.x-editlist input[type="text"] { width: 100%; min-width: 5em; padding: 0.1em; font-size: 1.2rem; } .c-doc table.x-editlist select { width: 100%; min-width: 5em; padding: 0.1em; font-size: 1.2rem; } .c-doc table.x-editlist option { padding: 0.1em 0.2em; font-size: 1.2rem; margin: 0; } .c-doc ul.x-char { position: relative; list-style: disc none outside; margin: 20px 0 0 20px; padding: 0; line-height: 0; } .c-doc ul.x-char.x-none { list-style-type: none; margin-left: 0px; } .c-doc ul.x-char.x-decimal { list-style-type: decimal; } .c-doc ul.x-char > li { overflow: visible; position: relative; margin: 0.75em 0 0 20px; padding: 0; font-size: 1.25rem; line-height: 1.5em; font-weight: normal; text-align: left; vertical-align: top; } .c-doc ul.x-char > li ul.x-char { margin: 0 0 0 10px; line-height: 0; } .c-doc ul.x-char > li ul.x-char > li { line-height: 1.5em; } /* dsb (DaShBoard) CSS */ .c-dsb { background-color: #555555 !important; color: #fafafa; font-size: 1.15rem; /* ---------------------- タブ */ /* ---------------------- リストテーブル */ } .c-dsb > .x-bs { position: relative; overflow: hidden; margin: 10px 10px 10px 20px; padding: 0; } .c-dsb hr { border-width: 1px 0 0 0; border-style: solid; border-color: #777777; height: 1px; background: transparent; } .c-dsb ul.x-tab { position: relative; list-style: none none inside; margin: 0 0 5px 0; padding: 0; } .c-dsb ul.x-tab > li { position: relative; display: inline-block; box-sizing: border-box; border: 1px solid #777777; border-radius: 3px; cursor: pointer; } .c-dsb ul.x-tab > li.h { background-color: #696969; } .c-dsb ul.x-tab > li.x-selected { background-color: #ccc; color: #222; } .c-dsb ul.x-tab > li p { margin: 0; padding: 0.5em 0.5em; line-height: 1em; } .c-dsb .x-box { position: relative; overflow: hidden; margin: 0 0 5px 0; padding: 0; box-sizing: border-box; border: 1px solid #777777; } .c-dsb .x-box .x-gridbase { display: block; position: relative; overflow: hidden; text-align: center; margin: 0; padding: 0 0; } .c-dsb .x-box .x-gridbase > .x-error { z-index: 3; position: relative; width: 100%; height: auto; min-height: 100px; margin: 0; padding: 0; pointer-events: none; user-select: none; display: flex; justify-content: center; align-items: center; } .c-dsb .x-box .x-gridbase > .x-error p { position: relative; width: auto; height: auto; max-width: 40%; padding: 25px 0; margin: 0; color: #fdfdfd; text-shadow: 0 0 10px #ff3232; } .c-dsb .x-box .x-gridbase > .x-error-back { z-index: 2; position: absolute; top: 0; left: 0; right: 0; bottom: 0; width: 100%; height: auto; min-height: 100px; display: flex; justify-content: center; align-items: center; background-color: rgba(0, 0, 0, 0.7); pointer-events: auto; } .c-dsb .x-box .x-gridbase > .x-progress { z-index: 2; position: absolute; top: 0; left: 0; right: 0; bottom: 0; width: 100%; height: auto; min-height: 100px; display: flex; justify-content: center; align-items: center; background-color: rgba(0, 0, 0, 0.7); pointer-events: auto; } .c-dsb .x-box .x-gridbase > .x-progress .x-prog-bar { position: absolute; top: 0; left: 0; right: 0; bottom: auto; width: 100%; height: 1px; background-color: #d63636; border-top: 1px solid #ff8426; } .c-dsb .x-box:not(.x-show) { display: none; } .c-dsb .x-box.x-busy .x-gridbase { min-height: 150px; } .c-dsb .x-box:not(.x-busy) .x-gridbase > .x-progress { display: none; } .c-dsb .x-box:not(.x-onerror) .x-gridbase > .x-error { display: none; } .c-dsb .x-box:not(.x-onerror) .x-gridbase > .x-error-back { display: none; } .c-dsb .x-box .x-grid-status { position: relative; overflow: hidden; margin: 5px; padding: 0.5em 0 0 0; font-size: 1.2rem; line-height: 1em; color: #ccc; text-align: right; } .c-dsb .x-box .x-gridhd { position: relative; overflow: hidden; margin: 0; padding: 0; width: 100%; height: auto; pointer-events: none; user-select: none; border-width: 1px; border-color: #333 #aaa #aaa #333; border-style: solid; background: #404040; box-shadow: inset 0 0 15px rgba(0, 0, 0, 0.6); } .c-dsb .x-box .x-gridhd > div { position: relative; overflow: hidden; margin: 3px; padding: 0; text-align: center; } .c-dsb .x-box .x-gridhd.x-disabled .xg-txt { pointer-events: none !important; user-select: none !important; } .c-dsb .x-box .x-gridhd.x-disabled .xg-sel { opacity: 0.5; pointer-events: none !important; user-select: none !important; } .c-dsb .x-box .x-gridhd.x-disabled .xg-btn { opacity: 0.5; pointer-events: none !important; user-select: none !important; } .c-dsb .x-box .x-gridhd.x-disabled .xg-txt select, .c-dsb .x-box .x-gridhd.x-disabled .xg-txt input, .c-dsb .x-box .x-gridhd.x-disabled .xg-txt button { pointer-events: none !important; user-select: none !important; } .c-dsb .x-box .x-gridhd.x-disabled .xg-sel select, .c-dsb .x-box .x-gridhd.x-disabled .xg-sel input, .c-dsb .x-box .x-gridhd.x-disabled .xg-sel button { pointer-events: none !important; user-select: none !important; } .c-dsb .x-box .x-gridhd.x-disabled .xg-btn select, .c-dsb .x-box .x-gridhd.x-disabled .xg-btn input, .c-dsb .x-box .x-gridhd.x-disabled .xg-btn button { pointer-events: none !important; user-select: none !important; } .c-dsb .x-box .x-gridhd:not(.x-selective-mode):not(.x-disabled) .xg-txt.is-selector:not(.is-selectbtn) { pointer-events: none !important; user-select: none !important; } .c-dsb .x-box .x-gridhd:not(.x-selective-mode):not(.x-disabled) .xg-sel.is-selector:not(.is-selectbtn) { opacity: 0.5; pointer-events: none !important; user-select: none !important; } .c-dsb .x-box .x-gridhd:not(.x-selective-mode):not(.x-disabled) .xg-btn.is-selector:not(.is-selectbtn) { opacity: 0.5; pointer-events: none !important; user-select: none !important; } .c-dsb .x-box .x-gridhd:not(.x-selective-mode):not(.x-disabled) .xg-txt.is-selector:not(.is-selectbtn) select, .c-dsb .x-box .x-gridhd:not(.x-selective-mode):not(.x-disabled) .xg-txt.is-selector:not(.is-selectbtn) input, .c-dsb .x-box .x-gridhd:not(.x-selective-mode):not(.x-disabled) .xg-txt.is-selector:not(.is-selectbtn) button { pointer-events: none !important; user-select: none !important; } .c-dsb .x-box .x-gridhd:not(.x-selective-mode):not(.x-disabled) .xg-sel.is-selector:not(.is-selectbtn) select, .c-dsb .x-box .x-gridhd:not(.x-selective-mode):not(.x-disabled) .xg-sel.is-selector:not(.is-selectbtn) input, .c-dsb .x-box .x-gridhd:not(.x-selective-mode):not(.x-disabled) .xg-sel.is-selector:not(.is-selectbtn) button { pointer-events: none !important; user-select: none !important; } .c-dsb .x-box .x-gridhd:not(.x-selective-mode):not(.x-disabled) .xg-btn.is-selector:not(.is-selectbtn) select, .c-dsb .x-box .x-gridhd:not(.x-selective-mode):not(.x-disabled) .xg-btn.is-selector:not(.is-selectbtn) input, .c-dsb .x-box .x-gridhd:not(.x-selective-mode):not(.x-disabled) .xg-btn.is-selector:not(.is-selectbtn) button { pointer-events: none !important; user-select: none !important; } .c-dsb .x-box .x-gridhd.x-selective-mode { background-color: #353535; } .c-dsb .x-box .x-gridhd.x-selective-mode .xg-btn.is-selector { border-color: #5fd473; } .c-dsb .x-box .x-gridhd.x-selective-mode .xg-txt:not(.is-selector) { pointer-events: none !important; user-select: none !important; } .c-dsb .x-box .x-gridhd.x-selective-mode .xg-sel:not(.is-selector) { opacity: 0.5; pointer-events: none !important; user-select: none !important; } .c-dsb .x-box .x-gridhd.x-selective-mode .xg-btn:not(.is-selector) { opacity: 0.5; pointer-events: none !important; user-select: none !important; } .c-dsb .x-box .x-gridhd.x-selective-mode .xg-txt:not(.is-selector) select, .c-dsb .x-box .x-gridhd.x-selective-mode .xg-txt:not(.is-selector) input, .c-dsb .x-box .x-gridhd.x-selective-mode .xg-txt:not(.is-selector) button { pointer-events: none !important; user-select: none !important; } .c-dsb .x-box .x-gridhd.x-selective-mode .xg-sel:not(.is-selector) select, .c-dsb .x-box .x-gridhd.x-selective-mode .xg-sel:not(.is-selector) input, .c-dsb .x-box .x-gridhd.x-selective-mode .xg-sel:not(.is-selector) button { pointer-events: none !important; user-select: none !important; } .c-dsb .x-box .x-gridhd.x-selective-mode .xg-btn:not(.is-selector) select, .c-dsb .x-box .x-gridhd.x-selective-mode .xg-btn:not(.is-selector) input, .c-dsb .x-box .x-gridhd.x-selective-mode .xg-btn:not(.is-selector) button { pointer-events: none !important; user-select: none !important; } .c-dsb .x-box .x-gridhd .x-useicn.icn-hint:before { background-position: -1400px -200px; background-image: url(../imgs/vp.iconset_white.svg); transform-origin: 0% 0%; transform: scale(0.3); } .c-dsb .x-box .x-gridhd .x-useicn.icn-hint:before else { background-image: url(../imgs/vp.iconset_black.svg); } .c-dsb .x-box .x-gridhd .x-useicn.icn-alert:before { background-position: -1500px -200px; background-image: url(../imgs/vp.iconset_white.svg); transform-origin: 0% 0%; transform: scale(0.3); } .c-dsb .x-box .x-gridhd .x-useicn.icn-alert:before else { background-image: url(../imgs/vp.iconset_black.svg); } .c-dsb .x-box .x-gridhd .x-useicn.icn-caution:before { background-position: -1600px -200px; background-image: url(../imgs/vp.iconset_white.svg); transform-origin: 0% 0%; transform: scale(0.3); } .c-dsb .x-box .x-gridhd .x-useicn.icn-caution:before else { background-image: url(../imgs/vp.iconset_black.svg); } .c-dsb .x-box .x-gridhd .x-useicn.icn-info:before { background-position: -1700px -200px; background-image: url(../imgs/vp.iconset_white.svg); transform-origin: 0% 0%; transform: scale(0.3); } .c-dsb .x-box .x-gridhd .x-useicn.icn-info:before else { background-image: url(../imgs/vp.iconset_black.svg); } .c-dsb .x-box .x-gridhd .x-useicn.icn-gear:before { background-position: -1800px -200px; background-image: url(../imgs/vp.iconset_white.svg); transform-origin: 0% 0%; transform: scale(0.3); } .c-dsb .x-box .x-gridhd .x-useicn.icn-gear:before else { background-image: url(../imgs/vp.iconset_black.svg); } .c-dsb .x-box .x-gridhd .x-useicn.icn-plus:before { background-position: -500px -1100px; background-image: url(../imgs/vp.iconset_white.svg); transform-origin: 0% 0%; transform: scale(0.3); } .c-dsb .x-box .x-gridhd .x-useicn.icn-plus:before else { background-image: url(../imgs/vp.iconset_black.svg); } .c-dsb .x-box .x-gridhd .x-useicn.icn-minus:before { background-position: -600px -1100px; background-image: url(../imgs/vp.iconset_white.svg); transform-origin: 0% 0%; transform: scale(0.3); } .c-dsb .x-box .x-gridhd .x-useicn.icn-minus:before else { background-image: url(../imgs/vp.iconset_black.svg); } .c-dsb .x-box .x-gridhd .x-useicn.icn-top:before { background-position: -1000px -1200px; background-image: url(../imgs/vp.iconset_white.svg); transform-origin: 0% 0%; transform: scale(0.3); } .c-dsb .x-box .x-gridhd .x-useicn.icn-top:before else { background-image: url(../imgs/vp.iconset_black.svg); } .c-dsb .x-box .x-gridhd .x-useicn.icn-end:before { background-position: -900px -1200px; background-image: url(../imgs/vp.iconset_white.svg); transform-origin: 0% 0%; transform: scale(0.3); } .c-dsb .x-box .x-gridhd .x-useicn.icn-end:before else { background-image: url(../imgs/vp.iconset_black.svg); } .c-dsb .x-box .x-gridhd .x-useicn.icn-next:before { background-position: -700px -1200px; background-image: url(../imgs/vp.iconset_white.svg); transform-origin: 0% 0%; transform: scale(0.3); } .c-dsb .x-box .x-gridhd .x-useicn.icn-next:before else { background-image: url(../imgs/vp.iconset_black.svg); } .c-dsb .x-box .x-gridhd .x-useicn.icn-prev:before { background-position: -800px -1200px; background-image: url(../imgs/vp.iconset_white.svg); transform-origin: 0% 0%; transform: scale(0.3); } .c-dsb .x-box .x-gridhd .x-useicn.icn-prev:before else { background-image: url(../imgs/vp.iconset_black.svg); } .c-dsb .x-box .x-gridhd .x-useicn.icn-reload:before { background-position: -1700px -1100px; background-image: url(../imgs/vp.iconset_white.svg); transform-origin: 0% 0%; transform: scale(0.3); } .c-dsb .x-box .x-gridhd .x-useicn.icn-reload:before else { background-image: url(../imgs/vp.iconset_black.svg); } .c-dsb .x-box .x-gridhd .x-useicn.icn-select:before { background-position: 0px -2000px; background-image: url(../imgs/vp.iconset_white.svg); transform-origin: 0% 0%; transform: scale(0.3); } .c-dsb .x-box .x-gridhd .x-useicn.icn-select:before else { background-image: url(../imgs/vp.iconset_black.svg); } .c-dsb .x-box .x-gridhd .x-useicn.icn-unselect:before { background-position: -100px -2000px; background-image: url(../imgs/vp.iconset_white.svg); transform-origin: 0% 0%; transform: scale(0.3); } .c-dsb .x-box .x-gridhd .x-useicn.icn-unselect:before else { background-image: url(../imgs/vp.iconset_black.svg); } .c-dsb .x-box .x-gridhd .x-useicn.icn-lupe:before { background-position: -200px -200px; background-image: url(../imgs/vp.iconset_white.svg); transform-origin: 0% 0%; transform: scale(0.3); } .c-dsb .x-box .x-gridhd .x-useicn.icn-lupe:before else { background-image: url(../imgs/vp.iconset_black.svg); } .c-dsb .x-box .x-gridhd .x-useicn.icn-order:before { background-position: -700px -2000px; background-image: url(../imgs/vp.iconset_white.svg); transform-origin: 0% 0%; transform: scale(0.3); } .c-dsb .x-box .x-gridhd .x-useicn.icn-order:before else { background-image: url(../imgs/vp.iconset_black.svg); } .c-dsb .x-box .x-gridhd .x-useicn.icn-asc:before { background-position: -500px -2000px; background-image: url(../imgs/vp.iconset_white.svg); transform-origin: 0% 0%; transform: scale(0.3); } .c-dsb .x-box .x-gridhd .x-useicn.icn-asc:before else { background-image: url(../imgs/vp.iconset_black.svg); } .c-dsb .x-box .x-gridhd .x-useicn.icn-desc:before { background-position: -600px -2000px; background-image: url(../imgs/vp.iconset_white.svg); transform-origin: 0% 0%; transform: scale(0.3); } .c-dsb .x-box .x-gridhd .x-useicn.icn-desc:before else { background-image: url(../imgs/vp.iconset_black.svg); } .c-dsb .x-box .x-gridhd .x-useicn.icn-sort:before { background-position: -800px -2000px; background-image: url(../imgs/vp.iconset_white.svg); transform-origin: 0% 0%; transform: scale(0.3); } .c-dsb .x-box .x-gridhd .x-useicn.icn-sort:before else { background-image: url(../imgs/vp.iconset_black.svg); } .c-dsb .x-box .x-gridhd .xg-txt { position: relative; overflow: hidden; display: inline-block; width: auto; height: 32px; box-sizing: border-box; pointer-events: none; user-select: none; } .c-dsb .x-box .x-gridhd .xg-txt p { padding: 0 5px; margin: 0; font-size: 1.2rem; line-height: 32px; color: #7bd923; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .c-dsb .x-box .x-gridhd .xg-sel { position: relative; overflow: hidden; display: inline-block; width: auto; height: 32px; box-sizing: border-box; padding: 0 6px; background: #606060; white-space: nowrap; } .c-dsb .x-box .x-gridhd .xg-sel p { display: inline-block; padding: 0; margin: 0; vertical-align: top; font-size: 1.2rem; line-height: 32px; color: #7bd923; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .c-dsb .x-box .x-gridhd .xg-sel select { outline: none; overflow: hidden; display: inline-block; text-overflow: ellipsis; width: auto; height: 26px; box-sizing: border-box; border-style: none; background: #eee; color: #222; pointer-events: auto; padding: 0 0.1em; margin: 3px 0; font-size: 1.25rem; vertical-align: top; text-decoration: none; } .c-dsb .x-box .x-gridhd .xg-sel select option { background: #eee; color: #222; font-size: 1.25rem; vertical-align: middle; text-decoration: none; pointer-events: auto; padding: 0.1em 0.3em; margin: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .c-dsb .x-box .x-gridhd .xg-sel select:focus { background: #fff9d6; border-color: #f2c530; } .c-dsb .x-box .x-gridhd .xg-sel select:invalid { background: #ffdede; border-color: #e01212; } .c-dsb .x-box .x-gridhd .xg-sel select[disabled] { color: #eee; background: #404040; } .c-dsb .x-box .x-gridhd .xg-sel.x-useicn select { margin-left: 30px; } .c-dsb .x-box .x-gridhd .xg-sel.x-useicn:before { content: ' '; position: absolute; top: 0; left: 0; } .c-dsb .x-box .x-gridhd .xg-btn { position: relative; overflow: hidden; display: inline-block; width: auto; height: 32px; border: 1px solid #606060; box-sizing: border-box; background: #606060; cursor: pointer; pointer-events: auto; } .c-dsb .x-box .x-gridhd .xg-btn p { padding: 0 10px; margin: 0; font-size: 1.2rem; line-height: 32px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; user-select: none; } .c-dsb .x-box .x-gridhd .xg-btn.x-useicn { min-width: 32px; } .c-dsb .x-box .x-gridhd .xg-btn.x-useicn p { padding-left: 35px; } .c-dsb .x-box .x-gridhd .xg-btn.x-useicn:before { content: ' '; position: absolute; top: 0; left: 0; } .c-dsb .x-box .x-gridhd .xg-btn:hover { border-color: #ffd04f; background-color: #6f6f6f; box-shadow: 0 0 5px 1px rgba(255, 255, 255, 0.5); } .c-dsb .x-box .x-gridhd .xg-btn.x-disabled { cursor: default; pointer-events: none; border-color: #444; } .c-dsb .x-box .x-gridhd .xg-btn.x-disabled p { color: #aaa; } .c-dsb .x-box .x-gridhd .xg-btn.x-disabled.x-useicn:before { opacity: 0.5; } .c-dsb table.x-grid { z-index: 1; position: relative; table-layout: auto; border-collapse: separate; border-spacing: 0; width: 100%; height: auto; margin: 0; } .c-dsb table.x-grid.x-selective-mode tr.x-selected td { border-bottom: 1px solid #9a9a9a !important; } .c-dsb table.x-grid.x-locked { opacity: 0.5; pointer-events: none !important; user-select: none !important; } .c-dsb table.x-grid tr { margin: 0; padding: 0; user-select: none; } .c-dsb table.x-grid tr th { background-color: #333; border-width: 0px 0px 1px 1px; border-style: none none solid dotted; border-color: #000 #000 #333 #777777; } .c-dsb table.x-grid tr th p { font-size: 1.2rem; padding: 0.25em 0.5em; margin: 0; color: #ccc; text-shadow: 0 0 1px #000; } .c-dsb table.x-grid tr th:first-child { border-left: 0px none; } .c-dsb table.x-grid tr td { border-width: 1px 0px 1px 1px; border-style: solid none solid dotted; border-color: #777777 #000 #333 #777777; } .c-dsb table.x-grid tr td p { font-size: 1.2rem; padding: 0.25em 0.5em; margin: 0; } .c-dsb table.x-grid tr td.fmt-str { text-align: left; } .c-dsb table.x-grid tr td.fmt-num { text-align: right; white-space: nowrap; } .c-dsb table.x-grid tr td.fmt-guid { overflow: visible; text-align: center; } .c-dsb table.x-grid tr td.fmt-guid p { display: inline-block; font-size: 1rem; line-height: 1em; white-space: nowrap; background: #a82d58; color: #fdfdfd; margin: 0 0.2em; padding: 0.3em 0.3em; border-radius: 2px; } .c-dsb table.x-grid tr td.fmt-guid p.guid { display: none; position: absolute; background: #222; width: auto; height: auto; margin: 20px 0 0 5px; padding: 0.3em; font-size: 1.2rem; color: #fdfdfd; border: 1px solid #999; box-shadow: 0 0 6px rgba(0, 0, 0, 0.8); } .c-dsb table.x-grid tr td.fmt-guid:hover p.guid { display: block; } .c-dsb table.x-grid tr td.fmt-strselect { padding: 4px 2px 2px 4px; vertical-align: top; } .c-dsb table.x-grid tr td.fmt-strselect p { display: inline-block; font-size: 1.1rem; line-height: 1em; white-space: nowrap; background: #222; color: #a4cbf5; margin: 0 2px 2px 0; padding: 0.3em 0.3em; border-radius: 2px; float: left; } .c-dsb table.x-grid tr td.mode-relation { text-align: center; } .c-dsb table.x-grid tr td.mode-relation p { display: inline-block; font-size: 1.2rem; line-height: 1em; white-space: nowrap; background: #404040; color: #fdfdfd; margin: 0 0.2em; padding: 0.3em 0.3em; border-radius: 2px; } .c-dsb table.x-grid tr td:first-child { border-left: 0px none; } .c-dsb table.x-grid tr[data-hov] { cursor: pointer; } .c-dsb table.x-grid tr.h { background-color: #696969; } .c-dsb table.x-grid tr.x-selected { background-color: #707070; } .c-dsb table.x-grid tr.x-selected td { border-bottom: 1px solid #e00; } /* dsb (DaShBoard) CSS */ /* ================================ (dsb editor form) フォーム共通 .c-rightbox クラス用 */ .c-dsb-editor { /* ================================ (dsb editor form) フォーム用テキストセレクタ・フィールド */ /* ================================ (dsb editor form) 経度緯度・フィールド */ /* ================================ (dsb editor form) ファイルアップロード */ } .c-dsb-editor input, .c-dsb-editor option, .c-dsb-editor select { padding: 0.75rem 1rem; font-size: 1.25rem; } .c-dsb-editor button { outline: none; appearance: none; -webkit-appearance: none; border: 1px solid #888; border-radius: 5px; background: #404040; color: #fdfdfd; font-size: 1.33rem; vertical-align: middle; text-align: center; text-decoration: none; padding: 0.6em 1em; cursor: pointer; } .c-dsb-editor button:hover { background-color: #333; } .c-dsb-editor button:active { background-color: #777; text-shadow: 0 1px #333; } .c-dsb-editor button[type="submit"], .c-dsb-editor button.x-submit { border-color: #f5d93d; } .c-dsb-editor button[disabled] { color: #999; pointer-events: none; border-color: #666; } .c-dsb-editor select { outline: none; overflow: hidden; text-overflow: ellipsis; width: 100%; box-sizing: border-box; background: #eee; color: #222; padding: 0.3em 0.1em; margin: 0 0 12px 0; font-size: 1.25rem; vertical-align: middle; text-decoration: none; } .c-dsb-editor select option { background: #eee; color: #222; font-size: 1.25rem; vertical-align: middle; text-decoration: none; padding: 0.1em 0.3em; margin: 0; } .c-dsb-editor select:focus { background: #fff9d6; border-color: #f2c530; } .c-dsb-editor select:invalid { background: #ffdede; border-color: #e01212; } .c-dsb-editor select[disabled] { color: #eee; background: #404040; } .c-dsb-editor input[type="text"], .c-dsb-editor input[type="number"] { outline: none; appearance: none; -webkit-appearance: none; border: 1px solid #888; border-radius: none; background: #f5f5f5; color: #222; font-size: 1.25rem; vertical-align: middle; text-decoration: none; padding: 0.4em 0.5em; margin: 0 0 12px 0; width: 100%; box-sizing: border-box; } .c-dsb-editor input[type="text"]:focus, .c-dsb-editor input[type="number"]:focus { background: #fff9d6; border-color: #f2c530; } .c-dsb-editor input[type="text"]:invalid, .c-dsb-editor input[type="number"]:invalid { background: #ffdede; border-color: #e01212; } .c-dsb-editor input[type="text"][readonly], .c-dsb-editor input[type="number"][readonly] { color: #eee; background: #404040; } .c-dsb-editor textarea { outline: none; appearance: none; -webkit-appearance: none; resize: vertical; border: 1px solid #888; border-radius: none; background: #f5f5f5; color: #222; font-size: 1rem; line-height: 1.2em; text-decoration: none; padding: 0.4em 0.5em; margin: 0 0 12px 0; width: 100%; min-height: 15em; box-sizing: border-box; } .c-dsb-editor textarea:focus { background: #fff9d6; border-color: #f2c530; } .c-dsb-editor textarea:invalid { background: #ffdede; border-color: #e01212; } .c-dsb-editor textarea[readonly] { color: #eee; background: #404040; } .c-dsb-editor input[type="submit"] { -webkit-appearance: none; border-radius: 0; vertical-align: middle; text-align: center; } .c-dsb-editor form { position: relative; overflow: hidden; margin: 0 15px 15px 15px; padding: 0; /* グループフィールドは並列に表示 */ } .c-dsb-editor form.x-always-disabled { user-select: none !important; pointer-events: none !important; opacity: 0.6 !important; } .c-dsb-editor form.x-always-disabled .xbs-fld { user-select: none !important; pointer-events: none !important; } .c-dsb-editor form.x-always-disabled input, .c-dsb-editor form.x-always-disabled select, .c-dsb-editor form.x-always-disabled textarea, .c-dsb-editor form.x-always-disabled option { user-select: none !important; pointer-events: none !important; } .c-dsb-editor form h1 { font-size: 3rem; color: #fdfdfd; padding: 0.2em 0; margin: 0; } .c-dsb-editor form .xbs-fldgrp { position: relative; overflow: hidden; } .c-dsb-editor form .xbs-fld { position: relative; overflow: hidden; } .c-dsb-editor form .xbs-fld p.xbs-fld-cap { width: 25%; position: absolute; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: #eee; padding: 0.3em 0 0 0; margin: 0; text-shadow: 0 -1px #000; font-size: 1.2rem; } .c-dsb-editor form .xbs-fld .xbs-fld-var { display: block; position: relative; overflow: hidden; margin: 0 0 0 26%; padding: 0; min-height: 25px; } .c-dsb-editor form .xbs-fld .xbs-fld-var > p { position: absolute; overflow: hidden; color: #ddd; padding: 0.3em 0 0 0; margin: 0; font-size: 1.2rem; } .c-dsb-editor form .xbs-fldgrp.xbs-fldgrp-2 .xbs-fld:nth-child(odd) { float: left; width: 49%; } .c-dsb-editor form .xbs-fldgrp.xbs-fldgrp-2 .xbs-fld { float: right; width: 49%; } .c-dsb-editor form hr { clear: both; width: 100%; height: 1px; border-width: 1px 0 0 0; border-style: solid; border-color: #555; margin: 3px 0; } .c-dsb-editor form .xbs-fld-footer { position: relative; overflow: hidden; margin: 10px 15px 30px 15px; padding: 0; } .c-dsb-editor form .xbs-fld-footer button { width: 49%; float: right; } .c-dsb-editor form .xbs-fld-footer button:nth-child(odd) { float: left; clear: both; } .c-dsb-editor .xbs-form-textselect { position: relative; overflow: hidden; margin: 0; } .c-dsb-editor .xbs-form-textselect .x-items { position: relative; overflow: hidden; margin: 1px 0 12px 0; padding: 4px 2px 2px 4px; background: #303030; box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.7); border-radius: 4px; vertical-align: top; cursor: pointer; border: 1px solid #222; box-sizing: border-box; } .c-dsb-editor .xbs-form-textselect .x-items:hover { border-color: #f5e58e; } .c-dsb-editor .xbs-form-textselect .x-items p { pointer-events: none; user-select: none; display: inline-block; font-size: 1.2rem; line-height: 1em; white-space: nowrap; background: #ededed; color: #222; margin: 0 2px 2px 0; padding: 0.4em 0.6em; border-radius: 2px; float: left; } .c-dsb-editor .xbs-form-textselect .x-items p.x-none { background: #555; color: #ddd; } .c-dsb-editor .xbs-form-latlng { position: relative; overflow: hidden; background: #303030; box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.7); margin-bottom: 10px !important; } .c-dsb-editor .xbs-form-latlng .x-input { position: relative; overflow: hidden; margin: 5px; padding: 0; } .c-dsb-editor .xbs-form-latlng .x-input .x-lat { float: left; width: 38%; margin: 0 1% 0 0; } .c-dsb-editor .xbs-form-latlng .x-input .x-lng { float: left; width: 38%; margin: 0 1% 0 0; } .c-dsb-editor .xbs-form-latlng .x-input button { float: right; width: 10%; margin: 0; padding: 0.4em 0.5em; } .c-dsb-editor .xbs-file-up { position: relative; overflow: hidden; background: #303030; box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.7); margin-bottom: 10px !important; } .c-dsb-editor .xbs-file-up p.x-err { overflow: hidden; text-align: center; padding: 6px 0; font-size: 1.2rem; margin: 0; color: #999; } .c-dsb-editor .xbs-file-up .x-mini-imglist { position: relative; overflow: hidden; min-height: 10px; padding: 10px 5px 5px 10px; margin: 0; } .c-dsb-editor .xbs-file-up .x-mini-imglist > p { margin: 0; padding: 0; color: #ccc; font-size: 1.2rem; } .c-dsb-editor .xbs-file-up .x-mini-imglist .x-imgt { position: relative; overflow: hidden; float: left; width: 40px; height: 40px; margin: 0 5px 5px 0; box-sizing: border-box; border: 1px solid #999; background-image: none; background-color: #222; background-repeat: no-repeat; background-size: cover; } .c-dsb-editor .xbs-file-up .x-mini-imglist .x-imgt.x-editable { pointer-events: auto; cursor: pointer; } .c-dsb-editor .xbs-file-up .x-mini-imglist .x-imgt.x-editable:hover { border-color: #f5e58e; } .c-dsb-editor .xbs-file-up .x-mini-imglist .x-filet { position: relative; overflow: hidden; box-sizing: border-box; border: 1px solid #999; font-size: 1.2rem; color: #ddd; text-overflow: ellipsis; white-space: nowrap; margin: 0; padding: 0; } .c-dsb-editor .xbs-file-up .x-mini-imglist .x-filet.x-editable { pointer-events: auto; cursor: pointer; } .c-dsb-editor .xbs-file-up .x-mini-imglist .x-filet.x-editable:hover { border-color: #f5e58e; } .c-dsb-editor .xbs-file-up .x-upform { position: relative; overflow: hidden; margin: 5px 10px 10px 10px; padding: 0; } /* ================================ (dsb editor Dialogbox) テキストセレクタ・ダイアログボックス */ .ex-txtselector-dlg { position: relative; overflow: hidden; } .ex-txtselector-dlg .x-items { position: relative; overflow-x: hidden; overflow-y: auto; margin: 0; padding: 0; width: 100%; height: auto; min-height: 100px; max-height: 460px; } .ex-txtselector-dlg .x-items > div { position: relative; overflow: hidden; margin: 15px; padding: 0; } .ex-txtselector-dlg .x-items > div p { overflow: hidden; border-radius: 3px; cursor: pointer; user-select: none; border: 1px solid #666; box-sizing: border-box; background: #666; margin: 0 0 5px 0; padding: 0.6em 0.8em; line-height: 1em; font-size: 1.2rem; color: #ddd; text-overflow: ellipsis; white-space: nowrap; } .ex-txtselector-dlg .x-items > div p:hover { border-color: #f5e58e; } .ex-txtselector-dlg .x-items > div p.x-selected { background-color: #8eab44; color: #fdfdfd; } .ex-txtselector-dlg .x-ft { position: relative; overflow: hidden; margin: 0; padding: 0; width: 100%; height: auto; } .ex-txtselector-dlg .x-ft > div { position: relative; overflow: hidden; margin: 15px; padding: 0; } .ex-txtselector-dlg .x-ft > div .x-clear { width: 9%; margin: 0 2% 0 0; float: left; clear: both; } .ex-txtselector-dlg .x-ft > div .x-all { width: 9%; margin: 0 2% 0 0; float: left; } .ex-txtselector-dlg .x-ft > div .x-cancel { width: 35%; float: left; } .ex-txtselector-dlg .x-ft > div .x-set { width: 38%; float: right; } .ex-txtselector-dlg .x-ft > div .x-stat { padding: 0 0 5px 0; margin: 0; font-size: 1.2rem; color: #fdfdfd; text-align: right; } .ex-txtselector-dlg button { outline: none; appearance: none; -webkit-appearance: none; box-sizing: border-box; margin: 0; border: 1px solid #888; border-radius: 5px; background: #404040; color: #fdfdfd; font-size: 1.25rem; height: 30px; vertical-align: middle; cursor: pointer; } .ex-txtselector-dlg button:hover { background-color: #333; } .ex-txtselector-dlg button:active { background-color: #777; text-shadow: 0 1px #333; } .ex-txtselector-dlg button[type="submit"], .ex-txtselector-dlg button.x-set { border-color: #f5d93d; } .ex-txtselector-dlg button[disabled] { color: #999; pointer-events: none; border-color: #666; } /* ================================ (dsb editor Dialogbox) GPS グローバル・ポジショニング入力ダイアログボックス */ .ex-findglobalpos input[type="text"], .ex-findglobalpos input[type="number"] { outline: none; appearance: none; -webkit-appearance: none; box-sizing: border-box; margin: 0; border: 1px solid #888; background: #eee; color: #222; padding: 0 0.5em; font-size: 1.25rem; height: 30px; vertical-align: middle; text-decoration: none; } .ex-findglobalpos input[type="text"]:focus, .ex-findglobalpos input[type="number"]:focus { background: #fff9d6; border-color: #f2c530; } .ex-findglobalpos input[type="text"]:invalid, .ex-findglobalpos input[type="number"]:invalid { background: #ffdede; border-color: #e01212; } .ex-findglobalpos input[type="text"][readonly], .ex-findglobalpos input[type="number"][readonly] { color: #eee; background: #404040; } .ex-findglobalpos button { outline: none; appearance: none; -webkit-appearance: none; box-sizing: border-box; margin: 0; border: 1px solid #888; border-radius: 5px; background: #404040; color: #fdfdfd; font-size: 1.25rem; height: 30px; vertical-align: middle; cursor: pointer; } .ex-findglobalpos button:hover { background-color: #333; } .ex-findglobalpos button:active { background-color: #777; text-shadow: 0 1px #333; } .ex-findglobalpos button[type="submit"], .ex-findglobalpos button.x-set { border-color: #f5d93d; } .ex-findglobalpos button[disabled] { color: #999; pointer-events: none; border-color: #666; } .ex-findglobalpos .x-top { clear: both; position: relative; overflow: hidden; margin: 15px 15px 10px 15px; padding: 0; } .ex-findglobalpos .x-top .x-cancel { width: 100%; } .ex-findglobalpos .x-head { clear: both; position: relative; overflow: hidden; margin: 0 15px 0 15px; padding: 0; } .ex-findglobalpos .x-head .x-txt { width: 70%; float: left; } .ex-findglobalpos .x-head .x-btn { width: 28%; float: right; } .ex-findglobalpos .x-foot { clear: both; position: relative; overflow: hidden; margin: 10px 15px 0 15px; padding: 0; } .ex-findglobalpos .x-foot .x-lat { width: 35%; float: left; margin: 0 1% 0 0; } .ex-findglobalpos .x-foot .x-lng { width: 35%; float: left; margin: 0 1% 0 0; } .ex-findglobalpos .x-foot .x-set { width: 25%; float: right; } .ex-findglobalpos .x-mapbase { position: relative; overflow: hidden; margin: 10px 15px 10px 15px; padding: 0; height: 400px; border: 1px solid #999; box-sizing: border-box; } .ex-findglobalpos .x-mapbase .x-map { z-index: 1; position: relative; overflow: hidden; margin: 0; padding: 0; width: 100%; height: 100%; } .ex-findglobalpos .x-mapbase .x-map-over { z-index: 2; position: absolute; overflow: hidden; margin: 0; padding: 0; top: 0; left: 0; right: 0; bottom: 0; width: 100%; height: 100%; background: transparent url(/imgs/dsb/gmap_center.png) no-repeat center center; pointer-events: none; user-select: none; } .ex-findglobalpos .x-note { margin: 0; padding: 5px 15px 15px 15px; font-size: 1.2rem; color: #eee; } .ex-fgp-fcon { position: relative; overflow: hidden; margin: 10px 15px 10px 15px; padding: 0; } .xbs-findbox { position: fixed; z-index: 30; top: 0; left: 0; right: 0; bottom: 0; width: 100%; height: 100%; margin: 0; padding: 0; background-color: rgba(0, 0, 0, 0.5); display: flex; justify-content: center; align-items: center; } .xbs-findbox.x-hide { display: none; visibility: hidden; } .xbs-findbox.x-hide * { pointer-events: none; user-select: none; } .xbs-findbox .x-findbox { position: relative; overflow-x: hidden; overflow-y: auto; width: 700px; height: auto; min-height: 100px; max-height: 90%; background-color: #555555; box-shadow: 0 0 10px 2px #000; box-sizing: border-box; border: 1px solid #777; } .xbs-findbox .x-findbox > .x-bs { position: relative; overflow: hidden; margin: 15px; padding: 0; } .xbs-findbox .x-findbox .x-closer { position: relative; width: 35px; height: 35px; pointer-events: auto; cursor: pointer; } .xbs-findbox .x-findbox .x-closer:before { content: ' '; position: absolute; top: 0; left: 0; background-position: -800px 0px; background-image: url(../imgs/vp.iconset_white.svg); transform-origin: 0% 0%; transform: scale(0.35); pointer-events: none; } .xbs-findbox .x-findbox .x-closer:before else { background-image: url(../imgs/vp.iconset_black.svg); } .xbs-findbox .x-findbox h1 { position: absolute; top: 0; left: auto; right: 0; font-size: 2rem; color: #fdfdfd; padding: 0; margin: 0; height: 35px; line-height: 35px; } .xbs-findbox .x-findbox p { color: #fdfdfd; } .xbs-findbox .x-findbox input[type="date"] { outline: none; appearance: none; -webkit-appearance: none; box-sizing: border-box; margin: 0; max-width: 100%; border: 1px solid #888; background: #eee; color: #222; padding: 0 0.5em; font-size: 1.25rem; height: 30px; vertical-align: middle; text-decoration: none; } .xbs-findbox .x-findbox input[type="date"]:focus { background: #fff9d6; border-color: #f2c530; } .xbs-findbox .x-findbox input[type="date"]:invalid { background: #ffdede; border-color: #e01212; } .xbs-findbox .x-findbox input[type="date"][readonly] { color: #eee; background: #404040; } .xbs-findbox .x-findbox input[type="text"], .xbs-findbox .x-findbox input[type="number"] { outline: none; appearance: none; -webkit-appearance: none; box-sizing: border-box; margin: 0; width: 100%; border: 1px solid #888; background: #eee; color: #222; padding: 0 0.5em; font-size: 1.25rem; height: 30px; vertical-align: middle; text-decoration: none; } .xbs-findbox .x-findbox input[type="text"]:focus, .xbs-findbox .x-findbox input[type="number"]:focus { background: #fff9d6; border-color: #f2c530; } .xbs-findbox .x-findbox input[type="text"]:invalid, .xbs-findbox .x-findbox input[type="number"]:invalid { background: #ffdede; border-color: #e01212; } .xbs-findbox .x-findbox input[type="text"][readonly], .xbs-findbox .x-findbox input[type="number"][readonly] { color: #eee; background: #404040; } .xbs-findbox .x-findbox button { outline: none; appearance: none; -webkit-appearance: none; box-sizing: border-box; margin: 0; border: 1px solid #888; border-radius: 5px; background: #404040; color: #fdfdfd; font-size: 1.25rem; height: 30px; vertical-align: middle; cursor: pointer; } .xbs-findbox .x-findbox button:hover { background-color: #333; } .xbs-findbox .x-findbox button:active { background-color: #777; text-shadow: 0 1px #333; } .xbs-findbox .x-findbox button[type="submit"], .xbs-findbox .x-findbox button.x-set { border-color: #f5d93d; } .xbs-findbox .x-findbox button.x-clear { border-color: #b8f53d; } .xbs-findbox .x-findbox button[disabled] { color: #999; pointer-events: none; border-color: #666; } .xbs-findbox .x-findbox select { outline: none; overflow: hidden; text-overflow: ellipsis; width: 95%; box-sizing: border-box; background: #eee; color: #222; padding: 0.3em 0.1em; margin: 0 0 12px 0; font-size: 1.25rem; vertical-align: middle; text-decoration: none; } .xbs-findbox .x-findbox select option { background: #eee; color: #222; font-size: 1.25rem; vertical-align: middle; text-decoration: none; padding: 0.1em 0.3em; margin: 0; } .xbs-findbox .x-findbox select:focus { background: #fff9d6; border-color: #f2c530; } .xbs-findbox .x-findbox select:invalid { background: #ffdede; border-color: #e01212; } .xbs-findbox .x-findbox select[disabled] { color: #eee; background: #404040; } .xbs-findbox .x-findbox .x-footer { position: relative; overflow: hidden; margin: 10px 15px 30px 15px; padding: 0; } .xbs-findbox .x-findbox .x-footer button { width: 32%; float: left; margin-left: 1%; } .xbs-findbox .x-findbox .x-footer button:first-child { margin-left: 0; } .xbs-findbox .x-findbox .x-footer button:nth-child(even) { width: 33%; } .xbs-findbox .x-findbox .x-footer button:last-child { float: right; margin-left: 0; } .xbs-findbox .x-findbox .x-fields { position: relative; overflow: hidden; width: 100%; height: auto; margin: 15px 0; padding: 0; /* ================================ (dsb editor form) 検索ダイアログ用テキストセレクタ・フィールド */ } .xbs-findbox .x-findbox .x-fields .x-fld { position: relative; overflow: hidden; width: 100%; height: auto; min-height: 30px; margin: 2px 0 0 0; padding: 0; } .xbs-findbox .x-findbox .x-fields .x-fld .x-hd { position: relative; overflow: hidden; float: left; width: 25%; height: 30px; margin: 0; padding: 0; } .xbs-findbox .x-findbox .x-fields .x-fld .x-hd p { line-height: 30px; font-size: 1.3rem; color: #fdfdfd; text-overflow: ellipsis; white-space: nowrap; padding: 0 10px; } .xbs-findbox .x-findbox .x-fields .x-fld .x-val { position: relative; overflow: hidden; float: left; width: 45%; height: auto; margin: 0 0 0 2%; padding: 0; } .xbs-findbox .x-findbox .x-fields .x-fld .x-cnd { position: relative; overflow: hidden; float: right; width: 25%; height: auto; margin: 0; padding: 0; } .xbs-findbox .x-findbox .x-fields .xbs-form-textselect { position: relative; overflow: hidden; margin: 0; } .xbs-findbox .x-findbox .x-fields .xbs-form-textselect .x-items { position: relative; overflow: hidden; margin: 1px 0 12px 0; padding: 4px 2px 2px 4px; background: #303030; box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.7); border-radius: 4px; vertical-align: top; cursor: pointer; border: 1px solid #222; box-sizing: border-box; } .xbs-findbox .x-findbox .x-fields .xbs-form-textselect .x-items:hover { border-color: #f5e58e; } .xbs-findbox .x-findbox .x-fields .xbs-form-textselect .x-items p { pointer-events: none; user-select: none; display: inline-block; font-size: 1.2rem; line-height: 1em; white-space: nowrap; background: #ededed; color: #222; margin: 0 2px 2px 0; padding: 0.4em 0.6em; border-radius: 2px; float: left; } .xbs-findbox .x-findbox .x-fields .xbs-form-textselect .x-items p.x-none { background: #555; color: #ddd; } /* Library CSS */ .c-lib { background-color: #fdfdfd !important; color: #222; font-size: 1.2rem; /* ---------------------- タブ */ /* ---------------------- リストテーブル */ } .c-lib > .x-bs { position: relative; overflow: hidden; margin: 10px 10px 10px 20px; padding: 0; } .c-lib hr { border-width: 1px 0 0 0; border-style: solid; border-color: #ddd; height: 1px; background: transparent; } .c-lib ul.x-tab { position: relative; list-style: none none inside; margin: 15px; padding: 0; } .c-lib ul.x-tab > li { position: relative; display: inline-block; box-sizing: border-box; border: 1px solid #ddd; border-radius: 3px; cursor: pointer; } .c-lib ul.x-tab > li.h { background-color: #e3deca; } .c-lib ul.x-tab > li.x-selected { background-color: #f5e295; color: #222; } .c-lib ul.x-tab > li p { margin: 0; padding: 0.5em 0.5em; line-height: 1em; } .c-lib .x-box { position: relative; overflow: hidden; margin: 0 0 5px 0; padding: 0; } .c-lib .x-box .x-listbase { display: block; position: relative; overflow: hidden; text-align: center; margin: 0; padding: 0 0; } .c-lib .x-box .x-listbase > .x-error { z-index: 3; position: relative; width: 100%; height: auto; min-height: 100px; margin: 0; padding: 0; pointer-events: none; user-select: none; display: flex; justify-content: center; align-items: center; } .c-lib .x-box .x-listbase > .x-error p { position: relative; width: auto; height: auto; max-width: 40%; padding: 25px 0; margin: 0; color: #fdfdfd; text-shadow: 0 0 10px #ff3232; } .c-lib .x-box .x-listbase > .x-error-back { z-index: 2; position: absolute; top: 0; left: 0; right: 0; bottom: 0; width: 100%; height: auto; min-height: 100px; display: flex; justify-content: center; align-items: center; background-color: rgba(0, 0, 0, 0.7); pointer-events: auto; } .c-lib .x-box .x-listbase > .x-progress { z-index: 2; position: absolute; top: 0; left: 0; right: 0; bottom: 0; width: 100%; height: auto; min-height: 100px; display: flex; justify-content: center; align-items: center; background-color: rgba(0, 0, 0, 0.7); pointer-events: auto; } .c-lib .x-box .x-listbase > .x-progress .x-prog-bar { position: absolute; top: 0; left: 0; right: 0; bottom: auto; width: 100%; height: 1px; background-color: #d63636; border-top: 1px solid #ff8426; } .c-lib .x-box .x-grid { display: block; position: relative; overflow: hidden; text-align: center; margin: 0; padding: 15px 0 0 15px; } .c-lib .x-box .x-grid .x-itm { position: relative; overflow: hidden; float: left; margin: 0 15px 15px 0; background: #404040 none; box-sizing: border-box; border: 1px solid #111; border-radius: 4px; width: 180px; height: 280px; transition: all 0.5s cubic-bezier(0.18, 0.09, 0.55, 1); } .c-lib .x-box .x-grid .x-itm.x-anchor { cursor: pointer; background-color: #222; box-shadow: 0 1px 4px rgba(0, 0, 0, 0.5); } .c-lib .x-box .x-grid .x-itm.x-anchor.h { background-color: #4a4a4a; } .c-lib .x-box .x-grid .x-itm .x-img { width: 160px; height: 160px; margin: 10px 10px 0 10px; background-color: #555; background-position: center center; background-repeat: no-repeat; background-size: contain; transition: all 0.5s cubic-bezier(0.18, 0.09, 0.55, 1); } .c-lib .x-box .x-grid .x-itm.x-anchor.h .x-img { transform: scale(1.04); opacity: 0.8; } .c-lib .x-box .x-grid .x-itm p { margin: 0; padding: 0 10px 0 10px; font-size: 1.2rem; text-align: left; color: #fdfdfd; } .c-lib .x-box .x-grid .x-itm p.x-date { /* h:25 */ height: 15px; padding-top: 10px; line-height: 15px; color: #ccc; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .c-lib .x-box .x-grid .x-itm p.x-emp { /* h:20 */ height: 15px; padding-top: 5px; line-height: 15px; color: #eee; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .c-lib .x-box .x-grid .x-itm p.x-name { height: 60px; padding-top: 5px; line-height: 1.2em; overflow: hidden; text-overflow: ellipsis; } .c-lib .x-box:not(.x-show) { display: none; } .c-lib .x-box.x-busy .x-listbase { min-height: 150px; } .c-lib .x-box:not(.x-busy) .x-listbase > .x-progress { display: none; } .c-lib .x-box:not(.x-onerror) .x-listbase > .x-error { display: none; } .c-lib .x-box:not(.x-onerror) .x-listbase > .x-error-back { display: none; } .p-top .c-main { /* Color */ /* Color */ } .p-top .c-main .x-division { z-index: 2; position: absolute; top: 0; left: auto; right: 0; bottom: auto; margin: 0; padding: 15px 18px; } .p-top .c-main .x-division p { font-size: 1.2rem; line-height: 1em; text-align: right; color: #12589d; margin: 0; padding: 0; } html.smf .p-top .c-main .x-division { display: none; } .p-top .c-main .x-mnu { position: relative; width: 100%; height: auto; min-height: 200px; margin: 50px 0 0 0; padding: 0; overflow-x: auto; overflow-y: hidden; -webkit-overflow-scrolling: touch; } .p-top .c-main .x-mnu > ul { position: relative; width: 100%; height: auto; white-space: nowrap; overflow: hidden; margin: 0; padding: 0; opacity: 0; pointer-events: none; } .p-top .c-main .x-mnu > ul li { position: relative; display: block; float: right; overflow: hidden; width: 180px; height: 180px; margin: 10px 25px 10px 0; padding: 0; background: transparent; opacity: 0; pointer-events: none; -moz-box-shadow: 0 0 5px rgba(0, 0, 0, 0.2); -webkit-box-shadow: 0 0 5px rgba(0, 0, 0, 0.2); box-shadow: 0 0 5px rgba(0, 0, 0, 0.2); -moz-border-radius: 3px; -webkit-border-radius: 3px; border-radius: 3px; transition: all 0.5s cubic-bezier(0.18, 0.09, 0.55, 1); } .p-top .c-main .x-mnu > ul li p { height: 35px; font-size: 1.4rem; line-height: 35px; color: #222; margin: 0; padding: 0 10px; background: rgba(255, 255, 255, 0.8); -moz-border-radius: 3px 3px 0 0; -webkit-border-radius: 3px; border-radius: 3px 3px 0 0; } .p-top .c-main .x-mnu > ul li.color-a p { color: #2d4c85; } .p-top .c-main .x-mnu > ul li.color-b p { color: #2d7f8a; } .p-top .c-main .x-mnu > ul li.color-c p { color: #28785e; } .p-top .c-main .x-mnu > ul li.color-d p { color: #6b6824; } .p-top .c-main .x-mnu > ul li .x-img { position: relative; overflow: hidden; width: 180px; height: 145px; margin: 0; padding: 0; box-sizing: border-box; background-color: rgba(0, 0, 0, 0.75); background-image: no-repeat; background-position: center center; background-size: cover; -moz-border-radius: 0 0 3px 3px; -webkit-border-radius: 0; border-radius: 0 0 3px 3px; } .p-top .c-main .x-mnu > ul li .x-img .x-ovr { position: absolute; top: 0; left: 0; right: 0; bottom: 0; margin: 0; background: transparent none; background-repeat: no-repeat; background-position: center center; background-size: contain; pointer-events: none; transition: all 1s cubic-bezier(0.25, 0.33, 0.33, 0.98); } .p-top .c-main .x-mnu > ul li.color-a .x-img { border-top: 2px solid #2d4c85; } .p-top .c-main .x-mnu > ul li.color-b .x-img { border-top: 2px solid #2d7f8a; } .p-top .c-main .x-mnu > ul li.color-c .x-img { border-top: 2px solid #28785e; } .p-top .c-main .x-mnu > ul li.color-d .x-img { border-top: 2px solid #6b6824; } .p-top .c-main .x-mnu > ul li.active { opacity: 1; pointer-events: auto; margin: 10px 10px 10px 0; } .p-top .c-main .x-mnu > ul li.active.h .x-img .x-ovr { transform: scale(1.15); } .p-top .c-main .x-mnu > ul.active { opacity: 1; pointer-events: auto; } html.ipad_pro .p-top .c-main .x-mnu { margin-top: 100px; min-height: 240px; } html.ipad_pro .p-top .c-main .x-mnu > ul li { width: 220px; height: 220px; } html.ipad_pro .p-top .c-main .x-mnu > ul li .x-img { width: 220px; height: 185px; } html.smf .p-top .c-main .x-mnu { margin-top: 20px; width: 300px; margin-left: auto; margin-right: auto; } html.smf .p-top .c-main .x-mnu > ul li { float: none; width: auto; height: auto; margin: 10px 10px 15px 10px; } html.smf .p-top .c-main .x-mnu > ul li .x-img { width: 100%; } .p-top .c-main .x-smnu { position: relative; clear: both; width: 100%; height: auto; min-height: 170px; margin: 0; padding: 0; overflow-x: auto; overflow-y: hidden; -webkit-overflow-scrolling: touch; } .p-top .c-main .x-smnu > ul { position: relative; width: 100%; height: auto; min-height: 170px; white-space: nowrap; overflow: hidden; margin: 0; padding: 0; opacity: 0; pointer-events: none; } .p-top .c-main .x-smnu > ul li { position: relative; display: block; float: right; overflow: hidden; width: 150px; height: 150px; margin: 10px 25px 10px 0; padding: 0; background: transparent; opacity: 0; pointer-events: none; -moz-box-shadow: 0 0 5px rgba(0, 0, 0, 0.2); -webkit-box-shadow: 0 0 5px rgba(0, 0, 0, 0.2); box-shadow: 0 0 5px rgba(0, 0, 0, 0.2); -moz-border-radius: 3px; -webkit-border-radius: 3px; border-radius: 3px; transition: all 0.5s cubic-bezier(0.18, 0.09, 0.55, 1); } .p-top .c-main .x-smnu > ul li p { height: 35px; font-size: 1.33rem; line-height: 35px; color: #222; margin: 0; padding: 0 10px; background: rgba(255, 255, 255, 0.8); -moz-border-radius: 3px 3px 0 0; -webkit-border-radius: 3px; border-radius: 3px 3px 0 0; } .p-top .c-main .x-smnu > ul li.color-a p { color: #2d4c85; } .p-top .c-main .x-smnu > ul li.color-b p { color: #2d7f8a; } .p-top .c-main .x-smnu > ul li.color-c p { color: #28785e; } .p-top .c-main .x-smnu > ul li.color-d p { color: #6b6824; } .p-top .c-main .x-smnu > ul li .x-img { position: relative; overflow: hidden; width: 150px; height: 115px; margin: 0; padding: 0; box-sizing: border-box; background-color: rgba(0, 0, 0, 0.75); background-image: no-repeat; background-position: center center; background-size: cover; -moz-border-radius: 0 0 3px 3px; -webkit-border-radius: 0; border-radius: 0 0 3px 3px; } .p-top .c-main .x-smnu > ul li .x-img .x-ovr { position: absolute; top: 0; left: 0; right: 0; bottom: 0; margin: 0; background: transparent none; background-repeat: no-repeat; background-position: center center; background-size: contain; pointer-events: none; transition: all 1s cubic-bezier(0.25, 0.33, 0.33, 0.98); } .p-top .c-main .x-smnu > ul li.color-a .x-img { border-top: 2px solid #2d4c85; } .p-top .c-main .x-smnu > ul li.color-b .x-img { border-top: 2px solid #2d7f8a; } .p-top .c-main .x-smnu > ul li.color-c .x-img { border-top: 2px solid #28785e; } .p-top .c-main .x-smnu > ul li.color-d .x-img { border-top: 2px solid #6b6824; } .p-top .c-main .x-smnu > ul li.active { opacity: 1; pointer-events: auto; margin: 10px 10px 10px 0; } .p-top .c-main .x-smnu > ul li.active.h .x-img .x-ovr { transform: scale(1.15); } .p-top .c-main .x-smnu > ul.active { opacity: 1; pointer-events: auto; } html.smf .p-top .c-main .x-smnu { width: 300px; margin-left: auto; margin-right: auto; } html.smf .p-top .c-main .x-smnu > ul li { float: none; width: auto; height: auto; margin: 10px 10px 15px 10px; } html.smf .p-top .c-main .x-smnu > ul li .x-img { width: 100%; }