@charset "UTF-8"; .din-200 { font-family: "din-2014-narrow", sans-serif; font-weight: 200; } .din-400 { font-family: "din-2014-narrow", sans-serif; font-weight: 400; } @keyframes hoverin { 0% { transform: translateX(-101%); opacity: 1; } 100% { transform: translateX(0); opacity: 1; } } @keyframes hoverout { 0% { transform: translateX(0); left: 0; opacity: 1; } 100% { transform: translateX(0); left: 101%; opacity: 1; } } @keyframes hoverinreverse { 0% { transform: translateX(101%); opacity: 1; } 100% { transform: translateX(0); opacity: 1; } } @keyframes hoveroutreverse { 0% { transform: translateX(0); left: 0; opacity: 1; } 100% { transform: translateX(0); left: -101%; opacity: 1; } } @keyframes hoverupout { 0% { transform: translateY(0); opacity: 1; top: 0; } 100% { transform: translateY(0); opacity: 1; top: -100%; } } @keyframes hoverupin { 0% { transform: translateY(101%); opacity: 1; } 100% { transform: translateY(0); opacity: 1; } } /** Swiper 6.0.0 Most modern mobile touch slider and framework with hardware accelerated transitions http://swiperjs.com Copyright 2014-2020 Vladimir Kharlampidi Released under the MIT License Released on: July 3, 2020 */ @font-face { font-family: 'swiper-icons'; src: url("data:application/font-woff;charset=utf-8;base64,d09GRgABAAAAAAZgABAAAAAADAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAABGRlRNAAAGRAAAABoAAAAci6qHkUdERUYAAAWgAAAAIwAAACQAYABXR1BPUwAABhQAAAAuAAAANuAY7+xHU1VCAAAFxAAAAFAAAABm2fPczU9TLzIAAAHcAAAASgAAAGBP9V5RY21hcAAAAkQAAACIAAABYt6F0cBjdnQgAAACzAAAAAQAAAAEABEBRGdhc3AAAAWYAAAACAAAAAj//wADZ2x5ZgAAAywAAADMAAAD2MHtryVoZWFkAAABbAAAADAAAAA2E2+eoWhoZWEAAAGcAAAAHwAAACQC9gDzaG10eAAAAigAAAAZAAAArgJkABFsb2NhAAAC0AAAAFoAAABaFQAUGG1heHAAAAG8AAAAHwAAACAAcABAbmFtZQAAA/gAAAE5AAACXvFdBwlwb3N0AAAFNAAAAGIAAACE5s74hXjaY2BkYGAAYpf5Hu/j+W2+MnAzMYDAzaX6QjD6/4//Bxj5GA8AuRwMYGkAPywL13jaY2BkYGA88P8Agx4j+/8fQDYfA1AEBWgDAIB2BOoAeNpjYGRgYNBh4GdgYgABEMnIABJzYNADCQAACWgAsQB42mNgYfzCOIGBlYGB0YcxjYGBwR1Kf2WQZGhhYGBiYGVmgAFGBiQQkOaawtDAoMBQxXjg/wEGPcYDDA4wNUA2CCgwsAAAO4EL6gAAeNpj2M0gyAACqxgGNWBkZ2D4/wMA+xkDdgAAAHjaY2BgYGaAYBkGRgYQiAHyGMF8FgYHIM3DwMHABGQrMOgyWDLEM1T9/w8UBfEMgLzE////P/5//f/V/xv+r4eaAAeMbAxwIUYmIMHEgKYAYjUcsDAwsLKxc3BycfPw8jEQA/gZBASFhEVExcQlJKWkZWTl5BUUlZRVVNXUNTQZBgMAAMR+E+gAEQFEAAAAKgAqACoANAA+AEgAUgBcAGYAcAB6AIQAjgCYAKIArAC2AMAAygDUAN4A6ADyAPwBBgEQARoBJAEuATgBQgFMAVYBYAFqAXQBfgGIAZIBnAGmAbIBzgHsAAB42u2NMQ6CUAyGW568x9AneYYgm4MJbhKFaExIOAVX8ApewSt4Bic4AfeAid3VOBixDxfPYEza5O+Xfi04YADggiUIULCuEJK8VhO4bSvpdnktHI5QCYtdi2sl8ZnXaHlqUrNKzdKcT8cjlq+rwZSvIVczNiezsfnP/uznmfPFBNODM2K7MTQ45YEAZqGP81AmGGcF3iPqOop0r1SPTaTbVkfUe4HXj97wYE+yNwWYxwWu4v1ugWHgo3S1XdZEVqWM7ET0cfnLGxWfkgR42o2PvWrDMBSFj/IHLaF0zKjRgdiVMwScNRAoWUoH78Y2icB/yIY09An6AH2Bdu/UB+yxopYshQiEvnvu0dURgDt8QeC8PDw7Fpji3fEA4z/PEJ6YOB5hKh4dj3EvXhxPqH/SKUY3rJ7srZ4FZnh1PMAtPhwP6fl2PMJMPDgeQ4rY8YT6Gzao0eAEA409DuggmTnFnOcSCiEiLMgxCiTI6Cq5DZUd3Qmp10vO0LaLTd2cjN4fOumlc7lUYbSQcZFkutRG7g6JKZKy0RmdLY680CDnEJ+UMkpFFe1RN7nxdVpXrC4aTtnaurOnYercZg2YVmLN/d/gczfEimrE/fs/bOuq29Zmn8tloORaXgZgGa78yO9/cnXm2BpaGvq25Dv9S4E9+5SIc9PqupJKhYFSSl47+Qcr1mYNAAAAeNptw0cKwkAAAMDZJA8Q7OUJvkLsPfZ6zFVERPy8qHh2YER+3i/BP83vIBLLySsoKimrqKqpa2hp6+jq6RsYGhmbmJqZSy0sraxtbO3sHRydnEMU4uR6yx7JJXveP7WrDycAAAAAAAH//wACeNpjYGRgYOABYhkgZgJCZgZNBkYGLQZtIJsFLMYAAAw3ALgAeNolizEKgDAQBCchRbC2sFER0YD6qVQiBCv/H9ezGI6Z5XBAw8CBK/m5iQQVauVbXLnOrMZv2oLdKFa8Pjuru2hJzGabmOSLzNMzvutpB3N42mNgZGBg4GKQYzBhYMxJLMlj4GBgAYow/P/PAJJhLM6sSoWKfWCAAwDAjgbRAAB42mNgYGBkAIIbCZo5IPrmUn0hGA0AO8EFTQAA") format("woff"); font-weight: 400; font-style: normal; } :root { --swiper-theme-color:#007aff; } .swiper-container { margin-left: auto; margin-right: auto; position: relative; overflow: hidden; list-style: none; padding: 0; z-index: 1; } .swiper-container-vertical > .swiper-wrapper { flex-direction: column; } .swiper-wrapper { position: relative; width: 100%; height: 100%; z-index: 1; display: flex; transition-property: transform; box-sizing: content-box; } .swiper-container-android .swiper-slide, .swiper-wrapper { transform: translate3d(0, 0, 0); } .swiper-container-multirow > .swiper-wrapper { flex-wrap: wrap; } .swiper-container-multirow-column > .swiper-wrapper { flex-wrap: wrap; flex-direction: column; } .swiper-container-free-mode > .swiper-wrapper { transition-timing-function: ease-out; margin: 0 auto; } .swiper-slide { flex-shrink: 0; width: 100%; height: 100%; position: relative; transition-property: transform; } .swiper-slide-invisible-blank { visibility: hidden; } .swiper-container-autoheight, .swiper-container-autoheight .swiper-slide { height: auto; } .swiper-container-autoheight .swiper-wrapper { align-items: flex-start; transition-property: transform,height; } .swiper-container-3d { perspective: 1200px; } .swiper-container-3d .swiper-wrapper, .swiper-container-3d .swiper-slide, .swiper-container-3d .swiper-slide-shadow-left, .swiper-container-3d .swiper-slide-shadow-right, .swiper-container-3d .swiper-slide-shadow-top, .swiper-container-3d .swiper-slide-shadow-bottom, .swiper-container-3d .swiper-cube-shadow { transform-style: preserve-3d; } .swiper-container-3d .swiper-slide-shadow-left, .swiper-container-3d .swiper-slide-shadow-right, .swiper-container-3d .swiper-slide-shadow-top, .swiper-container-3d .swiper-slide-shadow-bottom { position: absolute; left: 0; top: 0; width: 100%; height: 100%; pointer-events: none; z-index: 10; } .swiper-container-3d .swiper-slide-shadow-left { background-image: linear-gradient(to left, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0)); } .swiper-container-3d .swiper-slide-shadow-right { background-image: linear-gradient(to right, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0)); } .swiper-container-3d .swiper-slide-shadow-top { background-image: linear-gradient(to top, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0)); } .swiper-container-3d .swiper-slide-shadow-bottom { background-image: linear-gradient(to bottom, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0)); } .swiper-container-css-mode > .swiper-wrapper { overflow: auto; scrollbar-width: none; -ms-overflow-style: none; } .swiper-container-css-mode > .swiper-wrapper::-webkit-scrollbar { display: none; } .swiper-container-css-mode > .swiper-wrapper > .swiper-slide { scroll-snap-align: start start; } .swiper-container-horizontal.swiper-container-css-mode > .swiper-wrapper { scroll-snap-type: x mandatory; } .swiper-container-vertical.swiper-container-css-mode > .swiper-wrapper { scroll-snap-type: y mandatory; } :root { --swiper-navigation-size:44px; } .swiper-button-prev, .swiper-button-next { position: absolute; top: 50%; width: calc(var(--swiper-navigation-size) / 44 * 27); height: var(--swiper-navigation-size); margin-top: calc(-1 * var(--swiper-navigation-size) / 2); z-index: 10; cursor: pointer; display: flex; align-items: center; justify-content: center; color: var(--swiper-navigation-color, var(--swiper-theme-color)); } .swiper-button-prev.swiper-button-disabled, .swiper-button-next.swiper-button-disabled { opacity: .35; cursor: auto; pointer-events: none; } .swiper-button-prev:after, .swiper-button-next:after { font-family: swiper-icons; font-size: var(--swiper-navigation-size); text-transform: none !important; letter-spacing: 0; text-transform: none; font-variant: initial; line-height: 1; } .swiper-button-prev, .swiper-container-rtl .swiper-button-next { left: 10px; right: auto; } .swiper-button-prev:after, .swiper-container-rtl .swiper-button-next:after { content: 'prev'; } .swiper-button-next, .swiper-container-rtl .swiper-button-prev { right: 10px; left: auto; } .swiper-button-next:after, .swiper-container-rtl .swiper-button-prev:after { content: 'next'; } .swiper-button-prev.swiper-button-white, .swiper-button-next.swiper-button-white { --swiper-navigation-color:#fff; } .swiper-button-prev.swiper-button-black, .swiper-button-next.swiper-button-black { --swiper-navigation-color:#000; } .swiper-button-lock { display: none; } .swiper-pagination { position: absolute; text-align: center; transition: 300ms opacity; transform: translate3d(0, 0, 0); z-index: 10; } .swiper-pagination.swiper-pagination-hidden { opacity: 0; } .swiper-pagination-fraction, .swiper-pagination-custom, .swiper-container-horizontal > .swiper-pagination-bullets { bottom: 10px; left: 0; width: 100%; } .swiper-pagination-bullets-dynamic { overflow: hidden; font-size: 0; } .swiper-pagination-bullets-dynamic .swiper-pagination-bullet { transform: scale(0.33); position: relative; } .swiper-pagination-bullets-dynamic .swiper-pagination-bullet-active { transform: scale(1); } .swiper-pagination-bullets-dynamic .swiper-pagination-bullet-active-main { transform: scale(1); } .swiper-pagination-bullets-dynamic .swiper-pagination-bullet-active-prev { transform: scale(0.66); } .swiper-pagination-bullets-dynamic .swiper-pagination-bullet-active-prev-prev { transform: scale(0.33); } .swiper-pagination-bullets-dynamic .swiper-pagination-bullet-active-next { transform: scale(0.66); } .swiper-pagination-bullets-dynamic .swiper-pagination-bullet-active-next-next { transform: scale(0.33); } .swiper-pagination-bullet { width: 8px; height: 8px; display: inline-block; border-radius: 100%; background: #000; opacity: .2; } button.swiper-pagination-bullet { border: 0; margin: 0; padding: 0; box-shadow: none; -webkit-appearance: none; -moz-appearance: none; appearance: none; } .swiper-pagination-clickable .swiper-pagination-bullet { cursor: pointer; } .swiper-pagination-bullet-active { opacity: 1; background: var(--swiper-pagination-color, var(--swiper-theme-color)); } .swiper-container-vertical > .swiper-pagination-bullets { right: 10px; top: 50%; transform: translate3d(0, -50%, 0); } .swiper-container-vertical > .swiper-pagination-bullets .swiper-pagination-bullet { margin: 6px 0; display: block; } .swiper-container-vertical > .swiper-pagination-bullets.swiper-pagination-bullets-dynamic { top: 50%; transform: translateY(-50%); width: 8px; } .swiper-container-vertical > .swiper-pagination-bullets.swiper-pagination-bullets-dynamic .swiper-pagination-bullet { display: inline-block; transition: 200ms transform,200ms top; } .swiper-container-horizontal > .swiper-pagination-bullets .swiper-pagination-bullet { margin: 0 4px; } .swiper-container-horizontal > .swiper-pagination-bullets.swiper-pagination-bullets-dynamic { left: 50%; transform: translateX(-50%); white-space: nowrap; } .swiper-container-horizontal > .swiper-pagination-bullets.swiper-pagination-bullets-dynamic .swiper-pagination-bullet { transition: 200ms transform,200ms left; } .swiper-container-horizontal.swiper-container-rtl > .swiper-pagination-bullets-dynamic .swiper-pagination-bullet { transition: 200ms transform,200ms right; } .swiper-pagination-progressbar { background: rgba(0, 0, 0, 0.25); position: absolute; } .swiper-pagination-progressbar .swiper-pagination-progressbar-fill { background: var(--swiper-pagination-color, var(--swiper-theme-color)); position: absolute; left: 0; top: 0; width: 100%; height: 100%; transform: scale(0); transform-origin: left top; } .swiper-container-rtl .swiper-pagination-progressbar .swiper-pagination-progressbar-fill { transform-origin: right top; } .swiper-container-horizontal > .swiper-pagination-progressbar, .swiper-container-vertical > .swiper-pagination-progressbar.swiper-pagination-progressbar-opposite { width: 100%; height: 4px; left: 0; top: 0; } .swiper-container-vertical > .swiper-pagination-progressbar, .swiper-container-horizontal > .swiper-pagination-progressbar.swiper-pagination-progressbar-opposite { width: 4px; height: 100%; left: 0; top: 0; } .swiper-pagination-white { --swiper-pagination-color:#fff; } .swiper-pagination-black { --swiper-pagination-color:#000; } .swiper-pagination-lock { display: none; } .swiper-scrollbar { border-radius: 10px; position: relative; -ms-touch-action: none; background: rgba(0, 0, 0, 0.1); } .swiper-container-horizontal > .swiper-scrollbar { position: absolute; left: 1%; bottom: 3px; z-index: 50; height: 5px; width: 98%; } .swiper-container-vertical > .swiper-scrollbar { position: absolute; right: 3px; top: 1%; z-index: 50; width: 5px; height: 98%; } .swiper-scrollbar-drag { height: 100%; width: 100%; position: relative; background: rgba(0, 0, 0, 0.5); border-radius: 10px; left: 0; top: 0; } .swiper-scrollbar-cursor-drag { cursor: move; } .swiper-scrollbar-lock { display: none; } .swiper-zoom-container { width: 100%; height: 100%; display: flex; justify-content: center; align-items: center; text-align: center; } .swiper-zoom-container > img, .swiper-zoom-container > svg, .swiper-zoom-container > canvas { max-width: 100%; max-height: 100%; object-fit: contain; } .swiper-slide-zoomed { cursor: move; } .swiper-lazy-preloader { width: 42px; height: 42px; position: absolute; left: 50%; top: 50%; margin-left: -21px; margin-top: -21px; z-index: 10; transform-origin: 50%; animation: swiper-preloader-spin 1s infinite linear; box-sizing: border-box; border: 4px solid var(--swiper-preloader-color, var(--swiper-theme-color)); border-radius: 50%; border-top-color: transparent; } .swiper-lazy-preloader-white { --swiper-preloader-color:#fff; } .swiper-lazy-preloader-black { --swiper-preloader-color:#000; } @keyframes swiper-preloader-spin { 100% { transform: rotate(360deg); } } .swiper-container .swiper-notification { position: absolute; left: 0; top: 0; pointer-events: none; opacity: 0; z-index: -1000; } .swiper-container-fade.swiper-container-free-mode .swiper-slide { transition-timing-function: ease-out; } .swiper-container-fade .swiper-slide { pointer-events: none; transition-property: opacity; } .swiper-container-fade .swiper-slide .swiper-slide { pointer-events: none; } .swiper-container-fade .swiper-slide-active, .swiper-container-fade .swiper-slide-active .swiper-slide-active { pointer-events: auto; } .swiper-container-cube { overflow: visible; } .swiper-container-cube .swiper-slide { pointer-events: none; -webkit-backface-visibility: hidden; backface-visibility: hidden; z-index: 1; visibility: hidden; transform-origin: 0 0; width: 100%; height: 100%; } .swiper-container-cube .swiper-slide .swiper-slide { pointer-events: none; } .swiper-container-cube.swiper-container-rtl .swiper-slide { transform-origin: 100% 0; } .swiper-container-cube .swiper-slide-active, .swiper-container-cube .swiper-slide-active .swiper-slide-active { pointer-events: auto; } .swiper-container-cube .swiper-slide-active, .swiper-container-cube .swiper-slide-next, .swiper-container-cube .swiper-slide-prev, .swiper-container-cube .swiper-slide-next + .swiper-slide { pointer-events: auto; visibility: visible; } .swiper-container-cube .swiper-slide-shadow-top, .swiper-container-cube .swiper-slide-shadow-bottom, .swiper-container-cube .swiper-slide-shadow-left, .swiper-container-cube .swiper-slide-shadow-right { z-index: 0; -webkit-backface-visibility: hidden; backface-visibility: hidden; } .swiper-container-cube .swiper-cube-shadow { position: absolute; left: 0; bottom: 0; width: 100%; height: 100%; background: #000; opacity: .6; -webkit-filter: blur(50px); filter: blur(50px); z-index: 0; } .swiper-container-flip { overflow: visible; } .swiper-container-flip .swiper-slide { pointer-events: none; -webkit-backface-visibility: hidden; backface-visibility: hidden; z-index: 1; } .swiper-container-flip .swiper-slide .swiper-slide { pointer-events: none; } .swiper-container-flip .swiper-slide-active, .swiper-container-flip .swiper-slide-active .swiper-slide-active { pointer-events: auto; } .swiper-container-flip .swiper-slide-shadow-top, .swiper-container-flip .swiper-slide-shadow-bottom, .swiper-container-flip .swiper-slide-shadow-left, .swiper-container-flip .swiper-slide-shadow-right { z-index: 0; -webkit-backface-visibility: hidden; backface-visibility: hidden; } /* plgin*/ .techblog .prettyprint ol.linenums > li, .mce-content-body .prettyprint ol.linenums > li, .entrybody .prettyprint ol.linenums > li, .wysiwyg.entry .prettyprint ol.linenums > li { list-style-type: decimal; list-style-type: decimal-leading-zero; } .techblog .str, .mce-content-body .str, .entrybody .str, .wysiwyg.entry .str { color: #EC7600; } .techblog .kwd, .mce-content-body .kwd, .entrybody .kwd, .wysiwyg.entry .kwd { color: #93C763; } .techblog .com, .mce-content-body .com, .entrybody .com, .wysiwyg.entry .com { color: #66747B; } .techblog .typ, .mce-content-body .typ, .entrybody .typ, .wysiwyg.entry .typ { color: #678CB1; } .techblog .lit, .mce-content-body .lit, .entrybody .lit, .wysiwyg.entry .lit { color: #FACD22; } .techblog .pun, .mce-content-body .pun, .entrybody .pun, .wysiwyg.entry .pun { color: #F1F2F3; } .techblog .pln, .mce-content-body .pln, .entrybody .pln, .wysiwyg.entry .pln { color: #F1F2F3; } .techblog .tag, .mce-content-body .tag, .entrybody .tag, .wysiwyg.entry .tag { color: #8AC763; } .techblog .atn, .mce-content-body .atn, .entrybody .atn, .wysiwyg.entry .atn { color: #E0E2E4; } .techblog .atv, .mce-content-body .atv, .entrybody .atv, .wysiwyg.entry .atv { color: #EC7600; } .techblog .dec, .mce-content-body .dec, .entrybody .dec, .wysiwyg.entry .dec { color: purple; } .techblog pre.prettyprint, .mce-content-body pre.prettyprint, .entrybody pre.prettyprint, .wysiwyg.entry pre.prettyprint { border: 0px solid #888; } .techblog ol.linenums, .mce-content-body ol.linenums, .entrybody ol.linenums, .wysiwyg.entry ol.linenums { margin-top: 0; margin-bottom: 0; } .techblog .prettyprint, .mce-content-body .prettyprint, .entrybody .prettyprint, .wysiwyg.entry .prettyprint { background: #000; } .techblog li.L0, .techblog li.L1, .techblog li.L2, .techblog li.L3, .techblog li.L4, .techblog li.L5, .techblog li.L6, .techblog li.L7, .techblog li.L8, .techblog li.L9, .mce-content-body li.L0, .mce-content-body li.L1, .mce-content-body li.L2, .mce-content-body li.L3, .mce-content-body li.L4, .mce-content-body li.L5, .mce-content-body li.L6, .mce-content-body li.L7, .mce-content-body li.L8, .mce-content-body li.L9, .entrybody li.L0, .entrybody li.L1, .entrybody li.L2, .entrybody li.L3, .entrybody li.L4, .entrybody li.L5, .entrybody li.L6, .entrybody li.L7, .entrybody li.L8, .entrybody li.L9, .wysiwyg.entry li.L0, .wysiwyg.entry li.L1, .wysiwyg.entry li.L2, .wysiwyg.entry li.L3, .wysiwyg.entry li.L4, .wysiwyg.entry li.L5, .wysiwyg.entry li.L6, .wysiwyg.entry li.L7, .wysiwyg.entry li.L8, .wysiwyg.entry li.L9 { color: #555; list-style-type: decimal; } /* takeno add */ .techblog li.L1, .techblog li.L3, .techblog li.L5, .techblog li.L7, .techblog li.L9, .mce-content-body li.L1, .mce-content-body li.L3, .mce-content-body li.L5, .mce-content-body li.L7, .mce-content-body li.L9, .entrybody li.L1, .entrybody li.L3, .entrybody li.L5, .entrybody li.L7, .entrybody li.L9, .wysiwyg.entry li.L1, .wysiwyg.entry li.L3, .wysiwyg.entry li.L5, .wysiwyg.entry li.L7, .wysiwyg.entry li.L9 { width: 100%; background: #000; } /* /takeno add */ /* takeno add .techblog li.L1, .techblog li.L3, .techblog li.L5, .techblog li.L7, .techblog li.L9, .mce-content-body li.L1, .mce-content-body li.L3, .mce-content-body li.L5, .mce-content-body li.L7, .mce-content-body li.L9, .entrybody li.L1, .entrybody li.L3, .entrybody li.L5, .entrybody li.L7, .entrybody li.L9, .wysiwyg.entry li.L1, .wysiwyg.entry li.L3, .wysiwyg.entry li.L5, .wysiwyg.entry li.L7, .wysiwyg.entry li.L9 { width: 100%; min-width: 1200px; background: #111; } /takeno add */ @media print { .techblog .str, .mce-content-body .str, .entrybody .str, .wysiwyg.entry .str { color: #060; } .techblog .kwd, .mce-content-body .kwd, .entrybody .kwd, .wysiwyg.entry .kwd { color: #006; font-weight: bold; } .techblog .com, .mce-content-body .com, .entrybody .com, .wysiwyg.entry .com { color: #600; font-style: italic; } .techblog .typ, .mce-content-body .typ, .entrybody .typ, .wysiwyg.entry .typ { color: #404; font-weight: bold; } .techblog .lit, .mce-content-body .lit, .entrybody .lit, .wysiwyg.entry .lit { color: #044; } .techblog .pun, .mce-content-body .pun, .entrybody .pun, .wysiwyg.entry .pun { color: #440; } .techblog .pln, .mce-content-body .pln, .entrybody .pln, .wysiwyg.entry .pln { color: #000; } .techblog .tag, .mce-content-body .tag, .entrybody .tag, .wysiwyg.entry .tag { color: #006; font-weight: bold; } .techblog .atn, .mce-content-body .atn, .entrybody .atn, .wysiwyg.entry .atn { color: #404; } .techblog .atv, .mce-content-body .atv, .entrybody .atv, .wysiwyg.entry .atv { color: #060; } } /* ------------- commom -------------*/ .techblog .inner-archive { width: 690px; } .techblog .inner-archive .item { width: 100%; display: flex; min-height: 237px; position: relative; } .techblog .inner-archive .item:before { content: ""; position: absolute; left: 0; top: 0; z-index: 20; width: 100%; height: 1px; background: #adadad; } .techblog .inner-archive .item:after { content: ""; position: absolute; left: 0; bottom: 0; z-index: 20; width: 100%; height: 1px; background: #adadad; } .techblog .inner-archive .item a { position: relative; z-index: 10; } .techblog .inner-archive .item a .thumb { display: block; height: 100%; } .techblog .inner-archive .item + .item { margin: 20px 0 0; } .techblog .inner-archive .item .thumb { width: 237px; position: relative; overflow: hidden; } .techblog .inner-archive .item .thumb:before { content: ""; width: 1px; height: 100%; position: absolute; left: 0; top: 0; background: #adadad; z-index: 20; } .techblog .inner-archive .item .thumb span { display: block; width: 100%; height: 100%; background-repeat: no-repeat; background-size: cover; background-position: center center; transform-origin: center center; transition: transform 0.3s; } .techblog .inner-archive .item .detail { width: calc(100% - 237px); padding: 30px; position: relative; z-index: 9; } .techblog .inner-archive .item .detail .detail-link { display: block; position: absolute; left: 0; top: 0; width: 100%; height: 100%; } .techblog .inner-archive .item .detail:before { content: ""; width: 1px; height: 100%; position: absolute; right: 0; top: 0; background: #adadad; } .techblog .inner-archive .item .detail .archive-category { display: inline-block; letter-spacing: 0.05em; position: relative; z-index: 30; } .techblog .inner-archive .item .detail .archive-category a { background-color: #8effc6; font-family: "din-2014-narrow", sans-serif; font-size: 15px; letter-spacing: 0.05em; padding: 7px 13px 5px; transition: filter 0.3s; display: block; } .techblog .inner-archive .item .detail .archive-category a:hover { filter: brightness(1.1); } .techblog .inner-archive .item .detail p.archive-title { font-size: 20px; font-weight: 500; line-height: 1.5; margin: 7px 0 15px; letter-spacing: 0.09em; } .techblog .inner-archive .item .detail p.archive-title a:hover { text-decoration: underline; } .techblog .inner-archive .item .detail time { font-size: 15px; color: #a8a8a8; font-family: "din-2014-narrow", sans-serif; font-weight: 400; letter-spacing: 0.9px; } .techblog .inner-archive .item .detail .archive-tags { margin: 15px 0 0; display: flex; flex-wrap: wrap; position: relative; z-index: 30; } .techblog .inner-archive .item .detail .archive-tags li { margin: 5px; } .techblog .inner-archive .item .detail .archive-tags li a { display: block; font-size: 13px; font-weight: 500; line-height: 1.92; background-color: #ebebeb; letter-spacing: 1px; padding: 2px 10px 0px; transition: opacity 0.3s; } .techblog .inner-archive .item .detail .archive-tags li a:hover { opacity: 0.7; } .techblog .inner-archive .item:hover .thumb span { transform: scale(1.1); } .techblog .inner-sidenav { width: 290px; margin: 0 0 0 20px; } .techblog .inner-sidenav .archive-links { background-color: #f7f7f7; padding: 45px 35px 40px; } .techblog .inner-sidenav h3 { font-size: 25px; font-family: "din-2014-narrow", sans-serif; font-weight: 600; line-height: 1.2; margin: 0 0 17px; letter-spacing: 0.05em; } .techblog .inner-sidenav .item { margin-bottom: 45px; } .techblog .inner-sidenav .item-about { background-color: #f7f7f7; padding: 40px 35px 40px; margin-bottom: 20px; } .techblog .inner-sidenav .item-about p { font-size: 15px; line-height: 1.6; } .techblog .inner-sidenav .item-categories li, .techblog .inner-sidenav .item-archives li { padding: 0 0 0 33px; position: relative; } .techblog .inner-sidenav .item-categories li:after, .techblog .inner-sidenav .item-archives li:after { content: ""; width: 8px; height: 1px; background: #000; position: absolute; left: 15px; top: 11px; } .techblog .inner-sidenav .item-categories li a, .techblog .inner-sidenav .item-archives li a { font-size: 15px; font-weight: 500; line-height: 1.6; } .techblog .inner-sidenav .item-categories li a:hover, .techblog .inner-sidenav .item-archives li a:hover { text-decoration: underline; } .techblog .inner-sidenav .item-categories li + li, .techblog .inner-sidenav .item-archives li + li { margin-top: 11px; } .techblog .inner-sidenav .item-tag { margin-bottom: 0; } .techblog .inner-sidenav .item-tag ul { display: flex; flex-wrap: wrap; margin-left: -2.5px; } .techblog .inner-sidenav .item-tag li { margin: 5px; } .techblog .inner-sidenav .item-tag li a { display: block; font-size: 13px; font-weight: 500; line-height: 1.92; background-color: #ebebeb; letter-spacing: 1px; padding: 2px 10px 0px; transition: opacity 0.3s; } .techblog .inner-sidenav .item-tag li a:hover { opacity: 0.7; } .techblog .inner-sidenav .btn-recruit { width: 290px; height: 120px; background: url("../images/btn-recruit-bg.jpg") no-repeat right top/cover; display: flex; align-items: center; padding: 0 25px; position: relative; margin: 20px 0 0; transition: filter 0.3s; } .techblog .inner-sidenav .btn-recruit:hover { filter: brightness(1.05); } .techblog .inner-sidenav .btn-recruit:after { content: ""; width: 50px; height: 1px; background: #000; position: absolute; right: 0; top: 50%; } .techblog .inner-sidenav .btn-recruit .large { font-family: "din-2014-narrow", sans-serif; font-weight: 400; font-size: 30px; font-weight: 300; line-height: 1; letter-spacing: 0.05em; padding-right: 10px; transform: rotate(0.05deg); } .techblog .inner-sidenav .btn-recruit .min { font-style: normal; font-size: 13px; line-height: 1; font-weight: normal; transform: rotate(0.05deg); letter-spacing: 0.1em; } /* ------------- common end -------------*/ /* ------------- top -------------*/ .techblog main { width: auto; padding: 0 0 110px; } .techblog main section { position: relative; z-index: 10; } .techblog main .sec-slider { margin: 0 0 96px; padding-top: 20px; } .techblog main .sec-slider .swiper-container .swiper-slide { width: 1120px !important; height: 530px; padding: 0 10px; } .techblog main .sec-slider .swiper-container .swiper-slide:hover .thumb span { transform: scale(1.1); } .techblog main .sec-slider .swiper-container .swiper-slide .wrap { width: 100%; height: 100%; display: flex; } .techblog main .sec-slider .swiper-container .swiper-slide .wrap .thumb, .techblog main .sec-slider .swiper-container .swiper-slide .wrap .detail { display: block; width: 50%; height: 100%; position: relative; } .techblog main .sec-slider .swiper-container .swiper-slide .wrap .thumb { overflow: hidden; } .techblog main .sec-slider .swiper-container .swiper-slide .wrap .thumb > a { display: block; width: 100%; height: 100%; position: absolute; left: 0; top: 0; z-index: 20; } .techblog main .sec-slider .swiper-container .swiper-slide .wrap .thumb span { display: block; width: 100%; height: 100%; background-repeat: no-repeat; background-size: cover; background-position: center center; transition: transform 0.3s; } .techblog main .sec-slider .swiper-container .swiper-slide .wrap .detail { background: url("../images/slider-bg.jpg") no-repeat right top/cover; padding: 70px 70px 50px; position: relative; } .techblog main .sec-slider .swiper-container .swiper-slide .wrap .detail > a { display: block; width: 100%; height: 100%; position: absolute; left: 0; top: 0; } .techblog main .sec-slider .swiper-container .swiper-slide .wrap .detail .category { display: inline-block; position: relative; z-index: 20; } .techblog main .sec-slider .swiper-container .swiper-slide .wrap .detail .category a { font-size: 15px; background-color: #8effc6; font-family: "din-2014-narrow", sans-serif; font-weight: 400; padding: 5px 12px; display: block; transition: filter 0.3s; } .techblog main .sec-slider .swiper-container .swiper-slide .wrap .detail .category a:hover { filter: brightness(1.1); } .techblog main .sec-slider .swiper-container .swiper-slide .wrap .detail p.title { font-size: 35px; font-weight: bold; line-height: 1.31; margin: 0 0 27px; } .techblog main .sec-slider .swiper-container .swiper-slide .wrap .detail p.title a:hover { text-decoration: underline; } .techblog main .sec-slider .swiper-container .swiper-slide .wrap .detail time { font-size: 15px; color: #a8a8a8; font-family: "din-2014-narrow", sans-serif; font-weight: 400; letter-spacing: 0.9px; } .techblog main .sec-slider .swiper-container .swiper-slide .wrap .detail .text { font-size: 15px; font-weight: 500; line-height: 1.67; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; } .techblog main .sec-slider .swiper-container .swiper-slide .wrap .detail .tags { margin: 41px 0 0; display: flex; flex-wrap: wrap; position: relative; z-index: 20; } .techblog main .sec-slider .swiper-container .swiper-slide .wrap .detail .tags li { margin: 5px; } .techblog main .sec-slider .swiper-container .swiper-slide .wrap .detail .tags li a { display: block; font-size: 13px; font-weight: 500; line-height: 1.92; background-color: #ebebeb; letter-spacing: 1px; padding: 2px 10px 0px; transition: opacity 0.3s; } .techblog main .sec-slider .swiper-container .swiper-slide .wrap .detail .tags li a:hover { opacity: 0.7; } .techblog main .sec-slider .swiper-container .swiper-slide.kv-slide:hover .thumb span { transform: scale(1); } .techblog main .sec-slider .swiper-container .swiper-slide.kv-slide .detail { padding: 90px 0 0; } .techblog main .sec-slider .swiper-container .swiper-slide.kv-slide .detail .logo { width: 77px; height: 216px; margin: 0 auto; } .techblog main .sec-slider .swiper-container .swiper-slide.kv-slide .detail .logo img { width: 100%; } .techblog main .sec-slider .swiper-container .swiper-slide.kv-slide .detail h2 { font-family: "din-2014-narrow", sans-serif; font-weight: 600; font-size: 40px; text-align: center; margin: 15px 0 0; } .techblog main .sec-slider .swiper-container .swiper-slide.kv-slide .detail .text { font-size: 20px; text-align: center; line-height: 1.65; letter-spacing: 0.1em; margin: 46px 0 0; display: block; } .techblog main .sec-slider .swiper-container .swiper-slide a .thumb { overflow: hidden; } .techblog main .sec-slider .swiper-container .swiper-slide a .thumb span { transition: transform 0.3s; transform-origin: center center; } .techblog main .sec-slider .swiper-nav-wrap { width: 242px; height: 11px; margin: 34px auto 0; position: relative; } .techblog main .sec-slider .swiper-nav-wrap:after { content: ""; width: 8px; height: 8px; background-repeat: no-repeat; background-size: 100% auto; background-position: center top; background-image: url("../../images/common/rhombus.png"); position: absolute; left: 117px; top: 1px; } .techblog main .sec-slider .swiper-nav-wrap .swiper-button-prev, .techblog main .sec-slider .swiper-nav-wrap .swiper-button-next { width: 88px; height: 9px; margin: 0; top: 0; bottom: auto; transition: opacity 0.3s; font-size: 12px; color: #000; } .techblog main .sec-slider .swiper-nav-wrap .swiper-button-prev span, .techblog main .sec-slider .swiper-nav-wrap .swiper-button-next span { font-family: "din-2014-narrow", sans-serif; font-weight: 400; } .techblog main .sec-slider .swiper-nav-wrap .swiper-button-prev:hover, .techblog main .sec-slider .swiper-nav-wrap .swiper-button-next:hover { opacity: 0.7; } .techblog main .sec-slider .swiper-nav-wrap .swiper-button-prev:after, .techblog main .sec-slider .swiper-nav-wrap .swiper-button-next:after { content: none; } .techblog main .sec-slider .swiper-nav-wrap .swiper-button-prev span, .techblog main .sec-slider .swiper-nav-wrap .swiper-button-next span { display: block; width: 100%; } .techblog main .sec-slider .swiper-nav-wrap .swiper-button-prev i, .techblog main .sec-slider .swiper-nav-wrap .swiper-button-next i { display: block; width: 48px; height: 1px; position: absolute; top: 4px; overflow: hidden; } .techblog main .sec-slider .swiper-nav-wrap .swiper-button-prev i:before, .techblog main .sec-slider .swiper-nav-wrap .swiper-button-prev i:after, .techblog main .sec-slider .swiper-nav-wrap .swiper-button-next i:before, .techblog main .sec-slider .swiper-nav-wrap .swiper-button-next i:after { content: ""; width: 100%; height: 100%; background: #000; position: absolute; top: 0; } .techblog main .sec-slider .swiper-nav-wrap .swiper-button-prev { background-image: none; text-align: left; } .techblog main .sec-slider .swiper-nav-wrap .swiper-button-prev i { left: 40px; } .techblog main .sec-slider .swiper-nav-wrap .swiper-button-prev i:after { transform: translateX(-101%); } .techblog main .sec-slider .swiper-nav-wrap .swiper-button-prev:hover i:before { animation: hoveroutreverse 0.6s cubic-bezier(0.23, 1, 0.32, 1) forwards; } .techblog main .sec-slider .swiper-nav-wrap .swiper-button-prev:hover i:after { animation: hoverinreverse 0.7s 0.3s cubic-bezier(0.165, 0.84, 0.44, 1) forwards; } .techblog main .sec-slider .swiper-nav-wrap .swiper-button-next { background-image: none; text-align: right; } .techblog main .sec-slider .swiper-nav-wrap .swiper-button-next i { right: 40px; } .techblog main .sec-slider .swiper-nav-wrap .swiper-button-next i:before, .techblog main .sec-slider .swiper-nav-wrap .swiper-button-next i:after { content: ""; width: 100%; height: 100%; background: #000; position: absolute; left: 0; top: 0; } .techblog main .sec-slider .swiper-nav-wrap .swiper-button-next i:after { transform: translateX(-101%); } .techblog main .sec-slider .swiper-nav-wrap .swiper-button-next:hover i:before { animation: hoverout 0.6s cubic-bezier(0.23, 1, 0.32, 1) forwards; } .techblog main .sec-slider .swiper-nav-wrap .swiper-button-next:hover i:after { animation: hoverin 0.7s 0.3s cubic-bezier(0.165, 0.84, 0.44, 1) forwards; } .techblog main .sec-archives { width: 1100px; background: #fff; margin: 0 auto; padding: 50px; } .techblog main .sec-archives h2 { font-size: 25px; letter-spacing: 0.1em; margin: 0 0 29px; font-weight: normal; } .techblog main .sec-archives .wrap { display: flex; } .techblog main .sec-archives .btn-base { margin: 50px auto 0 auto; line-height: 1; border: 1px solid #efefef; } /* ------------- top - end -------------*/ /* ------------- detail -------------*/ .techblog.detail main { width: auto; padding: 0 0 110px; } .techblog.detail main section { position: relative; z-index: 10; } .techblog.detail main .content-wrap { width: 1100px; margin: 0 auto 160px; } .techblog.detail main .content-wrap .content-box { width: 1100px; background: #fff; margin: 0 auto; padding: 78px 50px 125px; display: flex; position: relative; } .techblog.detail main .content-wrap .entry-wrap { width: 680px; overflow: hidden; } .techblog.detail main .content-wrap .entry-wrap img { max-width: 100%; height: auto; } .techblog.detail main .content-wrap .entry-wrap .entry-header { background: #fff; width: 100%; } .techblog.detail main .content-wrap .entry-wrap .entry-header .header-top { display: flex; position: relative; align-items: center; padding: 0 0 20px; } .techblog.detail main .content-wrap .entry-wrap .entry-header .header-top time { font-size: 20px; font-family: "din-2014-narrow", sans-serif; font-weight: 400; color: rgba(0, 0, 0, 0.4); letter-spacing: 0.1em; display: block; margin: 0 14px 0 0; } .techblog.detail main .content-wrap .entry-wrap .entry-header .header-top b { display: block; width: auto; height: 31px; background-color: #8effc6; margin: 0 19px 0 0; transition: filter 0.3s; letter-spacing: 0.1em; } .techblog.detail main .content-wrap .entry-wrap .entry-header .header-top b:hover { filter: brightness(1.15); } .techblog.detail main .content-wrap .entry-wrap .entry-header .header-top b a { display: block; width: 100%; height: 100%; padding: 3px 20px; } .techblog.detail main .content-wrap .entry-wrap .entry-header .header-top b a { display: flex; align-items: center; justify-content: center; line-height: 1; } .techblog.detail main .content-wrap .entry-wrap .entry-header .header-top b a span { font-size: 20px; font-family: "din-2014-narrow", sans-serif; font-weight: 400; transform: rotate(0.05deg); } .techblog.detail main .content-wrap .entry-wrap .entry-header .header-top b a:hover { text-decoration: none; } .techblog.detail main .content-wrap .entry-wrap .entry-header .header-bottom { padding: 0 0 42px; } .techblog.detail main .content-wrap .entry-wrap .entry-header .header-bottom h1 { font-size: 28px; line-height: 1.5; font-weight: 500; letter-spacing: -0.01em; margin-bottom: 25px; } .techblog.detail main .content-wrap .entry-wrap .entry-header .header-bottom .tags { display: flex; margin: 0 -2.5px; flex-wrap: wrap; } .techblog.detail main .content-wrap .entry-wrap .entry-header .header-bottom .tags li { margin: 5px; } .techblog.detail main .content-wrap .entry-wrap .entry-header .header-bottom .tags li a { display: block; font-size: 13px; font-weight: 500; line-height: 1.92; background-color: #ebebeb; letter-spacing: 1px; padding: 2px 10px 0px; transition: opacity 0.3s; } .techblog.detail main .content-wrap .entry-wrap .entry-header .header-bottom .tags li a:hover { opacity: 0.7; } .techblog.detail main .content-wrap .entry-wrap hr { height: 0; margin: 0; } .techblog.detail main .content-wrap .writer_box { background: #f0f0f0; display: flex; padding: 36px 40px; margin: 60px 0 0; } .techblog.detail main .content-wrap .writer_box .profile_img { width: 136px; height: 136px; background-repeat: no-repeat; background-size: cover; background-position: center center; } .techblog.detail main .content-wrap .writer_box .text { width: calc(100% - 136px); padding: 8px 0 0 32px; } .techblog.detail main .content-wrap .writer_box .text .name { font-size: 14px; font-weight: bold; margin-bottom: 17px; } .techblog.detail main .content-wrap .writer_box .text .name a { text-decoration: underline; } .techblog.detail main .content-wrap .writer_box .text .name a:hover { text-decoration: none; } .techblog.detail main .content-wrap .writer_box .text .detail { font-size: 12px; font-weight: 300; line-height: 2.25; } .techblog.detail main .content-wrap .btn-base { text-decoration: none; line-height: 1; border: 1px solid #efefef; } .techblog.detail main .content-wrap .btn-base span { padding: 12px 0 0 10px; text-align: center; } .techblog.detail main .content-wrap .btn-base:hover { text-decoration: none !important; } .techblog.detail main .content-wrap .btn-base:hover i { color: #000; } .techblog.detail main .pager-wrap { position: absolute; left: 410px; bottom: -185px; } .techblog.detail main .pager { width: 220px; height: 11px; margin: 70px auto 0; position: relative; } .techblog.detail main .pager:after { content: ""; width: 9px; height: 9px; background-repeat: no-repeat; background-size: 100% auto; background-position: center top; background-image: url("../../images/common/rhombus.png"); position: absolute; left: 105px; top: 0.5px; } .techblog.detail main .pager .link_before, .techblog.detail main .pager .link_next { width: 88px; height: 9px; margin: 0; top: 0; bottom: auto; transition: opacity 0.3s; font-size: 12px; font-family: "din-2014-narrow", sans-serif; color: #000; cursor: pointer; } .techblog.detail main .pager .link_before:hover, .techblog.detail main .pager .link_next:hover { opacity: 0.7; } .techblog.detail main .pager .link_before:after, .techblog.detail main .pager .link_next:after { content: none; } .techblog.detail main .pager .link_before span, .techblog.detail main .pager .link_next span { display: block; width: 100%; } .techblog.detail main .pager .link_before i, .techblog.detail main .pager .link_next i { display: block; width: 48px; height: 1px; position: absolute; top: 5px; overflow: hidden; } .techblog.detail main .pager .link_before i:before, .techblog.detail main .pager .link_next i:before { content: ""; width: 100%; height: 100%; background: #000; position: absolute; top: 0; } .techblog.detail main .pager .link_before i:after, .techblog.detail main .pager .link_next i:after { content: ""; width: 100%; height: 100%; background: #000; position: absolute; top: 0; } .techblog.detail main .pager .link_before { background-image: none; text-align: left; position: absolute; } .techblog.detail main .pager .link_before i { left: 40px; } .techblog.detail main .pager .link_before i:after { transform: translateX(-101%); } .techblog.detail main .pager .link_before:hover i:before { animation: hoveroutreverse 0.6s cubic-bezier(0.23, 1, 0.32, 1) forwards; } .techblog.detail main .pager .link_before:hover i:after { animation: hoverinreverse 0.7s 0.3s cubic-bezier(0.165, 0.84, 0.44, 1) forwards; } .techblog.detail main .pager .link_next { background-image: none; text-align: right; position: absolute; right: 0; } .techblog.detail main .pager .link_next span { position: absolute; right: 0; top: 0; } .techblog.detail main .pager .link_next i { right: 40px; } .techblog.detail main .pager .link_next i:before, .techblog.detail main .pager .link_next i:after { content: ""; width: 100%; height: 100%; background: #000; position: absolute; left: 0; top: 0; } .techblog.detail main .pager .link_next i:after { transform: translateX(-101%); } .techblog.detail main .pager .link_next:hover i:before { animation: hoverout 0.6s cubic-bezier(0.23, 1, 0.32, 1) forwards; } .techblog.detail main .pager .link_next:hover i:after { animation: hoverin 0.7s 0.3s cubic-bezier(0.165, 0.84, 0.44, 1) forwards; } .techblog.detail main .btn-blogtop { margin: 60px auto 0; border: 1px solid #efefef; } .techblog.detail main .btn-blogtop span { padding-left: 10px; padding-right: 0; text-align: center; } .techblog.detail main .btn-mid-recruit { width: 1000px; height: 130px; display: flex; align-items: center; padding: 0 60px; background: url("../images/btn-recruit-mid-bg.jpg") no-repeat left top/cover; padding: 0 60px; font-size: 21px; font-weight: 500; position: relative; margin: 83px auto 0; } .techblog.detail main .btn-mid-recruit span { transition: opacity 0.3s; } .techblog.detail main .btn-mid-recruit:hover span { opacity: 0.7; } .techblog.detail main .btn-mid-recruit:after { content: ""; width: 43px; height: 1px; background: #000; position: absolute; right: 0; top: 50%; z-index: 15; } /* ------------- detail - end -------------*/ .mce-content-body, .entrybody, .wysiwyg.entry, .tox-navobj { /*画像ボックス*/ /*リスト*/ /*コードのスライドボタン*/ /*コードボックス*/ /*アコーディオン*/ } .mce-content-body .entry_kv, .entrybody .entry_kv, .wysiwyg.entry .entry_kv, .tox-navobj .entry_kv { min-height: inherit; } .mce-content-body a, .mce-content-body p, .entrybody a, .entrybody p, .wysiwyg.entry a, .wysiwyg.entry p, .tox-navobj a, .tox-navobj p { word-break: break-all; } .mce-content-body p + p, .mce-content-body p + h2, .mce-content-body p + h3, .mce-content-body p + h4, .mce-content-body p + figure, .mce-content-body p + table, .mce-content-body p + div, .mce-content-body p + ul, .mce-content-body p + ol, .mce-content-body div + p, .mce-content-body div + h2, .mce-content-body div + h3, .mce-content-body div + h4, .mce-content-body div + figure, .mce-content-body div + table, .mce-content-body div + div, .mce-content-body div + ul, .mce-content-body div + ol, .entrybody p + p, .entrybody p + h2, .entrybody p + h3, .entrybody p + h4, .entrybody p + figure, .entrybody p + table, .entrybody p + div, .entrybody p + ul, .entrybody p + ol, .entrybody div + p, .entrybody div + h2, .entrybody div + h3, .entrybody div + h4, .entrybody div + figure, .entrybody div + table, .entrybody div + div, .entrybody div + ul, .entrybody div + ol, .wysiwyg.entry p + p, .wysiwyg.entry p + h2, .wysiwyg.entry p + h3, .wysiwyg.entry p + h4, .wysiwyg.entry p + figure, .wysiwyg.entry p + table, .wysiwyg.entry p + div, .wysiwyg.entry p + ul, .wysiwyg.entry p + ol, .wysiwyg.entry div + p, .wysiwyg.entry div + h2, .wysiwyg.entry div + h3, .wysiwyg.entry div + h4, .wysiwyg.entry div + figure, .wysiwyg.entry div + table, .wysiwyg.entry div + div, .wysiwyg.entry div + ul, .wysiwyg.entry div + ol, .tox-navobj p + p, .tox-navobj p + h2, .tox-navobj p + h3, .tox-navobj p + h4, .tox-navobj p + figure, .tox-navobj p + table, .tox-navobj p + div, .tox-navobj p + ul, .tox-navobj p + ol, .tox-navobj div + p, .tox-navobj div + h2, .tox-navobj div + h3, .tox-navobj div + h4, .tox-navobj div + figure, .tox-navobj div + table, .tox-navobj div + div, .tox-navobj div + ul, .tox-navobj div + ol { margin-top: 1em; } .mce-content-body figure + p, .entrybody figure + p, .wysiwyg.entry figure + p, .tox-navobj figure + p { margin-top: 1em; } .mce-content-body p, .mce-content-body li, .entrybody p, .entrybody li, .wysiwyg.entry p, .wysiwyg.entry li, .tox-navobj p, .tox-navobj li { font-size: 16px; font-weight: 300; line-height: 2; letter-spacing: 0.1em; min-height: 1em; } .mce-content-body a, .entrybody a, .wysiwyg.entry a, .tox-navobj a { color: #08a771; } .mce-content-body a:hover, .entrybody a:hover, .wysiwyg.entry a:hover, .tox-navobj a:hover { text-decoration: underline; } .mce-content-body h2, .entrybody h2, .wysiwyg.entry h2, .tox-navobj h2 { font-size: 25px; font-weight: 500; line-height: 1.45; position: relative; background: #f0f0f0; padding: 3px 0 6px 28px; } .mce-content-body h2:before, .entrybody h2:before, .wysiwyg.entry h2:before, .tox-navobj h2:before { content: ""; width: 12px; height: 100%; background: #8effc6; position: absolute; left: 0; top: 0; } .mce-content-body h3, .entrybody h3, .wysiwyg.entry h3, .tox-navobj h3 { font-size: 22px; font-weight: 500; line-height: 1.5; position: relative; padding: 2px 0 5px 28px; } .mce-content-body h3:before, .entrybody h3:before, .wysiwyg.entry h3:before, .tox-navobj h3:before { content: ""; width: 12px; height: 100%; background: #8effc6; position: absolute; left: 0; top: 0; } .mce-content-body h4, .entrybody h4, .wysiwyg.entry h4, .tox-navobj h4 { font-size: 18px; font-weight: 500; line-height: 1.5; padding: 5px 30px 6px; background-color: #f0f0f0; } .mce-content-body h2, .mce-content-body h3, .mce-content-body h4, .entrybody h2, .entrybody h3, .entrybody h4, .wysiwyg.entry h2, .wysiwyg.entry h3, .wysiwyg.entry h4, .tox-navobj h2, .tox-navobj h3, .tox-navobj h4 { margin: 0 0 16px; letter-spacing: 0.1em; } .mce-content-body img, .entrybody img, .wysiwyg.entry img, .tox-navobj img { margin-top: 20px; margin-bottom: 20px; } .mce-content-body figure img, .entrybody figure img, .wysiwyg.entry figure img, .tox-navobj figure img { max-width: 100%; height: auto; margin-bottom: 0; } .mce-content-body figure figcaption, .entrybody figure figcaption, .wysiwyg.entry figure figcaption, .tox-navobj figure figcaption { font-size: 14px; font-weight: 500; line-height: 1.93; letter-spacing: 1.4px; text-align: left; color: #a8a8a8; margin-top: 15px; } .mce-content-body .fig-box-modal, .entrybody .fig-box-modal, .wysiwyg.entry .fig-box-modal, .tox-navobj .fig-box-modal { display: flex; justify-content: space-between; margin-bottom: 0; } .mce-content-body .fig-box-modal a, .entrybody .fig-box-modal a, .wysiwyg.entry .fig-box-modal a, .tox-navobj .fig-box-modal a { width: calc((100% - 10px) / 2); margin-bottom: 20px; margin-top: 20px; } .mce-content-body .fig-box-modal a img, .entrybody .fig-box-modal a img, .wysiwyg.entry .fig-box-modal a img, .tox-navobj .fig-box-modal a img { display: block; width: 100%; margin-bottom: 0; margin-top: 0; } .mce-content-body .fig-box, .entrybody .fig-box, .wysiwyg.entry .fig-box, .tox-navobj .fig-box { display: flex; justify-content: space-between; } .mce-content-body .fig-box .caption, .entrybody .fig-box .caption, .wysiwyg.entry .fig-box .caption, .tox-navobj .fig-box .caption { font-size: 14px; font-weight: 500; line-height: 1.93; letter-spacing: 1.4px; text-align: left; color: #a8a8a8; margin-top: 15px; } .mce-content-body .fig-box figure, .entrybody .fig-box figure, .wysiwyg.entry .fig-box figure, .tox-navobj .fig-box figure { width: calc((100% - 10px) / 2); } .mce-content-body .fig-box figure img, .entrybody .fig-box figure img, .wysiwyg.entry .fig-box figure img, .tox-navobj .fig-box figure img { display: block; width: 100%; margin-bottom: 20px; margin-top: 20px; } .mce-content-body .fig-box.fig-two figure, .entrybody .fig-box.fig-two figure, .wysiwyg.entry .fig-box.fig-two figure, .tox-navobj .fig-box.fig-two figure { width: auto; display: flex; align-items: flex-start; flex-wrap: wrap; margin-bottom: 20px; } .mce-content-body .fig-box.fig-two figure img, .entrybody .fig-box.fig-two figure img, .wysiwyg.entry .fig-box.fig-two figure img, .tox-navobj .fig-box.fig-two figure img { width: calc((100% - 10px) / 2); display: inline; margin-bottom: 0; margin-top: 20px; } .mce-content-body .fig-box.fig-two figure img + img, .entrybody .fig-box.fig-two figure img + img, .wysiwyg.entry .fig-box.fig-two figure img + img, .tox-navobj .fig-box.fig-two figure img + img { margin-left: 10px; } .mce-content-body .fig-box.fig-two figure figcaption, .entrybody .fig-box.fig-two figure figcaption, .wysiwyg.entry .fig-box.fig-two figure figcaption, .tox-navobj .fig-box.fig-two figure figcaption { width: 100%; } .mce-content-body .fig-box.fig-two-modal div, .entrybody .fig-box.fig-two-modal div, .wysiwyg.entry .fig-box.fig-two-modal div, .tox-navobj .fig-box.fig-two-modal div { width: auto; display: flex; align-items: flex-start; flex-wrap: wrap; margin-bottom: 20px; margin-top: 20px; } .mce-content-body .fig-box.fig-two-modal div a, .entrybody .fig-box.fig-two-modal div a, .wysiwyg.entry .fig-box.fig-two-modal div a, .tox-navobj .fig-box.fig-two-modal div a { display: block; width: calc((100% - 10px) / 2); display: inline; margin-bottom: 0; } .mce-content-body .fig-box.fig-two-modal div a img, .entrybody .fig-box.fig-two-modal div a img, .wysiwyg.entry .fig-box.fig-two-modal div a img, .tox-navobj .fig-box.fig-two-modal div a img { margin-bottom: 0; margin-top: 0; } .mce-content-body .fig-box.fig-two-modal div a + a, .entrybody .fig-box.fig-two-modal div a + a, .wysiwyg.entry .fig-box.fig-two-modal div a + a, .tox-navobj .fig-box.fig-two-modal div a + a { margin-left: 10px; } .mce-content-body .fig-box.fig-two-modal p.caption, .entrybody .fig-box.fig-two-modal p.caption, .wysiwyg.entry .fig-box.fig-two-modal p.caption, .tox-navobj .fig-box.fig-two-modal p.caption { width: 100%; } .mce-content-body .fig-box.fig-three figure, .entrybody .fig-box.fig-three figure, .wysiwyg.entry .fig-box.fig-three figure, .tox-navobj .fig-box.fig-three figure { width: auto; display: flex; align-items: flex-start; flex-wrap: wrap; margin-bottom: 20px; } .mce-content-body .fig-box.fig-three figure img, .entrybody .fig-box.fig-three figure img, .wysiwyg.entry .fig-box.fig-three figure img, .tox-navobj .fig-box.fig-three figure img { width: calc((100% - 20px) / 3); display: inline; margin-top: 20px; margin-bottom: 0; } .mce-content-body .fig-box.fig-three figure img + img, .entrybody .fig-box.fig-three figure img + img, .wysiwyg.entry .fig-box.fig-three figure img + img, .tox-navobj .fig-box.fig-three figure img + img { margin-left: 10px; } .mce-content-body .fig-box.fig-three figure figcaption, .entrybody .fig-box.fig-three figure figcaption, .wysiwyg.entry .fig-box.fig-three figure figcaption, .tox-navobj .fig-box.fig-three figure figcaption { width: 100%; } .mce-content-body .fig-box.fig-three-modal div, .entrybody .fig-box.fig-three-modal div, .wysiwyg.entry .fig-box.fig-three-modal div, .tox-navobj .fig-box.fig-three-modal div { width: auto; display: flex; align-items: flex-start; flex-wrap: wrap; margin-top: 20px; margin-bottom: 20px; } .mce-content-body .fig-box.fig-three-modal div a, .entrybody .fig-box.fig-three-modal div a, .wysiwyg.entry .fig-box.fig-three-modal div a, .tox-navobj .fig-box.fig-three-modal div a { display: block; width: calc((100% - 20px) / 3); display: inline; } .mce-content-body .fig-box.fig-three-modal div a img, .entrybody .fig-box.fig-three-modal div a img, .wysiwyg.entry .fig-box.fig-three-modal div a img, .tox-navobj .fig-box.fig-three-modal div a img { margin-bottom: 0; margin-top: 0; } .mce-content-body .fig-box.fig-three-modal div a + a, .entrybody .fig-box.fig-three-modal div a + a, .wysiwyg.entry .fig-box.fig-three-modal div a + a, .tox-navobj .fig-box.fig-three-modal div a + a { margin-left: 10px; } .mce-content-body .fig-box.fig-three-modal .caption, .entrybody .fig-box.fig-three-modal .caption, .wysiwyg.entry .fig-box.fig-three-modal .caption, .tox-navobj .fig-box.fig-three-modal .caption { width: 100%; } .mce-content-body .fig-one, .entrybody .fig-one, .wysiwyg.entry .fig-one, .tox-navobj .fig-one { padding-bottom: 20px; } .mce-content-body ul, .mce-content-body ol, .entrybody ul, .entrybody ol, .wysiwyg.entry ul, .wysiwyg.entry ol, .tox-navobj ul, .tox-navobj ol { margin-bottom: 1em; box-sizing: border-box; } .mce-content-body ul, .entrybody ul, .wysiwyg.entry ul, .tox-navobj ul { list-style: none; } .mce-content-body ul li, .entrybody ul li, .wysiwyg.entry ul li, .tox-navobj ul li { padding: 0 0 0 25px; position: relative; list-style: none; } .mce-content-body ul li:before, .entrybody ul li:before, .wysiwyg.entry ul li:before, .tox-navobj ul li:before { content: "・"; width: 1em; height: 1em; position: absolute; left: 0; top: 0; } .mce-content-body ol, .entrybody ol, .wysiwyg.entry ol, .tox-navobj ol { padding: 0 0 0 25px; } .mce-content-body ol li, .entrybody ol li, .wysiwyg.entry ol li, .tox-navobj ol li { list-style: decimal; } .mce-content-body .title-slidebox, .entrybody .title-slidebox, .wysiwyg.entry .title-slidebox, .tox-navobj .title-slidebox { font-size: 13px; font-weight: 300; border: solid 1px #666666; padding: 10px 27px; position: relative; margin: 0 0 16px; cursor: pointer; } .mce-content-body .title-slidebox a.btn-code, .entrybody .title-slidebox a.btn-code, .wysiwyg.entry .title-slidebox a.btn-code, .tox-navobj .title-slidebox a.btn-code { width: 180px; height: 100%; position: absolute; right: 35px; top: 0; bottom: 0; margin: auto; } .mce-content-body .title-slidebox a.btn-code i, .entrybody .title-slidebox a.btn-code i, .wysiwyg.entry .title-slidebox a.btn-code i, .tox-navobj .title-slidebox a.btn-code i { font-style: normal; position: absolute; padding-left: 14px; right: 0; top: 0; bottom: 0; transition: opacity 0.3s; padding-top: 9px; } .mce-content-body .title-slidebox a.btn-code i:before, .entrybody .title-slidebox a.btn-code i:before, .wysiwyg.entry .title-slidebox a.btn-code i:before, .tox-navobj .title-slidebox a.btn-code i:before { content: ""; width: 7px; height: 12px; background: url("../images/icon-arr.png") no-repeat right center/contain; position: absolute; left: 0; top: 0; bottom: 0; margin: auto; } .mce-content-body .title-slidebox a.btn-code .open-text, .entrybody .title-slidebox a.btn-code .open-text, .wysiwyg.entry .title-slidebox a.btn-code .open-text, .tox-navobj .title-slidebox a.btn-code .open-text { opacity: 0; } .mce-content-body .title-slidebox a.btn-code .open-text:before, .entrybody .title-slidebox a.btn-code .open-text:before, .wysiwyg.entry .title-slidebox a.btn-code .open-text:before, .tox-navobj .title-slidebox a.btn-code .open-text:before { transform: rotate(90deg); top: 1px; } .mce-content-body .title-slidebox a.btn-code:hover i, .entrybody .title-slidebox a.btn-code:hover i, .wysiwyg.entry .title-slidebox a.btn-code:hover i, .tox-navobj .title-slidebox a.btn-code:hover i { text-decoration: underline; } .mce-content-body .title-slidebox a.btn-code.active .close-text, .entrybody .title-slidebox a.btn-code.active .close-text, .wysiwyg.entry .title-slidebox a.btn-code.active .close-text, .tox-navobj .title-slidebox a.btn-code.active .close-text { opacity: 0; } .mce-content-body .title-slidebox a.btn-code.active .open-text, .entrybody .title-slidebox a.btn-code.active .open-text, .wysiwyg.entry .title-slidebox a.btn-code.active .open-text, .tox-navobj .title-slidebox a.btn-code.active .open-text { opacity: 1; } .mce-content-body .code-slidebox, .entrybody .code-slidebox, .wysiwyg.entry .code-slidebox, .tox-navobj .code-slidebox { display: none; } .mce-content-body .code-box, .entrybody .code-box, .wysiwyg.entry .code-box, .tox-navobj .code-box { background: #000; color: #fff; padding: 10px 20px 10px 45px; margin: 18px 0; box-sizing: border-box; overflow:hidden; overflow-x:scroll; /* &.code-box-sample{padding:10px 20px 10px 15px; pre{overflow-x:scroll;background-image: url("../images/code-border.png");background-position: left top; background-size: 1px 58px;word-wrap:normal} ol{white-space: pre;list-style-position: inside; li{list-style-position: inside;height: 29px;} li.L1, li.L3, li.L5, li.L7, li.L9 { background: none} } }*/ } .mce-content-body .code-box ol, .entrybody .code-box ol, .wysiwyg.entry .code-box ol, .tox-navobj .code-box ol { margin-bottom: 0; padding: 0; } /* takeno add */ .entrybody .code-box { widrh: 100%; margin: 18px 0; padding: 10px 20px 10px 45px; background: #000; box-sizing: border-box; color: #fff; overflow:hidden; overflow-x:scroll; } /* /takeno add */ .mce-content-body .code-box ol li, .entrybody .code-box ol li, .wysiwyg.entry .code-box ol li, .tox-navobj .code-box ol li { font-size: 16px; font-weight: 300; line-height: 1.8; letter-spacing: 0.1em; } .mce-content-body .code-box + .code-box, .entrybody .code-box + .code-box, .wysiwyg.entry .code-box + .code-box, .tox-navobj .code-box + .code-box { margin-top: 36px; } .mce-content-body .code-box + *, .entrybody .code-box + *, .wysiwyg.entry .code-box + *, .tox-navobj .code-box + * { margin-top: 36px; } .mce-content-body .slide-btn, .entrybody .slide-btn, .wysiwyg.entry .slide-btn, .tox-navobj .slide-btn { display: inline-block; border: solid 1px #000; padding: 12px 38px; position: relative; font-size: 13px; font-weight: 300; letter-spacing: 0.1em; cursor: pointer; margin-bottom: 35px; color: #08a771; } .mce-content-body .slide-btn:before, .entrybody .slide-btn:before, .wysiwyg.entry .slide-btn:before, .tox-navobj .slide-btn:before { content: ""; width: 7px; height: 12px; background: url("../images/icon-arr.png") no-repeat right center/contain; position: absolute; left: 18px; top: 2px; bottom: 0; margin: auto; transition: transform 0.3s; transform-origin: center center; } .mce-content-body .slide-btn.active:before, .entrybody .slide-btn.active:before, .wysiwyg.entry .slide-btn.active:before, .tox-navobj .slide-btn.active:before { transform: rotate(90deg); } .mce-content-body .slide-content, .entrybody .slide-content, .wysiwyg.entry .slide-content, .tox-navobj .slide-content { padding: 0 30px; display: none; } .mce-content-body .box-attention, .entrybody .box-attention, .wysiwyg.entry .box-attention, .tox-navobj .box-attention { border: solid 1px #949494; padding: 20px 43px; margin-bottom: 40px; } .mce-content-body .box-attention .box-title, .entrybody .box-attention .box-title, .wysiwyg.entry .box-attention .box-title, .tox-navobj .box-attention .box-title { color: #000; position: relative; } .mce-content-body .box-attention .box-title:before, .entrybody .box-attention .box-title:before, .wysiwyg.entry .box-attention .box-title:before, .tox-navobj .box-attention .box-title:before { content: ""; width: 15px; height: 15px; background: url("../images/icon-info.png") no-repeat right center/contain; position: absolute; left: -20px; top: 0; bottom: 0; margin: auto; } .mce-content-body .box-attention .box-text, .entrybody .box-attention .box-text, .wysiwyg.entry .box-attention .box-text, .tox-navobj .box-attention .box-text { margin-top: 0; } .mce-content-body .box-attention p, .entrybody .box-attention p, .wysiwyg.entry .box-attention p, .tox-navobj .box-attention p { font-size: 13px; font-weight: 300; line-height: 1.92; color: #ec0000; margin: 0; } .mce-content-body table tr, .mce-content-body table th, .mce-content-body table td, .entrybody table tr, .entrybody table th, .entrybody table td, .wysiwyg.entry table tr, .wysiwyg.entry table th, .wysiwyg.entry table td, .tox-navobj table tr, .tox-navobj table th, .tox-navobj table td { border: solid 1px #949494; border-collapse: collapse; } .mce-content-body table th, .mce-content-body table td, .entrybody table th, .entrybody table td, .wysiwyg.entry table th, .wysiwyg.entry table td, .tox-navobj table th, .tox-navobj table td { font-size: 14px; font-weight: 500; line-height: 1.93; padding: 12px 26px; vertical-align: middle; } .mce-content-body table th, .entrybody table th, .wysiwyg.entry table th, .tox-navobj table th { background: #f0f0f0; text-align: center; } .mce-content-body .box-quote, .entrybody .box-quote, .wysiwyg.entry .box-quote, .tox-navobj .box-quote { background: #f0f0f0; padding: 47px 47px; position: relative; margin-bottom: 40px; } .mce-content-body .box-quote p, .entrybody .box-quote p, .wysiwyg.entry .box-quote p, .tox-navobj .box-quote p { margin-bottom: 0; font-size: 13px; font-weight: 300; line-height: 1.92; } .mce-content-body .box-quote:before, .mce-content-body .box-quote:after, .entrybody .box-quote:before, .entrybody .box-quote:after, .wysiwyg.entry .box-quote:before, .wysiwyg.entry .box-quote:after, .tox-navobj .box-quote:before, .tox-navobj .box-quote:after { content: ""; width: 15px; height: 13px; background-repeat: no-repeat; background-size: contain; background-position: center center; position: absolute; } .mce-content-body .box-quote:before, .entrybody .box-quote:before, .wysiwyg.entry .box-quote:before, .tox-navobj .box-quote:before { background-image: url("../images/icon-quote-top.png"); left: 28px; top: 30px; } .mce-content-body .box-quote:after, .entrybody .box-quote:after, .wysiwyg.entry .box-quote:after, .tox-navobj .box-quote:after { background-image: url("../images/icon-quote-bottom.png"); right: 28px; bottom: 30px; } .mce-content-body .box-tips, .mce-content-body .box-note, .entrybody .box-tips, .entrybody .box-note, .wysiwyg.entry .box-tips, .wysiwyg.entry .box-note, .tox-navobj .box-tips, .tox-navobj .box-note { border: solid 1px #949494; margin-bottom: 40px; padding: 22px 30px; } .mce-content-body .box-tips .box-title, .mce-content-body .box-note .box-title, .entrybody .box-tips .box-title, .entrybody .box-note .box-title, .wysiwyg.entry .box-tips .box-title, .wysiwyg.entry .box-note .box-title, .tox-navobj .box-tips .box-title, .tox-navobj .box-note .box-title { font-size: 20px; font-family: "din-2014-narrow", sans-serif; font-weight: 400; } .mce-content-body .box-tips .box-text, .mce-content-body .box-note .box-text, .entrybody .box-tips .box-text, .entrybody .box-note .box-text, .wysiwyg.entry .box-tips .box-text, .wysiwyg.entry .box-note .box-text, .tox-navobj .box-tips .box-text, .tox-navobj .box-note .box-text { margin-top: 0; } .mce-content-body .box-tips p, .mce-content-body .box-note p, .entrybody .box-tips p, .entrybody .box-note p, .wysiwyg.entry .box-tips p, .wysiwyg.entry .box-note p, .tox-navobj .box-tips p, .tox-navobj .box-note p { font-size: 13px; font-weight: 300; line-height: 1.92; margin-bottom: 0; } .mce-content-body .toggle_content-start { border: none; position: relative; height: 2em; margin: 1em 0; } .mce-content-body .toggle_content-end { border: none; position: relative; height: 2em; margin: 1em 0; } .mce-content-body .toggle_content-start:before { content: "-----------------------------------詳細文ここから-----------------------------------"; position: absolute; left: 0; top: 0; color: red; } .mce-content-body .toggle_content-end:before { content: "-----------------------------------詳細文ここまで-----------------------------------"; position: absolute; left: 0; top: 0; color: red; } .mce-content-body, .wysiwyg.entry, .tox-navobj { max-width: 680px; padding: 10px; } .mce-content-body img, .wysiwyg.entry img, .tox-navobj img { max-width: 100%; height: auto; } .mce-content-body .btn-base, .wysiwyg.entry .btn-base, .tox-navobj .btn-base { width: 270px; height: 44px; background: #000; display: block; position: relative; overflow: hidden; box-sizing: border-box; text-decoration: none; line-height: 1; border: 1px solid #efefef; color: #fff; } .mce-content-body .btn-base:before, .wysiwyg.entry .btn-base:before, .tox-navobj .btn-base:before { content: ""; width: 100%; height: 100%; position: absolute; left: 0; top: 0; background: #000; } .mce-content-body .btn-base span, .wysiwyg.entry .btn-base span, .tox-navobj .btn-base span { display: block; width: 100%; height: 100%; position: relative; padding: 12px 0 0 10px; text-align: center; z-index: 10; box-sizing: border-box; } .mce-content-body .btn-base span:before, .wysiwyg.entry .btn-base span:before, .tox-navobj .btn-base span:before { content: ""; width: 43px; height: 1px; position: absolute; left: 0; top: 21px; transition: opacity 0.4s; background: #fff; opacity: 1; } .mce-content-body .btn-base i, .wysiwyg.entry .btn-base i, .tox-navobj .btn-base i { font-size: 15px; color: #fff; font-family: "din-2014-narrow", sans-serif; font-weight: 400; font-style: normal; letter-spacing: 0.1em; transition-delay: 0.2s; transition: color 0.3s; } .mce-content-body .btn-base:hover, .wysiwyg.entry .btn-base:hover, .tox-navobj .btn-base:hover { text-decoration: none !important; } .mce-content-body ul, .wysiwyg.entry ul, .tox-navobj ul { list-style: none; padding-left: 0; } .mce-content-body ul li, .wysiwyg.entry ul li, .tox-navobj ul li { list-style: none; } @media (max-width: 768px) { /* ------------- commom -------------*/ .techblog .inner-archive { width: 100%; } .techblog .inner-archive .item { min-height: inherit; align-items: center; padding: 0 0 0; border-right: none; border-left: none; } .techblog .inner-archive .item + .item { margin: 7.227vw 0 0; } .techblog .inner-archive .item > a { display: block; width: 34.18vw; height: 41.016vw; padding: 5.859vw 0 5.859vw 4.883vw; } .techblog .inner-archive .item .thumb { width: 29.297vw; height: 29.297vw; } .techblog .inner-archive .item .thumb:before { content: none; } .techblog .inner-archive .item .detail { width: 100%; padding: 5.859vw 4.883vw 5.859vw 4.883vw; width: calc(100% - 29.297vw); } .techblog .inner-archive .item .detail:before { display: none; } .techblog .inner-archive .item .detail .archive-category { display: inline-block; letter-spacing: 0.05em; min-width: 22.266vw; text-align: center; margin-right: 4.395vw; } .techblog .inner-archive .item .detail .archive-category a { font-size: 2.734vw; padding: 2vw 1.953vw 1.5vw; } .techblog .inner-archive .item .detail p.archive-title { margin: 4.5vw 0 3vw 0; letter-spacing: 0.05em; width: 100%; font-size: 2.93vw; } .techblog .inner-archive .item .detail p.archive-title a { font-size: 2.93vw; line-height: 1.5; } .techblog .inner-archive .item .detail time.sp-item { font-size: 3.125vw; letter-spacing: 0.05em; display: inline-block !important; padding: 0 0 0; } .techblog .inner-archive .item .detail .archive-tags { margin: 2.93vw 0 0 -1.465vw; } .techblog .inner-archive .item .detail .archive-tags li { margin: 1.465vw; } .techblog .inner-archive .item .detail .archive-tags li a { font-size: 2.344vw; letter-spacing: 0.05em; padding: 0 1.953vw; } .techblog .inner-archive .item .detail .archive-tags li a:hover { opacity: 1; } .techblog .inner-archive .item:hover .thumb span { transform: scale(1); } .techblog .inner-sidenav { width: 100%; margin: 0; } .techblog .inner-sidenav .archive-links { padding: 9.766vw 13.477vw 7.422vw; } .techblog .inner-sidenav h3 { font-size: 4.102vw; margin: 0 0 3.906vw; } .techblog .inner-sidenav .item { margin-bottom: 8.301vw; } .techblog .inner-sidenav .item-about { padding: 9.766vw 13.477vw 7.422vw; margin-bottom: 4.883vw; } .techblog .inner-sidenav .item-about p { font-size: 2.93vw; letter-spacing: 0.05em; } .techblog .inner-sidenav .item-categories li, .techblog .inner-sidenav .item-archives li { padding: 0 0 0 11.035vw; } .techblog .inner-sidenav .item-categories li:after, .techblog .inner-sidenav .item-archives li:after { width: 3.906vw; left: 3.516vw; top: 2.441vw; } .techblog .inner-sidenav .item-categories li a, .techblog .inner-sidenav .item-archives li a { font-size: 3.125vw; } .techblog .inner-sidenav .item-categories li + li, .techblog .inner-sidenav .item-archives li + li { margin-top: 3.906vw; } .techblog .inner-sidenav .item-tag { margin-bottom: 0; } .techblog .inner-sidenav .item-tag ul { margin: 0 -1.465vw; } .techblog .inner-sidenav .item-tag li { margin: 1.465vw; } .techblog .inner-sidenav .item-tag li a { font-size: 2.93vw; letter-spacing: 0.05em; padding: 0 1.953vw; } .techblog .inner-sidenav .item-tag li a:hover { opacity: 1; } .techblog .inner-sidenav .btn-recruit { width: 86.426vw; height: 32.813vw; background: url("../images/btn-recruit-bg@sp.jpg") no-repeat right top/cover; padding: 0 6.836vw; margin: 14.648vw auto 0; } .techblog .inner-sidenav .btn-recruit:hover { filter: brightness(1); } .techblog .inner-sidenav .btn-recruit:after { width: 14.648vw; } .techblog .inner-sidenav .btn-recruit .large { font-size: 8.887vw; padding-right: 4.297vw; } .techblog .inner-sidenav .btn-recruit .min { font-size: 3.906vw; } /* ------------- common end -------------*/ /* ------------- top -------------*/ .techblog main { width: auto; padding: 0 0 27.93vw; } .techblog main .sec-slider { margin: 0 0 14.648vw; padding-top: 13.281vw; } .techblog main .sec-slider .swiper-container .swiper-slide { width: 100% !important; height: 48.828vw; padding: 0; } .techblog main .sec-slider .swiper-container .swiper-slide .wrap { overflow: hidden; } .techblog main .sec-slider .swiper-container .swiper-slide .wrap .detail { background: url("../images/slider-bg@sp.jpg") no-repeat right top/cover; padding: 7.324vw 2.441vw 3.906vw 4.883vw; } .techblog main .sec-slider .swiper-container .swiper-slide .wrap .detail .category { font-size: 2.441vw; display: inline-block; padding: 1.367vw 1.953vw; letter-spacing: 0.05em; min-width: 15.625vw; text-align: center; } .techblog main .sec-slider .swiper-container .swiper-slide .wrap .detail p.title { font-size: 3.516vw; margin: 0 0 2.93vw; } .techblog main .sec-slider .swiper-container .swiper-slide .wrap .detail p.title a:hover { text-decoration: underline; } .techblog main .sec-slider .swiper-container .swiper-slide .wrap .detail time { font-size: 2.734vw; letter-spacing: 0.05em; margin-bottom: 0.977vw; display: block; } .techblog main .sec-slider .swiper-container .swiper-slide .wrap .detail .text { font-size: 1.758vw; } .techblog main .sec-slider .swiper-container .swiper-slide .wrap .detail .tags { display: none; } .techblog main .sec-slider .swiper-container .swiper-slide.kv-slide .detail { padding: 8.105vw 0 0; } .techblog main .sec-slider .swiper-container .swiper-slide.kv-slide .detail .logo { width: 7.031vw; height: 19.629vw; margin: 0 auto; } .techblog main .sec-slider .swiper-container .swiper-slide.kv-slide .detail h2 { font-size: 2.441vw; margin: 0.977vw 0 0; } .techblog main .sec-slider .swiper-container .swiper-slide.kv-slide .detail .text { font-size: 1.758vw; margin: 4.883vw 0 0; } .techblog main .sec-slider .swiper-container .swiper-slide a:hover .thumb span { transform: scale(1); } .techblog main .sec-slider .swiper-nav-wrap { width: 43.945vw; height: 2.051vw; margin: 3.418vw auto 0; } .techblog main .sec-slider .swiper-nav-wrap:after { width: 1.66vw; height: 1.563vw; position: absolute; left: 21.1vw; top: -0.127vw; background-size: auto 100%; } .techblog main .sec-slider .swiper-nav-wrap .swiper-button-prev, .techblog main .sec-slider .swiper-nav-wrap .swiper-button-next { width: 17.09vw; height: 1.465vw; font-size: 2.637vw; } .techblog main .sec-slider .swiper-nav-wrap .swiper-button-prev:hover, .techblog main .sec-slider .swiper-nav-wrap .swiper-button-next:hover { opacity: 1; } .techblog main .sec-slider .swiper-nav-wrap .swiper-button-prev:after, .techblog main .sec-slider .swiper-nav-wrap .swiper-button-next:after { content: none; } .techblog main .sec-slider .swiper-nav-wrap .swiper-button-prev span, .techblog main .sec-slider .swiper-nav-wrap .swiper-button-next span { display: block; width: 100%; } .techblog main .sec-slider .swiper-nav-wrap .swiper-button-prev i, .techblog main .sec-slider .swiper-nav-wrap .swiper-button-next i { width: 9.473vw; top: 0.488vw; } .techblog main .sec-slider .swiper-nav-wrap .swiper-button-prev i { left: 7.813vw; } .techblog main .sec-slider .swiper-nav-wrap .swiper-button-prev i:after { transform: translateX(-101%); } .techblog main .sec-slider .swiper-nav-wrap .swiper-button-prev:hover i:before { animation: none; } .techblog main .sec-slider .swiper-nav-wrap .swiper-button-prev:hover i:after { animation: none; } .techblog main .sec-slider .swiper-nav-wrap .swiper-button-next i { right: 7.813vw; } .techblog main .sec-slider .swiper-nav-wrap .swiper-button-next i:after { transform: translateX(-101%); } .techblog main .sec-slider .swiper-nav-wrap .swiper-button-next:hover i:before { animation: none; } .techblog main .sec-slider .swiper-nav-wrap .swiper-button-next:hover i:after { animation: none; } .techblog main .sec-archives { width: 100%; background: #fff; margin: 0 auto; padding: 9.766vw 0; } .techblog main .sec-archives h2 { font-size: 4.688vw; margin: 0 0 7.422vw; padding: 0 6.836vw; } .techblog main .sec-archives .wrap { display: block; } .techblog main .sec-archives .btn-base { margin: 14.648vw auto; } .ios .techblog main .sec-slider .swiper-container .swiper-slide .wrap .detail p.title { letter-spacing: -0.02em; } /* ------------- top - end -------------*/ /* ------------- detail -------------*/ .techblog.detail main { padding: 9.766vw 0 43.262vw; } .techblog.detail main .content-wrap { width: 100%; margin-bottom: 0; } .techblog.detail main .content-wrap .content-box { width: 100%; padding: 0; display: block; background: none; } .techblog.detail main .content-wrap .entry-wrap { width: 100%; } .techblog.detail main .content-wrap .entry-wrap .wrap-sp-bg { width: 100%; padding: 10.156vw 4.883vw 13.184vw; display: block; background: #fff; } .techblog.detail main .content-wrap .entry-wrap img { max-width: 100%; } .techblog.detail main .content-wrap .entry-wrap .entry-header { width: 100%; } .techblog.detail main .content-wrap .entry-wrap .entry-header .header-top { display: flex; position: relative; align-items: center; padding: 0 0 2.441vw; } .techblog.detail main .content-wrap .entry-wrap .entry-header .header-top time { font-size: 3.125vw; margin: 0 4.297vw 0 0; } .techblog.detail main .content-wrap .entry-wrap .entry-header .header-top b { height: 6.152vw; margin: 0 4.297vw 0 0; min-width: 22.266vw; } .techblog.detail main .content-wrap .entry-wrap .entry-header .header-top b:hover { filter: brightness(1); } .techblog.detail main .content-wrap .entry-wrap .entry-header .header-top b a { padding: 1.953vw 1.953vw 1.953vw; } .techblog.detail main .content-wrap .entry-wrap .entry-header .header-top b a span { font-size: 2.734vw; } .techblog.detail main .content-wrap .entry-wrap .entry-header .header-bottom { padding: 0 0 8.789vw; } .techblog.detail main .content-wrap .entry-wrap .entry-header .header-bottom h1 { font-size: 4.688vw; margin-bottom: 3.906vw; } .techblog.detail main .content-wrap .entry-wrap .entry-header .header-bottom .tags { display: flex; margin: 0 -1.465vw; } .techblog.detail main .content-wrap .entry-wrap .entry-header .header-bottom .tags li { margin: 1.465vw; } .techblog.detail main .content-wrap .entry-wrap .entry-header .header-bottom .tags li a { font-size: 2.93vw; letter-spacing: 0.05em; padding: 0 1.953vw; } .techblog.detail main .content-wrap .entry-wrap .entry-header .header-bottom .tags li a:hover { opacity: 1; } .techblog.detail main .content-wrap .entry-wrap hr { height: 0; margin: 0; } .techblog.detail main .content-wrap .writer_box { display: flex; padding: 5.078vw 5.469vw; margin: 9.473vw 0 0; } .techblog.detail main .content-wrap .writer_box .profile_img { width: 24.414vw; height: 24.414vw; } .techblog.detail main .content-wrap .writer_box .text { width: calc(100% - 24.414vw); padding: 1.367vw 0 0 3.223vw; } .techblog.detail main .content-wrap .writer_box .text .name { font-size: 2.93vw; margin-bottom: 17px; } s .techblog.detail main .content-wrap .writer_box .text .name a:hover { text-decoration: underline; } .techblog.detail main .content-wrap .writer_box .text .detail { font-size: 2.734vw; font-weight: 300; line-height: 2.25; } .techblog.detail main .content-wrap .btn-base { text-decoration: none; margin: 0; } .techblog.detail main .content-wrap .btn-base span { padding: 3.125vw 0 0 1.953vw; } .techblog.detail main .content-wrap .btn-base:hover { text-decoration: none !important; } .techblog.detail main .pager-wrap { position: relative; left: auto; bottom: auto; margin-bottom: 0; padding-bottom: 22.461vw; } .techblog.detail main .pager { width: 44.434vw; height: 2.539vw; margin: 10.742vw auto 0; position: relative; } .techblog.detail main .pager:after { width: 1.66vw; height: 1.563vw; position: absolute; left: 21.1vw; top: 0.288vw; background-size: auto 100%; } .techblog.detail main .pager .link_before, .techblog.detail main .pager .link_next { width: 17.09vw; height: 1.465vw; font-size: 2.637vw; } .techblog.detail main .pager .link_before:hover, .techblog.detail main .pager .link_next:hover { opacity: 1; } .techblog.detail main .pager .link_before:after, .techblog.detail main .pager .link_next:after { content: none; } .techblog.detail main .pager .link_before span, .techblog.detail main .pager .link_next span { display: block; width: 100%; } .techblog.detail main .pager .link_before i, .techblog.detail main .pager .link_next i { display: block; width: 9.473vw; height: 1px; top: 1.288vw; } .techblog.detail main .pager .link_before { background-image: none; text-align: left; position: absolute; } .techblog.detail main .pager .link_before i { left: 7.52vw; } .techblog.detail main .pager .link_before i:after { transform: translateX(-101%); } .techblog.detail main .pager .link_before:hover i:before { animation: none; } .techblog.detail main .pager .link_before:hover i:after { animation: none; } .techblog.detail main .pager .link_next { background-image: none; text-align: right; position: absolute; right: 0; } .techblog.detail main .pager .link_next span { position: absolute; right: 0; top: 0; } .techblog.detail main .pager .link_next i { right: 7.52vw; } .techblog.detail main .pager .link_next i:before, .techblog.detail main .pager .link_next i:after { content: ""; width: 100%; height: 100%; background: #000; position: absolute; left: 0; top: 0; } .techblog.detail main .pager .link_next i:after { transform: translateX(-101%); } .techblog.detail main .pager .link_next:hover i:before { animation: none; } .techblog.detail main .pager .link_next:hover i:after { animation: none; } .techblog.detail main .btn-blogtop { margin: 14.648vw auto 0 !important; } .techblog.detail main .btn-blogtop span { padding-left: 1.953vw; padding-right: 0; text-align: center; } .techblog.detail main .btn-blogtop:hover span, .techblog.detail main .btn-blogtop:hover i { color: #fff !important; } .techblog.detail main .btn-mid-recruit { width: 86.426vw; height: 32.813vw; display: flex; align-items: center; background: url("../images/btn-recruit-mid-bg@sp.jpg") no-repeat left top/cover; padding: 0 7.813vw; font-size: 3.809vw; margin: 10.742vw auto 0; } .techblog.detail main .btn-mid-recruit:hover span { opacity: 1; } .techblog.detail main .btn-mid-recruit:after { width: 14.648vw; } .entrybody { /*画像ボックス*/ /*リスト*/ /*コードのスライドボタン*/ /*コードボックス*/ /*アコーディオン*/ } .entrybody p + p, .entrybody p + h2, .entrybody p + h3, .entrybody p + h4, .entrybody p + figure, .entrybody p + table, .entrybody p + div, .entrybody p + ul, .entrybody p + ol { margin-top: 1em; } .entrybody p, .entrybody li { font-size: 2.93vw; } .entrybody a { color: #08a771; } .entrybody a:hover { text-decoration: underline; } .entrybody h2 { font-size: 4.199vw; padding: 0.977vw 0 0.977vw 3.906vw; } .entrybody h2:before { width: 1.855vw; } .entrybody h3 { font-size: 3.711vw; padding: 0.977vw 3.906vw; } .entrybody h3:before { width: 1.855vw; } .entrybody h4 { font-size: 3.516vw; padding: 2.734vw 3.906vw; } .entrybody h2, .entrybody h3, .entrybody h4 { margin: 0 0 1em; letter-spacing: -0.01em; } .entrybody img { margin-top: 2.93vw; margin-bottom: 2.93vw; } .entrybody figure img { max-width: 100%; height: auto; } .entrybody figure figcaption { font-size: 3.125vw; letter-spacing: 0.1em; margin-top: 0.977vw; } .entrybody .fig-box-modal { display: flex; justify-content: space-between; } .entrybody .fig-box-modal a { width: calc((100% - 1.367vw) / 2); margin: 2.93vw 0; } .entrybody .fig-box-modal a img { display: block; width: 100%; margin-bottom: 0; margin-top: 0; } .entrybody .fig-box { display: flex; justify-content: space-between; } .entrybody .fig-box .caption { font-size: 3.125vw; letter-spacing: 0.1em; margin-top: 0.977vw; } .entrybody .fig-box figure { width: calc((100% - 1.367vw) / 2); margin: 2.93vw 0; } .entrybody .fig-box figure img { display: block; width: 100%; margin-bottom: 0; margin-top: 0; } .entrybody .fig-box.fig-two figure { width: auto; display: flex; align-items: flex-start; flex-wrap: wrap; margin: 2.93vw -0.684vw; } .entrybody .fig-box.fig-two figure img { width: calc((100% - 2.734vw) / 2); display: inline; margin: 0 0.684vw; margin-bottom: 0; margin-top: 0; } .entrybody .fig-box.fig-two figure img + img { margin-left: 0.684vw; } .entrybody .fig-box.fig-two figure figcaption { width: 100%; } .entrybody .fig-box.fig-two-modal div { width: auto; display: flex; align-items: flex-start; flex-wrap: wrap; margin: 2.93vw -0.684vw; } .entrybody .fig-box.fig-two-modal div a { width: calc((100% - 2.734vw) / 2); display: inline; margin: 0 0.684vw; margin-bottom: 0; margin-top: 0; } .entrybody .fig-box.fig-two-modal div a + a { margin-left: 0.684vw; } .entrybody .fig-box.fig-three figure { width: auto; display: flex; align-items: flex-start; flex-wrap: wrap; justify-content: center; margin: 2.93vw -0.684vw; } .entrybody .fig-box.fig-three figure img { width: calc((100% - 2.734vw) / 2); display: inline; margin: 0 0.684vw; margin-bottom: 0; margin-top: 0; } .entrybody .fig-box.fig-three figure img + img { margin: 0 0.684vw; } .entrybody .fig-box.fig-three figure img:nth-child(3) { margin-top: 0.684vw; } .entrybody .fig-box.fig-three figure figcaption { width: 100%; margin-bottom: 0; } .entrybody .fig-box.fig-three-modal div { width: auto; display: flex; align-items: flex-start; flex-wrap: wrap; justify-content: center; margin: 2.93vw -0.684vw; } .entrybody .fig-box.fig-three-modal div a { width: calc((100% - 2.734vw) / 2); display: inline; margin: 0 0.684vw; margin-bottom: 0; margin-top: 0; } .entrybody .fig-box.fig-three-modal div a img { width: 100%; margin: 0; } .entrybody .fig-box.fig-three-modal div a + a { margin: 0 0.684vw; } .entrybody .fig-box.fig-three-modal div a:nth-child(3) { margin-top: 0.684vw; } .entrybody .fig-one { padding-bottom: 2.93vw; } .entrybody ul, .entrybody ol { margin-bottom: 1em; } .entrybody ul { list-style: none; } .entrybody ul li { padding: 0 0 0 3.223vw; position: relative; list-style: none; } .entrybody ol { padding: 0 0 0 3.906vw; } .entrybody ol li { list-style: decimal; } .entrybody .title-slidebox { font-size: 2.93vw; padding: 0.977vw 2.734vw; position: relative; margin: 0 0 4.102vw; } .entrybody .title-slidebox a.btn-code { width: 37.109vw; height: 100%; position: absolute; right: 3.418vw; top: 0; bottom: 0; margin: auto; } .entrybody .title-slidebox a.btn-code i { font-style: normal; position: absolute; padding: 1vw 0 0 3.125vw; right: 0; top: 0; bottom: 0; transition: opacity 0.3s; } .entrybody .title-slidebox a.btn-code i:before { width: 1.367vw; height: 2.441vw; } .entrybody .title-slidebox a.btn-code .open-text { opacity: 0; } .entrybody .title-slidebox a.btn-code .open-text:before { transform: rotate(90deg); top: 1px; } .entrybody .title-slidebox a.btn-code:hover i { text-decoration: underline; } .entrybody .title-slidebox a.btn-code.active .close-text { opacity: 0; } .entrybody .title-slidebox a.btn-code.active .open-text { opacity: 1; } .entrybody .code-slidebox { display: none; } .entrybody .code-box { padding: 1.953vw 1.953vw 1.953vw 8.953vw; margin: 2.344vw 0; box-sizing: border-box; /* &.code-box-sample{padding:1.953vw 1.953vw 1.953vw 1.953vw; pre{overflow:auto;background-position: left top; background-size: 1px svw(110);} ol{ li{font-size: 2.93vw;height: svw(55);} li.L1, li.L3, li.L5, li.L7, li.L9 { background: none} } }*/ } .entrybody .code-box ol { margin-bottom: 0; padding: 0; } .entrybody .code-box ol li { font-size: 2.93vw; } .entrybody .code-box + .code-box { margin-top: 4.688vw; } .entrybody .code-box + * { margin-top: 4.688vw; } .entrybody .slide-btn { padding: 1.953vw 6.445vw; position: relative; font-size: 2.93vw; margin-bottom: 4.688vw; } .entrybody .slide-btn:before { width: 1.367vw; height: 2.441vw; background: url("../images/icon-arr.png") no-repeat right center/contain; position: absolute; left: 3.125vw; top: -0.023vw; bottom: 0; margin: auto; transition: transform 0.3s; transform-origin: center center; } .entrybody .slide-btn.active:before { transform: rotate(90deg); } .entrybody .slide-content { padding: 0 5.859vw; display: none; } .entrybody .box-attention { padding: 4.395vw 5.664vw; margin-bottom: 6.836vw; } .entrybody .box-attention .box-title { color: #000; position: relative; } .entrybody .box-attention .box-title:before { content: ""; width: 2.93vw; height: 2.93vw; left: -3.613vw; } .entrybody .box-attention .box-text { margin-top: 0; } .entrybody .box-attention p { font-size: 2.734vw; font-weight: 300; line-height: 1.92; color: #ec0000; margin: 0; } .entrybody table { width: 100%; } .entrybody table th, .entrybody table td { font-size: 2.441vw; padding: 1.758vw 3.418vw; } .entrybody .box-quote { padding: 6.836vw; position: relative; margin-bottom: 6.836vw; } .entrybody .box-quote p { margin-bottom: 0; font-size: 2.734vw; font-weight: 300; line-height: 1.92; } .entrybody .box-quote:before, .entrybody .box-quote:after { width: 2.148vw; height: 1.758vw; } .entrybody .box-quote:before { left: 3.125vw; top: 4.297vw; } .entrybody .box-quote:after { right: 4.297vw; bottom: 3.125vw; } .entrybody .box-tips, .entrybody .box-note { margin-bottom: 7.324vw; padding: 4.395vw 5.664vw; } .entrybody .box-tips .box-title, .entrybody .box-note .box-title { font-size: 3.418vw; } .entrybody .box-tips .box-text, .entrybody .box-note .box-text { margin-top: 0; } .entrybody .box-tips p, .entrybody .box-note p { font-size: 2.734vw; } .entrybody .btn-base { width: 66.895vw; height: 11.035vw; } .entrybody .btn-base span { padding: 3.5vw 0 0 1.953vw !important; } .entrybody .btn-base span:before { width: 10.742vw; height: 0.391vw; top: 5.176vw; } .entrybody .btn-base i { font-size: 3.711vw; font-weight: 300; } .entrybody .btn-base:hover span i { color: #fff !important; } /* ------------- detail - end -------------*/ } /*MORE用*/ .techblog .inner-archive .is-btn-hidden { display: none; } .techblog .inner-archive .item:before, .techblog .inner-archive .item:after { opacity: 1; transition: opacity 0.3s; } .techblog .inner-archive .item .thumb, .techblog .inner-archive .item .detail { opacity: 1; transition: opacity 0.5s; } .techblog .inner-archive .item.is-hidden { display: none; } .techblog .inner-archive .item.is-hidden:before, .techblog .inner-archive .item.is-hidden:after { opacity: 0; } .techblog .inner-archive .item.is-hidden .thumb, .techblog .inner-archive .item.is-hidden .detail { opacity: 0; } /* add for p_techblog.css 2306 */ .mce-content-body .fig-one-modal, .entrybody .fig-one-modal, .wysiwyg.entry .fig-one-modal, .tox-navobj .fig-one-modal, .fig-one-modal { display: block; } .mce-content-body .fig-one-modal img, .entrybody .fig-one-modal img, .wysiwyg.entry .fig-one-modal img, .tox-navobj .fig-one-modal img, .fig-one-modal img { margin-bottom: 0; } .mce-content-body .fig-one-modal p.caption, .entrybody .fig-one-modal p.caption, .wysiwyg.entry .fig-one-modal p.caption, .tox-navobj .fig-one-modal p.caption, .fig-one-modal p.caption { font-size: 14px; font-weight: 500; line-height: 1.93; letter-spacing: 1.4px; text-align: left; color: #a8a8a8; margin-top: 15px; }