:root { --base-color: #353535; --primary-color: #00ccca; --secondary-color: #ff4174; --accent-color: #0f30df; --gray-color: #e4e4e4; --gray-color-valiable1: #b6b6b6; --gray-color-valiable2: #c6c6c6; --gray-color-valiable3: #f1f1f1; --background-color: #484848; --shadow: 0px 4px 32px 0px rgba(52, 58, 67, 0.12); } /** * Swiper 8.4.7 * Most modern mobile touch slider and framework with hardware accelerated transitions * https://swiperjs.com * * Copyright 2014-2023 Vladimir Kharlampidi * * Released under the MIT License * * Released on: January 30, 2023 */ @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"); font-weight: 400; font-style: normal; } :root { --swiper-theme-color: #007aff; } .swiper { margin-left: auto; margin-right: auto; position: relative; overflow: hidden; list-style: none; padding: 0; z-index: 1; } .swiper-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-android .swiper-slide, .swiper-wrapper { transform: translate3d(0px, 0, 0); } .swiper-pointer-events { touch-action: pan-y; } .swiper-pointer-events.swiper-vertical { touch-action: pan-x; } .swiper-slide { flex-shrink: 0; width: 100%; height: 100%; position: relative; transition-property: transform; } .swiper-slide-invisible-blank { visibility: hidden; } .swiper-autoheight, .swiper-autoheight .swiper-slide { height: auto; } .swiper-autoheight .swiper-wrapper { align-items: flex-start; transition-property: transform, height; } .swiper-backface-hidden .swiper-slide { transform: translateZ(0); backface-visibility: hidden; } .swiper-3d, .swiper-3d.swiper-css-mode .swiper-wrapper { perspective: 1200px; } .swiper-3d .swiper-cube-shadow, .swiper-3d .swiper-slide, .swiper-3d .swiper-slide-shadow, .swiper-3d .swiper-slide-shadow-bottom, .swiper-3d .swiper-slide-shadow-left, .swiper-3d .swiper-slide-shadow-right, .swiper-3d .swiper-slide-shadow-top, .swiper-3d .swiper-wrapper { transform-style: preserve-3d; } .swiper-3d .swiper-slide-shadow, .swiper-3d .swiper-slide-shadow-bottom, .swiper-3d .swiper-slide-shadow-left, .swiper-3d .swiper-slide-shadow-right, .swiper-3d .swiper-slide-shadow-top { position: absolute; left: 0; top: 0; width: 100%; height: 100%; pointer-events: none; z-index: 10; } .swiper-3d .swiper-slide-shadow { background: rgba(0, 0, 0, 0.15); } .swiper-3d .swiper-slide-shadow-left { background-image: linear-gradient( to left, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0) ); } .swiper-3d .swiper-slide-shadow-right { background-image: linear-gradient( to right, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0) ); } .swiper-3d .swiper-slide-shadow-top { background-image: linear-gradient( to top, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0) ); } .swiper-3d .swiper-slide-shadow-bottom { background-image: linear-gradient( to bottom, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0) ); } .swiper-css-mode > .swiper-wrapper { overflow: auto; scrollbar-width: none; -ms-overflow-style: none; } .swiper-css-mode > .swiper-wrapper::-webkit-scrollbar { display: none; } .swiper-css-mode > .swiper-wrapper > .swiper-slide { scroll-snap-align: start start; } .swiper-horizontal.swiper-css-mode > .swiper-wrapper { scroll-snap-type: x mandatory; } .swiper-vertical.swiper-css-mode > .swiper-wrapper { scroll-snap-type: y mandatory; } .swiper-centered > .swiper-wrapper::before { content: ""; flex-shrink: 0; order: 9999; } .swiper-centered.swiper-horizontal > .swiper-wrapper > .swiper-slide:first-child { margin-inline-start: var(--swiper-centered-offset-before); } .swiper-centered.swiper-horizontal > .swiper-wrapper::before { height: 100%; min-height: 1px; width: var(--swiper-centered-offset-after); } .swiper-centered.swiper-vertical > .swiper-wrapper > .swiper-slide:first-child { margin-block-start: var(--swiper-centered-offset-before); } .swiper-centered.swiper-vertical > .swiper-wrapper::before { width: 100%; min-width: 1px; height: var(--swiper-centered-offset-after); } .swiper-centered > .swiper-wrapper > .swiper-slide { scroll-snap-align: center center; scroll-snap-stop: always; } .swiper-virtual .swiper-slide { -webkit-backface-visibility: hidden; transform: translateZ(0); } .swiper-virtual.swiper-css-mode .swiper-wrapper::after { content: ""; position: absolute; left: 0; top: 0; pointer-events: none; } .swiper-virtual.swiper-css-mode.swiper-horizontal .swiper-wrapper::after { height: 1px; width: var(--swiper-virtual-size); } .swiper-virtual.swiper-css-mode.swiper-vertical .swiper-wrapper::after { width: 1px; height: var(--swiper-virtual-size); } :root { --swiper-navigation-size: 44px; } .swiper-button-next, .swiper-button-prev { position: absolute; top: 50%; width: calc(var(--swiper-navigation-size) / 44 * 27); height: var(--swiper-navigation-size); margin-top: calc(0px - (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-next.swiper-button-disabled, .swiper-button-prev.swiper-button-disabled { opacity: 0.35; cursor: auto; pointer-events: none; } .swiper-button-next.swiper-button-hidden, .swiper-button-prev.swiper-button-hidden { opacity: 0; cursor: auto; pointer-events: none; } .swiper-navigation-disabled .swiper-button-next, .swiper-navigation-disabled .swiper-button-prev { display: none !important; } .swiper-button-next:after, .swiper-button-prev:after { font-family: swiper-icons; font-size: var(--swiper-navigation-size); text-transform: none !important; letter-spacing: 0; font-variant: initial; line-height: 1; } .swiper-button-prev, .swiper-rtl .swiper-button-next { left: 10px; right: auto; } .swiper-button-prev:after, .swiper-rtl .swiper-button-next:after { content: "prev"; } .swiper-button-next, .swiper-rtl .swiper-button-prev { right: 10px; left: auto; } .swiper-button-next:after, .swiper-rtl .swiper-button-prev:after { content: "next"; } .swiper-button-lock { display: none; } .swiper-pagination { position: absolute; text-align: center; transition: 0.3s opacity; transform: translate3d(0, 0, 0); z-index: 10; } .swiper-pagination.swiper-pagination-hidden { opacity: 0; } .swiper-pagination-disabled > .swiper-pagination, .swiper-pagination.swiper-pagination-disabled { display: none !important; } .swiper-horizontal > .swiper-pagination-bullets, .swiper-pagination-bullets.swiper-pagination-horizontal, .swiper-pagination-custom, .swiper-pagination-fraction { 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: var( --swiper-pagination-bullet-width, var(--swiper-pagination-bullet-size, 8px) ); height: var( --swiper-pagination-bullet-height, var(--swiper-pagination-bullet-size, 8px) ); display: inline-block; border-radius: 50%; background: var(--swiper-pagination-bullet-inactive-color, #000); opacity: var(--swiper-pagination-bullet-inactive-opacity, 0.2); } button.swiper-pagination-bullet { border: none; 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:only-child { display: none !important; } .swiper-pagination-bullet-active { opacity: var(--swiper-pagination-bullet-opacity, 1); background: var(--swiper-pagination-color, var(--swiper-theme-color)); } .swiper-pagination-vertical.swiper-pagination-bullets, .swiper-vertical > .swiper-pagination-bullets { right: 10px; top: 50%; transform: translate3d(0px, -50%, 0); } .swiper-pagination-vertical.swiper-pagination-bullets .swiper-pagination-bullet, .swiper-vertical > .swiper-pagination-bullets .swiper-pagination-bullet { margin: var(--swiper-pagination-bullet-vertical-gap, 6px) 0; display: block; } .swiper-pagination-vertical.swiper-pagination-bullets.swiper-pagination-bullets-dynamic, .swiper-vertical > .swiper-pagination-bullets.swiper-pagination-bullets-dynamic { top: 50%; transform: translateY(-50%); width: 8px; } .swiper-pagination-vertical.swiper-pagination-bullets.swiper-pagination-bullets-dynamic .swiper-pagination-bullet, .swiper-vertical > .swiper-pagination-bullets.swiper-pagination-bullets-dynamic .swiper-pagination-bullet { display: inline-block; transition: 0.2s transform, 0.2s top; } .swiper-horizontal > .swiper-pagination-bullets .swiper-pagination-bullet, .swiper-pagination-horizontal.swiper-pagination-bullets .swiper-pagination-bullet { margin: 0 var(--swiper-pagination-bullet-horizontal-gap, 4px); } .swiper-horizontal > .swiper-pagination-bullets.swiper-pagination-bullets-dynamic, .swiper-pagination-horizontal.swiper-pagination-bullets.swiper-pagination-bullets-dynamic { left: 50%; transform: translateX(-50%); white-space: nowrap; } .swiper-horizontal > .swiper-pagination-bullets.swiper-pagination-bullets-dynamic .swiper-pagination-bullet, .swiper-pagination-horizontal.swiper-pagination-bullets.swiper-pagination-bullets-dynamic .swiper-pagination-bullet { transition: 0.2s transform, 0.2s left; } .swiper-horizontal.swiper-rtl > .swiper-pagination-bullets-dynamic .swiper-pagination-bullet { transition: 0.2s transform, 0.2s 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-rtl .swiper-pagination-progressbar .swiper-pagination-progressbar-fill { transform-origin: right top; } .swiper-horizontal > .swiper-pagination-progressbar, .swiper-pagination-progressbar.swiper-pagination-horizontal, .swiper-pagination-progressbar.swiper-pagination-vertical.swiper-pagination-progressbar-opposite, .swiper-vertical > .swiper-pagination-progressbar.swiper-pagination-progressbar-opposite { width: 100%; height: 4px; left: 0; top: 0; } .swiper-horizontal > .swiper-pagination-progressbar.swiper-pagination-progressbar-opposite, .swiper-pagination-progressbar.swiper-pagination-horizontal.swiper-pagination-progressbar-opposite, .swiper-pagination-progressbar.swiper-pagination-vertical, .swiper-vertical > .swiper-pagination-progressbar { width: 4px; height: 100%; left: 0; top: 0; } .swiper-pagination-lock { display: none; } .swiper-scrollbar { border-radius: 10px; position: relative; -ms-touch-action: none; background: rgba(0, 0, 0, 0.1); } .swiper-scrollbar-disabled > .swiper-scrollbar, .swiper-scrollbar.swiper-scrollbar-disabled { display: none !important; } .swiper-horizontal > .swiper-scrollbar, .swiper-scrollbar.swiper-scrollbar-horizontal { position: absolute; left: 1%; bottom: 3px; z-index: 50; height: 5px; width: 98%; } .swiper-scrollbar.swiper-scrollbar-vertical, .swiper-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 > canvas, .swiper-zoom-container > img, .swiper-zoom-container > svg { max-width: 100%; max-height: 100%; -o-object-fit: contain; 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%; box-sizing: border-box; border: 4px solid var(--swiper-preloader-color, var(--swiper-theme-color)); border-radius: 50%; border-top-color: transparent; } .swiper-watch-progress .swiper-slide-visible .swiper-lazy-preloader, .swiper:not(.swiper-watch-progress) .swiper-lazy-preloader { animation: swiper-preloader-spin 1s infinite linear; } .swiper-lazy-preloader-white { --swiper-preloader-color: #fff; } .swiper-lazy-preloader-black { --swiper-preloader-color: #000; } @keyframes swiper-preloader-spin { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } } .swiper .swiper-notification { position: absolute; left: 0; top: 0; pointer-events: none; opacity: 0; z-index: -1000; } .swiper-free-mode > .swiper-wrapper { transition-timing-function: ease-out; margin: 0 auto; } .swiper-grid > .swiper-wrapper { flex-wrap: wrap; } .swiper-grid-column > .swiper-wrapper { flex-wrap: wrap; flex-direction: column; } .swiper-fade.swiper-free-mode .swiper-slide { transition-timing-function: ease-out; } .swiper-fade .swiper-slide { pointer-events: none; transition-property: opacity; } .swiper-fade .swiper-slide .swiper-slide { pointer-events: none; } .swiper-fade .swiper-slide-active, .swiper-fade .swiper-slide-active .swiper-slide-active { pointer-events: auto; } .swiper-cube { overflow: visible; } .swiper-cube .swiper-slide { pointer-events: none; backface-visibility: hidden; z-index: 1; visibility: hidden; transform-origin: 0 0; width: 100%; height: 100%; } .swiper-cube .swiper-slide .swiper-slide { pointer-events: none; } .swiper-cube.swiper-rtl .swiper-slide { transform-origin: 100% 0; } .swiper-cube .swiper-slide-active, .swiper-cube .swiper-slide-active .swiper-slide-active { pointer-events: auto; } .swiper-cube .swiper-slide-active, .swiper-cube .swiper-slide-next, .swiper-cube .swiper-slide-next + .swiper-slide, .swiper-cube .swiper-slide-prev { pointer-events: auto; visibility: visible; } .swiper-cube .swiper-slide-shadow-bottom, .swiper-cube .swiper-slide-shadow-left, .swiper-cube .swiper-slide-shadow-right, .swiper-cube .swiper-slide-shadow-top { z-index: 0; backface-visibility: hidden; } .swiper-cube .swiper-cube-shadow { position: absolute; left: 0; bottom: 0px; width: 100%; height: 100%; opacity: 0.6; z-index: 0; } .swiper-cube .swiper-cube-shadow:before { content: ""; background: #000; position: absolute; left: 0; top: 0; bottom: 0; right: 0; filter: blur(50px); } .swiper-flip { overflow: visible; } .swiper-flip .swiper-slide { pointer-events: none; backface-visibility: hidden; z-index: 1; } .swiper-flip .swiper-slide .swiper-slide { pointer-events: none; } .swiper-flip .swiper-slide-active, .swiper-flip .swiper-slide-active .swiper-slide-active { pointer-events: auto; } .swiper-flip .swiper-slide-shadow-bottom, .swiper-flip .swiper-slide-shadow-left, .swiper-flip .swiper-slide-shadow-right, .swiper-flip .swiper-slide-shadow-top { z-index: 0; backface-visibility: hidden; } .swiper-creative .swiper-slide { backface-visibility: hidden; overflow: hidden; transition-property: transform, opacity, height; } .swiper-cards { overflow: visible; } .swiper-cards .swiper-slide { transform-origin: center bottom; backface-visibility: hidden; overflow: hidden; } /* Box sizing rules */ *, *::before, *::after { box-sizing: border-box; } /* Remove default margin */ body, h1, h2, h3, h4, p, figure, blockquote, dl, dd { margin: 0; } /* Remove list styles on ul, ol elements with a list role, which suggests default styling will be removed */ ul[role="list"], ol[role="list"] { list-style: none; } /* Set core root defaults */ html:focus-within { scroll-behavior: smooth; } /* Set core body defaults */ body { min-height: 100vh; text-rendering: optimizeSpeed; line-height: 1.5; } /* A elements that don't have a class get default styles */ a:not([class]) { -webkit-text-decoration-skip: ink; text-decoration-skip-ink: auto; } /* Make images easier to work with */ img, picture { max-width: 100%; display: block; } /* Inherit fonts for inputs and buttons */ input, button, textarea, select { font: inherit; } /* Remove all animations and transitions for people that prefer not to see them */ @media (prefers-reduced-motion: reduce) { html:focus-within { scroll-behavior: auto; } *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; scroll-behavior: auto !important; } } html { font-size: 62.5%; } body { font-family: "Hiragino Kaku Gothic Pro", "ヒラギノ角ゴ Pro W3", "游ゴシック", "YuGothic", "メイリオ", Meiryo, "ＭＳ Ｐゴシック", Helvetica, Arial, Verdana; font-size: 1.6rem; font-weight: 400; line-height: 2; color: var(--base-color); letter-spacing: 0; word-wrap: break-word; overflow-wrap: break-word; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: antialiased; -webkit-text-size-adjust: 100%; -moz-text-size-adjust: 100%; text-size-adjust: 100%; } a, button { color: var(--base-color); text-decoration: none; cursor: pointer; transition: opacity 0.2s; } a { transition: 0.3s; } button { border: none; } img { max-width: 100%; height: auto; vertical-align: middle; border: 0; } ul, ol { margin: 0; padding: 0; } ul li, ol li { list-style-type: none; } em, i, dfn { font-style: normal; } .l-main { padding: 0 0 80px; } .l-inner { max-width: 1200px; margin: 0 auto; } @media screen and (max-width: 768px) { .l-main { padding: 0 0 60px; } .l-slider { margin: 0 -28px; } } .o-button { background: #fff; border: solid 1px var(--gray-color-valiable2); padding: 12px 20px; } .o-button.-arrow { display: flex; align-items: center; justify-content: center; border-radius: 30px; line-height: 1.2; position: relative; } .o-button.-arrow::after { content: ""; display: block; width: 6px; height: 10px; background: url(assets/images/icon-arrow.svg) no-repeat center center; background-size: 100% 100%; position: absolute; top: 0; bottom: 0; right: 24px; margin: auto; transition: right 0.3s; } .o-button.-small { padding: 8px 40px; font-size: 1.4rem; line-height: 1.2; border-radius: 20px; } .o-button.-small.-arrow::after { right: 20px; } @media screen and (min-width: 769px) {.o-button { transition: color 0.3s } .o-button:hover { color: rgba(48, 48, 48, 0.6); } .o-button.-arrow:hover::after { right: 16px; } } .o-icon::before { content: ""; display: block; background-repeat: no-repeat; background-position: center center; background-size: 28px 28px; } .o-icon.-all-article::before { background-image: url(assets/images/icon-article.svg); } .o-icon.-it-digital::before { background-image: url(assets/images/icon-it-digital.svg); } .o-icon.-work-lifestyle::before { background-image: url(assets/images/icon-work-lifestyle.svg); } .o-icon.-break-time::before { background-image: url(assets/images/icon-breaktime.svg); } .o-icon.-sakura-internet::before { background-image: url(assets/images/icon-corporate.svg); } .o-new-label { font-size: 1.8rem; padding: 5px 13px; position: absolute; bottom: 0; left: 0; background: var(--secondary-color); border-radius: 0 12px 0 0; color: #fff; font-family: "Roboto Condensed", sans-serif; font-size: 1.8rem; letter-spacing: 0.04emc-list-item__image; line-height: 1; } .o-tag { font-size: 1.2rem; line-height: 1.2; padding: 6px 8px; border: solid 1px var(--gray-color); border-radius: 4px; } .o-headline { font-size: 2.8rem; line-height: 1.5; } @media screen and (max-width: 768px) {.o-headline { font-size: 2.2rem } } .o-date { color: #7c7c7c; font-size: 1.2rem; line-height: 1.4; } .o-category { font-size: 1.3rem; line-height: 1.5; } .o-feature { font-size: 1.3rem; line-height: 1.5; } .o-title { font-size: 1.8rem; line-height: 1.5; } .c-icon-headline { display: flex; align-items: center; gap: 20px; } .c-icon-headline::before { width: 60px; height: 60px; background-size: 28px 28px; border: solid 1px var(--gray-color); } /* おすすめのタグ */ .c-tag-list { display: flex; flex-wrap: wrap; gap: 6px; } .c-tag-list li a { display: flex; align-items: center; justify-content: center; padding: 7px 12px; border-radius: 4px; border: solid 1px rgba(255, 255, 255, 0.1); } @media screen and (min-width: 769px) { .c-tag-list li a:hover { background-color: var(--base-color); } } .c-search { position: relative; } .c-search label { display: block; } .c-search__input { padding: 15px 58px 15px 24px; background: #fff; border: solid 1px var(--gray-color); font-size: 1.5rem; line-height: 1.5; width: 100%; border-radius: 52px; } .c-search__btn { width: 40px; height: 40px; background: var(--gray-color-valiable3) url('data:image/svg+xml;charset=utf-8,') no-repeat center center; background-size: 20px 20px; border-radius: 50%; position: absolute; top: 0; bottom: 0; right: 8px; margin: auto; } .c-post-link { display: block; transition: box-shadow 0.3s; border-radius: 12px; } @media screen and (min-width: 769px) { .c-post-link:hover { box-shadow: var(--shadow); } } @media screen and (max-width: 768px) {.c-post-link { display: flex; flex-direction: column; height: 100% } .c-post-link img { width: 100%; } } .c-post-text { display: flex; flex-direction: column; gap: 12px; } .c-post-text span { display: block; } @media screen and (max-width: 768px) { .c-post-text { justify-content: flex-start; flex: 1; border: solid 1px var(--gray-color); border-top: none } } .c-post-col { display: flex; flex-direction: column; gap: 8px; } .c-post-row { display: flex; flex-wrap: wrap; gap: 8px; } /* リスト形一覧 */ .c-list-item { width: 100%; border-bottom: solid 1px var(--gray-color); } .c-list-item__link { display: flex; gap: 32px; align-items: flex-start; padding: 24px 32px 24px 20px; } .c-list-item__image { width: 210px; flex-shrink: 0; border-radius: 8px; overflow: hidden; position: relative; } .c-list-item__image::before { content: ""; display: block; padding-top: 52.5%; } .c-list-item__image img { width: 100%; height: 100%; -o-object-fit: cover; object-fit: cover; position: absolute; top: 0; left: 0; } @media screen and (max-width: 768px) { .c-list-item__link { background: #fff; } } @media screen and (max-width: 768px) { .c-list-item { padding: 12px 0; } .c-list-item:first-child { padding-top: 0; } .c-list-item__link { flex-direction: column; gap: 0; padding: 0; } .c-list-item__image { width: 100%; border-radius: 8px 8px 0 0; } .c-list-item__image::before { padding-top: 52.5%; } .c-list-item__text { padding: 16px 16px 28px; width: 100%; border-radius: 0 0 8px 8px; } } /* カード形一覧 */ .c-card { display: flex; gap: 2%; } .c-card-item { width: 32%; height: auto; } .c-card-item__link { display: flex; flex-direction: column; height: 100%; } .c-card-item__image { border-radius: 12px 12px 0 0; overflow: hidden; position: relative; } .c-card-item__image::before { content: ""; display: block; padding-top: 52.5%; } .c-card-item__image img { width: 100%; height: 100%; -o-object-fit: cover; object-fit: cover; position: absolute; top: 0; left: 0; } .c-card-item__text { flex: 1; padding: 16px 20px 28px; border-radius: 0 0 12px 12px; background: #fff; overflow: hidden; } @media screen and (min-width: 769px) { } @media screen and (max-width: 768px) { .c-card { gap: 0; } .c-card-item { width: 100%; } .c-card-item__text { padding: 16px 16px 28px; } } .c-banner { display: flex; align-items: center; gap: 20px; font-size: 1.6rem; font-weight: 700; line-height: 1.5; background: #fff; border: solid 1px var(--gray-color); border-radius: 4px; padding: 19px 28px; position: relative; overflow: hidden; transition: box-shadow 0.3s; } .c-banner span { display: block; font-size: 1.2rem; font-weight: 400; line-height: 1; margin: 0 0 4px; } .c-banner::before { content: ""; display: block; flex-shrink: 0; background-repeat: no-repeat; background-position: center center; background-size: 100% auto; } .c-banner::after { content: ""; display: block; width: 48px; height: 48px; background-image: url('data:image/svg+xml;charset=utf-8,'), linear-gradient( 135deg, transparent 0%, transparent 50%, var(--secondary-color) 50%, var(--secondary-color) 100% ); background-repeat: no-repeat, no-repeat; background-position: right 8px bottom 8px, center; background-size: 12px 12px, 100%; position: absolute; bottom: 0; right: 0; margin: auto; transition: 0.3s; } .c-banner.-mailmagazine::before { width: 32px; height: 31px; background-image: url(assets/images/icon-mailmagazine.svg); } .c-banner.-corporate::before { width: 44px; height: 37px; background-image: url(assets/images/icon-corporate-2.svg); } .c-banner.-service::before { width: 44px; height: 38px; background-image: url(assets/images/icon-service.svg); } .c-banner.-recruit::before { width: 44px; height: 38px; background-image: url(assets/images/icon-recruit.svg); } @media screen and (min-width: 769px) { .c-banner:hover::after { width: 59px; height: 59px; background-position: right 12px bottom 12px, center; } } @media screen and (max-width: 768px) {.c-banner { gap: 16px; padding: 16px 12px } } .c-breadcrumbs { padding: 20px 0 17px; } .c-breadcrumbs__list { display: flex; gap: 39px; } .c-breadcrumbs__list li { font-size: 1.4rem; line-height: 1.2; padding: 6px 8px; border: solid 1px var(--gray-color); background: var(--gray-color-valiable3); border-radius: 4px; flex-shrink: 0; position: relative; } .c-breadcrumbs__list li::after { content: ""; display: block; width: 7px; height: 10px; background: url(assets/images/icon-arrow.svg) no-repeat center center; background-size: 100% 100%; position: absolute; top: 0; bottom: 0; right: -23px; margin: auto; } .c-breadcrumbs__list li a { display: block; padding: 6px 8px; border: solid 1px var(--gray-color); border-radius: 4px; } .c-breadcrumbs__list li:last-child::after { display: none; } .c-breadcrumbs__list li:has(a) { padding: 0; border: none; background: none; } @media screen and (min-width: 769px) { .c-breadcrumbs__list li:last-child { flex-shrink: 1; overflow: hidden; display: flex; } .c-breadcrumbs__list li:last-child span { white-space: nowrap; text-overflow: ellipsis; overflow: hidden; } } @media screen and (max-width: 768px) { .c-breadcrumbs { padding: 14px 16px; overflow: auto; } } .c-navigation { display: flex; flex-direction: column; gap: 20px; width: 100%; margin: 60px 0 0; } @media screen and (max-width: 768px) {.c-navigation { margin-top: 28px } } .c-navigation__number { display: flex; align-items: center; justify-content: center; font-size: 1.6rem; line-height: 2; } .c-navigation__list { display: flex; justify-content: center; gap: 12px; } .c-navigation__page { display: flex; align-items: center; justify-content: center; gap: 12px; font-size: 1.6rem; line-height: 1.2; height: 48px; padding: 0 20px; border: solid 1px #e4e4e4; border-radius: 4px; } @media screen and (min-width: 769px) { .c-navigation__page { transition: 0.3s } .c-navigation__page:hover { box-shadow: var(--shadow); } } @media screen and (max-width: 768px) { .c-navigation__page { gap: min(2.051282051vw, 8px); font-size: min(3.589743589vw, 1.4rem); padding: 0 min(2.564102564vw, 10px) } } .c-navigation__page.-next::after { content: ""; display: block; width: 8px; height: 11px; background: url('data:image/svg+xml;charset=utf-8,') no-repeat center center; background-size: 100% 100%; } .c-navigation__page.-prev::before { content: ""; display: block; width: 8px; height: 11px; background: url('data:image/svg+xml;charset=utf-8,') no-repeat center center; background-size: 100% 100%; transform: rotate(180deg); } .c-navigation__page.-next-all, .c-navigation__page.-prev-all { padding: 0 17px; gap: 2px; } .c-navigation__page.-next-all::before, .c-navigation__page.-next-all::after, .c-navigation__page.-prev-all::before, .c-navigation__page.-prev-all::after { content: ""; display: block; } .c-navigation__page.-next-all::after { width: 2px; height: 11px; background: #353535; } .c-navigation__page.-next-all::before { width: 8px; height: 11px; background: url('data:image/svg+xml;charset=utf-8,') no-repeat center center; background-size: 100% 100%; } .c-navigation__page.-prev-all::before { width: 2px; height: 11px; background: #353535; } .c-navigation__page.-prev-all::after { width: 8px; height: 11px; background: url('data:image/svg+xml;charset=utf-8,') no-repeat center center; background-size: 100% 100%; transform: rotate(180deg); } .c-navigation__page.-disabled { pointer-events: none; background: var(--gray-color-valiable3); } .c-navigation__item { display: flex; gap: 8px; } @media screen and (max-width: 768px) { .c-navigation__page.-next, .c-navigation__page.-prev { white-space: nowrap; } .c-navigation__page.-next-all, .c-navigation__page.-prev-all { padding: 0 min(4.358974358vw, 17px); } .c-navigation__list { gap: min(2.051282051vw, 8px); } .c-navigation__item { gap: min(1.025641025vw, 4px); } } .s-header { position: relative; z-index: 999; padding: 186px 0 0; } @media screen and (max-width: 768px) {.s-header { padding: 60px 0 0 } } @media screen and (min-width: 769px) { .s-header.is-open .s-header__panel { height: 84px; } .s-header.is-open .s-header__panel .s-header__logo { width: 168px; position: static; margin: 0; } .s-header.is-open .s-header__panel .s-header__sub { display: none; } .s-header.is-open .s-categ-nav { opacity: 0; visibility: hidden; } } .s-header__panel { width: 100%; height: 100px; display: flex; justify-content: space-between; align-items: center; padding: 0 min(2.7777777%, 40px); background: #fff; position: absolute; top: 0; transition: 0.3s; z-index: 999; } .s-header__panel.is-fixed { transform: translateY(-100%); transition: transform 0s; position: fixed; border-bottom: solid 1px #e4e4e4; } .s-header__panel.is-fixed .s-header__sub { display: none; } .s-header__panel.is-show { transform: none; transition: transform 0.3s; } @media screen and (min-width: 769px) { .s-header__panel.is-fixed { height: 84px; } .s-header__panel.is-fixed .s-header__logo { width: 168px; position: static; margin: 0; } } @media screen and (max-width: 768px) { .s-header__panel { gap: 20px; height: 60px; padding: 0 16px; border-bottom: solid 1px var(--gray-color) } } .s-header__sub { display: flex; flex-direction: column; gap: 16px; width: 220px; } @media screen and (max-width: 768px) { .s-header__sub { display: none } } .s-header__sns { display: flex; align-items: center; gap: 12px; } .s-header__sns dt { color: var(--gray-color-valiable1); font-size: 1.3rem; } .s-header__sns dt::after { content: "："; } .s-header__sns dd { display: flex; gap: 12px; } .s-header__link { display: flex; align-items: center; justify-content: center; width: 36px; height: 36px; border-radius: 50%; } .s-header__link._icon-x { background: var(--base-color); padding: 10px; } .s-header__logo { width: 200px; padding: 19px 0 11px; position: absolute; left: 0; right: 0; margin: 0 auto; } @media screen and (max-width: 768px) { .s-header__logo { position: static; width: 113px; margin: 0; padding: 10px 0 } } .s-header__btns { display: flex; justify-content: flex-end; align-items: center; gap: 12px; width: 220px; } @media screen and (max-width: 768px) { .s-header__btns { width: auto; gap: 6px; flex-shrink: 0 } } .s-header__contact { display: inline-block; background: #fff; border: solid 1px var(--gray-color-valiable2); border-radius: 20px; padding: 9.5px 19px; font-size: 1.3rem; line-height: 1.5; } @media screen and (min-width: 769px) { .s-header__contact:hover { color: rgba(48, 48, 48, 0.6); } } .s-header__button { background: var(--base-color); display: flex; align-items: center; justify-content: center; height: 40px; gap: 12px; padding: 12px 18px; border-radius: 20px; } .s-header__button img { width: 16px; } .s-header__button.is-open { gap: 4px; padding: 8px 12px; } @media screen and (max-width: 768px) { .s-header__button { font-size: 1.3rem; letter-spacing: 0 } .s-header__button img { width: 14px; } .s-header__button.is-open { gap: 2px; padding: 8px 12px; } } .s-header__close-text { display: none; color: #fff; font-size: 1.4rem; line-height: 1.2; } .s-header__menu-button { width: 14px; } .s-header.is-open .s-header__btns { width: auto; } .s-header.is-open .s-header__close-text { display: block; } .s-header.is-open .s-header__search-icon { display: none; } /* カテゴリーナビゲーション */ .s-categ-nav { display: flex; justify-content: center; padding: 16px 0 15px; position: absolute; top: 100px; left: 50%; transform: translateX(-50%); width: min(100%, 820px); z-index: 999; } .s-categ-nav li { width: 20%; } .s-categ-nav li a { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px; font-size: 1.3rem; line-height: 1.5; font-weight: 700; text-align: center; border-radius: 12px; } .s-categ-nav li a:hover { color: #ff5577; } .s-categ-nav li a::before { content: ""; display: block; width: 28px; height: 28px; background-size: 100% 100%; } @media screen and (min-width: 769px) and (max-width: 1100px) { .s-categ-nav.is-fixed { display: none; } } @media screen and (min-width: 1101px) { .s-categ-nav.is-fixed { transform: translateX(-50%) translateY(-100%); transition: transform 0s; position: fixed; top: 2px; width: min(56.94444444%, 820px); } .s-categ-nav.is-fixed li a { font-size: min(1vw, 1.2rem); } .s-categ-nav.is-fixed li a::before { width: 24px; height: 24px; } .s-categ-nav.is-show { transform: translateX(-50%); transition: transform 0.3s; } } @media screen and (max-width: 768px) { .s-categ-nav { flex-wrap: wrap; gap: 4px 0; padding: 10px 16px; border-bottom: solid 1px var(--gray-color); position: static; transform: none } .s-categ-nav li { width: 50%; position: relative; } .s-categ-nav li:first-child { display: none; } .s-categ-nav li:nth-child(3)::after, .s-categ-nav li:nth-child(5)::after { content: ""; display: block; width: 1px; height: calc(100% - 11px); background: var(--gray-color); position: absolute; top: 0; bottom: 0; right: 0; margin: auto; } .s-categ-nav li::before { content: ""; display: block; width: 1px; height: calc(100% - 11px); background: var(--gray-color); position: absolute; top: 0; bottom: 0; margin: auto; } .s-categ-nav li a { gap: 4px; font-size: 1rem; height: auto; padding: 4px 0; } .s-categ-nav li a::before { width: 24px; height: 24px; background-size: 100% 100%; } } /* */ .s-global-nav { position: fixed; top: 84px; width: 100%; background: var(--background-color); padding: 40px min(2.7777777%, 40px) 60px; transform: translateY(-100%); opacity: 0; visibility: hidden; transition: 0.3s; z-index: 998; } .s-global-nav dl { flex: 1; } .s-global-nav dl dt { font-size: 2rem; line-height: 1.5; color: var(--gray-color-valiable1); margin: 0 0 20px; } .s-global-nav li a { color: #fff; } @media screen and (max-width: 768px) { .s-global-nav { top: 60px; height: calc(100% - 60px); overflow: auto; overscroll-behavior: none; padding: 0 } .s-global-nav dl { width: 100%; } .s-global-nav dl dt { font-size: 1.6rem; } } .s-global-nav.is-open { transform: none; opacity: 1; visibility: visible; } .s-global-nav__column { display: flex; justify-content: space-between; gap: 40px 5.714285714%; } @media screen and (max-width: 768px) { .s-global-nav__column { flex-direction: column; justify-content: flex-start; overscroll-behavior: auto; gap: 20px; min-height: calc(100% + 1px); padding: 20px 16px } } .s-global-nav__item { width: 58.3333333%; display: flex; gap: 40px 5.714285714%; } .s-global-nav__item._column { flex-direction: column; width: max(28.3333333%, 300px); } .s-global-nav__item._column dl { width: 100%; } @media screen and (max-width: 768px) { .s-global-nav__item { width: 100%; flex-direction: column; gap: 20px } .s-global-nav__item._column { width: 100%; gap: 32px; } } .s-global-nav__categ-list li a { display: flex; align-items: center; justify-content: flex-start; gap: 16px; padding: 12px; color: #fff; font-size: 1.5rem; line-height: 1.5; } .s-global-nav__categ-list li a::before { content: ""; display: block; flex-shrink: 0; width: 52px; height: 52px; background-color: #fff; border-radius: 4px; } @media screen and (min-width: 769px) { .s-global-nav__categ-list li a { border-radius: 8px; } .s-global-nav__categ-list li a:hover { background: var(--base-color); } } @media screen and (max-width: 768px) { .s-global-nav__categ-list li a { padding: 8px; } .s-global-nav__categ-list li a::before { width: 48px; height: 48px; } } .s-global-nav__tag-list li a { font-size: 1.3rem; line-height: 1.5; } .s-global-nav__sp-item { display: flex; align-items: center; justify-content: space-between; gap: 20px; } .s-global-nav__sp-logo { width: 165px; } .s-global-nav__sp-sns { display: flex; align-items: center; gap: 12px; padding: 8px 12px; color: #fff; font-size: 1.4rem; line-height: 1.2; border: solid 1px rgba(255, 255, 255, 0.1); border-radius: 4px; } .s-global-nav__sp-sns span { flex-shrink: 0; width: 16px; } .s-global-nav__sp-sns span img { width: 100%; } @media screen and (min-width: 769px) { .s-global-nav__sp-item { display: none; } } .s-global-nav__feature-list li a { display: flex; align-items: center; gap: 20px; padding: 12px; font-size: 1.5rem; line-height: 1.5; font-weight: 500; border-radius: 12px; } .s-global-nav__feature-list li a:hover { background: var(--base-color); } @media screen and (max-width: 768px) { .s-global-nav__feature-list li a { padding: 8px } } .s-global-nav__feature-image { flex-shrink: 0; width: 116px; } @media screen and (max-width: 768px) { .s-global-nav__feature-image { width: 88px } } @media screen and (min-width: 769px) { .s-global-nav__banner { gap: 7.092198581%; padding-left: 8.235294117%; padding-right: 8.235294117%; white-space: nowrap; } } .s-recommend-tags { background: var(--primary-color); padding: 60px; } @media screen and (max-width: 768px) {.s-recommend-tags { padding: 40px 16px } } .s-recommend-tags__headline { display: flex; gap: 16px; } .s-recommend-tags__headline::before { content: ""; display: block; flex-shrink: 0; width: 46px; height: 42px; background: url(assets/images/icon-tag.svg) no-repeat center center; background-size: 100% 100%; } .s-recommend-tags__inner { display: flex; flex-direction: column; gap: 32px; padding: 32px 60px 40px; background: #fff; border-radius: 12px; } @media screen and (max-width: 768px) { .s-recommend-tags__inner { gap: 24px; padding: 32px 16px 40px } } .s-recommend-tags__list { display: flex; flex-wrap: wrap; gap: 12px; } .s-recommend-tags__list li a { font-size: 1.4rem; line-height: 1.2; padding: 9px 12px 10px; transition: color 0.3s; } @media screen and (min-width: 769px) { .s-recommend-tags__list li a:hover { color: rgba(48, 48, 48, 0.5); } } .s-feature { padding: 60px 0 80px; } @media screen and (max-width: 768px) {.s-feature { padding: 40px 16px 32px } } .s-feature__headline { display: flex; align-items: center; justify-content: center; gap: 18px; font-size: 4.4rem; font-weight: 400; letter-spacing: 0.2em; margin: 0 0 60px; } @media screen and (max-width: 768px) { .s-feature__headline { gap: 13px; font-size: 3.3rem; margin: 0 0 32px } .s-feature__headline img { width: 146px; } } .s-feature__list { display: flex; flex-wrap: wrap; justify-content: center; gap: 15px; } .s-feature__list li { width: 356px; } .s-feature__list li a { display: flex; flex-direction: column; gap: 40px; background: var(--base-color); border-radius: 9px; padding: 40px 32px; position: relative; } .s-feature__list li a::before { content: ""; display: block; width: 100%; height: 100%; background: rgba(0, 0, 0, 0.6); opacity: 0; position: absolute; left: 0; top: 0; visibility: hidden; transition: 0.3s; } @media screen and (min-width: 769px) { .s-feature__list li a { overflow: hidden; } .s-feature__list li a:hover .s-feature__hover { opacity: 1; visibility: visible; z-index: 1; } .s-feature__list li a:hover::before { opacity: 1; visibility: visible; z-index: 1; } } @media screen and (max-width: 768px) { .s-feature__list { flex-direction: column } .s-feature__list li { width: 100%; } .s-feature__list li a { gap: 20px; padding: 32px 16px; } } .s-feature__wrap { position: relative; } @media screen and (max-width: 768px) { .s-feature__wrap { display: flex; flex-direction: column; gap: 20px } } .s-feature__image { border-radius: 3px; position: relative; } .s-feature__image img { width: 100%; } @media screen and (max-width: 768px) { } .s-feature__hover { display: flex; flex-direction: column; justify-content: center; align-items: center; gap: 6px; width: 100%; height: 100%; font-size: 2.5rem; font-weight: 600; line-height: 1.4; text-align: center; color: #fff; } .s-feature__hover span { display: block; font-size: 1.3rem; letter-spacing: 0.12em; line-height: 1.4; } @media screen and (min-width: 769px) { .s-feature__hover { position: absolute; top: 0; left: 0; opacity: 0; visibility: hidden; transition: 0.3s } } @media screen and (max-width: 768px) { .s-feature__hover { gap: 4px } } .s-feature__button { height: 56px; font-size: 1.5rem; font-weight: 500; } @media screen and (max-width: 768px) { .s-feature__button { height: 52px } } .s-footer { background: var(--background-color); } .s-footer__column { display: flex; justify-content: space-between; gap: 80px; } @media screen and (max-width: 768px) { .s-footer__column { flex-direction: column-reverse; gap: 24px } } .s-footer__list { display: flex; flex-direction: column; gap: 4px; margin: 0 0 20px; } .s-footer__list li a { display: block; color: #fff; font-size: 1.3rem; line-height: 1.5; padding: 4px 8px; border-radius: 4px; } .s-footer__list li a:hover { background: var(--base-color); } @media screen and (max-width: 768px) { .s-footer__list { margin: 0 } .s-footer__list li a { font-size: 1.4rem; padding: 11px 16px 12px; } } .s-footer-main { padding: 80px min(2.7777777%, 40px); } @media screen and (max-width: 768px) { .s-footer-main { padding: 40px 16px } } .s-footer-sub { width: 25.454545454%; min-width: 240px; } @media screen and (max-width: 768px) { .s-footer-sub { width: 100%; min-width: inherit } .s-footer-sub .s-footer__list { margin: 0 0 20px; } } .s-footer__logo { display: block; line-height: 0; width: 156px; margin: 0 0 32px; } .s-footer-sub__logo { display: block; width: 240px; line-height: 0; margin: 0 0 40px; } .s-footer-sub__sns { margin: 0 0 40px; } .s-footer-sub__sns li a { display: flex; align-items: center; gap: 12px; font-size: 1.3rem; line-height: 1.5; color: #fff; padding: 4px 8px; border-radius: 4px; } .s-footer-sub__sns li a:hover { background: var(--base-color); } .s-footer-sub__sns li span { width: 12px; flex-shrink: 0; } .s-footer-sub__sns li span img { width: 100%; } @media screen and (max-width: 768px) { .s-footer-sub__sns { margin: 0 0 24px } .s-footer-sub__sns li a { font-size: 1.4rem; } .s-footer-sub__sns li span { width: 16px; } } .s-footer-sub__mailmagazine { gap: 16px; padding: 16px 18px 16px 20px; } .s-footer-nav { display: flex; flex-wrap: wrap; gap: 40px; } @media screen and (max-width: 768px) { .s-footer-nav { flex-direction: column; gap: 24px } } .s-footer-nav__item dt { font-size: 2rem; letter-spacing: 0.04em; line-height: 1.5; color: var(--gray-color-valiable1); margin: 0 0 20px; } @media screen and (min-width: 769px) { .s-footer-nav__item._category { width: 240px; } .s-footer-nav__item._tag { width: 420px; } } @media screen and (max-width: 768px) { .s-footer-nav__item dt { font-size: 1.6rem; } } .s-footer-nav__tag-list li a { font-size: 1.4rem; line-height: 1.2; color: #fff; } .s-footer-banner { padding: 60px min(2.7777777%, 40px); background: var(--base-color); } @media screen and (max-width: 768px) { .s-footer-banner { padding: 40px 16px } } .s-footer-banner__list { display: flex; gap: 40px 3.63636363636%; } .s-footer-banner__list li { width: 340px; } .s-footer-banner__list li a { height: 80px; } @media screen and (max-width: 768px) { .s-footer-banner__list { flex-direction: column; gap: 16px } .s-footer-banner__list li { width: 100%; } } .s-footer__copyright { padding: 29px 0; font-size: 1.1rem; line-height: 1; text-align: center; color: #fff; } @media screen and (max-width: 768px) { .s-footer__copyright { padding: 16px 0; font-size: 1rem } } .screen-reader-text { border: 0; clip: rect(1px, 1px, 1px, 1px); -webkit-clip-path: inset(50%); clip-path: inset(50%); height: 1px; margin: -1px; overflow: hidden; padding: 0; position: absolute; width: 1px; word-wrap: normal !important; } .u-color-accent { color: var(--secondary-color); } @media screen and (max-width: 768px) {.u-show-pc { display: none } } @media screen and (min-width: 769px) { .u-show-sp { display: none } } .swiper-pagination { position: static; line-height: 0; } .swiper-pagination-bullet { width: 8px; height: 8px; background: #e4e4e4; margin: 0 4px; opacity: 1; } .swiper-pagination-bullet-active { width: 48px; background: var(--secondary-color); border-radius: 8px; } .home { overflow: hidden; padding-left: min(2.7777777%, 40px); padding-right: min(2.7777777%, 40px); } @media screen and (max-width: 768px) { .home-hero .swiper-pagination-bullet { background: #fff; } .home-hero .swiper-pagination-bullet-active { background: var(--secondary-color); } } .home-hero__list { } .home-hero__main { margin: 0 0 -40px; padding: 60px 0 80px; position: relative; } .home-hero__main-link { display: flex; border-radius: 12px; overflow: hidden; position: relative; z-index: 1; background: #fff; } .home-hero__main-wrap { flex-shrink: 0; width: 44.90909090909%; position: relative; } .home-hero__main-image { width: 100%; min-height: 100%; overflow: hidden; position: relative; } .home-hero__main-image::before { content: ""; display: block; padding-top: 52.5%; } .home-hero__main-image img { width: 100%; height: 100%; -o-object-fit: cover; object-fit: cover; position: absolute; top: 0; left: 0; } .home-hero__main-text { padding: 31px 5%; } .home-hero__main-title { font-size: 2.8rem; line-height: 1.5; } .home-hero__main-btm { display: flex; } .home-hero__main-btm .o-date { margin: 0 0 0 auto; } @media screen and (min-width: 769px) { .home-hero .swiper { overflow: visible; } .home-hero__list { flex-wrap: wrap; gap: 0 2%; } .home-hero__main::before { content: ""; display: block; width: 100vw; height: 100%; background: url(assets/images/home/bg_hero_pc.svg) no-repeat center center; background-size: cover; position: absolute; left: 50%; top: 0; transform: translateX(-50%); } } @media screen and (max-width: 768px) { .home { padding: 0 0 60px; } .home-hero { background: url(assets/images/home/bg_hero_sp.svg) no-repeat center center; background-size: cover; padding: 32px 0 47px; } .home-hero__list { padding: 0; margin: 0 0 16px; } .home-hero__list .swiper-slide { width: 100%; height: auto; } .home-hero__main { padding: 0; margin: 0; } .home-hero__main::before { display: none; } .home-hero__main-link { flex-direction: column; } .home-hero__main-wrap { width: 100%; } .home-hero__main-image { min-height: inherit; } .home-hero__main-image::before { content: ""; display: block; padding-top: 52.5%; } .home-hero__main-text { padding: 16px 16px 28px; } .home-hero__main-title { font-size: 1.8rem; } } .home-wrap { display: flex; justify-content: space-between; gap: 0 4.3333333333%; padding: 80px 0 10px; } @media screen and (max-width: 768px) { .home-wrap { display: block; padding: 40px 16px 0 } } .home-body { width: 100%; } @media screen and (max-width: 768px) { .home-body { width: auto } } .home-body .c-list-item__link { gap: 5%; } .home-body .c-list-item__image { width: 32.8125%; } @media screen and (max-width: 768px) { .home-body .c-list-item__image { width: 100% } } .home-body__button { max-width: 280px; height: 56px; margin: 40px auto 0; } @media screen and (max-width: 768px) { .home-body__button { max-width: 320px } } .home-sidebar { width: max(29.6666666%, 300px); flex-shrink: 0; display: flex; flex-direction: column; gap: 40px; } .home-sidebar dl dt { font-size: 2rem; font-weight: 700; } @media screen and (max-width: 960px) { .home-sidebar { display: none } } .home-sidebar__categ-list li a { display: flex; align-items: center; gap: 5.617977528%; padding: 12px; background: #fff; border-radius: 12px; font-weight: 500; } .home-sidebar__categ-list li a::before { width: 60px; height: 60px; border: solid 1px var(--gray-color); border-radius: 4px; } @media screen and (min-width: 769px) { .home-sidebar__categ-list li a { transition: 0.3s } .home-sidebar__categ-list li a:hover { box-shadow: var(--shadow); position: relative; z-index: 1; } } .home-sidebar__tag-list { display: flex; flex-wrap: wrap; gap: 8px; } .home-sidebar__tag-list li a { font-size: 1.4rem; padding: 7px 8px; } .home-sidebar__tag-list li a:hover { opacity: 0.6; } .home-sidebar__feature-list li a { display: flex; align-items: center; gap: 8.433734939%; padding: 12px; line-height: 1.5; } @media screen and (min-width: 769px) { .home-sidebar__feature-list li a { transition: 0.3s } .home-sidebar__feature-list li a:hover { box-shadow: var(--shadow); } } .home-sidebar__feature-image { flex-shrink: 0; width: 38.554216867%; border-radius: 4px; overflow: hidden; position: relative; } .home-sidebar__feature-image img { width: 100%; height: 100%; -o-object-fit: cover; object-fit: cover; position: absolute; top: 0; } .home-sidebar__feature-image::after { content: ""; display: block; padding-top: 52.34375%; } .home-section { padding: 80px 0 0; position: relative; } .home-section .o-button { position: absolute; top: 95px; right: 0; } @media screen and (min-width: 769px) { .home-section .swiper { overflow: visible; } } @media screen and (max-width: 768px) { .home-section { padding: 60px 28px 20px } .home-section:last-child { padding-bottom: 0; } .home-section .swiper-wrapper { margin: 0 0 24px; } .home-section .o-button { position: relative; top: 0; max-width: 320px; padding: 0; height: 56px; border-radius: 56px; margin: 28px auto 0; font-size: 1.5rem; } } .home-section__head { display: flex; justify-content: space-between; align-items: center; margin: 0 0 40px; } @media screen and (max-width: 768px) { .home-section__head { margin: 0 0 24px } } .p-archive { padding: 40px min(2.7777777%, 40px); } .p-archive .o-headline { margin: 0 0 40px; } @media screen and (max-width: 768px) {.p-archive { padding: 18px 16px 40px } .p-archive .o-headline { margin: 0 0 28px; } } .p-archive__head { display: flex; align-items: center; gap: 60px; margin: 0 0 80px; } @media screen and (max-width: 768px) { .p-archive__head { margin: 0 0 28px } } .p-archive__head-image { flex-shrink: 0; width: 360px; } @media screen and (max-width: 768px) { .p-archive__head-image { width: 100%; margin: 0 0 16px } } @media screen and (max-width: 768px) { .p-archive__head-text { font-size: 1.5rem; line-height: 1.8 } } .p-archive__list { display: flex; gap: 0 2%; } .p-archive__list .c-card-item { margin-bottom: 80px; } @media screen and (min-width: 769px) { .p-archive__list { flex-wrap: wrap } } @media screen and (max-width: 768px) { .p-archive__list { flex-direction: column; marign: 0 } .p-archive__list .c-card-item { margin-bottom: 0; padding: 12px 0; border-bottom: solid 1px var(--gray-color); } .p-archive__list .c-card-item:first-child { padding-top: 0; } } .coming-box { display: flex; align-items: center; justify-content: center; min-height: 360px; border: solid 2px #e4e4e4; color: #c6c6c6; font-size: 2.8rem; text-align: center; } @media screen and (max-width: 768px) { .coming-box { min-height: 200px; font-size: 1.8rem } } .p-article { padding: 40px 0 80px; } .p-article .l-inner { position: relative; } @media screen and (max-width: 768px) {.p-article { padding: 18px 16px 32px } } /* 固定ページ用 */ .p-article.-page .p-article__headline { margin-bottom: 0; } .p-article__share { width: 80px; padding: 20px 0; background: #fff; border: solid 1px var(--gray-color); border-radius: 8px; position: absolute; top: 0; left: 0; z-index: 1; } .p-article__share dt { font-family: "Roboto Condensed", sans-serif; font-size: 1.6rem; font-weight: 700; font-style: italic; line-height: 1; color: #ff4174; text-align: center; margin: 0 0 16px; } .p-article__share.is-fixed { position: fixed; left: auto; top: 140px; } @media screen and (max-width: 768px) { .p-article__share { display: flex; align-items: center; justify-content: space-between; position: static; width: 100%; padding: 12px 16px; margin: 40px 0 0 } .p-article__share dt { margin: 0; } .p-article__share.is-fixed { position: static; } } .p-article__share-list { display: flex; flex-direction: column; align-items: center; gap: 8px; } .p-article__share-list li { width: 50px; } .p-article__share-list li a { display: block; width: 100%; height: 50px; background-position: center center; background-size: 100% 100%; } .p-article__share-list li a.-icon-x { background-image: url(assets/images/icon-x-circle.svg); } .p-article__share-list li a.-icon-fb { background-image: url(assets/images/icon-fb-circle.svg); } .p-article__share-list li a.-icon-hatena { background-image: url(assets/images/icon-hatena-circle.png); } @media screen and (max-width: 768px) { .p-article__share-list { flex-direction: row; gap: 4px } .p-article__share-list li { width: 48px; } .p-article__share-list li a { height: 48px; } } /* article header */ .p-article__header { max-width: 73.636363636%; margin: 0 auto 60px; } .p-article__category { display: flex; gap: 20px; margin: 0 0 8px; } .p-article__category li { font-size: 1.6rem; line-height: 1.8; } .p-article__headline { font-size: 3.6rem; line-height: 1.5; margin: 0 0 12px; } .p-article__tags { margin: 0 0 8px; } .p-article__tags li { font-size: 1.4rem; } .p-article__feature { font-size: 1.6rem; line-height: 1.8; margin: 0 0 12px; } .p-article__date { display: block; font-size: 1.3rem; line-height: 1.4; color: #7c7c7c; } @media screen and (max-width: 768px) { .p-article__header { max-width: 100%; margin: 0 auto; } .p-article__category li { font-size: 1.5rem; line-height: 1.8; } .p-article__headline { font-size: 2.4rem; } .p-article__tags li { font-size: 1.3rem; } .p-article__feature { font-size: 1.5rem; } .p-article__date { font-size: 1.2rem; line-height: 1.8; } } /* 目次 */ .p-article__toc { padding: 20px 60px 24px; border: solid 1px var(--gray-color); border-radius: 8px; margin: 60px 0 32px; } .p-article__head { display: flex; align-items: flex-end; justify-content: center; gap: 8px; font-size: 2rem; font-weight: 700; line-height: 1.7; } .p-article__head button { background: none; color: #000f30; font-size: 1.5rem; font-weight: 400; line-height: 1.8; } .p-article__toc-list { display: none; } .p-article__toc-list li { border-bottom: solid 1px var(--gray-color); } .p-article__toc-list li::before { display: none; } .p-article__toc-list li a { display: block; color: var(--base-color); text-decoration: none; font-size: 1.6rem; line-height: 1.8; padding: 12px 0; } .p-article__toc-list > li:last-child { border-bottom: none; } .p-article__toc-list > ul { padding: 0 0 0 20px; } .p-article__toc-list > ul ul { padding: 0 0 0 20px; } .p-article__toc-list.is-active { display: block; } @media screen and (min-width: 769px) { .p-article__head button:hover { color: #0f30df; } } @media screen and (max-width: 768px) { .p-article__toc { padding: 12px 16px; } } /* article body */ .p-article__body { font-size: 1.7rem; line-height: 2; font-weight: 500; max-width: 73.636363636%; margin: 0 auto; padding: 0 0 60px; } .p-article__body h2 { display: flex; gap: 16px; font-size: 3.2rem; line-height: 1.7; margin: 60px 0 40px; } .p-article__body h2::before { content: ""; display: block; flex-shrink: 0; width: 6px; background: var(--secondary-color); border-radius: 3px; } .p-article__body h3 { font-size: 2.4rem; line-height: 1.7; padding: 0 0 20px; border-bottom: solid 1px var(--gray-color); margin: 60px 0 40px; } .p-article__body h4 { font-size: 2rem; line-height: 1.7; padding: 0 0 20px; border-bottom: solid 1px var(--gray-color); margin: 60px 0 40px; } .p-article__body h4.is-style--icon { display: flex; gap: 32px; } .p-article__body h4.is-style--icon::before { content: ""; display: block; flex-shrink: 0; width: 58px; height: 51px; background: url(assets/images/icon-balloon.svg) no-repeat center center; background-size: 100% 100%; } .p-article__body :target { } .p-article__body p { margin: 0 0 32px; } .p-article__body p:last-child { margin: 0; } .p-article__body p:has(img) { max-width: 720px; margin-left: auto; margin-right: auto; } .p-article__body a:not( .p-article__back-button, .wp-block-button__link, .p-article__toc a, .p-article__share-list a ) { color: var(--accent-color); text-decoration: underline; } .p-article__body ul:not( .p-article__toc, .p-article__toc ul, .p-article__share-list, .p-article__profile-sns ) { margin: 0 0 32px; } .p-article__body ul:not( .p-article__toc, .p-article__toc ul, .p-article__share-list, .p-article__profile-sns ) li { padding: 0 0 0 20px; position: relative; } .p-article__body ul:not( .p-article__toc, .p-article__toc ul, .p-article__share-list, .p-article__profile-sns ) li::before { content: ""; display: block; flex-shrink: 0; width: 8px; height: 8px; background: #00ccca; border: solid 2px var(--base-color); border-radius: 50%; margin: 12px 0 0; position: absolute; left: 0; top: 0; } .p-article__body ul:not( .p-article__toc, .p-article__toc ul, .p-article__share-list, .p-article__profile-sns ) li ul { width: 100%; padding: 0 0 0 20px; margin: 0; } .p-article__body ol { counter-reset: cnt; margin: 0 0 32px; } .p-article__body ol li { padding: 0 0 0 27px; position: relative; } .p-article__body ol li::before { counter-increment: cnt; content: counter(cnt) "."; position: absolute; left: 0; top: 0; } .p-article__body ol li ul, .p-article__body ol li ol { width: 100%; padding: 0 0 0 20px; counter-reset: cnt; margin: 0; } .p-article__body ol li ul li, .p-article__body ol li ol li { padding: 0 0 0 43px; } .p-article__body ol li ul li::before, .p-article__body ol li ol li::before { content: counters(cnt, "-") "."; counter-increment: cnt; flex-shrink: 0; width: auto; background: none; border: none; margin: 0; } .p-article__body img { max-width: 100%; margin: 0 auto; } .p-article__body blockquote { padding: 28px 40px 32px 116px; background: url(assets/images/icon-quote.svg) no-repeat 28px 20px; background-size: 56px 50px; border: solid 1px var(--gray-color-valiable2); border-radius: 8px; margin: 40px 0 60px; } .p-article__body > table { width: 100%; border-collapse: collapse; border: solid 1px var(--gray-color-valiable2); border-radius: 8px; margin: 32px 0; } .p-article__body > table tr:first-child td { border-top: none; } .p-article__body > table tr:last-child td { border-bottom: none; } .p-article__body > table th { background: var(--gray-color-valiable3); padding: 17px; font-size: 1.4rem; font-weight: 600; line-height: 1.8; } .p-article__body > table th + th { border-left: solid 1px var(--gray-color-valiable2); } .p-article__body > table td { padding: 17px; border: solid 1px var(--gray-color-valiable2); } .p-article__body > table td:first-child { border-left: none; } .p-article__body > table td:last-child { border-right: none; } .p-article__body iframe + cite { display: block; font-style: normal; } .wp-block-image, .wp-block-embed, .figure-image { display: flex; flex-direction: column; gap: 20px; max-width: 720px; margin: 40px auto; } .wp-block-image p, .wp-block-embed p, .figure-image p { margin: 0; } .wp-block-image figcaption, .wp-block-embed figcaption, .figure-image figcaption { font-size: 1.5rem; line-height: 1.7; letter-spacing: 0.04em; font-weight: 700; color: #7c7c7c; text-align: center; } .wp-block-image { margin: 40px auto; } .wp-block-image:first-child { margin-top: 0; } .wp-block-embed__wrapper { aspect-ratio: 16 / 9; } .wp-block-embed__wrapper iframe { width: 100%; height: 100%; } .wp-block-button__link { display: flex; align-items: center; justify-content: center; background: var(--accent-color); color: #fff; font-size: 1.5rem; padding: 13px 48px; } .wp-block-buttons { display: flex; margin: 32px 0; } .wp-block-button { display: flex; } .wp-block-group { margin: 32px 0; } .wp-block-group.is-layout-flex { display: flex; gap: 40px; } .wp-block-group.is-layout-flex > *:first-child { flex-shrink: 0; } .wp-block-group.is-layout-flex .wp-block-group { flex: 1; margin: 0; } .wp-block-group.is-style--interview .wp-block-group__inner-container { display: flex; gap: 40px; } .wp-block-group.is-style--interview .wp-block-group__inner-container p:first-child { flex-shrink: 0; } .wp-block-group[class*="-box"] { padding: 28px 40px 32px; background: var(--gray-color-valiable3); border-radius: 12px; line-height: 1.8; } .wp-block-group[class*="-box"] .wp-block-group__inner-container:has(.wp-block-image) { display: flex; align-items: center; gap: 40px; } .wp-block-group[class*="-box"] .wp-block-group { margin: 0; } .wp-block-group[class*="-box"] .wp-block-image { width: 100px; height: 100px; border-radius: 50%; flex-shrink: 0; margin: 0; overflow: hidden; } .wp-block-group[class*="-box"] .wp-block-image img { width: 100%; height: 100%; -o-object-fit: cover; object-fit: cover; } .wp-block-group[class*="-box"] p.is-style--name { display: flex; align-items: flex-end; gap: 20px; margin: 0 0 8px; font-size: 1.3rem; line-height: 1.7; } .wp-block-group[class*="-box"] p strong { font-size: 2rem; } .wp-block-group.is-style--box1 { background: none; border: solid 1px var(--gray-color); } .wp-block-group:nth-child(even of [class*="balloon"]) { flex-direction: row-reverse; } .wp-block-group:nth-child(even of [class*="balloon"]) .wp-block-group__inner-container { flex-direction: row-reverse; } .wp-block-group:nth-child(even of [class*="balloon"]) p::before { left: auto; right: -16px; transform: rotate(180deg); } .wp-block-group[class*="balloon"] .wp-block-group__inner-container { display: flex; align-items: flex-start; gap: 40px; } .wp-block-group[class*="balloon"] .wp-block-image { flex-shrink: 0; width: 100px; gap: 4px; margin: 0; } .wp-block-group[class*="balloon"] .wp-block-image img { border-radius: 50%; } .wp-block-group[class*="balloon"] .wp-block-image figcaption { font-size: 1.5rem; line-height: 1.8; color: var(--base-color); } .wp-block-group[class*="balloon"] p { padding: 28px 40px; background: var(--gray-color-valiable3); border-radius: 8px; position: relative; } .wp-block-group[class*="balloon"] p::before { content: ""; display: block; width: 0; height: 0; border-style: solid; border-top: 12px solid transparent; border-bottom: 12px solid transparent; border-right: 16px solid var(--gray-color-valiable3); border-left: 0; position: absolute; top: 40px; left: -16px; } .wp-block-group.is-style--balloon-green p { background: #ddf3e2; } .wp-block-group.is-style--balloon-green p::before { border-right-color: #ddf3e2; } .wp-block-group.is-style--balloon-yellow p { background: #feedbe; } .wp-block-group.is-style--balloon-yellow p::before { border-right-color: #feedbe; } .wp-block-group.is-style--balloon-pink p { background: #ffdddd; } .wp-block-group.is-style--balloon-pink p::before { border-right-color: #ffdddd; } .wp-block-group.is-style--balloon-blue p { background: #bee3fe; } .wp-block-group.is-style--balloon-blue p::before { border-right-color: #bee3fe; } .wp-block-table { border: solid 1px var(--gray-color-valiable2); border-radius: 8px; overflow: hidden; margin: 32px 0; } .wp-block-table table { width: 100%; border-collapse: collapse; } .wp-block-table tr:first-child td { border-top: none; } .wp-block-table tr:last-child td { border-bottom: none; } .wp-block-table th { background: var(--gray-color-valiable3); border-bottom: solid 1px var(--gray-color-valiable2); padding: 17px; font-size: 1.4rem; font-weight: 600; line-height: 1.8; } .wp-block-table th + th { border-left: solid 1px var(--gray-color-valiable2); } .wp-block-table td { width: 33.3333333%; padding: 17px; border: solid 1px var(--gray-color-valiable2); text-align: center; } .wp-block-table td:first-child { border-left: none; } .wp-block-table td:last-child { border-right: none; } .wp-block-table.is-style--l1 tr:first-child td { font-size: 1.4rem; background: var(--gray-color-valiable3); font-weight: 700; } .wp-block-table.is-style--l2 td:first-child { font-size: 1.4rem; background: var(--gray-color-valiable3); font-weight: 700; } .wp-block-table.is-style--timeline { border: none; vertical-align: top; margin: 32px 0; padding: 0 40px; } .wp-block-table.is-style--timeline td { width: 100%; border: none; text-align: left; padding: 10px 0 32px 40px; } .wp-block-table.is-style--timeline td strong { display: block; margin: 0 0 10px; } .wp-block-table.is-style--timeline td:first-child { width: auto; vertical-align: top; border-right: solid 1px var(--gray-color-valiable2); position: relative; padding: 6px 40px 32px 0; font-family: "Roboto Condensed", sans-serif; font-weight: 700; font-size: 2.4rem; line-height: 1.8; color: var(--secondary-color); text-align: right; } .wp-block-table.is-style--timeline td:first-child::after { content: ""; display: block; width: 12px; height: 12px; border-radius: 50%; background: var(--primary-color); position: absolute; top: 20px; right: -6px; } .profile-cards-list { margin: 32px 0; } .box3 { padding: 28px 32px 40px; margin: 32px 0; background: var(--gray-color-valiable3); border-radius: 12px; } .box3 p { margin: 0 0 8px; } .entry-footer-profile { padding: 28px 32px 40px; background: var(--gray-color-valiable3); border-radius: 12px; } .entry-footer-profile img { width: 100%; } .entry-footer-profile-body { display: flex; align-items: center; gap: 40px; } .entry-footer-profile-left { flex-shrink: 0; width: 100px; } .entry-footer-profile-left:not(:has(p)) { height: 100px; border-radius: 50%; overflow: hidden; } .entry-footer-profile-left:not(:has(p)) img { width: 100%; height: 100%; -o-object-fit: cover; object-fit: cover; } .entry-footer-profile-left:has(p) img { border-radius: 50%; } .entry-footer-profile-left p { margin: 0; } .entry-footer-profile-right { display: flex; flex-direction: column; gap: 8px; } .entry-footer-profile-description strong { font-size: 2rem; line-height: 1.7; } .entry-footer-profile-description { line-height: 1.8; } .p-article__bottom { display: flex; flex-direction: column; gap: 60px; margin: 60px 0 0; } .p-article__bottom p { margin: 0; } .p-article__bottom .entry-footer-profile-body { align-items: flex-start; } .p-article__bottom .profile-card-container + .profile-card-container { margin: 40px 0 0; } .p-article__bottom .entry-footer-profile-left { width: 120px; border-radius: 0; } .p-article__bottom .entry-footer-profile-left img { border-radius: 50%; } .p-article__bottom .entry-footer-profile-left p { text-align: center; } .p-article__bottom .entry-footer-profile-right > a { width: 50px; } .p-article__bottom .entry-footer-profile-right > a::after { display: none; } .p-article__back-button.-arrow { width: 260px; margin: 0 auto; padding: 17.5px 16px; } .p-article__back-button.-arrow::after { right: auto; left: 16px; margin: auto 0; transform: rotate(180deg); } .p-article__botton-text { margin: 60px 0; } @media screen and (min-width: 769px) { .p-article__body a:not( .p-article__back-button, .wp-block-button__link, .p-article__profile-sns a ):hover { opacity: 0.6; } .p-article__body .wp-block-button__link:hover { background: #051d9f; } } @media screen and (max-width: 768px) { .p-article__body { padding: 40px 0; max-width: 100%; } .p-article__body h2 { gap: 20px; font-size: 2.4rem; margin: 40px 0 20px; } .p-article__body h2::before { width: 4px; border-radius: 2px; } .p-article__body h3 { font-size: 2.2rem; padding: 0 0 16px; margin: 40px 0 32px; } .p-article__body h4 { padding: 0 0 16px; margin: 40px 0 32px; } .p-article__body h4.is-style--icon { gap: 17px; font-size: 1.8rem; } .p-article__body h4.is-style--icon::before { width: 47px; height: 41px; } .p-article__body p { margin: 0 0 20px; } .p-article__body p:last-child { margin: 0; } .p-article__body a:not( .p-article__back-button, .wp-block-button__link, .p-article__toc a ) { color: var(--accent-color); text-decoration: underline; } .p-article__body ul:not(.p-article__toc, .p-article__toc ul, .p-article__share-list) li { font-size: 1.5rem; line-height: 1.8; } .p-article__body ul:not(.p-article__toc, .p-article__toc ul, .p-article__share-list) li + li { margin-top: 4px; } .p-article__body ul:not(.p-article__toc, .p-article__toc ul, .p-article__share-list) li ul { margin-top: 4px; } .p-article__body ol li { padding: 0 0 0 25px; font-size: 1.5rem; line-height: 1.8; } .p-article__body ol li + li { margin-top: 4px; } .p-article__body ol li ol, .p-article__body ol li ul { margin-top: 4px; padding: 0 0 0 15px; } .p-article__body ol li ol li, .p-article__body ol li ul li { padding: 0 0 0 39px; } .p-article__body blockquote { padding: 20px 16px 28px 80px; background-position: 16px 20px; background-size: 47px 42px; border-radius: 4px; margin: 32px 0 40px; line-height: 1.8; } .p-article__body iframe { width: 100%; } .wp-block-image, .figure-image { gap: 10px; } .wp-block-image figcaption, .figure-image figcaption { font-size: 1.3rem; line-height: 1.8; } .wp-block-image { margin: 20px auto 32px; } .wp-block-image:first-child { margin-top: 0; } .wp-block-buttons { margin: 32px 0; } .wp-block-button { display: flex; } .wp-block-group { margin: 32px 0; } .wp-block-group.is-layout-flex { gap: 20px; } .wp-block-group.is-style--interview .wp-block-group__inner-container { gap: 20px; } .wp-block-group.-interview .wp-block-group__inner-container { gap: 20px; } .wp-block-group[class*="-box"] { padding: 20px 16px 24px; border-radius: 4px; } .wp-block-group[class*="-box"] .wp-block-group__inner-container:has(.wp-block-image) { align-items: flex-start; gap: 20px; } .wp-block-group[class*="-box"] .wp-block-image { width: 64px; height: 64px; } .wp-block-group[class*="-box"] p.is-style--name { flex-direction: column; align-items: flex-start; gap: 7px; margin: 0 0 8px; line-height: 1.2; } .wp-block-group[class*="-box"] p strong { font-size: 1.8rem; } .wp-block-group[class*="balloon"] { font-size: 1.5rem; line-height: 1.8; } .wp-block-group[class*="balloon"] .wp-block-group__inner-container { align-items: flex-start; gap: 24px; } .wp-block-group[class*="balloon"] .wp-block-image { width: 60px; gap: 4px; margin: 0; } .wp-block-group[class*="balloon"] .wp-block-image figcaption { font-size: 1.4rem; line-height: 1.2; } .wp-block-group[class*="balloon"] p { padding: 20px 16px; border-radius: 12px; } .wp-block-table { border-radius: 4px; margin: 20px 0; } .wp-block-table th { padding: 16.5px 12px; font-size: 1.5rem; text-align: center; } .wp-block-table td { width: 33.3333333%; padding: 12px; text-align: left; font-size: 1.4rem; line-height: 1.6; } .wp-block-table.is-style--l1 tr:first-child td { padding: 16.5px 12px; font-size: 1.5rem; text-align: center; } .wp-block-table.is-style--l2 td:first-child { padding: 16.5px 12px; font-size: 1.5rem; text-align: center; } .wp-block-table.is-style--timeline { padding: 0; margin: 20px 0; } .wp-block-table.is-style--timeline td { padding: 10px 0 20px 20px; } .wp-block-table.is-style--timeline td:first-child { padding: 5px 20px 0 0; font-size: 1.8rem; } .wp-block-table.is-style--timeline td:first-child::after { top: 14px; right: -6px; } .wp-block-button__link { display: flex; align-items: center; justify-content: center; background: var(--accent-color); color: #fff; font-size: 1.5rem; padding: 13px 50px; } .entry-footer-profile { padding: 20px 16px 24px; } .entry-footer-profile-body { gap: 20px; } .entry-footer-profile-left { flex-shrink: 0; width: 60px; } .entry-footer-profile-left:not(:has(p)) { height: 100px; } .entry-footer-profile-left p { margin: 0; } .p-article__bottom { gap: 0; margin: 40px 0 0; } .p-article__bottom p { margin: 0; } .p-article__bottom .entry-footer-profile-body { gap: 20px; } .p-article__bottom .entry-footer-profile-left { width: 60px; } .p-article__back-button.-arrow { max-width: 280px; margin-top: 40px; } } /* プロフィールカード */ .p-article__profile { display: flex; align-items: flex-start; gap: 40px; padding: 32px 40px 28px; background: var(--gray-color-valiable3); font-size: 1.6rem; line-height: 1.8; } .p-article__profile-image { flex-shrink: 0; width: 120px; height: 120px; border-radius: 50%; overflow: hidden; } .p-article__profile-image img { width: 100%; height: 100%; -o-object-fit: cover; object-fit: cover; } .p-article__profile-name { font-size: 1.8rem; font-weight: 700; line-height: 1.7; } .p-article__profile-label { font-size: 1.4rem; font-weight: 700; } .p-article__bottom .p-article__profile-name { margin: 0 0 8px; } .p-article__profile-sns { display: flex; align-items: center; gap: 8px; margin: 20px 0 0; } .p-article__profile-sns li { width: 50px; height: 50px; } .p-article__profile-sns li a { display: block; border-radius: 50%; line-height: 0; overflow: hidden; } .p-article__profile-sns li a:hover { opacity: 1; box-shadow: var(--shadow); } .p-article__profile-sns li a svg { width: 100%; height: 100%; } @media screen and (max-width: 768px) { .p-article__profile { gap: 20px; padding: 20px 16px 24px; font-size: 1.5rem; margin: 0 0 40px; } .p-article__profile-image { width: 60px; height: 60px; } .p-article__bottom .p-article__profile-name { margin: 0 0 4px; } .p-article__profile-sns { gap: 4px; margin: 12px 0 0; } .p-article__profile-sns li { width: 48px; height: 48px; } .p-article__profile-sns li a:hover { opacity: 1; box-shadow: none; } } /* 関連記事 */ .p-article__related { max-width: 73.636363636%; margin: 0 auto; padding: 60px 0 0; } .p-article__related-head { display: flex; align-items: flex-end; gap: 20px; margin: 0 0 40px; } .p-article__related-head h2 { font-size: 3.2rem; line-height: 1.5; } .p-article__related-head p { display: flex; align-items: center; gap: 5px; line-height: 1.5; margin: 0 0 6px; } .p-article__related-head p::before, .p-article__related-head p::after { content: " /"; } .p-article__related-head p::before { transform: scale(-1, 1); } @media screen and (max-width: 768px) { .p-article__related { padding: 52px 0 0; max-width: 100%; } .p-article__related-head { gap: 16px; } .p-article__related-head h2 { font-size: 2.4rem; } .p-article__related-head p { font-size: 1.3rem; line-height: 1.8; margin: 0 0 2px; } } .not-found__header { padding: 80px 0 60px; background: var(--gray-color-valiable3); text-align: center; } .not-found__inner { max-width: 810px; margin: 0 auto; } .not-found__headline { margin: 0 0 28px; } .not-found__lead { line-height: 1.8; margin: 0 0 40px; } .not-found__recommended { padding: 60px 0 0; } .not-found__title { font-size: 3.2rem; line-height: 1.5; margin: 0 0 40px; } @media screen and (max-width: 768px) { .not-found__header { text-align: left; padding: 40px 0; } .not-found__inner { margin: 0 20px; } .not-found__headline { font-size: 1.8rem; line-height: 1.6; margin: 0 0 8px; } .not-found__lead { font-size: 1.5rem; margin: 0 0 20px; } .not-found__recommended { padding: 40px 0 0; } .not-found__title { font-size: 2.4rem; } } /* _settings */ /* _vendor */ /* _generic */ /* _base */ /* _layouts */ /* _objects */ /* _components */ /* _site */ /* @import "https://sakumaga.sakura.ad.jp/wp-content/themes/sakumaga/_site/_sidenavi.css"; */ /* _utility */ /* _pages */