@charset "UTF-8"; /*** The new CSS reset - version 1.9 (last updated 19.6.2023) GitHub page: https://github.com/elad2412/the-new-css-reset ***/ /* Remove all the styles of the "User-Agent-Stylesheet", except for the 'display' property - The "symbol *" part is to solve Firefox SVG sprite bug - The "html" element is excluded, otherwise a bug in Chrome breaks the CSS hyphens property (https://github.com/elad2412/the-new-css-reset/issues/36) */ *:where( :not(html, iframe, canvas, img, svg, video, audio):not(svg *, symbol *) ) { all: unset; display: revert; } /* Preferred box-sizing value */ *, *::before, *::after { box-sizing: border-box; } /* Reapply the pointer cursor for anchor tags */ a, button { cursor: revert; } /* Remove list styles (bullets/numbers) */ ol, ul, menu { list-style: none; } /* For images to not be able to exceed their container */ img { max-inline-size: 100%; max-block-size: 100%; } /* removes spacing between cells in tables */ table { border-collapse: collapse; } /* Safari - solving issue when using user-select:none on the text input doesn't working */ input, textarea { -webkit-user-select: auto; } /* revert the 'white-space' property for textarea elements on Safari */ textarea { white-space: revert; } /* minimum style to allow to style meter element */ meter { -webkit-appearance: revert; appearance: revert; } /* preformatted text - use only for this feature */ :where(pre) { all: revert; } /* reset default text opacity of input placeholder */ ::placeholder { color: unset; } /* remove default dot (•) sign */ ::marker { content: initial; } /* fix the feature of 'hidden' attribute. display:revert; revert to element instead of attribute */ :where([hidden]) { display: none; } /* revert for bug in Chromium browsers - fix for the content editable attribute will work properly. - webkit-user-select: auto; added for Safari in case of using user-select:none on wrapper element*/ :where([contenteditable]:not([contenteditable="false"])) { -moz-user-modify: read-write; -webkit-user-modify: read-write; overflow-wrap: break-word; -webkit-line-break: after-white-space; -webkit-user-select: auto; } /* apply back the draggable feature - exist only in Chromium and Safari */ :where([draggable="true"]) { -webkit-user-drag: element; } /* Revert Modal native behavior */ :where(dialog:modal) { all: revert; } /** * Swiper 10.2.0 * 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: August 17, 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; } :host { position: relative; display: block; margin-left: auto; margin-right: auto; z-index: 1; } .swiper { margin-left: auto; margin-right: auto; position: relative; overflow: hidden; overflow: clip; list-style: none; padding: 0; z-index: 1; display: block; } .swiper-vertical > .swiper-wrapper { flex-direction: column; } .swiper-wrapper { position: relative; width: 100%; height: 100%; z-index: 1; display: flex; transition-property: transform; transition-timing-function: var( --swiper-wrapper-transition-timing-function, initial ); box-sizing: content-box; } .swiper-android .swiper-slide, .swiper-ios .swiper-slide, .swiper-wrapper { transform: translate3d(0px, 0, 0); } .swiper-horizontal { touch-action: pan-y; } .swiper-vertical { touch-action: pan-x; } .swiper-slide { flex-shrink: 0; width: 100%; height: 100%; position: relative; transition-property: transform; display: block; } .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); -webkit-backface-visibility: hidden; backface-visibility: hidden; } .swiper-3d.swiper-css-mode .swiper-wrapper { perspective: 1200px; } .swiper-3d .swiper-wrapper { transform-style: preserve-3d; } .swiper-3d { perspective: 1200px; } .swiper-3d .swiper-cube-shadow, .swiper-3d .swiper-slide { transform-style: preserve-3d; } .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-css-mode.swiper-horizontal > .swiper-wrapper { scroll-snap-type: x mandatory; } .swiper-css-mode.swiper-vertical > .swiper-wrapper { scroll-snap-type: y mandatory; } .swiper-css-mode.swiper-free-mode > .swiper-wrapper { scroll-snap-type: none; } .swiper-css-mode.swiper-free-mode > .swiper-wrapper > .swiper-slide { scroll-snap-align: none; } .swiper-css-mode.swiper-centered > .swiper-wrapper::before { content: ""; flex-shrink: 0; order: 9999; } .swiper-css-mode.swiper-centered > .swiper-wrapper > .swiper-slide { scroll-snap-align: center center; scroll-snap-stop: always; } .swiper-css-mode.swiper-centered.swiper-horizontal > .swiper-wrapper > .swiper-slide:first-child { margin-inline-start: var(--swiper-centered-offset-before); } .swiper-css-mode.swiper-centered.swiper-horizontal > .swiper-wrapper::before { height: 100%; min-height: 1px; width: var(--swiper-centered-offset-after); } .swiper-css-mode.swiper-centered.swiper-vertical > .swiper-wrapper > .swiper-slide:first-child { margin-block-start: var(--swiper-centered-offset-before); } .swiper-css-mode.swiper-centered.swiper-vertical > .swiper-wrapper::before { width: 100%; min-width: 1px; height: var(--swiper-centered-offset-after); } .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-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-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: var(--swiper-navigation-top-offset, 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 svg, .swiper-button-prev svg { width: 100%; height: 100%; object-fit: contain; transform-origin: center; } .swiper-rtl .swiper-button-next svg, .swiper-rtl .swiper-button-prev svg { transform: rotate(180deg); } .swiper-button-prev, .swiper-rtl .swiper-button-next { left: var(--swiper-navigation-sides-offset, 10px); right: auto; } .swiper-button-next, .swiper-rtl .swiper-button-prev { right: var(--swiper-navigation-sides-offset, 10px); left: auto; } .swiper-button-lock { display: none; } .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:after, .swiper-rtl .swiper-button-next:after { content: "prev"; } .swiper-button-next, .swiper-rtl .swiper-button-prev { right: var(--swiper-navigation-sides-offset, 10px); left: auto; } .swiper-button-next:after, .swiper-rtl .swiper-button-prev:after { content: "next"; } .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: var(--swiper-pagination-bottom, 8px); top: var(--swiper-pagination-top, auto); 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: var(--swiper-pagination-bullet-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; 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: var(--swiper-pagination-right, 8px); left: var(--swiper-pagination-left, auto); 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-fraction { color: var(--swiper-pagination-fraction-color, inherit); } .swiper-pagination-progressbar { background: var( --swiper-pagination-progressbar-bg-color, 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: var(--swiper-pagination-progressbar-size, 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: var(--swiper-pagination-progressbar-size, 4px); height: 100%; left: 0; top: 0; } .swiper-pagination-lock { display: none; } .swiper-scrollbar { border-radius: var(--swiper-scrollbar-border-radius, 10px); position: relative; -ms-touch-action: none; background: var(--swiper-scrollbar-bg-color, 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: var(--swiper-scrollbar-sides-offset, 1%); bottom: var(--swiper-scrollbar-bottom, 4px); top: var(--swiper-scrollbar-top, auto); z-index: 50; height: var(--swiper-scrollbar-size, 4px); width: calc(100% - 2 * var(--swiper-scrollbar-sides-offset, 1%)); } .swiper-scrollbar.swiper-scrollbar-vertical, .swiper-vertical > .swiper-scrollbar { position: absolute; left: var(--swiper-scrollbar-left, auto); right: var(--swiper-scrollbar-right, 4px); top: var(--swiper-scrollbar-sides-offset, 1%); z-index: 50; width: var(--swiper-scrollbar-size, 4px); height: calc(100% - 2 * var(--swiper-scrollbar-sides-offset, 1%)); } .swiper-scrollbar-drag { height: 100%; width: 100%; position: relative; background: var(--swiper-scrollbar-drag-bg-color, rgba(0, 0, 0, 0.5)); border-radius: var(--swiper-scrollbar-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%; object-fit: contain; } .swiper-slide-zoomed { cursor: move; touch-action: none; } .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 { pointer-events: auto; } .swiper-fade .swiper-slide-active .swiper-slide-active { pointer-events: auto; } .swiper-cube { overflow: visible; } .swiper-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-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-prev { pointer-events: auto; visibility: visible; } .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-cube .swiper-slide-next + .swiper-slide { pointer-events: auto; visibility: visible; } .swiper-cube .swiper-slide-shadow-cube.swiper-slide-shadow-bottom, .swiper-cube .swiper-slide-shadow-cube.swiper-slide-shadow-left, .swiper-cube .swiper-slide-shadow-cube.swiper-slide-shadow-right, .swiper-cube .swiper-slide-shadow-cube.swiper-slide-shadow-top { z-index: 0; -webkit-backface-visibility: hidden; backface-visibility: hidden; } .swiper-flip { overflow: visible; } .swiper-flip .swiper-slide { pointer-events: none; -webkit-backface-visibility: hidden; 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-flip.swiper-slide-shadow-bottom, .swiper-flip .swiper-slide-shadow-flip.swiper-slide-shadow-left, .swiper-flip .swiper-slide-shadow-flip.swiper-slide-shadow-right, .swiper-flip .swiper-slide-shadow-flip.swiper-slide-shadow-top { z-index: 0; -webkit-backface-visibility: hidden; backface-visibility: hidden; } .swiper-creative .swiper-slide { -webkit-backface-visibility: hidden; backface-visibility: hidden; overflow: hidden; transition-property: transform, opacity, height; } .swiper-cards { overflow: visible; } .swiper-cards .swiper-slide { transform-origin: center bottom; -webkit-backface-visibility: hidden; backface-visibility: hidden; overflow: hidden; } picture, img, svg { display: block; width: 100%; height: auto; } html { scroll-behavior: smooth; } body { font-family: "BIZ UDPGothic", sans-serif; } .hide-room { display: none; } @media screen and (min-width: 1024px) { .hide-pc { display: none !important; } } @media screen and (max-width: 1023px) { .hide-sp { display: none !important; } } [data-google-map] img { max-inline-size: inherit; max-block-size: inherit; } @media screen and (min-width: 1024px) { .root__header { position: fixed; top: 0; left: 0; width: 100%; z-index: 100; } .root__contents { margin-top: 80px; } } @media screen and (max-width: 1023px) { .root__header { position: fixed; top: 0; left: 0; width: 100%; z-index: 100; } .root__contents { margin-top: 70px; } } @media screen and (min-width: 1024px) { .c-form-wrapper { position: relative; } .c-form-wrapper__header { position: absolute; left: 0; top: 0; width: 100%; } .c-form-header { height: 96px; padding-top: 20px; padding-left: 20px; } .c-form-header__logo { display: block; width: 190px; } .c-form-footer { padding-right: 20px; padding-left: 20px; padding-top: 15px; padding-bottom: 16px; background: var(--MIKIblue, #005282); } .c-form-footer__copyright { color: #fff; font-family: Montserrat; font-size: 10px; font-style: normal; font-weight: 500; line-height: 150%; /* 15px */ letter-spacing: 1px; text-align: right; } } @media screen and (max-width: 1023px) { .c-form-wrapper { position: relative; } .c-form-wrapper__header { position: absolute; left: 0; top: 0; width: 100%; } .c-form-header { padding-top: 20px; padding-left: 20px; } .c-form-header__logo { display: block; width: 190px; transition: 0.25s; } .c-form-header__logo:hover { opacity: 0.5; } .c-form-footer { padding-right: 20px; padding-left: 20px; padding-top: 15px; padding-bottom: 16px; background: var(--MIKIblue, #005282); } .c-form-footer__copyright { color: #fff; font-family: Montserrat; font-size: 10px; font-style: normal; font-weight: 500; line-height: 150%; /* 15px */ letter-spacing: 1px; text-align: center; } } @media screen and (min-width: 1024px) { .c-header { background-color: #ffffff; height: 80px; position: relative; display: grid; grid-template-columns: 190px 1fr 272px; padding-block: 12px; padding-inline: 20px; gap: 20px; box-shadow: 0px 1px 1px 0px rgba(0, 0, 0, 0.16); align-items: center; } .c-header__logo { display: block; } .c-header__tel { margin-left: auto; } .c-header-tel__block { display: grid; grid-template-columns: 48px 1fr; } .c-header-tel__icon { width: 48px; } .c-header-tel__no { color: #333; font-family: Montserrat; font-size: 32px; font-style: normal; font-weight: 600; line-height: 100%; /* 32px */ } .c-header-tel__text { color: #333; font-family: BIZ UDPGothic; font-size: 11px; font-style: normal; font-weight: 400; line-height: 150%; /* 16.5px */ letter-spacing: 0.77px; text-align: center; } .c-header-cv { display: block; background: var(--CV, #fa5c03); padding-block: 16px; display: flex; justify-content: center; gap: 16px; color: #fff; font-family: BIZ UDPGothic; font-size: 16px; font-style: normal; font-weight: 700; line-height: 150%; /* 24px */ letter-spacing: 1.6px; transition: 0.25s; } .c-header-cv:hover { opacity: 0.5; } .c-header-cv__arrow { width: 16px; margin-top: 6px; } } @media screen and (max-width: 1023px) { .c-header { height: 70px; position: relative; display: grid; grid-template-columns: 138px; align-items: center; padding-block: 18px; padding-inline: 15px; background: #fff; box-shadow: 0px 1px 1px 0px rgba(0, 0, 0, 0.16); } .c-header__logo { display: block; } } @media screen and (min-width: 1024px) { .c-footer { background: #fff; padding-bottom: 128px; } .c-footer__corporate { width: 253px; display: block; margin: auto; margin-top: 128px; } .c-footer__sitemap { margin-top: 80px; } .c-footer-sitemap { display: flex; justify-content: center; align-items: flex-start; gap: 80px; } .c-footer-sitemap__column { display: grid; } .c-footer-sitemap__category + .c-footer-sitemap__category { margin-top: 48px; } .c-footer-sitemap__accordion { height: auto !important; } .c-footer-sitemap__category-top { color: var(--333333, #333); font-family: BIZ UDPGothic; font-size: 14px; font-style: normal; font-weight: 700; line-height: 150%; /* 21px */ letter-spacing: 2.8px; transition: 0.25s; } .c-footer-sitemap__category-top + .c-footer-sitemap__category-top { margin-top: 16px; } .c-footer-sitemap__category-top:hover { opacity: 0.5; } .c-footer-sitemap__category-children { display: grid; gap: 20px; margin-top: 30px; } .c-footer-sitemap__category-child { color: var(--333333, #333); font-family: BIZ UDPGothic; font-size: 12px; font-style: normal; font-weight: 400; line-height: 150%; /* 18px */ letter-spacing: 2.4px; transition: 0.25s; } .c-footer-sitemap__category-child::before { content: ""; display: inline-block; width: 10px; height: 0.9px; background: var(--333333, #333); margin-right: 10px; vertical-align: 5px; } .c-footer-sitemap__category-child:hover { opacity: 0.5; } .c-footer-sitemap__copyright { color: var(--333333, #333); font-family: Montserrat; font-size: 10px; font-style: normal; font-weight: 500; line-height: 150%; /* 15px */ letter-spacing: 1px; margin-top: 118px; } } @media screen and (max-width: 1023px) { .c-footer { background: #fff; padding-bottom: 112px; } .c-footer__corporate { display: block; margin: auto; margin-top: 50px; width: 200px; } .c-footer__sitemap { margin-top: 40px; } .c-footer-sitemap { display: grid; padding-left: 20px; padding-right: 20px; } .c-footer-sitemap__column { display: grid; } .c-footer-sitemap__column:nth-of-type(1) { border-top: 1px solid #333; } .c-footer-sitemap__category { border-bottom: 1px solid #333; position: relative; } .c-footer-sitemap__category-top { color: var(--333333, #333); font-family: BIZ UDPGothic; font-size: 16px; font-style: normal; font-weight: 700; line-height: 150%; /* 24px */ letter-spacing: 1.6px; padding-top: 20px; padding-bottom: 20px; padding-left: 10px; padding-right: 10px; display: block; margin-right: 38px; } .c-footer-sitemap__category-top--etc { margin-top: 30px; padding-top: 0; padding-bottom: 0; } .c-footer-sitemap__category-top--etc + .c-footer-sitemap__category-top--etc { margin-top: 16px; } .c-footer-sitemap__category-children { display: grid; gap: 20px; border-top: 1px solid #333; padding-top: 30px; padding-bottom: 30px; padding-left: 10px; } .c-footer-sitemap__category-child { color: var(--333333, #333); font-family: BIZ UDPGothic; font-size: 12px; font-style: normal; font-weight: 400; line-height: 150%; /* 18px */ letter-spacing: 2.4px; } .c-footer-sitemap__category-child::before { content: ""; display: inline-block; width: 10px; height: 1px; background: var(--333333, #333); margin-right: 10px; vertical-align: 5px; } .c-footer-sitemap__accordion-button { width: 38px; position: absolute; top: 0px; right: 0; padding-right: 10px; padding-left: 10px; padding-top: 20px; padding-bottom: 26px; } .c-footer-sitemap__copyright { color: var(--333333, #333); font-family: Montserrat; font-size: 10px; font-style: normal; font-weight: 500; line-height: 150%; /* 15px */ letter-spacing: 1px; text-align: center; margin-top: 50px; } .c-footer-sitemap__accordion { overflow: hidden; } } @media screen and (min-width: 1024px) { .c-conversion-section { background-image: url(/assets/images/pc/common/footer-conversion__bg@2x.jpg); background-repeat: no-repeat; background-size: cover; padding: 128px 20px; display: grid; grid-template-columns: minmax(0, 1200px); justify-content: center; } .c-conversion-section__title { color: var(--1A1A1A, #1a1a1a); font-family: BIZ UDPGothic; font-size: 24px; font-style: normal; font-weight: 700; line-height: 150%; /* 36px */ letter-spacing: 4.8px; text-align: center; } .c-conversion-section__main { display: grid; grid-template-columns: repeat(2, calc(50% - 32px)); gap: 64px; margin-top: 32px; } .c-conversion-section__request-link { display: grid; grid-template-columns: auto 16px; padding: 32px 0; justify-content: center; align-items: center; gap: 30px; background: var(--CV, #fa5c03); box-shadow: 3px 3px 16px 0px rgba(0, 0, 0, 0.32); transition: 0.25s; } .c-conversion-section__request-link:hover { opacity: 0.5; } .c-conversion-section__request-link-label { color: #fff; font-family: BIZ UDPGothic; font-size: 24px; font-style: normal; font-weight: 700; line-height: 150%; /* 36px */ letter-spacing: 4.8px; } .c-conversion-section__tel-block { margin-top: 20px; } .c-conversion-tel-block { border: 1px solid #fff; background: rgba(0, 82, 130, 0.48); display: flex; padding: 20px 20px; flex-direction: column; align-items: center; gap: 3px; align-self: stretch; } .c-conversion-tel-block__label { color: #fff; font-family: BIZ UDPGothic; font-size: 11px; font-style: normal; font-weight: 400; line-height: 150%; /* 16.5px */ letter-spacing: 0.77px; } .c-conversion-tel-block__tel-block { display: flex; align-items: flex-start; gap: 10px; } .c-conversion-tel-block__tel-icon { width: 48px; } .c-conversion-tel-block__tel-no { color: #fff; font-family: Montserrat; font-size: 32px; font-style: normal; font-weight: 600; line-height: 100%; /* 32px */ letter-spacing: 1.6px; } .c-conversion-tel-block__time { color: #fff; font-family: BIZ UDPGothic; font-size: 11px; font-style: normal; font-weight: 400; line-height: 150%; /* 16.5px */ letter-spacing: 0.77px; } .c-conversion-carousel__body { background-color: #fff; } .c-conversion-carousel-item { padding: 48px; background: #fff; box-shadow: 0px 0px 8px 0px rgba(0, 0, 0, 0.16); } .c-conversion-carousel-item__title { color: var(--333333, #333); font-family: BIZ UDPGothic; font-size: 18px; font-style: normal; font-weight: 700; line-height: 150%; /* 27px */ letter-spacing: 1.44px; padding-bottom: 9px; border-bottom: 1px dotted var(--logo-lightblue, #9bccee); } .c-conversion-carousel-item__body { display: grid; grid-template-columns: 80px 1fr; gap: 30px; align-items: center; margin-top: 20px; } .c-conversion-carousel-item__text { color: var(--333333, #333); text-align: justify; font-family: BIZ UDPGothic; font-size: 15px; font-style: normal; font-weight: 400; line-height: 150%; /* 22.5px */ letter-spacing: 3px; } } @media screen and (max-width: 1023px) { .c-conversion-section { background-image: url(/assets/images/sp/common/footer-conversion__bg@2x.jpg); background-repeat: no-repeat; background-size: cover; padding: 70px 0; } .c-conversion-section__title { color: var(--1A1A1A, #1a1a1a); text-align: center; font-family: BIZ UDPGothic; font-size: 24px; font-style: normal; font-weight: 700; line-height: 150%; /* 36px */ letter-spacing: 4.8px; } .c-conversion-section__main { margin-top: 32px; margin-left: 20px; margin-right: 20px; } .c-conversion-section__request-link { display: grid; grid-template-columns: auto 16px; padding: 17px 0; justify-content: center; align-items: center; gap: 20px; background: var(--CV, #fa5c03); box-shadow: 3px 3px 16px 0px rgba(0, 0, 0, 0.32); margin-top: 40px; } .c-conversion-section__request-link-label { color: #fff; font-family: BIZ UDPGothic; font-size: 20px; font-style: normal; font-weight: 700; line-height: 150%; /* 30px */ letter-spacing: 4px; } .c-conversion-section__tel-block { margin-top: 20px; } .c-conversion-tel-block { border: 1px solid #fff; background: rgba(0, 82, 130, 0.48); display: grid; padding: 19px 19px; justify-items: center; gap: 3px; } .c-conversion-tel-block__label { color: #fff; font-family: BIZ UDPGothic; font-size: 11px; font-style: normal; font-weight: 400; line-height: 150%; /* 16.5px */ letter-spacing: 0.77px; } .c-conversion-tel-block__tel-block { display: grid; grid-template-columns: 48px auto; gap: 10px; } .c-conversion-tel-block__tel-no { color: #fff; font-family: Montserrat; font-size: 32px; font-style: normal; font-weight: 600; line-height: 100%; /* 32px */ letter-spacing: 1.6px; } .c-conversion-tel-block__time { color: #fff; font-family: BIZ UDPGothic; font-size: 11px; font-style: normal; font-weight: 400; line-height: 150%; /* 16.5px */ letter-spacing: 0.77px; margin-top: 3px; } .c-conversion-carousel-item { padding: 30px; background-color: #fff; } .c-conversion-carousel-item__title { color: var(--333333, #333); font-family: BIZ UDPGothic; font-size: 18px; font-style: normal; font-weight: 700; line-height: 150%; /* 27px */ letter-spacing: 1.44px; padding-bottom: 9px; border-bottom: 1px dotted var(--logo-lightblue, #9bccee); } .c-conversion-carousel-item__body { display: grid; gap: 20px; margin-top: 20px; } .c-conversion-carousel-item__avatar { width: 100px; margin: auto; } .c-conversion-carousel-item__text { color: var(--333333, #333); text-align: justify; font-family: BIZ UDPGothic; font-size: 15px; font-style: normal; font-weight: 400; line-height: 150%; /* 22.5px */ letter-spacing: 1.5px; } } .c-radio-button { display: flex; gap: 8px; position: relative; padding-left: 22px; cursor: pointer; } .c-radio-button::before, .c-radio-button::after { content: ""; display: block; border-radius: 9999px; } .c-radio-button::before { width: 16px; height: 16px; border: 1px solid #aaaaaa; background-color: #fff; position: absolute; left: 0; top: 0; bottom: 0; margin: auto; } .c-radio-button::after { width: 8px; height: 8px; background-color: #aaaaaa; position: absolute; left: 4px; top: 0; bottom: 0; margin: auto; opacity: 0; transition: 0.25s; } .c-radio-button:has(:checked)::after { opacity: 1; } .c-radio-button__body { display: none; } .c-radio-button__label { color: var(--333333, #333); font-family: BIZ UDPGothic; font-size: 14px; font-style: normal; font-weight: 400; line-height: 100%; /* 14px */ letter-spacing: 1.4px; } .c-checkbox { display: grid; grid-template-columns: 12px auto; gap: 0px 8px; align-items: center; } .c-checkbox__checkbox-body { display: none; } .c-checkbox__checkbox { width: 12px; height: 12px; border: 1px solid #b0b0b0; position: relative; background-color: #fff; flex-shrink: 0; } .c-checkbox__checkbox::before { content: ""; display: block; width: 13px; height: 5px; border-left: 1px solid #005282; border-bottom: 1px solid #005282; rotate: 0deg; opacity: 0; position: absolute; left: 0; top: 0; transition: 0.25s; } .c-checkbox__checkbox-body:checked + .c-checkbox__checkbox, .c-checkbox__checkbox--checked { border-color: #005282; } .c-checkbox__checkbox-body:checked + .c-checkbox__checkbox::before, .c-checkbox__checkbox--checked::before { opacity: 1; rotate: -45deg; } .c-checkbox__label { color: var(--333333, #333); font-size: 14px; font-style: normal; font-weight: 400; line-height: 150%; /* 21px */ } .c-checkbox__label a { color: #0085ff; text-decoration-line: underline; } .c-checkbox__count { color: var(--707070, #707070); font-size: 12px; font-style: normal; font-weight: 400; line-height: normal; letter-spacing: 1.2px; } .c-checkbox__error { grid-column: 1/3; height: 4px; background-color: #000; } label.c-checkbox { cursor: pointer; } @media screen and (min-width: 1024px) { .c-selectbox { position: relative; display: block; } .c-selectbox::before { content: ""; pointer-events: none; width: 14px; height: 7px; border-top: 7px solid #1a1a1a; border-left: 7px solid transparent; border-right: 7px solid transparent; position: absolute; right: 20px; top: 21px; z-index: 2; } .c-selectbox::after { content: ""; display: block; width: 80px; position: absolute; right: 1px; top: 1px; bottom: 1px; background: linear-gradient( to right, rgba(255, 255, 255, 0), rgba(255, 255, 255, 0.5), rgba(255, 255, 255, 0.5) ); z-index: 1; pointer-events: none; } .c-selectbox__body { border: 1px solid #cccccc; border-radius: 3px; background-color: #fff; color: var(--333333, #333); font-family: BIZ UDPGothic; font-size: 14px; font-style: normal; font-weight: 400; line-height: 100%; /* 14px */ letter-spacing: 1.4px; padding-top: 16px; padding-bottom: 16px; padding-left: 19px; width: 100%; cursor: pointer; border: 1px solid var(--CCCCCC, #ccc); background: #fff; } } @media screen and (max-width: 1023px) { .c-selectbox { position: relative; display: block; } .c-selectbox::before { content: ""; pointer-events: none; width: 14px; height: 7px; border-top: 7px solid #1a1a1a; border-left: 7px solid transparent; border-right: 7px solid transparent; position: absolute; right: 20px; top: 21px; z-index: 2; } .c-selectbox::after { content: ""; display: block; width: 80px; position: absolute; right: 1px; top: 1px; bottom: 1px; background: linear-gradient( to right, rgba(255, 255, 255, 0), rgba(255, 255, 255, 0.5), rgba(255, 255, 255, 0.5) ); z-index: 1; pointer-events: none; } .c-selectbox__body { border: 1px solid #cccccc; border-radius: 3px; background-color: #fff; color: var(--333333, #333); font-family: BIZ UDPGothic; font-size: 14px; font-style: normal; font-weight: 400; line-height: 100%; /* 14px */ letter-spacing: 1.4px; padding-top: 19px; padding-bottom: 19px; padding-left: 9px; width: 100%; cursor: pointer; border: 1px solid var(--CCCCCC, #ccc); background: #fff; white-space: nowrap; } ._floor-checkbox { padding-top: 10px; } } @media screen and (min-width: 1024px) { .c-fixed-bar { position: fixed; width: 100%; left: 0; bottom: 0; background: #9bccee; display: grid; grid-template-columns: repeat(2, minmax(0, 550px)); gap: 20px; justify-content: center; padding-top: 20px; padding-bottom: 20px; z-index: 1000; padding-left: 20px; padding-right: 20px; } .c-fixed-bar-count { display: flex; gap: 10px; color: #000; font-family: BIZ UDPGothic; font-size: 24px; font-style: normal; font-weight: 700; line-height: 150%; /* 36px */ letter-spacing: 2.4px; padding-top: 10px; background: var(--FAFAFA, #fafafa); padding-bottom: 10px; justify-content: center; align-items: end; height: 100%; } .c-fixed-bar-count__count { color: var(--MIKIblue, #005282); font-family: Montserrat; font-size: 64px; font-style: normal; font-weight: 600; line-height: 90%; /* 57.6px */ } .c-fixed-bar-search-button { display: flex; gap: 30px; width: 100%; justify-content: center; align-items: center; background: var(--MIKIblue, #005282); box-shadow: 3px 3px 16px 0px rgba(0, 0, 0, 0.32); height: 100%; cursor: pointer; transition: 0.25s; } .c-fixed-bar-search-button__label { color: var(--FAFAFA, #fafafa); font-family: BIZ UDPGothic; font-size: 24px; font-style: normal; font-weight: 700; line-height: 150%; /* 36px */ letter-spacing: 4.8px; } .c-fixed-bar-search-button__icon { width: 12px; } .c-fixed-bar-search-button:hover { opacity: 0.5; } } @media screen and (max-width: 1023px) { .c-fixed-bar { position: fixed; width: 100%; left: 0; bottom: 60px; background: #9bccee; display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; padding: 10px; z-index: 1000; } .c-fixed-bar-count { display: flex; color: #000; font-family: BIZ UDPGothic; font-size: 14px; font-style: normal; font-weight: 700; line-height: 150%; /* 21px */ letter-spacing: 1.4px; padding-top: 10px; background: var(--FAFAFA, #fafafa); padding-bottom: 10px; justify-content: center; align-items: end; height: 100%; } .c-fixed-bar-count__count { color: var(--MIKIblue, #005282); font-family: Montserrat; font-size: 32px; font-style: normal; font-weight: 600; line-height: 90%; /* 28.8px */ margin-left: 5px; margin-right: 2px; display: inline-block; } .c-fixed-bar-search-button { display: flex; gap: 5px; width: 100%; justify-content: center; align-items: center; background: var(--MIKIblue, #005282); box-shadow: 3px 3px 16px 0px rgba(0, 0, 0, 0.32); height: 100%; cursor: pointer; } .c-fixed-bar-search-button__label { color: var(--FAFAFA, #fafafa); font-family: BIZ UDPGothic; font-size: 16px; font-style: normal; font-weight: 700; line-height: 150%; /* 24px */ letter-spacing: 3.2px; } .c-fixed-bar-search-button__icon { width: 12px; } } @media screen and (min-width: 1024px) { .c-search-box { --width: 128px; box-shadow: 3px 3px 8px 0px rgba(0, 0, 0, 0.16); display: grid; grid-template-columns: 1fr var(--width); } .c-search-box__textbox { display: block; background: #fff; padding-top: 12px; padding-bottom: 12px; padding-left: 20px; width: 100%; } .c-search-box__textbox::placeholder { color: #bbb; font-family: BIZ UDPGothic; font-size: 16px; font-style: normal; font-weight: 400; line-height: 150%; /* 24px */ letter-spacing: 1.6px; } .c-search-box__button { display: grid; width: 100%; place-items: center; background: var(--MIKIblue, #005282); color: #fff; font-family: BIZ UDPGothic; font-size: 20px; font-style: normal; font-weight: 700; line-height: 150%; /* 30px */ letter-spacing: 2px; transition: 0.25s; cursor: pointer; } .c-search-box__button:hover { opacity: 0.5; } } @media screen and (max-width: 1023px) { .c-search-box { --width: 82px; box-shadow: 3px 3px 8px 0px rgba(0, 0, 0, 0.16); display: grid; grid-template-columns: 1fr var(--width); } .c-search-box__textbox { display: block; background: #fff; padding-top: 22px; padding-bottom: 22px; padding-left: 20px; width: 100%; } .c-search-box__textbox::placeholder { color: #bbb; font-family: BIZ UDPGothic; font-size: 14px; font-style: normal; font-weight: 400; line-height: 150%; /* 21px */ letter-spacing: 1.4px; } .c-search-box__button { display: grid; width: 100%; place-items: center; background: var(--MIKIblue, #005282); color: #fff; font-family: BIZ UDPGothic; font-size: 20px; font-style: normal; font-weight: 700; line-height: 150%; /* 30px */ letter-spacing: 2px; } } .c-textbox__body { border-radius: 5px; border: 1px solid #d9d9d9; background: #fff; padding-top: 8px; padding-bottom: 9px; padding-left: 9px; padding-right: 9px; width: 100%; font-family: BIZ UDPGothic; font-size: 14px; font-style: normal; font-weight: 400; line-height: 150%; /* 21px */ display: block; } .c-textbox__body::placeholder { color: #e2e2e2; font-family: BIZ UDPGothic; font-size: 14px; font-style: normal; font-weight: 400; line-height: 150%; /* 21px */ } textarea.c-textbox__body { min-height: 165px; } @media screen and (min-width: 1024px) { .c-modal { position: fixed; left: 0; top: 0; width: 100%; height: 100vh; transition: 0.25s; opacity: 0; pointer-events: none; z-index: 10000; } .c-modal.is-open { opacity: 1; pointer-events: all; } .c-modal__inner { text-align: left; } .c-modal__shade { background: rgba(17, 17, 17, 0.95); width: 100%; height: 100%; display: grid; grid-template-columns: 1fr; justify-items: center; align-items: center; text-align: center; padding-left: 20px; padding-right: 20px; padding-top: 20px; padding-bottom: 20px; overflow: auto; } .c-modal__close { display: inline-block; cursor: pointer; text-align: center; margin-top: 10px; transition: 0.25s; } .c-modal__close:hover { opacity: 0.5; } .c-modal__close-icon { width: 38px; height: 38px; display: inline-block; position: relative; vertical-align: middle; } .c-modal__close-icon::before, .c-modal__close-icon::after { content: ""; display: block; width: 15px; height: 1px; position: absolute; inset: 0; margin: auto; top: 11.5px; background-color: #fff; } .c-modal__close-icon::before { rotate: 45deg; } .c-modal__close-icon::after { rotate: 135deg; } } @media screen and (max-width: 1023px) { .c-modal { position: fixed; left: 0; top: 0; width: 100%; height: 100vh; transition: 0.25s; opacity: 0; pointer-events: none; z-index: 10000; } .c-modal.is-open { opacity: 1; pointer-events: all; } .c-modal__inner { text-align: left; } .c-modal__shade { background: rgba(17, 17, 17, 0.95); width: 100%; height: 100%; display: grid; padding-left: 10px; padding-right: 10px; grid-template-columns: auto; justify-content: center; align-items: center; text-align: center; padding-top: 20px; padding-bottom: 20px; overflow: auto; } .c-modal__close { display: inline-block; text-align: center; margin-top: 50px; } .c-modal__close-icon { width: 38px; height: 38px; display: inline-block; position: relative; vertical-align: middle; } .c-modal__close-icon::before, .c-modal__close-icon::after { content: ""; display: block; width: 15px; height: 1px; position: absolute; inset: 0; margin: auto; background-color: #fff; } .c-modal__close-icon::before { rotate: 45deg; } .c-modal__close-icon::after { rotate: 135deg; } } @media screen and (min-width: 1024px) { .c-path { padding-top: 8px; padding-left: 20px; padding-bottom: 8px; padding-right: 20px; } .c-path__list { display: flex; flex-wrap: wrap; gap: 1em; } .c-path__item { color: var(--333333, #333); font-family: Inter; font-size: 12px; font-style: normal; font-weight: 400; line-height: normal; } .c-path__item + .c-path__item::before { content: "／"; display: inline-block; margin-right: 1em; } .c-path__item-body { display: inline-block; } a.c-path__item-body { transition: 0.25s; } a.c-path__item-body:hover { opacity: 0.5; } } @media screen and (max-width: 1023px) { .c-path { padding-top: 8px; padding-left: 20px; padding-bottom: 8px; padding-right: 20px; } .c-path__item { color: var(--333333, #333); font-family: Inter; font-size: 12px; font-style: normal; font-weight: 400; line-height: normal; display: inline; } .c-path__item + .c-path__item::before { content: "／"; display: inline; margin-right: 1em; margin-left: 1em; } .c-path__item-body { display: inline-block; } } @media screen and (min-width: 1024px) { .c-pager { display: grid; grid-template-columns: 30px auto 30px; gap: 6px; justify-content: center; } .c-pager__items { display: flex; gap: 6px; } .c-pager__arrow { background: var(--707070, #707070); padding-top: 10px; padding-bottom: 10px; padding-left: 8px; padding-right: 8px; } a.c-pager__arrow { transition: 0.25s; } a.c-pager__arrow:hover { opacity: 0.5; } .c-pager-item { border: 1px solid var(--CCCCCC, #ccc); background-color: #fff; display: flex; width: 30px; height: 30px; flex-direction: column; justify-content: center; align-items: center; gap: 10px; padding-top: 4px; padding-bottom: 4px; } .c-pager-item--current { background-color: #f5f5f5; } .c-pager-item--blank { background-color: inherit; border: none; justify-content: end; color: var(--AAAAAA, #aaa); text-align: center; font-family: Montserrat; font-size: 24px; font-style: normal; font-weight: 400; line-height: 150%; /* 36px */ } a.c-pager-item { transition: 0.25s; } a.c-pager-item:hover { opacity: 0.5; } } @media screen and (max-width: 1023px) { .c-pager { display: grid; grid-template-columns: 40px auto 40px; gap: 11px; justify-content: center; } .c-pager__items { display: flex; gap: 11px; } .c-pager__arrow { background: var(--707070, #707070); padding-top: 15px; padding-bottom: 15px; padding-left: 13px; padding-right: 13px; } .c-pager-item { border: 1px solid var(--CCCCCC, #ccc); background-color: #fff; display: flex; width: 40px; height: 40px; flex-direction: column; justify-content: center; align-items: center; gap: 10px; padding-top: 4px; padding-bottom: 4px; color: var(--707070, #707070); text-align: center; font-family: Montserrat; font-size: 14px; font-style: normal; font-weight: 400; line-height: 150%; /* 21px */ } .c-pager-item--current { background-color: #f5f5f5; color: var(--AAAAAA, #aaa); } .c-pager-item--blank { background-color: inherit; border: none; justify-content: end; width: 30px; color: var(--AAAAAA, #aaa); text-align: center; font-family: Montserrat; font-size: 24px; font-style: normal; font-weight: 400; line-height: 150%; /* 36px */ } } @media screen and (min-width: 1024px) { .c-support-section { background-image: url(/assets/images/pc/common/support__bg@2x.jpg); background-repeat: no-repeat; background-size: cover; padding: 80px 20px; display: grid; grid-template-columns: minmax(0, 1200px); justify-content: center; } .c-support-section__header { display: grid; grid-template-columns: 160px auto; justify-content: center; align-items: center; gap: 48px; } .c-support-section__title { color: #fff; text-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25); font-family: BIZ UDPGothic; font-size: 36px; font-style: normal; font-weight: 700; line-height: 150%; /* 54px */ letter-spacing: 7.2px; } .c-support-section__title2 { display: inline-block; margin-top: 20px; } .c-support-section__title3 { display: inline-block; margin-top: 20px; } .c-support-section__title-strong1 { color: #fff; text-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25); font-family: BIZ UDPGothic; font-size: 48px; font-style: normal; font-weight: 700; line-height: 120%; /* 57.6px */ letter-spacing: 9.6px; position: relative; display: inline-block; z-index: 2; } .c-support-section__title-strong1::before { content: ""; position: absolute; left: 0; bottom: 0; width: 100%; height: 16px; background: #9bccee; z-index: -1; } .c-support-section__title-strong2 { color: #fff; text-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25); font-family: BIZ UDPGothic; font-size: 64px; font-style: normal; font-weight: 700; line-height: 120%; /* 76.8px */ letter-spacing: 12.8px; position: relative; display: inline-block; z-index: 2; } .c-support-section__title-strong2::before { content: ""; position: absolute; left: 0; bottom: 0; width: 100%; height: 16px; background: #9bccee; z-index: -1; } .c-support-section__body { padding: 64px 20px; display: grid; grid-template-columns: minmax(0, 672px); justify-content: center; background: rgba(255, 255, 255, 0.95); box-shadow: 0px 0px 8px 0px rgba(0, 0, 0, 0.16); margin-top: 20px; } .c-support-section__link { max-width: 372px; width: 100%; margin: auto; margin-top: 32px; display: grid; grid-template-columns: auto 16px; gap: 30px; justify-content: center; padding-top: 17px; padding-bottom: 17px; color: #fff; font-family: BIZ UDPGothic; font-size: 20px; font-style: normal; font-weight: 700; line-height: 150%; /* 30px */ letter-spacing: 2px; align-items: center; background: var(--CV, #fa5c03); box-shadow: 3px 3px 16px 0px rgba(0, 0, 0, 0.32); transition: 0.25s; } .c-support-section__link:hover { opacity: 0.5; } .c-support-section-list-item { display: flex; gap: 20px; padding-bottom: 18px; border-bottom: 2px dotted var(--aaaaaa, #aaa); } .c-support-section-list-item__icon { width: 33px; } .c-support-section-list-item__label { color: var(--333333, #333); font-family: BIZ UDPGothic; font-size: 32px; font-style: normal; font-weight: 700; line-height: 120%; /* 38.4px */ letter-spacing: 3.2px; display: inline-block; position: relative; z-index: 2; } .c-support-section-list-item__label::before { content: ""; display: block; width: 100%; position: absolute; left: 0; bottom: 0; height: 10px; background-color: #9bccee; z-index: -1; } .c-support-section__catch { max-width: 590px; margin: auto; margin-top: 32px; color: var(--333333, #333); text-align: center; font-family: BIZ UDPGothic; font-size: 24px; font-style: normal; font-weight: 700; line-height: 150%; /* 36px */ letter-spacing: 2.4px; position: relative; width: 100%; } .c-support-section__catch::before, .c-support-section__catch::after { content: ""; display: block; width: 23px; height: 100%; position: absolute; top: 0; border-top: 3px solid #005282; border-bottom: 3px solid #005282; } .c-support-section__catch::before { left: 0; border-left: 3px solid #005282; } .c-support-section__catch::after { right: 0; border-right: 3px solid #005282; } } @media screen and (max-width: 1023px) { .c-support-section { background-image: url(/assets/images/sp/common/support__bg@2x.jpg); background-repeat: no-repeat; background-size: cover; padding: 80px 20px; } .c-support-section__header-image { width: 160px; margin: auto; } .c-support-section__header { display: grid; } .c-support-section__title { color: #fff; text-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25); font-family: BIZ UDPGothic; font-size: 28px; font-style: normal; font-weight: 700; line-height: 150%; /* 42px */ letter-spacing: 5.6px; text-align: center; display: grid; gap: 15px; margin-top: 30px; } .c-support-section__title-strong1 { color: #fff; text-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25); font-family: BIZ UDPGothic; font-size: 40px; font-style: normal; font-weight: 700; line-height: 120%; /* 48px */ letter-spacing: 8px; position: relative; display: inline-block; z-index: 2; } .c-support-section__title-strong1::before { content: ""; position: absolute; left: 0; bottom: 0; width: 100%; height: 16px; background: #9bccee; z-index: -1; } .c-support-section__title-strong2 { color: #fff; text-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25); font-family: BIZ UDPGothic; font-size: 56px; font-style: normal; font-weight: 700; line-height: 120%; /* 67.2px */ letter-spacing: 11.2px; position: relative; display: inline-block; z-index: 2; } .c-support-section__title-strong2::before { content: ""; position: absolute; left: 0; bottom: 0; width: 100%; height: 16px; background: #9bccee; z-index: -1; } .c-support-section__body { padding: 30px 20px 50px; display: grid; justify-content: center; background: rgba(255, 255, 255, 0.95); box-shadow: 0px 0px 8px 0px rgba(0, 0, 0, 0.16); margin-top: 20px; } .c-support-section__link { margin-top: 32px; display: grid; grid-template-columns: auto 16px; gap: 10px; justify-content: center; padding-top: 17px; padding-bottom: 17px; color: #fff; font-family: BIZ UDPGothic; font-size: 18px; font-style: normal; font-weight: 700; line-height: 150%; /* 27px */ letter-spacing: 1.8px; align-items: center; background: var(--CV, #fa5c03); box-shadow: 3px 3px 16px 0px rgba(0, 0, 0, 0.32); margin-left: 10px; margin-right: 10px; } .c-support-section__link-arrow { width: 12px; } .c-support-section__list-item { padding-left: 10px; padding-right: 10px; } .c-support-section-list-item { display: flex; gap: 20px; padding-bottom: 18px; padding-top: 20px; border-bottom: 2px dotted var(--aaaaaa, #aaa); align-items: center; } .c-support-section-list-item__icon { width: 20px; flex-shrink: 0; flex-grow: 0; } .c-support-section-list-item__label { color: var(--333333, #333); font-family: BIZ UDPGothic; font-size: 20px; font-style: normal; font-weight: 700; line-height: 145%; /* 29px */ letter-spacing: 2px; position: relative; z-index: 2; } .c-support-section-list-item__label span { background: linear-gradient( transparent 0%, 65.51724138%, #9bccee 65.51724138%, #9bccee 100% ); } .c-support-section__catch { color: var(--333333, #333); text-align: center; font-family: BIZ UDPGothic; font-size: 18px; font-style: normal; font-weight: 700; line-height: 150%; /* 27px */ letter-spacing: 1.8px; position: relative; width: 100%; margin-top: 30px; padding-left: 34px; padding-right: 34px; } .c-support-section__catch::before, .c-support-section__catch::after { content: ""; display: block; width: 23px; height: 100%; position: absolute; top: 0; border-top: 3px solid #005282; border-bottom: 3px solid #005282; } .c-support-section__catch::before { left: 0; border-left: 3px solid #005282; } .c-support-section__catch::after { right: 0; border-right: 3px solid #005282; } } @media screen and (min-width: 1024px) { .c-room-add-button { border: 1px solid var(--707070, #707070); display: grid; justify-content: center; padding-top: 3px; padding-bottom: 4px; width: 100%; cursor: pointer; } } @media screen and (max-width: 1023px) { .c-room-add-button { border: 1px solid var(--707070, #707070); display: grid; justify-content: center; cursor: pointer; } } @media screen and (min-width: 1024px) { .c-room-request-button { display: grid; grid-template-columns: auto 10px; gap: 3px; justify-content: center; align-items: center; background: var(--CV, #fa5c03); padding-top: 8px; padding-bottom: 8px; width: 100%; cursor: pointer; transition: 0.25s; } .c-room-request-button:hover { opacity: 0.5; } .c-room-request-button__label { color: var(--FAFAFA, #fafafa); font-family: BIZ UDPGothic; font-size: 14px; font-style: normal; font-weight: 400; line-height: 100%; /* 14px */ letter-spacing: 1.4px; } } @media screen and (max-width: 1023px) { .c-room-request-button { display: grid; grid-template-columns: auto 10px; gap: 3px; justify-content: center; align-items: center; background: var(--CV, #fa5c03); padding-top: 8px; padding-bottom: 8px; width: 100%; cursor: pointer; transition: 0.25s; } .c-room-request-button:hover { opacity: 0.5; } .c-room-request-button__label { color: var(--FAFAFA, #fafafa); font-family: BIZ UDPGothic; font-size: 14px; font-style: normal; font-weight: 400; line-height: 100%; /* 14px */ letter-spacing: 1.4px; } } .c-fixed-cv { position: fixed; z-index: 1000; right: 0; top: 160px; width: 480px; translate: 480px 0px; transition: 0.25s; } .c-fixed-cv:hover { translate: 0px 0px; } .c-fixed-cv__tab { border-radius: 10px 0px 0px 10px; background: var(--CV, #fa5c03); position: absolute; left: -56px; color: #fff; text-align: center; writing-mode: vertical-rl; font-family: BIZ UDPGothic; font-size: 16px; font-style: normal; font-weight: 700; line-height: 110%; /* 17.6px */ box-shadow: -8px 8px 8px 0px rgba(0, 0, 0, 0.16); width: 56px; padding-left: 20px; padding-right: 20px; padding-top: 20px; padding-bottom: 20px; font-feature-settings: normal; letter-spacing: 2.6px; } .c-fixed-cv__body { box-shadow: -8px 8px 8px 0px rgba(0, 0, 0, 0.16); background: #fff; border-radius: 0px 0px 0px 10px; } .c-fixed-cv__feature { padding: 20px; } .c-fixed-sp-cv { position: fixed; bottom: 0; left: 0; width: 100%; height: 60px; z-index: 1000; } .c-fixed-cv-conversion { background: var(--333333, #333); border-radius: 0px 0px 0px 10px; padding: 10px; display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; } .c-fixed-cv-conversion-button { display: grid; grid-template-columns: auto 16px; gap: 10px; background: var(--CV, #fa5c03); justify-content: center; align-items: center; padding-top: 17px; padding-bottom: 17px; transition: 0.25s; } .c-fixed-cv-conversion-button__label { color: var(--FAFAFA, #fafafa); font-family: BIZ UDPGothic; font-size: 16px; font-style: normal; font-weight: 700; line-height: 150%; /* 24px */ letter-spacing: 1.6px; } .c-fixed-cv-conversion-button:hover { opacity: 0.5; } @media screen and (min-width: 1024px) { .c-fixed-cv-conversion { background: var(--333333, #333); border-radius: 0px 0px 0px 10px; padding: 10px; display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; } .c-fixed-cv-conversion-button { display: grid; grid-template-columns: auto 16px; gap: 10px; background: var(--CV, #fa5c03); justify-content: center; align-items: center; padding-top: 17px; padding-bottom: 17px; transition: 0.25s; } .c-fixed-cv-conversion-button__label { color: var(--FAFAFA, #fafafa); font-family: BIZ UDPGothic; font-size: 16px; font-style: normal; font-weight: 700; line-height: 150%; /* 24px */ letter-spacing: 1.6px; } .c-fixed-cv-conversion-button:hover { opacity: 0.5; } .c-fixed-cv-conversion-tel { text-align: center; } .c-fixed-cv-conversion-tel__title { color: #fff; font-family: BIZ UDPGothic; font-size: 10px; font-style: normal; font-weight: 400; line-height: 150%; /* 15px */ letter-spacing: 0.7px; } .c-fixed-cv-conversion-tel__block { display: grid; grid-template-columns: 30px auto; justify-content: center; align-items: center; gap: 10px; margin-top: 3px; } .c-fixed-cv-conversion-tel__no { color: #fff; font-family: Montserrat; font-size: 20px; font-style: normal; font-weight: 600; line-height: 100%; /* 20px */ letter-spacing: 1px; } .c-fixed-cv-conversion-tel__time { color: #fff; font-family: BIZ UDPGothic; font-size: 10px; font-style: normal; font-weight: 400; line-height: 150%; /* 15px */ letter-spacing: 0.7px; margin-top: 3px; } } @media screen and (max-width: 1023px) { .c-fixed-cv-conversion { background: var(--333333, #333); border-radius: 0px 0px 0px 10px; padding: 10px; display: grid; grid-template-columns: auto 184px; justify-content: center; gap: 10px; } .c-fixed-cv-conversion-button { display: grid; grid-template-columns: auto 16px; gap: 5px; background: var(--CV, #fa5c03); justify-content: center; align-items: center; padding-top: 13px; padding-bottom: 13px; } .c-fixed-cv-conversion-button__label { color: #fff; font-family: BIZ UDPGothic; font-size: 12px; font-style: normal; font-weight: 700; line-height: 130%; /* 15.6px */ letter-spacing: 1.2px; } .c-fixed-cv-conversion-tel { text-align: center; } .c-fixed-cv-conversion-tel__block { display: grid; grid-template-columns: 30px auto; justify-content: center; align-items: center; } .c-fixed-cv-conversion-tel__no { color: #fff; font-family: Montserrat; font-size: 20px; font-style: normal; font-weight: 600; line-height: 100%; /* 20px */ } .c-fixed-cv-conversion-tel__time { color: #fff; text-align: center; font-family: BIZ UDPGothic; font-size: 11px; font-style: normal; font-weight: 400; line-height: 150%; /* 16.5px */ letter-spacing: 0.77px; margin-top: 5px; } } @media screen and (min-width: 1024px) { .c-fixed-request { position: fixed; width: 100%; left: 0; bottom: 0; background: #9bccee; display: grid; grid-template-columns: repeat(2, minmax(0, 550px)); gap: 20px; justify-content: center; padding-top: 20px; padding-bottom: 20px; z-index: 1000; padding-left: 20px; padding-right: 20px; opacity: 0; pointer-events: none; transition: 0.25s; } .c-fixed-request.active { opacity: 1; pointer-events: all; } .c-fixed-request-count { display: flex; gap: 10px; color: #000; font-family: BIZ UDPGothic; font-size: 24px; font-style: normal; font-weight: 700; line-height: 150%; /* 36px */ letter-spacing: 2.4px; padding-top: 10px; padding-bottom: 10px; justify-content: flex-end; text-align: right; align-items: end; height: 100%; } .c-fixed-request-count__count { color: var(--MIKIblue, #005282); font-family: Montserrat; font-size: 64px; font-style: normal; font-weight: 600; line-height: 90%; /* 57.6px */ } .c-fixed-request-search-button { display: flex; gap: 30px; width: 100%; justify-content: center; align-items: center; background: var(--CV, #fa5c03); box-shadow: 3px 3px 16px 0px rgba(0, 0, 0, 0.32); height: 100%; cursor: pointer; transition: 0.25s; } .c-fixed-request-search-button__label { color: var(--FAFAFA, #fafafa); font-family: BIZ UDPGothic; font-size: 24px; font-style: normal; font-weight: 700; line-height: 150%; /* 36px */ letter-spacing: 4.8px; } .c-fixed-request-search-button__icon { width: 12px; } .c-fixed-request-search-button:hover { opacity: 0.5; } } @media screen and (max-width: 1023px) { .c-fixed-request { position: fixed; width: 100%; left: 0; bottom: 60px; background: #9bccee; display: grid; grid-template-columns: auto 184px; gap: 10px; padding: 10px; z-index: 1000; opacity: 0; pointer-events: none; transition: 0.25s; } .c-fixed-request.active { opacity: 1; pointer-events: all; } .c-fixed-request-count { display: flex; color: #000; font-family: BIZ UDPGothic; font-size: 14px; font-style: normal; font-weight: 700; line-height: 150%; /* 21px */ letter-spacing: 1.4px; padding-top: 10px; padding-bottom: 10px; justify-content: center; align-items: end; height: 100%; } .c-fixed-request-count__count { color: var(--MIKIblue, #005282); font-family: Montserrat; font-size: 32px; font-style: normal; font-weight: 600; line-height: 90%; /* 28.8px */ margin-left: 5px; margin-right: 2px; display: inline-block; } .c-fixed-request-search-button { display: grid; grid-template-columns: auto 16px; gap: 5px; width: 100%; background: var(--CV, #fa5c03); box-shadow: 3px 3px 16px 0px rgba(0, 0, 0, 0.32); justify-content: center; align-items: center; padding-top: 13px; padding-bottom: 13px; } .c-fixed-request-search-button__label { color: #fff; font-family: BIZ UDPGothic; font-size: 12px; font-style: normal; font-weight: 700; line-height: 130%; /* 15.6px */ letter-spacing: 1.2px; } } .contents--child { background: var(--FAFAFA, #fafafa); } @media screen and (min-width: 1024px) { .top { background: #f5f5f5; } .top__fv { max-width: 1224px; margin: auto; padding-left: 20px; padding-right: 20px; } } @media screen and (max-width: 1023px) { .top { background: #f5f5f5; } } @media screen and (min-width: 1024px) { .section-title { color: var(--1A1A1A, #1a1a1a); font-family: Montserrat; font-size: 48px; font-style: normal; font-weight: 600; line-height: 150%; /* 72px */ letter-spacing: 15.36px; text-align: center; } .section-title::after { content: ""; display: block; margin-top: 10px; margin-inline: auto; width: 80px; height: 3px; background: var(--MIKIblue, #005282); } .section-title--tool::after { background: var(--logo-Lightblue, #9bccee); } .section-title-lv2 { color: var(--1A1A1A, #1a1a1a); font-family: BIZ UDPGothic; font-size: 36px; font-style: normal; font-weight: 700; line-height: 150%; /* 54px */ letter-spacing: 7.2px; text-align: center; } .section-title-lv2__small { font-size: 24px; line-height: 150%; letter-spacing: 4.8px; } } @media screen and (max-width: 1023px) { .section-title { color: var(--1A1A1A, #1a1a1a); font-family: Montserrat; font-size: 36px; font-style: normal; font-weight: 600; line-height: 150%; /* 54px */ letter-spacing: 9.72px; text-align: center; } .section-title::after { content: ""; display: block; margin-top: 10px; margin-inline: auto; width: 80px; height: 3px; background: var(--MIKIblue, #005282); } .section-title--tool::after { background: var(--logo-Lightblue, #9bccee); } .section-title-lv2 { color: var(--1A1A1A, #1a1a1a); font-family: BIZ UDPGothic; font-size: 30px; font-style: normal; font-weight: 700; line-height: 150%; /* 45px */ letter-spacing: 6px; text-align: center; } .section-title-lv2__small { font-size: 20px; line-height: 150%; letter-spacing: 4px; } } @media screen and (min-width: 1024px) { .fv { display: grid; grid-template-columns: 560px 1fr; gap: 5.4054054054%; padding-top: 64px; padding-bottom: 68px; } .fv__feature { margin-top: 20px; } .fv__text-search-box { margin-top: 20px; } .fv__continue-search { margin-top: 20px; } /*.fv__category-search { margin-top: 20px; }*/ .fv__keyword-search { margin-top: 48px; } .kv { position: relative; } .kv__title-container { background-color: #000; } .kv__title { position: absolute; left: 20px; top: 10px; color: #fff; font-family: BIZ UDPGothic; font-size: 20px; font-style: normal; font-weight: 700; line-height: 150%; /* 30px */ display: inline; } .kv__title-bg { display: inline-block; background-color: #000; padding-top: 3px; padding-bottom: 3px; padding-left: 3px; padding-right: 3px; margin-top: 10px; } .kv__title1 { font-size: 48px; font-weight: 700; line-height: 100%; /* 48px */ letter-spacing: 4.8px; background: linear-gradient( to bottom, transparent 0%, transparent 80%, #9bccee 80%, #9bccee 100% ); } .kv__title2 { font-size: 32px; font-weight: 700; line-height: 100%; letter-spacing: 3.2px; } .kv__sup { font-size: 10px; font-weight: 700; line-height: 120%; /* 12px */ letter-spacing: 1px; vertical-align: 22px; } .kv__note { color: var(--1A1A1A, #1a1a1a); font-family: BIZ UDPGothic; font-size: 10px; font-style: normal; font-weight: 700; line-height: 150%; /* 15px */ position: absolute; right: 6px; bottom: 5px; } .kv--cv .kv__title { font-size: 16px; line-height: 100%; letter-spacing: 1px; } .kv--cv .kv__title1 { font-size: 46px; line-height: 100%; /* 46px */ letter-spacing: 4.6px; } .kv--cv .kv__title2 { font-size: 28px; line-height: 100%; letter-spacing: 2.8px; } .kv--cv .kv__sup { font-size: 10px; font-weight: 700; line-height: 120%; /* 12px */ letter-spacing: 1px; vertical-align: 18px; } .fv-feature { display: grid; gap: 20px; } .fv-feature--cv { gap: 10px; } .fv-feature-item { display: grid; gap: 9px; grid-template-columns: 21px 1fr; padding-bottom: 19px; border-bottom: 1px dotted var(--MIKIblue, #005282); } .fv-feature-item__icon { margin-top: 14px; } .fv-feature-item__text { color: var(--1A1A1A, #1a1a1a); font-family: BIZ UDPGothic; font-size: 20px; font-style: normal; font-weight: 700; line-height: 120%; /* 24px */ letter-spacing: 2px; } .fv-feature-item__text1 { color: var(--MIKIblue, #005282); } .fv-feature-item__text2 { color: var(--MIKIblue, #005282); font-size: 32px; line-height: 120%; } .fv-feature-item--cv { align-items: center; padding-bottom: 9px; } .fv-feature-item--cv .fv-feature-item__icon { margin-top: 4px; } .fv-feature-item--cv .fv-feature-item__text { font-size: 16px; font-weight: 700; letter-spacing: 1.6px; } .fv-feature-item--cv .fv-feature-item__text2 { font-size: 24px; } .fv-continue-search { background: #fff; box-shadow: 3px 3px 8px 0px rgba(0, 0, 0, 0.16); padding: 20px; display: grid; grid-template-columns: 1fr 32px; gap: 20px; align-items: center; } .fv-continue-search__title { padding-bottom: 8px; border-bottom: 1px solid var(--MIKIblue, #005282); display: grid; grid-template-columns: 20px 1fr; gap: 10px; align-items: center; } .fv-continue-search__title-label { color: var(--MIKIblue, #005282); font-family: BIZ UDPGothic; font-size: 16px; font-style: normal; font-weight: 700; line-height: 100%; /* 16px */ letter-spacing: 1.6px; } .fv-continue-search__list { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 10px; } .fv-continue-search__tag { display: block; border: 1px solid var(--707070, #707070); padding-top: 2px; padding-bottom: 2px; padding-left: 15px; padding-right: 15px; color: var(--707070, #707070); font-family: BIZ UDPGothic; font-size: 12px; font-style: normal; font-weight: 400; line-height: 150%; /* 18px */ letter-spacing: 1.2px; } .fv-continue-search__arrow { transition: 0.25s; } .fv-continue-search__arrow:hover { opacity: 0.5; } .fv-text-search-box { box-shadow: 3px 3px 8px 0px rgba(0, 0, 0, 0.16); display: grid; grid-template-columns: 1fr 88px; } .fv-text-search-box__body { background: #fff; padding: 8px 0px 8px 20px; } .fv-text-search-box__body::placeholder { color: #bbb; font-family: BIZ UDPGothic; font-size: 16px; font-style: normal; font-weight: 400; line-height: 150%; /* 24px */ letter-spacing: 1.6px; } .fv-text-search-box__button { padding-top: 8px; padding-bottom: 8px; display: block; color: #fff; font-family: BIZ UDPGothic; font-size: 16px; font-style: normal; font-weight: 700; line-height: 150%; /* 24px */ letter-spacing: 1.6px; background: var(--MIKIblue, #005282); text-align: center; cursor: pointer; transition: 0.25s; } .fv-text-search-box__button:hover { opacity: 0.5; } .fv-category-search { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; margin-top: 10px; } .fv-category-search-item { display: grid; grid-template-columns: auto 12px; justify-content: center; align-items: center; gap: 4px; background: #fff; box-shadow: 3px 3px 8px 0px rgba(0, 0, 0, 0.16); height: 100%; position: relative; padding-top: 124px; padding-bottom: 32px; transition: 0.25s; } .fv-category-search-item__image { position: absolute; left: 0; right: 0; margin: auto; } .fv-category-search-item__image--area { width: 80px; top: 40px; } .fv-category-search-item__image--map { width: 54px; top: 50px; } .fv-category-search-item__image--station { width: 40px; top: 50px; } .fv-category-search-item__text { color: var(--MIKIblue, #005282); font-family: BIZ UDPGothic; font-size: 16px; font-style: normal; font-weight: 700; line-height: 150%; /* 24px */ letter-spacing: 1.28px; } .fv-category-search-item:hover { opacity: 0.5; } .fv-keyword-search__title { color: var(--MIKIblue, #005282); font-family: BIZ UDPGothic; font-size: 20px; font-style: normal; font-weight: 700; line-height: 100%; /* 20px */ letter-spacing: 2px; padding-bottom: 9px; border-bottom: 1px solid var(--MIKIblue, #005282); } .fv-keyword-search__list { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px 16px; margin-top: 10px; } .fv-keyword-search__link { display: flex; flex-direction: column; background: #fff; box-shadow: 3px 3px 8px 0px rgba(0, 0, 0, 0.16); color: var(--MIKIblue, #005282); font-family: BIZ UDPGothic; font-size: 14px; font-style: normal; font-weight: 400; /*line-height: 150%;*/ /* 21px */ letter-spacing: 1.4px; text-align: center; transition: 0.25s; line-height: 118%; justify-content: center; align-items: center; height: 54px; } .fv-keyword-search__link.new-line { padding-top: 8px; padding-bottom: 7px; line-height: 118%; } .fv-keyword-search__link > span { display: block; } .fv-keyword-search__link:hover { opacity: 0.5; } } @media screen and (min-width: 1023px) and (max-width: 1200px) { .fv { grid-template-columns: 1fr 496px; gap: 32px; } } @media screen and (max-width: 1053px) { .kv__title2 { font-size: 28px; } } @media screen and (max-width: 1023px) { .fv { display: grid; padding-bottom: 40px; } .fv__feature { margin-top: 20px; padding-left: 20px; padding-right: 20px; } .fv__continue-search { margin-top: 20px; padding-left: 20px; padding-right: 20px; } .fv__text-search-box { margin-top: 20px; padding-left: 20px; padding-right: 20px; } .fv__category-search { margin-top: 20px; padding-left: 20px; padding-right: 20px; } .fv__keyword-search { margin-top: 48px; padding-left: 20px; padding-right: 20px; } .kv { position: relative; } .kv__title-container { background-color: #000; } .kv__title { position: absolute; left: 5.3333333333vw; top: 5.3333333333vw; color: #fff; font-family: BIZ UDPGothic; font-size: 5.3333333333vw; font-style: normal; font-weight: 700; line-height: 150%; /* 30px */ display: inline; } .kv__title-bg { display: inline-block; background-color: #000; padding: 0.8vw; margin-top: 2.6666666667vw; } .kv__title-bg:nth-of-type(4) { margin-top: 0; } .kv__title-bg:nth-of-type(6) { margin-top: 0; } .kv__title1 { font-size: 10.6666666667vw; font-weight: 700; line-height: 100%; /* 40px */ letter-spacing: 1.0666666667vw; background: linear-gradient( to bottom, transparent 0%, transparent 80%, #9bccee 80%, #9bccee 100% ); } .kv__title2 { /*font-size: 8vw;*/ font-size: 5.5vw; font-weight: 700; line-height: 100%; letter-spacing: 0.8vw; } .kv__sup { font-size: 10px; font-weight: 700; line-height: 120%; /* 12px */ letter-spacing: 1px; vertical-align: 5.8666666667vw; } .kv__note { color: var(--1A1A1A, #1a1a1a); font-family: BIZ UDPGothic; font-size: 10px; font-style: normal; font-weight: 700; line-height: 150%; /* 15px */ position: absolute; right: 8px; bottom: 5px; text-align: right; } .fv-feature { display: grid; gap: 10px; } .fv-feature-item { display: grid; gap: 9px; grid-template-columns: 21px 1fr; align-items: center; padding-bottom: 9px; border-bottom: 1px dotted var(--MIKIblue, #005282); } .fv-feature-item__text { color: var(--1A1A1A, #1a1a1a); font-family: BIZ UDPGothic; font-size: 16px; font-style: normal; font-weight: 700; line-height: 120%; /* 19.2px */ letter-spacing: 1.6px; } .fv-feature-item__text1 { color: var(--MIKIblue, #005282); } .fv-feature-item__text2 { color: var(--MIKIblue, #005282); font-size: 28px; line-height: 120%; } .fv-continue-search { background: #fff; box-shadow: 3px 3px 8px 0px rgba(0, 0, 0, 0.16); padding: 20px; position: relative; } .fv-continue-search__title { padding-bottom: 8px; border-bottom: 1px solid var(--MIKIblue, #005282); display: grid; grid-template-columns: 17px 1fr; gap: 10px; align-items: center; } .fv-continue-search__title-label { color: var(--MIKIblue, #005282); font-family: BIZ UDPGothic; font-size: 16px; font-style: normal; font-weight: 700; line-height: 100%; /* 16px */ letter-spacing: 1.6px; } .fv-continue-search__list { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 10px; } .fv-continue-search__item { flex-grow: 1; } .fv-continue-search__item:last-child { margin-right: 40px; } .fv-continue-search__tag { display: block; border: 1px solid var(--707070, #707070); padding-top: 5px; padding-bottom: 5px; padding-left: 10px; padding-right: 10px; text-align: center; color: var(--707070, #707070); font-family: BIZ UDPGothic; font-size: 12px; font-style: normal; font-weight: 400; line-height: 150%; /* 18px */ letter-spacing: 1.2px; } .fv-continue-search__arrow { position: absolute; width: 30px; right: 20px; bottom: 20px; } .fv-text-search-box { box-shadow: 3px 3px 8px 0px rgba(0, 0, 0, 0.16); display: grid; grid-template-columns: 1fr 88px; } .fv-text-search-box__body { background: #fff; padding: 12px 0px 12px 20px; } .fv-text-search-box__body::placeholder { color: #bbb; font-family: BIZ UDPGothic; font-size: 14px; font-style: normal; font-weight: 400; line-height: 150%; /* 21px */ letter-spacing: 1.4px; } .fv-text-search-box__button { padding-top: 12px; padding-bottom: 12px; display: block; color: #fff; font-family: BIZ UDPGothic; font-size: 16px; font-style: normal; font-weight: 700; line-height: 150%; /* 24px */ letter-spacing: 1.6px; background: var(--MIKIblue, #005282); text-align: center; cursor: pointer; } .fv-category-search { display: grid; gap: 15px; margin-top: 15px; } .fv-category-search-item { display: grid; grid-template-columns: 48px 1fr 16px; justify-content: space-between; align-items: center; gap: 10px; background: #fff; box-shadow: 3px 3px 8px 0px rgba(0, 0, 0, 0.16); position: relative; padding-top: 10px; padding-bottom: 10px; padding-right: 20px; } .fv-category-search-item__image { margin-left: auto; } .fv-category-search-item__image--area { width: 31px; } .fv-category-search-item__image--map { width: 28px; } .fv-category-search-item__image--station { width: 20px; margin-right: 4px; } .fv-category-search-item__text { color: var(--MIKIblue, #005282); font-family: BIZ UDPGothic; font-size: 16px; font-style: normal; font-weight: 700; line-height: 150%; /* 24px */ letter-spacing: 1.28px; } .fv-keyword-search__title { color: var(--MIKIblue, #005282); font-family: BIZ UDPGothic; font-size: 20px; font-style: normal; font-weight: 700; line-height: 100%; /* 20px */ letter-spacing: 2px; padding-bottom: 9px; border-bottom: 1px solid var(--MIKIblue, #005282); } .fv-keyword-search__list { display: grid; grid-template-columns: repeat(3, 1fr); gap: 15px; margin-top: 15px; } .fv-keyword-search__link { display: grid; place-content: center; background: #fff; box-shadow: 3px 3px 8px 0px rgba(0, 0, 0, 0.16); color: var(--MIKIblue, #005282); font-family: BIZ UDPGothic; font-size: 13px; font-style: normal; font-weight: 400; line-height: 150%; /* 21px */ letter-spacing: 1.4px; text-align: center; padding-top: 10px; padding-bottom: 10px; height: 100%; min-height: 62px; } } @media screen and (min-width: 1024px) { .category-section { background: var(--1-a-1-a-1-a, #1a1a1a); padding-block-start: 40px; padding-block-end: 80px; padding-inline: 20px; display: grid; grid-template-columns: minmax(0, 1200px); justify-content: center; } .category-section__list { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; } .category-section-item { display: block; position: relative; } .category-section-item__label-block { position: absolute; bottom: 0; left: 0; width: 100%; padding-block: 22px; background: rgba(26, 26, 26, 0.64); display: flex; justify-content: center; align-items: center; gap: 20px; } .category-section-item__label { color: #f5f5f5; font-family: BIZ UDPGothic; font-size: 24px; font-style: normal; font-weight: 400; line-height: 150%; /* 36px */ letter-spacing: 2.4px; } .category-section-item__label-arrow { width: 16px; } } @media screen and (min-width: 1024px) { .feature-section { padding-top: 128px; padding-bottom: 128px; padding-inline: 20px; display: grid; grid-template-columns: minmax(0, 1200px); justify-content: center; background: var(--logo-Lightblue, #9bccee); } .feature-section.newarrival-section { background: #c3e3fa; } .feature-section__title-lv2 { margin-top: 64px; } .feature-section__carousel { margin-top: 32px; } .feature-section__link { width: 288px; margin: auto; margin-top: 64px; padding-top: 20px; padding-bottom: 20px; background: var(--MIKIblue, #005282); box-shadow: 3px 3px 16px 0px rgba(0, 0, 0, 0.32); display: flex; justify-content: center; align-items: center; gap: 30px; transition: 0.25s; } .feature-section__link:hover { opacity: 0.5; } .feature-section__link-label { color: #fff; font-family: BIZ UDPGothic; font-size: 16px; font-style: normal; font-weight: 700; line-height: 150%; /* 24px */ letter-spacing: 1.6px; } .feature-section__link-arrow { width: 16px; } .case-carousel__body, .feature-carousel__body, .case__logo-carousel__body { display: flex; } .case-carousel__controls, .feature-carousel__controls, .case__logo-carousel__controls { display: grid; grid-template-columns: repeat(2, 80px); justify-content: center; gap: 10px; margin-top: 32px; } .case-carousel__item, .feature-carousel__item, .newarrival-carousel__item, .case__logo-carousel__item { height: auto; } .case-carousel__arrow, .feature-carousel__arrow, .case__logo-carousel__arrow { background: #fff; box-shadow: 3px 3px 8px 0px rgba(0, 0, 0, 0.16); padding-top: 10px; padding-bottom: 10px; background: var(--707070, #707070); display: block; cursor: pointer; transition: 0.25s; } .case-carousel__arrow.swiper-button-disabled, .feature-carousel__arrow.swiper-button-disabled, .case__logo-carousel__arrow.swiper-button-disabled { opacity: 0.5; cursor: initial; } .case-carousel__arrow:hover, .feature-carousel__arrow:hover, .case__logo-carousel__arrow:hover { opacity: 0.5; } .case-carousel__arrow-icon, .feature-carousel__arrow-icon, .case__logo-carousel__arrow-icon { width: 16px; margin: auto; } .feature-link { display: block; box-shadow: 3px 3px 8px 0px rgba(0, 0, 0, 0.16); background: #fff; height: 100%; transition: 0.25s; } .feature-link:hover { opacity: 0.5; } .feature-link__body { padding: 20px 20px 30px 20px; } .feature-link__title { color: #000; font-family: BIZ UDPGothic; font-size: 16px; font-style: normal; font-weight: 700; line-height: 150%; /* 24px */ letter-spacing: 1.6px; } .feature-link__address, .feature-link__access, .feature-link__date { color: #000; font-family: BIZ UDPGothic; font-size: 14px; font-style: normal; font-weight: 400; line-height: 150%; /* 21px */ letter-spacing: 1.4px; margin-top: 8px; border-bottom: 1px solid var(--cccccc, #ccc); } } @media screen and (max-width: 1023px) { .feature-section { padding-top: 70px; padding-bottom: 70px; background: var(--logo-Lightblue, #9bccee); } .feature-section.newarrival-section { background: #c3e3fa; } .feature-section__title-lv2 { margin-top: 60px; } .feature-section__carousel { margin-top: 60px; } .feature-section__link { margin-left: 20px; margin-right: 20px; margin-top: 60px; padding-top: 20px; padding-bottom: 20px; background: var(--MIKIblue, #005282); box-shadow: 3px 3px 16px 0px rgba(0, 0, 0, 0.32); display: grid; grid-template-columns: auto 16px; justify-content: center; align-items: center; gap: 20px; } .feature-section__link-label { color: #fff; font-family: BIZ UDPGothic; font-size: 16px; font-style: normal; font-weight: 700; line-height: 150%; /* 24px */ letter-spacing: 1.6px; } .feature-section__link-arrow { width: 16px; } .feature-carousel__body { display: flex; } .case-carousel__logo__controls, .case-carousel__controls, .feature-carousel__controls { display: grid; margin-left: 47.5px; margin-right: 47.5px; grid-template-columns: repeat(2, 1fr); justify-content: center; gap: 10px; margin-top: 32px; } .case__logo-carousel__arrow, .case-carousel__arrow, .feature-carousel__arrow { padding-top: 17.5px; padding-bottom: 17.5px; background: var(--707070, #707070); box-shadow: 3px 3px 8px 0px rgba(0, 0, 0, 0.16); display: block; transition: 0.25s; } .case__logo-carousel__arrow.swiper-button-disabled, .case-carousel__arrow.swiper-button-disabled, .feature-carousel__arrow.swiper-button-disabled { opacity: 0.5; cursor: initial; } .case__logo-carousel__arrow-icon, .case-carousel__arrow-icon, .feature-carousel__arrow-icon { width: 16px; margin: auto; } .feature-link { display: block; box-shadow: 3px 3px 8px 0px rgba(0, 0, 0, 0.16); background: #fff; transition: 0.25s; } .feature-link:hover { opacity: 0.5; } .feature-link__body { padding: 20px 20px 30px 20px; } .feature-link__title { color: #000; font-family: BIZ UDPGothic; font-size: 16px; font-style: normal; font-weight: 700; line-height: 150%; /* 24px */ letter-spacing: 1.6px; } .feature-link__address, .feature-link__access, .feature-link__date { color: #000; font-family: BIZ UDPGothic; font-size: 14px; font-style: normal; font-weight: 400; line-height: 150%; /* 21px */ letter-spacing: 1.4px; margin-top: 8px; border-bottom: 1px solid var(--cccccc, #ccc); } } @media screen and (min-width: 1024px) { .case-section { background: var(--logo-Lightblue, #9bccee); padding: 128px 20px; display: grid; grid-template-columns: minmax(0, 1065px); justify-content: center; } .case-section__section { margin-top: 64px; } .case-section__example { margin-top: 32px; } .case-section__company-list { display: grid; grid-template-columns: repeat(6, minmax(0px, 160px)); gap: 16px; justify-content: center; margin-top: 64px; } .case-section__link { display: flex; justify-content: center; align-items: center; gap: 30px; background: var(--333333, #333); box-shadow: 3px 3px 16px 0px rgba(0, 0, 0, 0.32); padding-top: 20px; padding-bottom: 19px; width: 288px; margin: auto; margin-top: 64px; transition: 0.25s; } .case-section__link:hover { opacity: 0.5; } .case-section__link-label { color: var(--fafafa, #fafafa); font-family: BIZ UDPGothic; font-size: 16px; font-style: normal; font-weight: 700; line-height: 150%; /* 24px */ letter-spacing: 1.6px; } .case-section__link-arrow { width: 16px; } .case-example { display: grid; grid-template-columns: repeat(3, 1fr); gap: 30px; } .case-example__item { max-width: 335px; } .case-example.Carousel { display: flex; gap: 0; } .case-example-card { display: block; transition: 0.25s; } .case-example-card:hover { opacity: 0.5; } .case-example-card__body { margin-top: -16px; margin-left: 15px; margin-right: 15px; padding: 20px; background: var(--fafafa, #fafafa); position: relative; text-align: right; } .case-example-card__title { color: var(--707070, #707070); font-family: BIZ UDPGothic; font-size: 16px; font-style: normal; font-weight: 700; line-height: 150%; /* 24px */ letter-spacing: 1.6px; text-align: left; } .case-example-card__text { color: var(--333333, #333); font-family: BIZ UDPGothic; font-size: 14px; font-style: normal; font-weight: 400; line-height: 150%; /* 21px */ letter-spacing: 1.4px; margin-top: 8px; text-align: left; } .case-example-card__arrow { display: inline-flex; gap: 10px; padding-bottom: 2px; border-bottom: 1px solid var(--aaaaaa, #aaa); margin-top: 20px; } .case-example-card__arrow-label { color: var(--333333, #333); font-family: BIZ UDPGothic; font-size: 12px; font-style: normal; font-weight: 400; line-height: 150%; /* 18px */ letter-spacing: 1.2px; } .case-example-card__arrow-icon { width: 16px; margin-top: 3px; } } @media screen and (max-width: 1023px) { .case-section { background: var(--logo-Lightblue, #9bccee); padding: 70px 20px; } .case-section.Carousel { padding: 70px 0; } .case-section__section { margin-top: 60px; } .case-section__example { margin-top: 32px; } .case-section__company-list { display: grid; grid-template-columns: repeat(2, 1fr); gap: 15px; justify-content: center; margin-top: 60px; } .case-section__link { display: grid; grid-template-columns: auto 16px; justify-content: center; align-items: center; gap: 20px; background: var(--333333, #333); box-shadow: 3px 3px 16px 0px rgba(0, 0, 0, 0.32); padding-top: 20px; padding-bottom: 20px; margin-top: 60px; } .case-section__link-label { color: var(--FAFAFA, #fafafa); font-family: BIZ UDPGothic; font-size: 16px; font-style: normal; font-weight: 700; line-height: 150%; /* 24px */ letter-spacing: 1.6px; } .case-example { display: grid; gap: 30px; } .case-example.Carousel { display: flex; gap: 0; } .case-example-card { display: block; } .case-example-card__body { margin-top: -16px; margin-left: 15px; margin-right: 15px; padding: 20px; background: var(--fafafa, #fafafa); position: relative; text-align: right; } .case-example-card__title { color: var(--707070, #707070); font-family: BIZ UDPGothic; font-size: 16px; font-style: normal; font-weight: 700; line-height: 150%; /* 24px */ letter-spacing: 1.6px; text-align: left; } .case-example-card__text { color: var(--333333, #333); font-family: BIZ UDPGothic; font-size: 14px; font-style: normal; font-weight: 400; line-height: 150%; /* 21px */ letter-spacing: 1.4px; margin-top: 8px; text-align: left; } .case-example-card__arrow { display: inline-flex; gap: 10px; padding-bottom: 2px; border-bottom: 1px solid var(--aaaaaa, #aaa); margin-top: 20px; } .case-example-card__arrow-label { color: var(--333333, #333); font-family: BIZ UDPGothic; font-size: 12px; font-style: normal; font-weight: 400; line-height: 150%; /* 18px */ letter-spacing: 1.2px; } .case-example-card__arrow-icon { width: 16px; margin-top: 3px; } } @media screen and (min-width: 1024px) { .top-tool-section { background: #fff; padding: 128px 20px; display: grid; grid-template-columns: minmax(0, 1200px); justify-content: center; } .top-tool-section__section { margin-top: 64px; } .top-tool-section__list { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; margin-top: 32px; } .top-tool-section-card { display: block; padding: 32px 20px 84px 20px; height: 100%; background: #fff; box-shadow: 3px 3px 8px 0px rgba(0, 0, 0, 0.16); position: relative; transition: 0.25s; } .top-tool-section-card:hover { opacity: 0.5; } .top-tool-section-card__icon { width: 80px; margin: auto; } .top-tool-section-card__title { margin-top: 32px; color: var(--333333, #333); text-align: center; font-family: BIZ UDPGothic; font-style: normal; font-size: 24px; font-weight: 700; line-height: 125%; letter-spacing: 2.7px; } .top-tool-section-card__title-sub { display: block; font-size: 18px; } .top-tool-section-card__text { color: var(--333333, #333); text-align: justify; font-family: BIZ UDPGothic; font-size: 16px; font-style: normal; font-weight: 400; line-height: 180%; /* 28.8px */ letter-spacing: 1.6px; margin-top: 20px; } .top-tool-section-card__arrow { position: absolute; right: 20px; bottom: 20px; width: 32px; } } @media screen and (max-width: 1023px) { .top-tool-section { background: #fff; padding: 70px 20px; } .top-tool-section__section { margin-top: 60px; } .top-tool-section__list { display: grid; gap: 30px; margin-top: 32px; } .top-tool-section-card { display: block; padding: 20px; padding-bottom: 84px; background: #fff; box-shadow: 3px 3px 8px 0px rgba(0, 0, 0, 0.16); position: relative; } .top-tool-section-card__icon { width: 80px; margin: auto; } .top-tool-section-card__title { margin-top: 32px; color: var(--333333, #333); text-align: center; font-family: BIZ UDPGothic; font-style: normal; font-size: 24px; font-weight: 700; line-height: 125%; letter-spacing: 2.7px; } .top-tool-section-card__title-sub { display: block; font-size: 18px; } .top-tool-section-card__text { color: var(--333333, #333); text-align: justify; font-family: BIZ UDPGothic; font-size: 16px; font-style: normal; font-weight: 400; line-height: 180%; /* 28.8px */ letter-spacing: 1.6px; margin-top: 20px; } .top-tool-section-card__arrow { position: absolute; right: 20px; bottom: 20px; width: 32px; } } @media screen and (min-width: 1024px) { .flow-section { background: var(--f5f5f5, #f5f5f5); padding: 128px 20px; display: grid; grid-template-columns: minmax(0, 1200px); justify-content: center; } .flow-section__section { margin-top: 64px; } .flow-graph__title { position: relative; margin-right: 32px; padding-left: 32px; height: 64px; background: linear-gradient(93deg, transparent 0%, #1a1a1a 100%); color: var(--fafafa, #fafafa); font-family: BIZ UDPGothic; font-size: 24px; font-style: normal; font-weight: 700; line-height: 150%; /* 36px */ letter-spacing: 4.8px; text-align: center; display: grid; place-content: center; margin-top: 32px; } .flow-graph__title::after { content: ""; display: block; width: 32px; position: absolute; right: -32px; top: 0; height: 100%; border-left: #1a1a1a solid 32px; border-top: transparent solid 32px; border-bottom: transparent solid 32px; } .flow-graph__list { display: grid; grid-template-columns: repeat(5, 1fr); gap: 40px; margin-top: 20px; } .flow-graph__item + .flow-graph__item { position: relative; } .flow-graph__item + .flow-graph__item::before { content: ""; display: block; position: absolute; border-left: #333333 solid 15px; border-top: transparent solid 14px; border-bottom: transparent solid 14px; left: -25px; height: 28px; top: 0; bottom: 0; margin: auto; } .flow-graph__check { color: var(--1A1A1A, #1a1a1a); font-family: BIZ UDPGothic; font-size: 14px; font-style: normal; font-weight: 700; line-height: 150%; /* 21px */ letter-spacing: 1.4px; margin-top: 64px; text-align: center; } .flow-graph__link { display: flex; gap: 20px; justify-content: center; align-items: center; border: 1px solid var(--aaaaaa, #aaa); background: var(--333333, #333); box-shadow: 3px 3px 16px 0px rgba(0, 0, 0, 0.32); width: 352px; margin: auto; margin-top: 16px; padding-top: 16px; padding-bottom: 16px; transition: 0.25s; } .flow-graph__link:hover { opacity: 0.5; } .flow-graph__link-icon { width: 32px; } .flow-graph__link-label { color: #fff; font-family: BIZ UDPGothic; font-size: 16px; font-style: normal; font-weight: 700; line-height: 150%; /* 24px */ letter-spacing: 1.6px; } .flow-graph-card { background: var(--f-5-f-5-f-5, #f5f5f5); box-shadow: 0px 0px 8px 0px rgba(0, 0, 0, 0.16); padding: 32px 20px; } .flow-graph-card__title { display: flex; gap: 10px; justify-content: center; align-items: center; position: relative; padding-bottom: 13px; } .flow-graph-card__title::after { content: ""; display: block; width: 32px; height: 3px; background: var(--logo-lightblue, #9bccee); position: absolute; left: 0; right: 0; bottom: 0; margin: auto; } .flow-graph-card__step { color: var(--333333, #333); text-align: center; font-family: Montserrat; font-size: 24px; font-style: normal; font-weight: 600; line-height: 100%; /* 24px */ } .flow-graph-card__no { color: var(--333333, #333); text-align: center; font-family: Montserrat; font-size: 36px; font-style: normal; font-weight: 600; line-height: 100%; /* 36px */ letter-spacing: 3.6px; } .flow-graph-card__text { height: 3em; color: var(--333333, #333); text-align: center; font-family: BIZ UDPGothic; font-size: 20px; font-style: normal; font-weight: 700; line-height: 150%; /* 30px */ letter-spacing: 2px; display: grid; place-content: center; margin-top: 32px; } } @media screen and (max-width: 1023px) { .flow-section { background: var(--f5f5f5, #f5f5f5); padding: 70px 20px; } .flow-section__flow-graph { margin-top: 32px; } .flow-section__section { margin-top: 64px; } .flow-graph { display: grid; grid-template-columns: 50px 1fr; gap: 20px; } .flow-graph__title { writing-mode: vertical-rl; font-feature-settings: "vert" on; position: relative; margin-bottom: 47px; background: linear-gradient(180deg, transparent 0%, #1a1a1a 100%); color: var(--FAFAFA, #fafafa); text-align: center; font-family: BIZ UDPGothic; font-size: 24px; font-style: normal; font-weight: 700; line-height: 130%; /* 31.2px */ letter-spacing: 2.4px; display: grid; place-content: center; margin-top: 32px; } .flow-graph__title::after { content: ""; display: block; width: 50px; position: absolute; right: 0; bottom: -47px; height: 47px; border-right: transparent solid 25px; border-left: transparent solid 25px; border-top: #1a1a1a solid 47px; } .flow-graph__list { display: grid; gap: 59px; } .flow-graph__item + .flow-graph__item { position: relative; } .flow-graph__item + .flow-graph__item::before { content: ""; display: block; position: absolute; border-left: transparent solid 14px; border-top: #333333 solid 15px; border-right: transparent solid 14px; width: 28px; left: 0; right: 0; top: -37px; margin: auto; } .flow-graph__check { color: var(--1A1A1A, #1a1a1a); font-family: BIZ UDPGothic; font-size: 14px; font-style: normal; font-weight: 700; line-height: 150%; /* 21px */ letter-spacing: 1.4px; margin-top: 60px; text-align: center; } .flow-graph__link { display: grid; grid-template-columns: 32px auto; gap: 20px; justify-content: center; align-items: center; background: var(--333333, #333); box-shadow: 3px 3px 16px 0px rgba(0, 0, 0, 0.32); color: #fff; font-family: BIZ UDPGothic; font-size: 16px; font-style: normal; font-weight: 700; line-height: 150%; /* 24px */ letter-spacing: 1.6px; padding-top: 20px; padding-bottom: 20px; } .flow-graph__link-icon { width: 32px; } .flow-graph__link-label { color: #fff; font-family: BIZ UDPGothic; font-size: 16px; font-style: normal; font-weight: 700; line-height: 150%; /* 24px */ letter-spacing: 1.6px; } .flow-graph-card { background: #fff; box-shadow: 0px 0px 8px 0px rgba(0, 0, 0, 0.16); padding: 10px; display: grid; gap: 14px; grid-template-columns: 66px 1fr; align-items: center; } .flow-graph-card__title { position: relative; padding-top: 4px; padding-bottom: 4px; } .flow-graph-card__title::after { content: ""; display: block; width: 2px; height: calc(100% - 10px); background: var(--logo-lightblue, #9bccee); position: absolute; right: -2px; top: 5px; } .flow-graph-card__step { display: block; color: var(--333333, #333); text-align: center; font-family: Montserrat; font-size: 16px; font-style: normal; font-weight: 600; line-height: 100%; /* 16px */ } .flow-graph-card__no { display: block; color: var(--333333, #333); text-align: center; font-family: Montserrat; font-size: 36px; font-style: normal; font-weight: 600; line-height: 100%; /* 36px */ } .flow-graph__item:nth-of-type(1) .flow-graph-card__no { letter-spacing: 3.6px; } .flow-graph__item:nth-of-type(3) .flow-graph-card__no { letter-spacing: 1.8px; } .flow-graph__link { margin-top: 16px; } .flow-graph-card__text { color: var(--333333, #333); text-align: left; font-family: BIZ UDPGothic; font-size: 18px; font-style: normal; font-weight: 700; line-height: 150%; /* 27px */ letter-spacing: 1.8px; } } @media screen and (min-width: 1024px) { .search { display: grid; grid-template-columns: minmax(0, 1168px); justify-content: center; padding-bottom: 128px; padding-top: 80px; } .search__tab-container { margin-top: 32px; } .search__aside { margin-top: 32px; } .search-list { display: grid; gap: 3px; } .search-list-row__head-list { display: grid; grid-template-columns: repeat(4, 1fr); gap: 3px; } } @media screen and (max-width: 1023px) { .search { padding-top: 50px; padding-bottom: 70px; } .search__tab-container { margin-top: 32px; } .search-list { display: grid; gap: 3px; } .search-list-row { display: grid; gap: 3px; } .search-list-row__head-list { display: contents; } .search-list-row__body-list { display: contents; } .search-list-row__head:nth-of-type(1) { order: 100; } .search-list-row__head:nth-of-type(2) { order: 300; } .search-list-row__head:nth-of-type(3) { order: 500; } .search-list-row__head:nth-of-type(4) { order: 700; } .search-list-row__body:nth-of-type(1) { order: 200; } .search-list-row__body:nth-of-type(2) { order: 400; } .search-list-row__body:nth-of-type(3) { order: 600; } .search-list-row__body:nth-of-type(4) { order: 800; } } @media screen and (min-width: 1024px) { .search-title { display: flex; gap: 20px; align-items: center; } .search-title__icon { width: 60px; } .search-title__label { color: var(--MIKIblue, #005282); font-family: BIZ UDPGothic; font-size: 36px; font-style: normal; font-weight: 700; line-height: 100%; /* 36px */ letter-spacing: 9px; } } @media screen and (max-width: 1023px) { .search-title { display: flex; gap: 10px; align-items: center; justify-content: center; } .search-title__icon { width: 60px; } .search-title__label { color: var(--MIKIblue, #005282); font-family: BIZ UDPGothic; font-size: 24px; font-style: normal; font-weight: 700; line-height: 100%; /* 24px */ letter-spacing: 3.6px; } } @media screen and (min-width: 1024px) { .search-tab-container__body { background: var(--f5f5f5, #f5f5f5); padding-top: 48px; padding-left: 48px; padding-right: 48px; padding-bottom: 128px; border: 16px solid var(--MIKIblue, #005282); position: relative; } .search-tab-container__tab-body { display: none; } .search-tab-container__tab-body.current { display: block; } .search-tab-container__filter { margin-top: 80px; } .search-tab-container__advance-filter { margin-top: 20px; } .search-tab-container__count { margin-top: 80px; } .search-tab-container__search-button { width: 320px; margin: auto; margin-top: 20px; } .search-tab-list { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; } .search-tab { display: flex; justify-content: center; align-items: center; padding-right: 18.67px; gap: 20px; --color: #005282; --bgColor: #fafafa; background-color: var(--bgColor); box-shadow: 3px 3px 8px 0px rgba(0, 0, 0, 0.16); cursor: pointer; height: 64px; transition: 0.25s; } .search-tab__icon--1 { width: 42px; } .search-tab__icon--2 { width: 44.6px; } .search-tab__icon--3 { width: 31.6px; } .search-tab__icon svg path { fill: var(--color); transition: 0.25s; } .search-tab__label { color: var(--color); font-family: BIZ UDPGothic; font-size: 16px; font-style: normal; font-weight: 700; line-height: 150%; /* 24px */ letter-spacing: 1.28px; transition: 0.25s; } .search-tab__arrow { width: 12px; flex-shrink: 0; flex-grow: 0; } .search-tab__arrow svg path { fill: var(--color); transition: 0.25s; } .search-tab.current { --color: #fafafa; --bgColor: #005282; } } @media screen and (max-width: 1023px) { .search-tab-container__body { background: var(--f5f5f5, #f5f5f5); padding-top: 20px; padding-left: 20px; padding-right: 20px; padding-bottom: 60px; border-top: 10px solid var(--MIKIblue, #005282); position: relative; } .search-tab-container__tab-body { display: none; } .search-tab-container__tab-body.current { display: block; } .search-tab-container__filter { margin-top: 40px; } .search-tab-container__advance-filter { margin-top: 30px; } .search-tab-container__count { margin-top: 40px; } .search-tab-container__search-button { margin-top: 20px; } .search-tab-list { display: grid; grid-template-columns: repeat(3, 1fr); } .search-tab { display: grid; justify-items: center; align-content: center; --color: #005282; --bgColor: #fafafa; background-color: var(--bgColor); box-shadow: 3px 3px 8px 0px rgba(0, 0, 0, 0.16); cursor: pointer; height: 115px; gap: 5px; transition: 0.25s; } .search-tab__icon--1 { width: 42px; } .search-tab__icon--2 { width: 44.6px; } .search-tab__icon--3 { width: 31.6px; } .search-tab__icon svg path { fill: var(--color); transition: 0.25s; } .search-tab__label { color: var(--color); text-align: center; font-family: BIZ UDPGothic; font-size: 16px; font-style: normal; font-weight: 700; line-height: 150%; /* 24px */ letter-spacing: 1.28px; transition: 0.25s; } .search-tab__arrow { display: none; } .search-tab.current { --color: #fafafa; --bgColor: #005282; } } @media screen and (min-width: 1024px) { .search-filter__row { border-bottom: 1px dotted var(--707070, #707070); padding-bottom: 29px; } .search-filter__row + .search-filter__row { margin-top: 30px; } .search-filter-row { display: flex; align-items: center; } .search-filter-row__label { flex-shrink: 0; flex-grow: 0; width: 196px; color: var(--333333, #333); font-family: BIZ UDPGothic; font-size: 16px; font-style: normal; font-weight: 700; line-height: 150%; /* 24px */ letter-spacing: 1.6px; } .search-filter-row__radio-button-list { width: 226px; display: flex; } .search-filter-row__radio-button-item { width: 50%; } .search-filter-row__range { display: grid; grid-template-columns: 1fr auto 1fr; gap: 10px; align-items: center; display: none; max-width: 396px; flex-grow: 1; position: relative; } .search-filter-row__range-character__note { position: absolute; bottom: -20px; font-size: 12px; color: #e60012; } .search-filter-row__range-character__note sup { vertical-align: text-top; font-size: 60%; } .search-filter-row__range.active { display: grid; } .search-filter-row__checkbox { margin-left: 32px; } } @media screen and (max-width: 1023px) { .search-filter-row__range-character__note { position: absolute; bottom: -20px; font-size: 12px; color: #e60012; } .search-filter-row__range-character__note sup { vertical-align: text-top; font-size: 60%; } .search-filter__row { border-bottom: 1px dotted var(--707070, #707070); padding-bottom: 29px; } .search-filter__row + .search-filter__row { margin-top: 30px; } .search-filter-row { display: grid; gap: 20px; } .search-filter-row__label { color: var(--333333, #333); font-family: BIZ UDPGothic; font-size: 16px; font-style: normal; font-weight: 700; line-height: 150%; /* 24px */ letter-spacing: 1.6px; } .search-filter-row__radio-button-list { width: 186px; display: flex; } .search-filter-row__radio-button-item { width: 50%; } .search-filter-row__range { display: grid; grid-template-columns: 1fr auto 1fr; gap: 10px; align-items: center; display: none; max-width: 396px; flex-grow: 1; position: relative; } .search-filter-row__range._character { margin-bottom: 10px; } .search-filter-row__range.active { display: grid; } } @media screen and (min-width: 1024px) { .advance-filter__wrapper { overflow: hidden; } .advance-filter__body { padding: 32px; display: grid; gap: 20px; background: #fff; } .advance-filter__button { width: 320px; margin: auto; margin-top: 48px; } .advance-filter__row { border-bottom: 1px dotted var(--707070, #707070); padding-bottom: 19px; } .advance-filter-row { display: grid; align-items: center; grid-template-columns: 152px 1fr; } .advance-filter-row__label { color: var(--333333, #333); font-family: BIZ UDPGothic; font-size: 16px; font-style: normal; font-weight: 700; line-height: 150%; /* 24px */ letter-spacing: 1.6px; } .advance-filter-row__list { display: flex; flex-wrap: wrap; gap: 48px; } .advance-filter--compact .advance-filter-row { grid-template-columns: 1fr; } .advance-filter--compact .advance-filter-row__list { gap: 13px 9px; margin-top: 16px; } .advance-filter--compact .advance-filter__wrapper.open { margin-bottom: 32px; } .advance-filter--compact .advance-filter__button { margin-top: 0; } } @media screen and (max-width: 1023px) { .advance-filter__wrapper { overflow: hidden; margin-top: 30px; } .advance-filter__body { padding: 32px; display: grid; gap: 25px; background: #fff; } .advance-filter__button { margin-top: 48px; } .advance-filter__row { border-bottom: 1px dotted var(--707070, #707070); padding-bottom: 29px; } .advance-filter-row { display: grid; gap: 20px; } .advance-filter-row__label { color: var(--333333, #333); font-family: BIZ UDPGothic; font-size: 16px; font-style: normal; font-weight: 700; line-height: 150%; /* 24px */ letter-spacing: 1.6px; } .advance-filter-row__list { display: grid; gap: 20px; } .advance-filter-row__list--flex { display: flex; flex-wrap: wrap; } } @media screen and (min-width: 1024px) { .advance-filter-button { --color: #fff; --bgColor: #1a1a1a; display: flex; background: var(--bgColor); box-shadow: 3px 3px 16px 0px rgba(0, 0, 0, 0.32); padding-top: 20px; padding-bottom: 20px; justify-content: center; align-items: center; width: 100%; gap: 10px; cursor: pointer; transition: 0.25s; } .advance-filter-button.open .advance-filter-button__icon::after { rotate: 0deg; } .advance-filter-button:hover { opacity: 0.5; } .advance-filter-button__icon { position: relative; width: 32px; height: 32px; } .advance-filter-button__icon::before, .advance-filter-button__icon::after { content: ""; display: block; width: 15px; height: 1px; background-color: var(--color); position: absolute; left: 7px; top: 15px; transition: 0.25s; } .advance-filter-button__icon::after { rotate: 90deg; } .advance-filter-button__label { color: var(--color); font-family: BIZ UDPGothic; font-size: 16px; font-style: normal; font-weight: 700; line-height: 150%; /* 24px */ letter-spacing: 1.6px; transition: 0.25s; } } @media screen and (max-width: 1023px) { .advance-filter-button { --color: #fff; --bgColor: #1a1a1a; display: flex; background: var(--bgColor); box-shadow: 3px 3px 16px 0px rgba(0, 0, 0, 0.32); padding-top: 20px; padding-bottom: 20px; justify-content: center; align-items: center; width: 100%; gap: 10px; cursor: pointer; } .advance-filter-button.open .advance-filter-button__icon::after { rotate: 0deg; } .advance-filter-button__icon { position: relative; width: 32px; height: 32px; } .advance-filter-button__icon::before, .advance-filter-button__icon::after { content: ""; display: block; width: 15px; height: 1px; background-color: var(--color); position: absolute; left: 7px; top: 15px; transition: 0.25s; } .advance-filter-button__icon::after { rotate: 90deg; } .advance-filter-button__label { color: var(--color); font-family: BIZ UDPGothic; font-size: 16px; font-style: normal; font-weight: 700; line-height: 150%; /* 24px */ letter-spacing: 1.6px; transition: 0.25s; } } @media screen and (min-width: 1024px) { .search-count { color: #000; font-family: BIZ UDPGothic; font-size: 24px; font-style: normal; font-weight: 700; line-height: 150%; /* 36px */ letter-spacing: 2.4px; text-align: center; } .search-count__count { color: var(--MIKIblue, #005282); font-family: Montserrat; font-size: 64px; font-style: normal; font-weight: 600; line-height: 90%; /* 57.6px */ } .search-count--compact { color: #000; font-family: BIZ UDPGothic; font-size: 16px; font-style: normal; font-weight: 700; line-height: 150%; /* 24px */ letter-spacing: 1.6px; } .search-count--compact .search-count__count { color: var(--MIKIblue, #005282); font-family: Montserrat; font-size: 36px; font-style: normal; font-weight: 600; line-height: 90%; /* 32.4px */ display: inline-block; margin-left: 10px; margin-right: 10px; } } @media screen and (max-width: 1023px) { .search-count { color: #000; font-family: BIZ UDPGothic; font-size: 24px; font-style: normal; font-weight: 700; line-height: 150%; /* 36px */ letter-spacing: 2.4px; text-align: center; } .search-count__count { color: var(--MIKIblue, #005282); font-family: Montserrat; font-size: 64px; font-style: normal; font-weight: 600; line-height: 90%; /* 57.6px */ display: inline-block; padding-left: 10px; padding-right: 10px; } } @media screen and (min-width: 1024px) { .search-button { display: flex; width: 100%; justify-content: center; align-items: center; gap: 20px; background: var(--MIKIblue, #005282); box-shadow: 3px 3px 16px 0px rgba(0, 0, 0, 0.32); padding-top: 17px; padding-bottom: 17px; cursor: pointer; transition: 0.25s; } .search-button:hover { opacity: 0.5; } .search-button__label { color: #fff; font-family: BIZ UDPGothic; font-size: 20px; font-style: normal; font-weight: 700; line-height: 150%; /* 30px */ letter-spacing: 2px; } .search-button__icon { width: 12px; } } @media screen and (max-width: 1023px) { .search-button { display: flex; width: 100%; justify-content: center; align-items: center; gap: 20px; background: var(--MIKIblue, #005282); box-shadow: 3px 3px 16px 0px rgba(0, 0, 0, 0.32); padding-top: 17px; padding-bottom: 17px; cursor: pointer; transition: 0.25s; } .search-button:hover { opacity: 0.5; } .search-button__label { color: #fff; font-family: BIZ UDPGothic; font-size: 20px; font-style: normal; font-weight: 700; line-height: 150%; /* 30px */ letter-spacing: 2px; } .search-button__icon { width: 12px; } } @media screen and (min-width: 1024px) { .search-aside { background: #e1e1e1; padding-top: 60px; padding-bottom: 60px; display: grid; grid-template-columns: repeat(2, 1fr); gap: 48px; padding-left: 60px; padding-right: 60px; } .area-modal-button { border: 1px solid var(--AAAAAA, #aaa); background: var(--f5f5f5, #f5f5f5); box-shadow: 3px 3px 8px 0px rgba(0, 0, 0, 0.16); width: 100%; display: flex; justify-content: center; align-items: center; height: 100%; cursor: pointer; transition: 0.25s; } .area-modal-button:hover { opacity: 0.5; } .area-modal-button__label { padding-top: 8px; padding-bottom: 8px; } .area-modal-button__icon { width: 32px; height: 32px; position: relative; } .area-modal-button__icon::before, .area-modal-button__icon::after { content: ""; width: 15px; height: 1px; position: absolute; inset: 0; display: block; background-color: #707070; margin: auto; } .area-modal-button__icon::before { rotate: 90deg; } } @media screen and (max-width: 1023px) { .search-aside { background: #e1e1e1; padding-top: 40px; padding-bottom: 40px; display: grid; gap: 30px; padding-left: 20px; padding-right: 20px; } .area-modal-button { border: 1px solid var(--AAAAAA, #aaa); background: var(--f5f5f5, #f5f5f5); box-shadow: 3px 3px 8px 0px rgba(0, 0, 0, 0.16); width: 100%; display: flex; justify-content: center; align-items: center; height: 60px; cursor: pointer; } .area-modal-button__label { padding-top: 8px; padding-bottom: 8px; } .area-modal-button__icon { width: 32px; height: 32px; position: relative; } .area-modal-button__icon::before, .area-modal-button__icon::after { content: ""; width: 15px; height: 1px; position: absolute; inset: 0; display: block; background-color: #707070; margin: auto; } .area-modal-button__icon::before { rotate: 90deg; } } @media screen and (min-width: 1024px) { .search-block-head { background: #fff; display: flex; align-items: center; padding-left: 32px; padding-top: 12px; padding-bottom: 12px; padding-right: 12px; height: 100%; transition: 0.25s; cursor: pointer; } .search-block-head:hover, .search-block-head.active { background: #e7f1f8; } .search-block-head.active .search-block-head__icon::after { rotate: 0deg; } .search-block-head__icon { width: 15px; height: 15px; flex-grow: 0; flex-shrink: 0; position: relative; } .search-block-head__icon::before, .search-block-head__icon::after { content: ""; display: block; width: 100%; height: 1px; position: absolute; inset: 0; margin: auto; background-color: #005282; transition: 0.25s; } .search-block-head__icon::after { rotate: 90deg; } .search-block-head__label { color: var(--1A1A1A, #1a1a1a); font-size: 16px; font-style: normal; font-weight: 400; line-height: 150%; /* 24px */ letter-spacing: 1.6px; margin-left: 10px; } .search-block-head__count { margin-left: 6px; color: var(--707070, #707070); font-size: 11px; font-style: normal; font-weight: 400; line-height: 150%; /* 16.5px */ } } @media screen and (max-width: 1023px) { .search-block-head { background: #fff; display: flex; align-items: center; padding-left: 32px; padding-top: 12px; padding-bottom: 12px; padding-right: 12px; height: 100%; transition: 0.25s; cursor: pointer; } .search-block-head.active { background: #e7f1f8; } .search-block-head.active .search-block-head__icon::after { rotate: 0deg; } .search-block-head__icon { width: 15px; height: 15px; flex-grow: 0; flex-shrink: 0; position: relative; } .search-block-head__icon::before, .search-block-head__icon::after { content: ""; display: block; width: 100%; height: 1px; position: absolute; inset: 0; margin: auto; background-color: #005282; transition: 0.25s; } .search-block-head__icon::after { rotate: 90deg; } .search-block-head__label { color: var(--1A1A1A, #1a1a1a); font-size: 16px; font-style: normal; font-weight: 400; line-height: 150%; /* 24px */ letter-spacing: 1.6px; margin-left: 10px; } .search-block-head__count { margin-left: 6px; color: var(--707070, #707070); font-size: 11px; font-style: normal; font-weight: 400; line-height: 150%; /* 16.5px */ } } @media screen and (min-width: 1024px) { .search-block-body { display: none; flex-wrap: wrap; background: var(--E7F1F8, #e7f1f8); gap: 4px 0; cursor: pointer; } .search-block-body.active { display: flex; flex-wrap: wrap; } } @media screen and (max-width: 1023px) { .search-block-body { display: none; background: var(--E7F1F8, #e7f1f8); gap: 3px; cursor: pointer; } .search-block-body.active { display: grid; } } @media screen and (min-width: 1024px) { .search-item { padding-left: 20px; padding-right: 20px; padding-top: 13px; padding-bottom: 14px; } } @media screen and (max-width: 1023px) { .search-item { padding-left: 25px; padding-right: 25px; padding-top: 20px; padding-bottom: 20px; } } @media screen and (min-width: 1024px) { .seach-current__title { color: var(--1A1A1A, #1a1a1a); font-family: BIZ UDPGothic; font-size: 20px; font-style: normal; font-weight: 700; line-height: 150%; /* 30px */ letter-spacing: 2px; border-bottom: 1px solid var(--MIKIblue, #005282); padding-bottom: 9px; } .seach-current__list { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 20px; } .search-current-item { padding-left: 20px; padding-right: 20px; padding-top: 13px; padding-bottom: 14px; background: var(--E7F1F8, #e7f1f8); } label.search-current-item { cursor: pointer; display: block; } } @media screen and (max-width: 1023px) { .seach-current__title { color: var(--1A1A1A, #1a1a1a); font-family: BIZ UDPGothic; font-size: 20px; font-style: normal; font-weight: 700; line-height: 150%; /* 30px */ letter-spacing: 2px; border-bottom: 1px solid var(--MIKIblue, #005282); padding-bottom: 9px; } .seach-current__list { display: grid; gap: 10px; margin-top: 20px; } .search-current-item { display: block; padding-left: 20px; padding-right: 20px; padding-top: 20px; padding-bottom: 20px; background: var(--E7F1F8, #e7f1f8); } } @media screen and (min-width: 1024px) { .area-search__current { margin-top: 80px; } } @media screen and (max-width: 1023px) { .area-search__current { margin-top: 40px; } } @media screen and (min-width: 1024px) { .station-search__current { margin-top: 80px; } .station-search__line-list { display: grid; gap: 48px; } .station-line__title { color: var(--1A1A1A, #1a1a1a); font-family: BIZ UDPGothic; font-size: 20px; font-style: normal; font-weight: 700; line-height: 150%; /* 30px */ letter-spacing: 2px; border-bottom: 1px solid var(--MIKIblue, #005282); padding-bottom: 9px; } .station-line__body { margin-top: 20px; height: auto !important; } } @media screen and (max-width: 1023px) { .station-search__current { margin-top: 30px; } .station-search__line-list { display: grid; gap: 48px; } .station-line__head { position: relative; min-height: 32px; display: flex; align-items: center; justify-content: center; border-bottom: 1px solid var(--MIKIblue, #005282); padding-bottom: 21px; } .station-line__title { color: var(--1A1A1A, #1a1a1a); font-family: BIZ UDPGothic; font-size: 20px; font-style: normal; font-weight: 700; line-height: 150%; /* 30px */ letter-spacing: 2px; flex-grow: 1; } .station-line__body { overflow: hidden; } .station-line__body .search-list { padding-top: 20px; } .station-line__head-icon { width: 32px; height: 32px; flex-grow: 0; flex-shrink: 0; position: relative; } .station-line__head-icon::before, .station-line__head-icon::after { content: ""; display: block; width: 15px; height: 1px; position: absolute; inset: 0; margin: auto; background-color: #005282; transition: 0.25s; } .station-line__head-icon::after { rotate: 90deg; } .station-line__head.open .station-line__head-icon::after { rotate: 0deg; } } @media screen and (min-width: 1024px) { .other-area { max-width: 980px; width: 100vw; } .other-area__title { color: var(--FAFAFA, #fafafa); font-family: BIZ UDPGothic; font-size: 24px; font-style: normal; font-weight: 700; line-height: 150%; /* 36px */ letter-spacing: 2.4px; padding-bottom: 9px; border-bottom: 1px solid var(--FAFAFA, #fafafa); text-align: left; } .other-area__list { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin-top: 32px; } .other-area-link { display: block; position: relative; padding-top: 24px; padding-bottom: 24px; background: #fff; box-shadow: 3px 3px 8px 0px rgba(0, 0, 0, 0.08); text-align: center; transition: 0.25s; } .other-area-link__label { color: var(--707070, #707070); font-family: BIZ UDPGothic; font-size: 20px; font-style: normal; font-weight: 700; line-height: 160%; /* 32px */ } .other-area-link__arrow { width: 32px; height: 32px; padding-left: 8px; padding-right: 8px; padding-top: 10px; padding-bottom: 10px; position: absolute; right: 0; top: 0; bottom: 0; margin: auto; background: var(--1A1A1A, #1a1a1a); } .other-area-link:hover { opacity: 0.5; } } @media screen and (max-width: 1023px) { .other-area { max-width: 335px; width: calc(100vw - 40px); } .other-area__title { color: var(--FAFAFA, #fafafa); font-family: BIZ UDPGothic; font-size: 24px; font-style: normal; font-weight: 700; line-height: 150%; /* 36px */ letter-spacing: 2.4px; padding-bottom: 9px; border-bottom: 1px solid var(--FAFAFA, #fafafa); text-align: left; } .other-area__list { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; margin-top: 32px; } .other-area-link { display: block; position: relative; padding-top: 20px; padding-bottom: 20px; background: #fff; box-shadow: 3px 3px 8px 0px rgba(0, 0, 0, 0.08); text-align: center; } .other-area-link__label { color: var(--707070, #707070); font-family: BIZ UDPGothic; font-size: 16px; font-style: normal; font-weight: 700; line-height: 160%; /* 32px */ } .other-area-link__arrow { width: 25px; height: 25px; padding-left: 8px; padding-right: 8px; padding-top: 10px; padding-bottom: 10px; position: absolute; right: 0; top: 0; bottom: 0; margin: auto; background: var(--1A1A1A, #1a1a1a); } } @media screen and (min-width: 1024px) { .map-search__map { height: 663px; } } @media screen and (max-width: 1023px) { .map-search__map { height: 500px; } } .page__feature .rent { grid-template-columns: 800px; } .page__feature .rent__menu { display: none; } @media screen and (min-width: 1024px) { .rent { display: grid; grid-template-columns: 350px minmax(0, 800px); padding-left: 20px; padding-right: 20px; padding-top: 80px; justify-content: center; gap: 50px; background: var(--FAFAFA, #fafafa); padding-bottom: 128px; } .rent__body { grid-row: 1/2; order: 2; } .rent__menu { grid-row: 1/2; order: 1; } .rent-body__title { color: var(--MIKIblue, #005282); font-family: BIZ UDPGothic; font-size: 24px; font-style: normal; font-weight: 700; line-height: 150%; /* 36px */ letter-spacing: 2.4px; padding-bottom: 7px; border-bottom: 3px solid var(--MIKIblue, #005282); } .rent-body__control { margin-top: 20px; } .rent-body__pager { margin-top: 32px; } .rent-body__list + .rent-body__pager { margin-top: 16px; } .rent-body__list { margin-top: 20px; display: grid; gap: 20px; } .rent-control { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 20px; } .rent-control__list { display: grid; gap: 24px; grid-template-columns: repeat(2, 192px); margin-top: 4px; } .rent-control-button { padding-top: 4px; padding-bottom: 4px; display: grid; grid-template-columns: 140px 15px; justify-content: center; gap: 10px; width: 100%; background: #fff; box-shadow: 3px 3px 8px 0px rgba(0, 0, 0, 0.08); cursor: pointer; transition: 0.25s; } .rent-control-button:hover { opacity: 0.5; } .rent-control-button__label { color: var(--333333, #333); text-align: center; /* BIZ UDPGOTHIC */ font-family: BIZ UDPGothic; font-size: 16px; font-style: normal; font-weight: 400; line-height: 150%; /* 24px */ text-align: center; } .rent-control-button__icon { position: relative; } .rent-control-button__icon::before, .rent-control-button__icon::after { content: ""; display: block; width: 100%; height: 1px; background-color: #005282; position: absolute; inset: 0; margin: auto; } .rent-control-button__icon::after { rotate: 90deg; } .rent-control-selector { position: relative; display: block; } .rent-control-selector::before { content: ""; pointer-events: none; width: 14px; height: 7px; border-top: 7px solid #1a1a1a; border-left: 7px solid transparent; border-right: 7px solid transparent; position: absolute; right: 14px; top: 13px; z-index: 2; } .rent-control-selector::after { content: ""; display: block; width: 80px; position: absolute; right: 1px; top: 1px; bottom: 1px; background: linear-gradient( to right, rgba(255, 255, 255, 0), rgba(255, 255, 255, 0.5), rgba(255, 255, 255, 0.5) ); z-index: 1; pointer-events: none; } .rent-control-selector__body { display: block; width: 100%; cursor: pointer; background: #fff; box-shadow: 3px 3px 8px 0px rgba(0, 0, 0, 0.08); padding-top: 4px; padding-bottom: 4px; text-align: center; padding-left: 14px; padding-right: 40px; color: var(--333333, #333); text-align: center; /* BIZ UDPGOTHIC */ font-family: BIZ UDPGothic; font-size: 16px; font-style: normal; font-weight: 400; line-height: 150%; /* 24px */ transition: 0.25s; } .rent-control-selector__body:hover { opacity: 0.5; } .rent-control-count__main { color: var(--333333, #333); font-family: BIZ UDPGothic; font-size: 16px; font-style: normal; font-weight: 400; line-height: 120%; /* 19.2px */ letter-spacing: 1.6px; } .rent-control-count__room-count { color: #e60012; font-family: Montserrat; font-size: 40px; font-style: normal; font-weight: 600; line-height: 90%; /* 36px */ display: inline-block; margin-left: 3px; margin-right: 3px; } .rent-control-count__sub { color: var(--333333, #333); font-family: BIZ UDPGothic; font-size: 14px; font-style: normal; font-weight: 400; line-height: 150%; /* 21px */ letter-spacing: 1.4px; } .rent-control-count__ridge-count { color: var(--e-60012, #e60012); font-family: Montserrat; font-size: 24px; font-style: normal; font-weight: 500; line-height: 100%; /* 24px */ } } @media screen and (max-width: 1023px) { .rent { padding-left: 20px; padding-right: 20px; padding-top: 50px; background: var(--FAFAFA, #fafafa); padding-bottom: 100px; } .rent-body { width: 100%; } .rent-body__title { color: var(--MIKIblue, #005282); font-family: BIZ UDPGothic; font-size: 24px; font-style: normal; font-weight: 700; line-height: 150%; /* 36px */ letter-spacing: 2.4px; padding-bottom: 7px; border-bottom: 3px solid var(--MIKIblue, #005282); } .rent-body__control { margin-top: 22px; } .rent-body__pager { margin-top: 20px; } .rent-body__list { margin-top: 20px; } .rent-body__item { width: 100%; } .rent-body__item + .rent-body__item { margin-top: 20px; } .rent-body__back-button { margin-top: 50px; } .rent-control { display: grid; gap: 20px; } .rent-control__list { display: grid; gap: 10px; grid-template-columns: 192px; justify-content: center; } .rent-control-button { padding-top: 9.5px; padding-bottom: 9.5px; display: grid; grid-template-columns: auto 15px; justify-content: center; gap: 10px; width: 100%; background: #fff; box-shadow: 3px 3px 8px 0px rgba(0, 0, 0, 0.08); } .rent-control-button__label { color: var(--333333, #333); text-align: center; font-family: BIZ UDPGothic; font-size: 14px; font-style: normal; font-weight: 400; line-height: 150%; /* 21px */ } .rent-control-button__icon { position: relative; } .rent-control-button__icon::before, .rent-control-button__icon::after { content: ""; display: block; width: 100%; height: 1px; background-color: #005282; position: absolute; inset: 0; margin: auto; } .rent-control-button__icon::after { rotate: 90deg; } .rent-control-selector { position: relative; display: block; } .rent-control-selector::before { content: ""; pointer-events: none; width: 14px; height: 7px; border-top: 7px solid #1a1a1a; border-left: 7px solid transparent; border-right: 7px solid transparent; position: absolute; right: 34px; top: 17px; z-index: 2; } .rent-control-selector::after { content: ""; display: block; width: 80px; position: absolute; right: 1px; top: 1px; bottom: 1px; background: linear-gradient( to right, rgba(255, 255, 255, 0), rgba(255, 255, 255, 0.5), rgba(255, 255, 255, 0.5) ); z-index: 1; pointer-events: none; } .rent-control-selector__body { display: block; width: 100%; cursor: pointer; background: #fff; box-shadow: 3px 3px 8px 0px rgba(0, 0, 0, 0.08); padding-top: 9.5px; padding-bottom: 9.5px; text-align: center; padding-left: 14px; padding-right: 40px; color: var(--333333, #333); text-align: center; color: var(--333333, #333); text-align: center; font-family: BIZ UDPGothic; font-size: 14px; font-style: normal; font-weight: 400; line-height: 150%; /* 21px */ } .rent-control-count__main { color: var(--333333, #333); font-family: BIZ UDPGothic; font-size: 16px; font-style: normal; font-weight: 400; line-height: 120%; /* 19.2px */ letter-spacing: 1.6px; } .rent-control-count__room-count { color: #e60012; font-family: Montserrat; font-size: 40px; font-style: normal; font-weight: 600; line-height: 90%; /* 36px */ display: inline-block; margin-left: 3px; margin-right: 3px; } .rent-control-count__sub { color: var(--333333, #333); font-family: BIZ UDPGothic; font-size: 14px; font-style: normal; font-weight: 400; line-height: 150%; /* 21px */ letter-spacing: 1.4px; } .rent-control-count__ridge-count { color: var(--e-60012, #e60012); font-family: Montserrat; font-size: 24px; font-style: normal; font-weight: 500; line-height: 100%; /* 24px */ } .rent-back-button { display: grid; border: 1px solid var(--MIKIblue, #005282); background: #fff; box-shadow: 3px 3px 16px 0px rgba(0, 0, 0, 0.32); padding-top: 19px; padding-bottom: 19px; grid-template-columns: auto 16px; justify-content: center; align-items: center; gap: 10px; } .rent-back-button__label { color: var(--MIKIblue, #005282); font-family: BIZ UDPGothic; font-size: 16px; font-style: normal; font-weight: 700; line-height: 150%; /* 24px */ letter-spacing: 1.6px; } } @media screen and (min-width: 1024px) { .rent-card { background: #fff; box-shadow: 0px 0px 8px 0px rgba(0, 0, 0, 0.16); padding: 32px; display: grid; grid-template-areas: "a a" "b c" "b d" "e e"; grid-template-columns: 165px 1fr; gap: 0 32px; align-items: start; } .rent-card__header { display: flex; border-bottom: 1px solid var(--MIKIblue, #005282); padding-bottom: 9px; justify-content: space-between; grid-area: a; } .rent-card__title { color: var(--MIKIblue, #005282); font-family: BIZ UDPGothic; font-size: 20px; font-style: normal; font-weight: 700; line-height: 150%; /* 30px */ letter-spacing: 2px; } .rent-card__title a:hover { text-decoration: underline; } .rent-card__no-text { color: var(--333333, #333); font-family: BIZ UDPGothic; font-size: 12px; font-style: normal; font-weight: 400; line-height: 150%; /* 18px */ letter-spacing: 1.2px; margin-top: 4px; } .rent-card__no { color: var(--333333, #333); font-family: Montserrat; font-size: 14px; font-style: normal; font-weight: 500; line-height: 150%; /* 21px */ letter-spacing: 1.4px; } .rent-card__detail { margin-top: 32px; } .rent-card__images { grid-area: b; margin-top: 32px; } .rent-card__detail { grid-area: c; } .rent-card__detail-button { grid-area: d; margin-top: 20px; display: grid; grid-template-columns: 256px; justify-content: center; } .rent-card__room-table { grid-area: e; margin-top: 32px; } .rent-detail { display: grid; gap: 10px; } .rent-detail__row { padding-bottom: 9px; border-bottom: 1px dotted var(--707070, #707070); display: grid; grid-template-columns: 87px 1fr; color: var(--333333, #333); font-family: BIZ UDPGothic; font-size: 16px; font-style: normal; font-weight: 400; line-height: 150%; /* 24px */ letter-spacing: 1.6px; align-items: center; } .rent-detail__button { display: inline-block; border: 1px solid var(--MIKIblue, #005282); background: #fff; cursor: pointer; color: var(--MIKIblue, #005282); font-family: BIZ UDPGothic; font-size: 14px; font-style: normal; font-weight: 400; line-height: 150%; /* 21px */ letter-spacing: 1.4px; padding-left: 9px; padding-right: 9px; padding-top: 2px; padding-bottom: 2px; margin-left: 53px; transition: 0.25s; } .rent-detail__button:hover { background-color: #005282; color: #fff; } .rent-card-detail-button { background: var(--MIKIblue, #005282); box-shadow: 3px 3px 8px 0px rgba(0, 0, 0, 0.16); display: flex; justify-content: center; align-items: center; gap: 10px; padding-top: 13px; padding-bottom: 14px; cursor: pointer; transition: 0.25s; } .rent-card-detail-button__label { color: #fff; font-family: BIZ UDPGothic; font-size: 14px; font-style: normal; font-weight: 700; line-height: 150%; /* 21px */ letter-spacing: 1.4px; } .rent-card-detail-button__arrow { width: 12px; } .rent-card-detail-button:hover { opacity: 0.5; } } @media screen and (max-width: 1023px) { .rent-card { background: #fff; box-shadow: 0px 0px 8px 0px rgba(0, 0, 0, 0.16); padding: 20px; display: grid; grid-template-areas: "a a" "b c" "d d" "e e"; grid-template-columns: 49.15254237% 1fr; gap: 0 10px; align-items: start; } .rent-card__header { display: flex; border-bottom: 1px solid var(--MIKIblue, #005282); padding-bottom: 9px; justify-content: space-between; grid-area: a; } .rent-card__title { color: var(--MIKIblue, #005282); font-family: BIZ UDPGothic; font-size: 20px; font-style: normal; font-weight: 700; line-height: 150%; /* 30px */ letter-spacing: 2px; } .rent-card__no-text { color: var(--333333, #333); font-family: BIZ UDPGothic; font-size: 12px; font-style: normal; font-weight: 400; line-height: 150%; /* 18px */ letter-spacing: 1.2px; margin-top: 4px; } .rent-card__no { color: var(--333333, #333); font-family: Montserrat; font-size: 14px; font-style: normal; font-weight: 500; line-height: 150%; /* 21px */ letter-spacing: 1.4px; } .rent-card__detail { margin-top: 32px; } .rent-card__images { grid-area: b; margin-top: 32px; } .rent-card__detail { grid-area: c; } .rent-card__detail-button { grid-area: d; margin-top: 20px; display: grid; grid-template-columns: 200px; justify-content: center; } .rent-card__room-table { grid-area: e; margin-top: 32px; } .rent-detail { display: grid; gap: 8px; } .rent-detail__row { padding-bottom: 6px; border-bottom: 1px dotted var(--707070, #707070); color: var(--333333, #333); font-family: BIZ UDPGothic; font-size: 16px; font-style: normal; font-weight: 400; line-height: 150%; /* 24px */ letter-spacing: 1.6px; align-items: center; position: relative; } .rent-detail__row:nth-of-type(n + 3) { display: flex; gap: 10px; } .rent-detail__label { color: var(--333333, #333); font-family: BIZ UDPGothic; font-size: 12px; font-style: normal; font-weight: 400; line-height: 150%; /* 18px */ letter-spacing: 1.2px; } .rent-detail__item { color: var(--333333, #333); font-family: BIZ UDPGothic; font-size: 12px; font-style: normal; font-weight: 400; line-height: 150%; /* 18px */ letter-spacing: 0.72px; margin-top: 1px; } .rent-detail__button { display: inline-block; border: 1px solid var(--MIKIblue, #005282); background: #fff; color: var(--MIKIblue, #005282); font-family: BIZ UDPGothic; font-size: 10px; font-style: normal; font-weight: 400; line-height: 150%; /* 15px */ padding-left: 4px; padding-right: 4px; padding-top: 2px; padding-bottom: 1px; position: absolute; right: 0; top: -1px; } .rent-card-detail-button { background: var(--MIKIblue, #005282); box-shadow: 3px 3px 8px 0px rgba(0, 0, 0, 0.16); display: flex; justify-content: center; align-items: center; gap: 10px; padding-top: 13px; padding-bottom: 14px; cursor: pointer; } .rent-card-detail-button__label { color: #fff; font-family: BIZ UDPGothic; font-size: 14px; font-style: normal; font-weight: 700; line-height: 150%; /* 21px */ letter-spacing: 1.4px; } .rent-card-detail-button__arrow { width: 12px; } } @media screen and (min-width: 1024px) { .rent-card-images__thumbnails { margin-top: 3px; } } @media screen and (max-width: 1023px) { .rent-card-images__thumbnails { margin-top: 10px; } } @media screen and (min-width: 1024px) { .rent-card-thumbnails__slide { width: 30px; } .rent-card-thumbnails__wrapper { justify-content: center; gap: 3px; position: relative; } .rent-card-thumbnails__slide::before { content: ""; display: block; position: absolute; inset: 0; background-color: #000; opacity: 0.5; transition: 0.25s; } .rent-card-thumbnails__slide.swiper-slide-thumb-active::before { opacity: 0; } .rent-card-thumbnails__arrow { background: var(--1A1A1A, #1a1a1a); padding-top: 6px; padding-bottom: 6px; padding-left: 5px; padding-right: 5px; position: absolute; top: 0; bottom: 0; margin: auto; width: 20px; height: 20px; z-index: 2; cursor: pointer; } .rent-card-thumbnails__arrow--prev { left: 0; } .rent-card-thumbnails__arrow--next { right: 0; } } @media screen and (max-width: 1023px) { .rent-card-thumbnails__slide { width: 20px; } .rent-card-thumbnails__wrapper { justify-content: center; gap: 3px; position: relative; } .rent-card-thumbnails__slide::before { content: ""; display: block; position: absolute; inset: 0; background-color: #000; opacity: 0.5; transition: 0.25s; } .rent-card-thumbnails__slide.swiper-slide-thumb-active::before { opacity: 0; } .rent-card-thumbnails__arrow { background: var(--1A1A1A, #1a1a1a); padding-top: 8.5px; padding-bottom: 8.5px; padding-left: 7.5px; padding-right: 7.5px; position: absolute; top: 0; bottom: 0; margin: auto; width: 25px; height: 25px; z-index: 2; cursor: pointer; } .rent-card-thumbnails__arrow--prev { left: 0; } .rent-card-thumbnails__arrow--next { right: 0; } } @media screen and (min-width: 1024px) { .rent-room-table { position: relative; /*overflow: hidden;*/ } .rent-room-table:has(.rent-room-table__row:nth-of-type(3)) { min-height: 150px; } .rent-room-table__body { width: 100%; } .rent-room-table__head { background: var(--E7F1F8, #e7f1f8); text-align: center; } .rent-room-table__head-cell { color: var(--333333, #333); font-family: BIZ UDPGothic; font-size: 14px; font-style: normal; font-weight: 400; line-height: 150%; /* 21px */ letter-spacing: 1.4px; padding-top: 4px; padding-bottom: 5px; } .rent-room-table__head-cell:last-child { text-align: left; width: 206px; } .rent-room-table__cell { color: var(--333333, #333); font-family: BIZ UDPGothic; font-size: 14px; font-style: normal; font-weight: 400; line-height: 1; text-align: center; height: 40px; vertical-align: middle; } .rent-room-table__cell span { color: var(--333333, #333); font-family: BIZ UDPGothic; font-size: 10px; font-style: normal; font-weight: 400; line-height: 120%; display: block; } .rent-room-table__button-list { margin-top: 5px; display: flex; gap: 10px; } .rent-room-table__add-button { width: 100px; display: inline-block; } .rent-room-table__request-button { width: 96px; display: inline-block; } .rent-room-table__more-block { position: absolute; left: 0; bottom: 0; width: 100%; height: 60px; background: linear-gradient( 180deg, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.8) 56.13%, #fff 100% ); transition: 0.25s; } .rent-room-table.open .rent-room-table__more-block { opacity: 0; pointer-events: none; } /* .rent-room-table__more-button { position: absolute; left: 0; right: 0; bottom: 0; margin: auto; width: 120px; display: grid; grid-template-columns: auto 20px; place-items: center; cursor: pointer; }*/ .rent-room-table__more-button { margin: 10px auto 0; width: 120px; display: grid; grid-template-columns: auto 20px; place-items: center; cursor: pointer; } .rent-room-table__more-button-label { color: var(--333333, #333); font-family: BIZ UDPGothic; font-size: 16px; font-style: normal; font-weight: 400; line-height: 150%; /* 24px */ letter-spacing: 1.6px; } .rent-room-table__more-button-icon { width: 20px; height: 20px; background: var(--1A1A1A, #1a1a1a); position: relative; } .rent-room-table__more-button-icon::before, .rent-room-table__more-button-icon::after { content: ""; display: block; position: absolute; inset: 0; margin: auto; width: 12px; height: 1px; background-color: #fff; } .rent-room-table__more-button-icon::after { rotate: 90deg; } } @media screen and (max-width: 1023px) { .rent-room-table { position: relative; /*overflow: hidden;*/ } .rent-room-table:has(.rent-room-table__row:nth-of-type(3)) { min-height: 150px; } .rent-room-table__body { display: none; } .rent-room-table__more-block { position: absolute; left: 0; bottom: 0; width: 100%; height: 60px; background: linear-gradient( 180deg, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.8) 56.13%, #fff 100% ); transition: 0.25s; } .rent-room-table.open .rent-room-table__more-block { opacity: 0; pointer-events: none; } /*.rent-room-table__more-button { position: absolute; left: 0; right: 0; bottom: 0; margin: auto; width: 120px; display: grid; grid-template-columns: auto 20px; place-items: center; cursor: pointer; }*/ .rent-room-table__more-button { display: none; } .rent-room-table__more-button-label { color: var(--333333, #333); font-family: BIZ UDPGothic; font-size: 16px; font-style: normal; font-weight: 400; line-height: 150%; /* 24px */ letter-spacing: 1.6px; } .rent-room-table__more-button-icon { width: 20px; height: 20px; background: var(--1A1A1A, #1a1a1a); position: relative; } .rent-room-table__more-button-icon::before, .rent-room-table__more-button-icon::after { content: ""; display: block; position: absolute; inset: 0; margin: auto; width: 12px; height: 1px; background-color: #fff; } .rent-room-table__more-button-icon::after { rotate: 90deg; } .rent-room-table__sp-body { display: grid; gap: 2px; margin-bottom: 20px; } .rent-room-table__sp-button-block + .rent-room-table__sp-item { margin-top: 20px; } .rent-room-table__sp-row { display: grid; grid-template-columns: 120px 1fr; background: #fafafa; } .rent-room-table__sp-row + .rent-room-table__sp-row { margin-top: 3px; } .rent-room-table__sp-row:last-child .rent-room-table__sp-dd { padding-top: 4px; padding-bottom: 5px; } .rent-room-table__sp-add-button { width: 100px; } .rent-room-table__sp-dt { background: #e7f1f8; color: var(--333333, #333); font-family: Montserrat; font-size: 12px; font-style: normal; font-weight: 400; line-height: 150%; /* 18px */ padding-top: 7px; padding-bottom: 7px; text-align: center; } .rent-room-table__sp-dd { color: var(--333333, #333); font-family: Montserrat; font-size: 12px; font-style: normal; font-weight: 400; line-height: 150%; /* 18px */ padding-top: 7px; padding-bottom: 7px; padding-left: 20px; padding-right: 10px; } .rent-room-table__sp-button-block { display: grid; grid-template-columns: 128px; justify-content: center; margin-top: 20px; } .rent-room-table__sp-button { display: grid; padding-top: 9px; padding-bottom: 9px; justify-content: center; align-items: center; grid-template-columns: auto 10px; gap: 3px; background: var(--CV, #fa5c03); } .rent-room-table__sp-button-label { color: var(--FAFAFA, #fafafa); font-family: BIZ UDPGothic; font-size: 14px; font-style: normal; font-weight: 400; line-height: 100%; /* 14px */ letter-spacing: 1.4px; } } @media screen and (min-width: 1024px) { .rent-menu__title { color: var(--1A1A1A, #1a1a1a); font-family: BIZ UDPGothic; font-size: 24px; font-style: normal; font-weight: 700; line-height: 150%; /* 36px */ letter-spacing: 2.4px; border-bottom: 1px solid var(--MIKIblue, #005282); padding-bottom: 9px; } .rent-menu__section + .rent-menu__section { margin-top: 48px; } .rent-menu__section-lv2 { margin-top: 32px; } .rent-menu__title-lv2 { color: var(--333333, #333); font-family: BIZ UDPGothic; font-size: 16px; font-style: normal; font-weight: 700; line-height: 150%; /* 24px */ letter-spacing: 1.6px; border-bottom: 1px solid var(--707070, #707070); padding-bottom: 9px; width: 100%; } .rent-menu__title-lv2 span { color: var(--333333, #333); font-family: BIZ UDPGothic; font-size: 14px; font-style: normal; font-weight: 400; line-height: 150%; letter-spacing: 1.4px; } .rent-menu__area-list { display: flex; flex-wrap: wrap; margin-top: 10px; gap: 3px; } .rent-menu__area-change-button { margin-top: 32px; display: grid; grid-template-columns: minmax(0, 256px); justify-content: center; } .rent-menu__area-change-button._research { margin-top: 16px; } .rent-menu__radio-button-list { display: grid; grid-template-columns: repeat(auto-fill, 100px); margin-top: 30px; } .rent-menu__range { display: none; grid-template-columns: 1fr 20px 1fr; margin-top: 20px; position: relative; } .rent-menu__range._character { margin-bottom: 30px; } .rent-menu__range.active { display: grid; } .rent-menu__range-character { color: var(--333333, #333); font-family: BIZ UDPGothic; font-size: 16px; font-style: normal; font-weight: 400; line-height: 150%; /* 24px */ letter-spacing: 1.6px; text-align: center; display: grid; place-items: center; } .rent-menu__checkbox { margin-top: 20px; } .rent-menu__advance-filter { margin-top: 20px; } .rent-menu__count { margin-top: 48px; } .rent-menu__search-button { margin-top: 20px; display: grid; grid-template-columns: minmax(0, 320px); justify-content: center; } .rent-menu__search-change-button { margin-top: 10px; display: grid; grid-template-columns: auto; justify-content: center; } fieldset.rent-menu__section-lv2 { padding-bottom: 29px; border-bottom: 1px dotted var(--707070, #707070); } .area-change-button { display: grid; justify-content: center; background: var(--1A1A1A, #1a1a1a); box-shadow: 3px 3px 8px 0px rgba(0, 0, 0, 0.16); gap: 10px; grid-template-columns: auto 12px; align-items: center; padding-top: 13px; padding-bottom: 14px; cursor: pointer; transition: 0.25s; } .area-change-button__label { color: #fff; font-family: BIZ UDPGothic; font-size: 14px; font-style: normal; font-weight: 700; line-height: 150%; /* 21px */ letter-spacing: 1.4px; } .area-change-button:hover { opacity: 0.5; } .search-change-button { display: grid; grid-template-columns: auto 12px; gap: 10px; align-items: center; border-bottom: 1px solid var(--333333, #333); background: #fff; transition: 0.25s; } .search-change-button__label { color: var(--333333, #333); font-family: BIZ UDPGothic; font-size: 14px; font-style: normal; font-weight: 400; line-height: 150%; /* 21px */ letter-spacing: 1.4px; } .search-change-button:hover { opacity: 0.5; } } @media screen and (min-width: 1024px) { .change-area { max-width: 1168px; background: var(--f5f5f5, #f5f5f5); padding: 48px; width: calc(100vw - 40px); } .change-area__title { color: var(--1A1A1A, #1a1a1a); font-family: BIZ UDPGothic; font-size: 24px; font-style: normal; font-weight: 700; line-height: 150%; /* 36px */ letter-spacing: 2.4px; padding-bottom: 9px; border-bottom: 1px solid var(--MIKIblue, #005282); text-align: left; } .change-area__list { margin-top: 32px; } .change-area__count { margin-top: 32px; } .change-area__button { display: grid; grid-template-columns: 320px; justify-content: center; margin-top: 20px; } } @media screen and (min-width: 1024px) { .map-view { max-width: 960px; width: calc(100vw - 40px); } .map-view__map { height: 594px; } } @media screen and (max-width: 1023px) { .map-view { max-width: 335px; width: calc(100vw - 40px); } .map-view__map { height: 500px; } } @media screen and (min-width: 1024px) { .rent-filter { max-width: 1168px; width: 100vw; background: var(--f5f5f5, #f5f5f5); padding: 48px; } .rent-filter__title { color: var(--1A1A1A, #1a1a1a); font-family: BIZ UDPGothic; font-size: 24px; font-style: normal; font-weight: 700; line-height: 150%; /* 36px */ letter-spacing: 2.4px; padding-bottom: 9px; border-bottom: 1px solid var(--MIKIblue, #005282); } .rent-filter__filter { margin-top: 20px; } .rent-filter__advance-filter { margin-top: 20px; } .rent-filter__count { margin-top: 20px; color: #000; font-family: BIZ UDPGothic; font-size: 16px; font-style: normal; font-weight: 700; line-height: 150%; /* 24px */ letter-spacing: 1.6px; text-align: center; } .rent-filter__number { display: inline-block; color: var(--MIKIblue, #005282); font-family: Montserrat; font-size: 36px; font-style: normal; font-weight: 600; line-height: 90%; /* 32.4px */ margin-left: 10px; margin-right: 10px; } .rent-filter__search-button { margin: auto; max-width: 320px; margin-top: 20px; } } @media screen and (max-width: 1023px) { .rent-filter { max-width: 335px; width: 100vw; background: var(--f5f5f5, #f5f5f5); padding-top: 40px; padding-left: 20px; padding-right: 20px; padding-bottom: 60px; } .rent-filter__title { color: var(--1A1A1A, #1a1a1a); font-family: BIZ UDPGothic; font-size: 24px; font-style: normal; font-weight: 700; line-height: 150%; /* 36px */ letter-spacing: 2.4px; padding-bottom: 9px; border-bottom: 1px solid var(--MIKIblue, #005282); } .rent-filter__current { margin-top: 32px; } .rent-filter__current-title { color: var(--333333, #333); font-family: BIZ UDPGothic; font-size: 16px; font-style: normal; font-weight: 700; line-height: 150%; /* 24px */ letter-spacing: 1.6px; padding-bottom: 9px; border-bottom: 1px solid var(--707070, #707070); } .rent-filter__current-list { display: grid; gap: 10px; margin-top: 20px; } .rent-filter__filter { margin-top: 20px; } .rent-filter__advance-filter { margin-top: 20px; } .rent-filter__advance-filter .advance-filter__body { background-color: inherit; padding: 0; } .rent-filter__count { margin-top: 50px; color: #000; font-family: BIZ UDPGothic; font-size: 24px; font-style: normal; font-weight: 700; line-height: 150%; /* 36px */ letter-spacing: 2.4px; text-align: center; } .rent-filter__number { display: inline-block; color: var(--MIKIblue, #005282); font-family: Montserrat; font-size: 64px; font-style: normal; font-weight: 600; line-height: 90%; /* 57.6px */ margin-left: 10px; margin-right: 10px; } .rent-filter__search-button { margin: auto; max-width: 320px; margin-top: 20px; } } @media screen and (min-width: 1024px) { .preview-wrapper__body { padding-top: 80px; padding-left: 20px; padding-right: 20px; padding-bottom: 80px; display: grid; grid-template-columns: minmax(0, 1200px); justify-content: center; } .preview-wrapper__aside { background-color: #fff; display: grid; grid-template-columns: minmax(0, 1200px); padding-left: 20px; padding-right: 20px; justify-content: center; } } @media screen and (max-width: 1023px) { .preview-wrapper__body { padding-top: 50px; padding-left: 20px; padding-right: 20px; padding-bottom: 70px; } } @media screen and (min-width: 1024px) { .preview { background: #fff; box-shadow: 0px 0px 8px 0px rgba(0, 0, 0, 0.16); padding-top: 48px; padding-left: 80px; padding-right: 80px; padding-bottom: 80px; } .preview__header { display: flex; align-items: end; padding-bottom: 9px; border-bottom: 1px solid var(--MIKIblue, #005282); } .preview__title { color: var(--MIKIblue, #005282); font-family: BIZ UDPGothic; font-size: 36px; font-style: normal; font-weight: 700; line-height: 150%; /* 54px */ letter-spacing: 3.6px; flex-grow: 1; } .preview__no-text { flex-grow: 0; flex-shrink: 0; color: var(--333333, #333); font-family: BIZ UDPGothic; font-size: 12px; font-style: normal; font-weight: 400; line-height: 150%; /* 18px */ letter-spacing: 1.2px; vertical-align: bottom; } .preview__no { color: var(--333333, #333); font-family: Montserrat; font-size: 14px; font-style: normal; font-weight: 500; line-height: 150%; /* 21px */ letter-spacing: 1.4px; } .preview__main-block { display: flex; gap: 48px; margin-top: 32px; } .preview__images { width: 48.84615385%; } .preview__button { display: grid; grid-template-columns: 320px; justify-content: center; margin-top: 48px; } .preview__room-table { margin-top: 32px; } .preview__note { margin-top: 48px; color: var(--333333, #333); font-family: BIZ UDPGothic; font-size: 12px; font-style: normal; font-weight: 400; line-height: 150%; /* 18px */ letter-spacing: 1.2px; } .preview__outline-section, .preview__map-section { margin-top: 80px; } .preview__outline-section p { line-height: 1.6; } .preview__body-title, .preview__room-title, .preview__outline-title, .preview__map-title { color: var(--1A1A1A, #1a1a1a); font-family: BIZ UDPGothic; font-size: 24px; font-style: normal; font-weight: 700; line-height: 150%; /* 36px */ letter-spacing: 2.4px; padding-bottom: 9px; border-bottom: 1px solid var(--MIKIblue, #005282); } .preview__body-title, .preview__outline, .preview__map { margin-top: 20px; } .preview__map-body { height: 520px; } .preview__room-title { margin-bottom: 20px; } } @media screen and (max-width: 1023px) { .preview { background: #fff; box-shadow: 0px 0px 8px 0px rgba(0, 0, 0, 0.16); padding-top: 30px; padding-left: 20px; padding-right: 20px; padding-bottom: 60px; } .preview__header { padding-bottom: 9px; border-bottom: 1px solid var(--MIKIblue, #005282); } .preview__title { color: var(--MIKIblue, #005282); font-family: BIZ UDPGothic; font-size: 24px; font-style: normal; font-weight: 700; line-height: 150%; /* 36px */ letter-spacing: 2.4px; } .preview__no-text { color: var(--333333, #333); font-family: BIZ UDPGothic; font-size: 12px; font-style: normal; font-weight: 400; line-height: 150%; /* 18px */ letter-spacing: 1.2px; margin-top: 2px; } .preview__no { color: var(--333333, #333); font-family: Montserrat; font-size: 14px; font-style: normal; font-weight: 500; line-height: 150%; /* 21px */ letter-spacing: 1.4px; } .preview__main-block { margin-top: 32px; } .preview__detail { margin-top: 48px; } .preview__button { margin-top: 48px; } .preview__room-table { margin-top: 32px; } .preview__note { margin-top: 48px; color: var(--333333, #333); font-family: BIZ UDPGothic; font-size: 12px; font-style: normal; font-weight: 400; line-height: 150%; /* 18px */ letter-spacing: 0.72px; } .preview__body-title, .preview__outline-section, .preview__map-section { margin-top: 50px; } .preview__body-title, .preview__room-title, .preview__outline-title, .preview__map-title { color: var(--1A1A1A, #1a1a1a); font-family: BIZ UDPGothic; font-size: 24px; font-style: normal; font-weight: 700; line-height: 150%; /* 36px */ letter-spacing: 2.4px; padding-bottom: 9px; border-bottom: 1px solid var(--MIKIblue, #005282); } .preview__outline, .preview__map { margin-top: 20px; } .preview__room-title { margin-bottom: 20px; } .preview__map-body { height: 500px; } .preview__outline-section p { line-height: 1.6; } } @media screen and (min-width: 1024px) { .preview-images { padding-left: 74px; padding-right: 74px; padding-top: 32px; padding-bottom: 32px; background: var(--f5f5f5, #f5f5f5); position: relative; } .preview-images__arrow { position: absolute; top: 0; bottom: 0; margin: auto; width: 32px; height: 32px; padding-top: 10px; padding-bottom: 10px; padding-left: 8px; padding-right: 8px; background: var(--1A1A1A, #1a1a1a); cursor: pointer; } .preview-images__arrow--prev { left: 32px; } .preview-images__arrow--next { right: 32px; } .preview-images__thumbnails { margin-top: 10px; } } @media screen and (max-width: 1023px) { .preview-images { padding-left: 52px; padding-right: 52px; padding-top: 30px; padding-bottom: 30px; background: var(--f5f5f5, #f5f5f5); position: relative; } .preview-images__arrow { position: absolute; top: 0; bottom: 0; margin: auto; width: 32px; height: 32px; padding-top: 10px; padding-bottom: 10px; padding-left: 8px; padding-right: 8px; background: var(--1A1A1A, #1a1a1a); cursor: pointer; } .preview-images__arrow--prev { left: 10px; } .preview-images__arrow--next { right: 10px; } .preview-images__thumbnails { margin-top: 10px; } } @media screen and (min-width: 1024px) { .preview-thumbnails__slide { width: 38px; } .preview-thumbnails__wrapper { justify-content: center; gap: 10px; position: relative; } .preview-thumbnails__slide::before { content: ""; display: block; position: absolute; inset: 0; background-color: #000; opacity: 0.5; transition: 0.25s; } .preview-thumbnails__slide.swiper-slide-thumb-active::before { opacity: 0; } } @media screen and (max-width: 1023px) { .preview-thumbnails__slide { width: 38px; } .preview-thumbnails__wrapper { justify-content: center; gap: 10px; position: relative; } .preview-thumbnails__slide::before { content: ""; display: block; position: absolute; inset: 0; background-color: #000; opacity: 0.5; transition: 0.25s; } .preview-thumbnails__slide.swiper-slide-thumb-active::before { opacity: 0; } } @media screen and (min-width: 1024px) { .preview-detail { display: grid; gap: 10px; } .preview-detail__row { display: grid; grid-template-columns: minmax(97px, auto) 1fr; border-bottom: 1px dotted var(--707070, #707070); padding-bottom: 9px; } .preview-detail__label { color: var(--333333, #333); font-family: BIZ UDPGothic; font-size: 16px; font-style: normal; font-weight: 400; line-height: 150%; /* 24px */ letter-spacing: 1.6px; padding-right: 1em; } .preview-detail__item { color: var(--333333, #333); font-family: BIZ UDPGothic; font-size: 16px; font-style: normal; font-weight: 400; line-height: 150%; /* 24px */ letter-spacing: 1.6px; } .preview-detail__list { display: grid; gap: 10px; } .preview-detail__list-item { color: var(--333333, #333); font-family: BIZ UDPGothic; font-size: 14px; font-style: normal; font-weight: 400; line-height: 120%; /* 16.8px */ letter-spacing: 1.4px; } .preview-detail__list-item + .preview-detail__list-item { padding-top: 9px; border-top: 1px dotted var(--CCCCCC, #ccc); } } @media screen and (max-width: 1023px) { .preview-detail { display: grid; gap: 10px; } .preview-detail__row { display: grid; grid-template-columns: minmax(97px, auto) 1fr; border-bottom: 1px dotted var(--707070, #707070); padding-bottom: 9px; } .preview-detail__label { color: var(--333333, #333); font-family: BIZ UDPGothic; font-size: 16px; font-style: normal; font-weight: 400; line-height: 150%; /* 24px */ letter-spacing: 1.6px; } .preview-detail__item { color: var(--333333, #333); font-family: BIZ UDPGothic; font-size: 16px; font-style: normal; font-weight: 400; line-height: 150%; /* 24px */ letter-spacing: 1.6px; } .preview-detail__list { display: grid; gap: 10px; } .preview-detail__list-item { color: var(--333333, #333); font-family: BIZ UDPGothic; font-size: 14px; font-style: normal; font-weight: 400; line-height: 120%; /* 16.8px */ letter-spacing: 1.4px; } .preview-detail__list-item + .preview-detail__list-item { padding-top: 9px; border-top: 1px dotted var(--CCCCCC, #ccc); } } @media screen and (min-width: 1024px) { .preview-request-button { display: grid; gap: 10px; grid-template-columns: auto 12px; justify-content: center; align-items: center; padding-top: 20px; padding-bottom: 20px; background: var(--CV, #fa5c03); box-shadow: 3px 3px 8px 0px rgba(0, 0, 0, 0.16); transition: 0.25s; } .preview-request-button__label { color: #fff; font-family: BIZ UDPGothic; font-size: 16px; font-style: normal; font-weight: 700; line-height: 150%; /* 24px */ letter-spacing: 1.6px; } .preview-request-button:hover { opacity: 0.5; } } @media screen and (max-width: 1023px) { .preview-request-button { display: grid; gap: 10px; grid-template-columns: auto 12px; justify-content: center; align-items: center; padding-top: 20px; padding-bottom: 20px; background: var(--CV, #fa5c03); box-shadow: 3px 3px 8px 0px rgba(0, 0, 0, 0.16); } .preview-request-button__label { color: #fff; font-family: BIZ UDPGothic; font-size: 16px; font-style: normal; font-weight: 700; line-height: 150%; /* 24px */ letter-spacing: 1.6px; } } @media screen and (min-width: 1024px) { .preview-room-table { position: relative; /*overflow: hidden;*/ } .preview-room-table:has(.preview-room-table__row:nth-of-type(4)) { min-height: 160px; } .preview-room-table__body { width: 100%; border: none; } .preview-room-table__head { background: var(--E7F1F8, #e7f1f8); text-align: center; } /* .preview-room-table__row:nth-of-type(even) { background: var(--FAFAFA, #fafafa); }*/ .preview-room-table__row.gray, .rent-room-table__row.gray { background: var(--FAFAFA, #fafafa); } .preview-room-table__head-cell { color: var(--333333, #333); font-family: BIZ UDPGothic; font-size: 16px; font-style: normal; font-weight: 400; line-height: 150%; /* 24px */ letter-spacing: 1.6px; padding-top: 4px; padding-bottom: 4px; min-width: 80px; } .preview-room-table__row.gray .preview-room-table__head-cell { font-size: 12px; } .preview-room-table__head-cell:last-child { text-align: left; width: 222px; } .preview-room-table__cell { color: var(--333333, #333); font-family: BIZ UDPGothic; font-size: 16px; font-style: normal; font-weight: 400; line-height: 120%; /* 19.2px */ height: 48px; vertical-align: middle; text-align: center; } .preview-room-table__cell span { color: var(--333333, #333); font-family: BIZ UDPGothic; font-size: 12px; font-style: normal; font-weight: 400; line-height: 120%; display: inline-block; margin-left: 0.5em; } .preview-room-table__button-list { display: flex; gap: 10px; } .preview-room-table__add-button { width: 110px; display: inline-block; } .preview-room-table__request-button { width: 102px; display: inline-block; } .preview-room-table__more-block { position: absolute; left: 0; bottom: 0; width: 100%; height: 80px; background: linear-gradient( 180deg, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.8) 56.13%, #fff 100% ); transition: 0.25s; } .preview-room-table.open .preview-room-table__more-block { opacity: 0; pointer-events: none; } .preview-room-table__more-button { position: absolute; left: 0; right: 0; bottom: 0; margin: auto; width: 120px; display: grid; grid-template-columns: auto 20px; place-items: center; cursor: pointer; gap: 10px; } .preview-room-table__more-button-label { color: var(--333333, #333); font-family: BIZ UDPGothic; font-size: 16px; font-style: normal; font-weight: 400; line-height: 150%; /* 24px */ letter-spacing: 1.6px; } .preview-room-table__more-button-icon { width: 20px; height: 20px; background: var(--1A1A1A, #1a1a1a); position: relative; } .preview-room-table__more-button-icon::before, .preview-room-table__more-button-icon::after { content: ""; display: block; position: absolute; inset: 0; margin: auto; width: 12px; height: 1px; background-color: #fff; } .preview-room-table__more-button-icon::after { rotate: 90deg; } } @media screen and (max-width: 1023px) { .preview-room-table { position: relative; /*overflow: hidden;*/ } .preview-room-table:has(.preview-room-table__row:nth-of-type(4)) { min-height: 150px; } .preview-room-table__body { display: none; } .preview-room-table__more-block { position: absolute; left: 0; bottom: 0; width: 100%; height: 60px; background: linear-gradient( 180deg, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.8) 56.13%, #fff 100% ); transition: 0.25s; } .preview-room-table.open .preview-room-table__more-block { opacity: 0; pointer-events: none; } .preview-room-table__more-button { position: absolute; left: 0; right: 0; bottom: 0; margin: auto; width: 120px; display: grid; grid-template-columns: auto 20px; place-items: center; cursor: pointer; } .preview-room-table__more-button-label { color: var(--333333, #333); font-family: BIZ UDPGothic; font-size: 16px; font-style: normal; font-weight: 400; line-height: 150%; /* 24px */ letter-spacing: 1.6px; } .preview-room-table__more-button-icon { width: 20px; height: 20px; background: var(--1A1A1A, #1a1a1a); position: relative; } .preview-room-table__more-button-icon::before, .preview-room-table__more-button-icon::after { content: ""; display: block; position: absolute; inset: 0; margin: auto; width: 12px; height: 1px; background-color: #fff; } .preview-room-table__more-button-icon::after { rotate: 90deg; } .preview-room-table__sp-body { display: grid; gap: 2px; } .preview-room-table__sp-button-block + .preview-room-table__sp-item { margin-top: 20px; } .preview-room-table__sp-row { display: grid; grid-template-columns: 120px 1fr; background: #fafafa; } .preview-room-table__sp-row:nth-of-type(even) { background: var(--FAFAFA, #fafafa); } .preview-room-table__sp-row + .preview-room-table__sp-row { margin-top: 3px; } .preview-room-table__sp-row:last-child .preview-room-table__sp-dd { padding-top: 4px; padding-bottom: 5px; } .preview-room-table__sp-add-button { width: 100px; } .preview-room-table__sp-dt { background: #e7f1f8; color: var(--333333, #333); font-family: Montserrat; font-size: 12px; font-style: normal; font-weight: 400; line-height: 150%; /* 18px */ padding-top: 7px; padding-bottom: 7px; text-align: center; } .preview-room-table__sp-dd { color: var(--333333, #333); font-family: Montserrat; font-size: 12px; font-style: normal; font-weight: 400; line-height: 150%; /* 18px */ padding-top: 7px; padding-bottom: 7px; padding-left: 20px; padding-right: 10px; } .preview-room-table__sp-button-block { display: grid; grid-template-columns: 128px; justify-content: center; margin-top: 20px; } .preview-room-table__sp-button { display: grid; padding-top: 9px; padding-bottom: 9px; justify-content: center; align-items: center; grid-template-columns: auto 10px; gap: 3px; background: var(--CV, #fa5c03); } .preview-room-table__sp-button-label { color: var(--FAFAFA, #fafafa); font-family: BIZ UDPGothic; font-size: 14px; font-style: normal; font-weight: 400; line-height: 100%; /* 14px */ letter-spacing: 1.4px; } } @media screen and (min-width: 1024px) { .preview-aside { padding-top: 80px; padding-bottom: 80px; } .preview-aside__title { color: var(--1A1A1A, #1a1a1a); font-family: BIZ UDPGothic; font-size: 24px; font-style: normal; font-weight: 700; line-height: 150%; /* 36px */ letter-spacing: 2.4px; padding-bottom: 9px; border-bottom: 1px solid var(--MIKIblue, #005282); } .page__feature .preview-aside__title, .page__feature .preview-aside__list, .page__feature .preview-aside__button.__resemble { display: none; } .preview-aside__title-note { color: var(--333333, #333); font-family: Montserrat; font-size: 24px; font-style: normal; font-weight: 500; line-height: 150%; /* 36px */ letter-spacing: 2.4px; } .preview-aside__title-no { color: var(--MIKIblue, #005282); font-family: Montserrat; font-size: 24px; font-style: normal; font-weight: 600; line-height: 150%; letter-spacing: 2.4px; } .preview-aside__title-no-unit { color: var(--333333, #333); font-family: BIZ UDPGothic; font-size: 16px; font-style: normal; font-weight: 700; line-height: 150%; letter-spacing: 1.6px; } .preview-aside__list { display: grid; grid-template-columns: repeat(5, 1fr); gap: 10px; margin-top: 32px; } .preview-aside__button { margin-top: 64px; display: grid; grid-template-columns: 320px; justify-content: center; } .preview-aside__button + .preview-aside__button { margin-top: 32px; } } @media screen and (max-width: 1023px) { .preview-aside { padding-bottom: 80px; } .preview-aside__title { color: var(--1A1A1A, #1a1a1a); font-family: BIZ UDPGothic; font-size: 24px; font-style: normal; font-weight: 700; line-height: 150%; /* 36px */ letter-spacing: 2.4px; padding-bottom: 9px; border-bottom: 1px solid var(--MIKIblue, #005282); margin-left: 20px; margin-right: 20px; } .preview-aside__title-note { color: var(--333333, #333); font-family: Montserrat; font-size: 24px; font-style: normal; font-weight: 500; line-height: 150%; /* 36px */ letter-spacing: 2.4px; } .preview-aside__title-no { color: var(--MIKIblue, #005282); font-family: Montserrat; font-size: 24px; font-style: normal; font-weight: 600; line-height: 150%; letter-spacing: 2.4px; } .preview-aside__title-no-unit { color: var(--333333, #333); font-family: BIZ UDPGothic; font-size: 16px; font-style: normal; font-weight: 700; line-height: 150%; letter-spacing: 1.6px; } .preview-aside__sp-carousel { margin-top: 60px; } .preview-aside__button { margin-top: 60px; padding-left: 20px; padding-right: 20px; } .preview-aside__button + .preview-aside__button { margin-top: 20px; } } @media screen and (min-width: 1024px) { .preview-aside-card { box-shadow: 3px 3px 8px 0px rgba(0, 0, 0, 0.16); display: block; height: 100%; transition: 0.25s; } .preview-aside-card__body { padding-left: 20px; padding-right: 20px; padding-top: 20px; padding-bottom: 30px; display: grid; gap: 8px; } .preview-aside-card__title { color: #000; font-family: BIZ UDPGothic; font-size: 16px; font-style: normal; font-weight: 700; line-height: 150%; /* 24px */ letter-spacing: 1.6px; } .preview-aside-card__address { color: #000; font-family: BIZ UDPGothic; font-size: 14px; font-style: normal; font-weight: 400; line-height: 150%; /* 21px */ letter-spacing: 1.4px; border-bottom: 1px solid var(--CCCCCC, #ccc); } .preview-aside-card__access { color: #000; font-family: BIZ UDPGothic; font-size: 14px; font-style: normal; font-weight: 400; line-height: 150%; /* 21px */ letter-spacing: 1.4px; border-bottom: 1px solid var(--CCCCCC, #ccc); } .preview-aside-card:hover { opacity: 0.5; } } @media screen and (max-width: 1023px) { .preview-aside-card { box-shadow: 3px 3px 8px 0px rgba(0, 0, 0, 0.16); display: block; height: 100%; } .preview-aside-card__body { padding-left: 20px; padding-right: 20px; padding-top: 20px; padding-bottom: 30px; display: grid; gap: 8px; } .preview-aside-card__title { color: #000; font-family: BIZ UDPGothic; font-size: 16px; font-style: normal; font-weight: 700; line-height: 150%; /* 24px */ letter-spacing: 1.6px; } .preview-aside-card__address { color: #000; font-family: BIZ UDPGothic; font-size: 14px; font-style: normal; font-weight: 400; line-height: 150%; /* 21px */ letter-spacing: 1.4px; border-bottom: 1px solid var(--CCCCCC, #ccc); } .preview-aside-card__access { color: #000; font-family: BIZ UDPGothic; font-size: 14px; font-style: normal; font-weight: 400; line-height: 150%; /* 21px */ letter-spacing: 1.4px; border-bottom: 1px solid var(--CCCCCC, #ccc); } } @media screen and (min-width: 1024px) { .preview-aside-button { display: grid; grid-template-columns: auto 12px; gap: 10px; justify-content: center; align-items: center; padding-top: 20px; padding-bottom: 20px; box-shadow: 3px 3px 16px 0px rgba(0, 0, 0, 0.32); transition: 0.25s; } .preview-aside-button--primary { border: 1px solid transparent; background: var(--MIKIblue, #005282); color: #fff; } .preview-aside-button--secondary { border: 1px solid var(--MIKIblue, #005282); background: #fff; color: var(--MIKIblue, #005282); } .preview-aside-button__label { font-family: BIZ UDPGothic; font-size: 16px; font-style: normal; font-weight: 700; line-height: 150%; /* 24px */ letter-spacing: 1.6px; } .preview-aside-button:hover { opacity: 0.5; } } @media screen and (max-width: 1023px) { .preview-aside-button { display: grid; grid-template-columns: auto 12px; gap: 10px; justify-content: center; align-items: center; padding-top: 20px; padding-bottom: 20px; box-shadow: 3px 3px 16px 0px rgba(0, 0, 0, 0.32); } .preview-aside-button--primary { border: 1px solid transparent; background: var(--MIKIblue, #005282); color: #fff; } .preview-aside-button--secondary { border: 1px solid var(--MIKIblue, #005282); background: #fff; color: var(--MIKIblue, #005282); } .preview-aside-button__label { font-family: BIZ UDPGothic; font-size: 16px; font-style: normal; font-weight: 700; line-height: 150%; /* 24px */ letter-spacing: 1.6px; } } @media screen and (max-width: 1023px) { .preview-aside-carousel__wrapper { padding-left: 20px; padding-right: 20px; padding-bottom: 30px; } .preview-aside-carousel__item { width: 275px; } .preview-aside-carousel__controls { display: grid; grid-template-columns: repeat(2, 132px); gap: 10px; justify-content: center; } .preview-aside-carousel__arrow { display: grid; grid-template-columns: 15px; justify-content: center; background: var(--707070, #707070); box-shadow: 3px 3px 8px 0px rgba(0, 0, 0, 0.16); padding-top: 17.5px; padding-bottom: 17.5px; transition: 0.25s; } .preview-aside-carousel__arrow.swiper-button-disabled { opacity: 0.5; } } @media screen and (min-width: 1024px) { .request { padding-top: 96px; } .request__bg { position: fixed; left: 0; top: 0; width: 100%; height: 100vh; background-image: url(/assets/images/pc/rent/request/request@2x.jpg); background-repeat: no-repeat; background-size: cover; background-position: center center; z-index: -1; } .request__header { display: grid; grid-template-columns: minmax(0, 740px); justify-content: center; margin-top: 20px; } .request__header--single { grid-template-columns: 1fr; } .request__header--single .request__text { text-align: center; } .request__title { color: #fff; font-family: BIZ UDPGothic; font-size: 32px; font-style: normal; font-weight: 700; line-height: 150%; /* 48px */ letter-spacing: 3.2px; text-align: center; } .request__title::after { content: ""; display: block; height: 3px; width: 80px; background: var(--logo-Lightblue, #9bccee); margin: auto; margin-top: 10px; } .request__text { color: #fff; font-family: BIZ UDPGothic; font-size: 16px; font-style: normal; font-weight: 400; line-height: 150%; /* 24px */ letter-spacing: 1.6px; } .request__body { display: grid; margin: auto; max-width: 1292px; padding-left: 20px; padding-right: 20px; justify-content: center; margin-top: 48px; padding-bottom: 128px; align-items: flex-start; grid-template-columns: minmax(0, 960px); } .request__tel { background: rgba(26, 26, 26, 0.9); padding-left: 20px; padding-right: 20px; } .request__count-block { display: flex; gap: 32px; align-items: center; margin-top: 20px; } .request__count { color: #fff; font-family: BIZ UDPGothic; font-size: 18px; font-style: normal; font-weight: 400; line-height: 150%; /* 27px */ letter-spacing: 1.8px; } .request__count span { font-size: 32px; font-weight: 700; letter-spacing: 3.2px; } .request__open-button { background: var(--1A1A1A, #1a1a1a); box-shadow: 3px 3px 8px 0px rgba(0, 0, 0, 0.32); display: grid; grid-template-columns: auto 32px; justify-content: center; padding-left: 32px; padding-right: 32px; padding-top: 8px; padding-bottom: 8px; align-items: center; cursor: pointer; transition: 0.25s; } .request__open-button:hover { opacity: 0.5; } .request__open-button-label { color: #fff; font-family: BIZ UDPGothic; font-size: 16px; font-style: normal; font-weight: 700; line-height: 150%; /* 24px */ letter-spacing: 1.6px; } .request__open-button-icon { position: relative; height: 32px; } .request__open-button-icon::before, .request__open-button-icon::after { content: ""; display: block; width: 15px; height: 1px; position: absolute; inset: 0; margin: auto; background-color: #fff; } .request__open-button-icon::after { rotate: 90deg; transition: 0.25s; } .request__open-button.open .request__open-button-icon::after { rotate: 0deg; } .request__open-button .request__list-block { position: relative; height: 100%; } .request__list { overflow: hidden; transition: 0.25s; } .request__body--single { grid-template-columns: 1fr; max-width: 768px; } .request__nav-button { position: fixed; left: calc(50% + 480px + 20px); bottom: 20px; width: 96px; pointer-events: none; opacity: 0; transition: 0.25s; } .request__nav-button.show { opacity: 1; pointer-events: auto; } } @media screen and (min-width: 1024px) and (max-width: 1254px) { .request__nav-button { left: auto; right: 20px; } } @media screen and (min-width: 1024px) { .request-nav-button { background: var(--1A1A1A, #1a1a1a); box-shadow: 3px 3px 8px 0px rgba(0, 0, 0, 0.32); display: grid; justify-items: center; align-content: center; height: 96px; gap: 12px; transition: 0.25s; } .request-nav-button__label { color: #fff; font-family: BIZ UDPGothic; font-size: 13px; font-style: normal; font-weight: 700; line-height: 130%; /* 16.9px */ letter-spacing: 1.3px; } .request-nav-button__icon { width: 16.46px; } .request-nav-button:hover { opacity: 0.5; } .request-list { padding-bottom: 48px; } .request-list__body { display: grid; gap: 48px; } .request-form { display: block; background: #fff; box-shadow: 0px 0px 8px 0px rgba(0, 0, 0, 0.16); padding: 80px; } .request-form__row + .request-form__row { margin-top: 10px; } .request-form__submit-button { display: grid; grid-template-columns: 225px; justify-content: center; margin-top: 32px; } .request-form__title { color: #000; font-family: BIZ UDPGothic; font-size: 20px; font-style: normal; font-weight: 400; line-height: 150%; /* 30px */ letter-spacing: 2px; border-bottom: 1px solid var(--333333, #333); padding-bottom: 9px; } .request-form__title + .request-form__row { margin-top: 32px; } .request-row { display: grid; grid-template-columns: 133px 1fr; align-items: center; } .request-row--demand { grid-template-columns: 1fr; } .request-row--address { grid-template-columns: 1fr; } .request-row--hope { grid-template-columns: 1fr; } .request-row--detail { grid-template-columns: 1fr; } .request-row--detail .request-row__textbox { margin-top: 3px; } .request-row__title { color: #707070; font-family: BIZ UDPGothic; font-size: 14px; font-style: normal; font-weight: 400; line-height: 150%; /* 21px */ } .request-row__tag { color: #fff; font-family: BIZ UDPGothic; font-size: 10px; font-style: normal; font-weight: 400; line-height: 150%; /* 15px */ padding-left: 5px; padding-right: 5px; padding-top: 1px; display: inline-block; background: var(--MIKIblue, #005282); vertical-align: middle; margin-left: 3px; } .request-row__checkbox-list { display: flex; flex-wrap: wrap; gap: 3px 30px; margin-top: 4px; } .request-row__address-list { display: grid; gap: 10px; margin-top: 3px; } .request-row__hope-list { display: grid; gap: 10px; margin-top: 3px; } .request-row__textbox + .request-row__checkbox { margin-top: 3px; } .request-row__error { grid-column: 2/3; font-size: 10px; margin-top: 4px; color: #ff0000; } .request-row--demand .request-row__error { grid-column: 1/2; } .request-row--detail .request-row__error { grid-column: 1/2; } .request-address-row { display: grid; grid-template-columns: 128px 1fr; align-items: center; gap: 0 10px; } .request-hope-row { display: grid; grid-template-columns: 128px 1fr; align-items: center; gap: 0 10px; padding-bottom: 16px; } .request-address-row__label { width: 96px; flex-shrink: 0; flex-grow: 0; color: #707070; font-family: BIZ UDPGothic; font-size: 14px; font-style: normal; font-weight: 400; line-height: 150%; /* 21px */ text-align: right; } .request-hope-row__label { width: 96px; flex-shrink: 0; flex-grow: 0; color: #707070; font-family: BIZ UDPGothic; font-size: 14px; font-style: normal; font-weight: 400; line-height: 150%; /* 21px */ text-align: right; } .request-address-row__body { display: flex; gap: 32px; } .request-hope-row__body { display: flex; gap: 32px; } .request-address-row__button { flex-shrink: 0; flex-grow: 0; width: 128px; } .request-address-row__textbox { flex-grow: 1; } .request-address-row__selectbox { flex-grow: 1; } .request-address-row__error { grid-column: 2/3; font-size: 10px; margin-top: 4px; color: #ff0000; } .request-hope-row__error { grid-column: 2/3; font-size: 10px; margin-top: 4px; color: #ff0000; } .request-hope-row__note { grid-column: 2/3; font-size: 12px; margin-top: 4px; margin-bottom: 4px; } .request-address-button { background: var(--MIKIblue, #005282); color: #e2e2e2; font-family: BIZ UDPGothic; font-size: 14px; font-style: normal; font-weight: 400; line-height: 150%; /* 21px */ text-align: center; width: 100%; height: 100%; cursor: pointer; transition: 0.25s; } .request-address-button:hover { opacity: 0.5; } .request-address-selectbox__body { border-radius: 5px; border: 1px solid #d9d9d9; background: #fff; width: 100%; color: var(--333333, #333); font-family: BIZ UDPGothic; font-size: 14px; font-style: normal; font-weight: 400; line-height: 150%; /* 21px */ letter-spacing: 2.66px; padding-top: 8px; padding-bottom: 9px; padding-left: 9px; padding-right: 9px; } .request-form-submit-button { display: grid; grid-template-columns: auto 12px; justify-content: center; align-items: center; padding-top: 12px; padding-bottom: 12px; background: var(--CV, #fa5c03); box-shadow: 3px 3px 8px 0px rgba(0, 0, 0, 0.16); cursor: pointer; transition: 0.25s; } .request-form-submit-button__label { color: #fff; text-align: center; font-family: BIZ UDPGothic; font-size: 16px; font-style: normal; font-weight: 700; line-height: 150%; /* 24px */ letter-spacing: 1.6px; } .request-form-submit-button:hover { opacity: 0.5; } .request-tel { padding-top: 57px; padding-bottom: 57px; } .request-tel__text { color: var(--f5f5f5, #f5f5f5); text-align: center; font-family: BIZ UDPGothic; font-size: 14px; font-style: normal; font-weight: 400; line-height: 150%; /* 21px */ letter-spacing: 1.4px; } .request-tel__tel-block { display: grid; justify-content: center; grid-template-columns: 48px auto; gap: 10px; align-items: center; margin-top: 3px; } .request-tel__tel { color: var(--f5f5f5, #f5f5f5); font-family: Montserrat; font-size: 36px; font-style: normal; font-weight: 600; line-height: 100%; /* 36px */ letter-spacing: 1.8px; } .request-tel__time { color: var(--f5f5f5, #f5f5f5); font-family: BIZ UDPGothic; font-size: 10px; font-style: normal; font-weight: 400; line-height: 150%; /* 15px */ letter-spacing: 0.7px; text-align: center; margin-top: 3px; } .request-card { display: block; background: #fff; box-shadow: 0px 0px 8px 0px rgba(0, 0, 0, 0.16); padding: 64px 80px; } .request-card__head { position: relative; display: grid; grid-template-columns: 141px 1fr; gap: 32px; align-items: end; } .request-card__checkbox { position: absolute; right: calc(50% + 106px); top: 0; bottom: 0; height: 20px; margin: auto; } .request-card__image { width: 141px; margin: auto; } .request-card__title { color: var(--MIKIblue, #005282); font-family: BIZ UDPGothic; font-size: 16px; font-style: normal; font-weight: 700; line-height: 150%; /* 24px */ letter-spacing: 1.6px; border-bottom: 1px solid var(--MIKIblue, #005282); margin-top: 10px; } .request-card__table { display: grid; gap: 10px; } .request-card__row { padding-bottom: 9px; border-bottom: 1px dotted var(--707070, #707070); display: grid; grid-template-columns: 64px 1fr; } .request-card__dt { color: var(--333333, #333); font-family: BIZ UDPGothic; font-size: 16px; font-style: normal; font-weight: 400; line-height: 150%; /* 24px */ } .request-card__dd { color: var(--333333, #333); font-family: BIZ UDPGothic; font-size: 16px; font-style: normal; font-weight: 400; line-height: 150%; /* 24px */ } .request-card__floor-table { margin-top: 32px; } .request-card-checkbox { cursor: pointer; } .request-card-checkbox__checkbox-body { display: none; } .request-card-checkbox__checkbox { width: 20px; height: 20px; border: 2px solid #b0b0b0; position: relative; flex-shrink: 0; } .request-card-checkbox__checkbox::before { content: ""; display: block; width: 14px; height: 8px; border-left: 3px solid #005282; border-bottom: 3px solid #005282; rotate: 0deg; opacity: 0; position: absolute; left: 2px; top: 2px; transition: 0.25s; } .request-card-checkbox__checkbox-body:checked + .request-card-checkbox__checkbox, .request-card-checkbox__checkbox--checked { border-color: #005282; } .request-card-checkbox__checkbox-body:checked + .request-card-checkbox__checkbox::before, .request-card-checkbox__checkbox--checked::before { opacity: 1; rotate: -45deg; } } @media screen and (max-width: 1023px) { .request { padding-top: 120px; } .request__bg { position: fixed; left: 0; top: 0; width: 100%; height: 100vh; background-image: url(/assets/images/sp/rent/request/request@2x.jpg); background-repeat: no-repeat; background-size: cover; background-position: center center; z-index: -1; } .request__header { display: grid; justify-content: center; margin-top: 20px; } .request__title { color: #fff; font-family: BIZ UDPGothic; font-size: 24px; font-style: normal; font-weight: 700; line-height: 150%; /* 36px */ letter-spacing: 2.4px; text-align: center; } .request__title::after { content: ""; display: block; height: 3px; width: 80px; background: var(--logo-Lightblue, #9bccee); margin: auto; margin-top: 10px; } .request__text { color: #fff; font-family: BIZ UDPGothic; font-size: 16px; font-style: normal; font-weight: 400; line-height: 150%; /* 24px */ letter-spacing: 1.44px; margin-top: 20px; padding-left: 20px; padding-right: 20px; } .request__body { display: grid; justify-content: center; grid-template-columns: 1fr; margin-top: 48px; padding-bottom: 100px; padding-left: 20px; padding-right: 20px; } .request__tel { background: rgba(26, 26, 26, 0.9); padding-left: 20px; padding-right: 20px; } .request__count-block { display: grid; gap: 3px; margin-top: 20px; padding-left: 20px; padding-right: 20px; } .request__count { color: #fff; font-family: BIZ UDPGothic; font-size: 18px; font-style: normal; font-weight: 400; line-height: 150%; /* 27px */ letter-spacing: 1.8px; } .request__count span { font-size: 32px; font-weight: 700; letter-spacing: 3.2px; } .request__open-button { background: var(--1A1A1A, #1a1a1a); box-shadow: 3px 3px 8px 0px rgba(0, 0, 0, 0.32); display: grid; grid-template-columns: auto 32px; justify-content: center; padding-left: 32px; padding-right: 32px; padding-top: 8px; padding-bottom: 8px; align-items: center; } .request__open-button-label { color: #fff; font-family: BIZ UDPGothic; font-size: 16px; font-style: normal; font-weight: 700; line-height: 150%; /* 24px */ letter-spacing: 1.6px; } .request__open-button-icon { position: relative; height: 32px; } .request__open-button-icon::before, .request__open-button-icon::after { content: ""; display: block; width: 15px; height: 1px; position: absolute; inset: 0; margin: auto; background-color: #fff; } .request__open-button-icon::after { rotate: 90deg; transition: 0.25s; } .request__open-button.open .request__open-button-icon::after { rotate: 0deg; } .request__list { overflow: hidden; transition: 0.25s; } .request__nav-button { position: fixed; right: 10px; bottom: 10px; width: 96px; pointer-events: none; opacity: 0; transition: 0.25s; } .request__nav-button.show { opacity: 1; pointer-events: auto; } .request-nav-button { background: var(--1A1A1A, #1a1a1a); box-shadow: 3px 3px 8px 0px rgba(0, 0, 0, 0.32); display: grid; justify-items: center; align-content: center; height: 96px; gap: 12px; } .request-nav-button__label { color: #fff; font-family: BIZ UDPGothic; font-size: 13px; font-style: normal; font-weight: 700; line-height: 130%; /* 16.9px */ letter-spacing: 1.3px; } .request-nav-button__icon { width: 16.46px; } .request-list { padding-bottom: 48px; } .request-list__body { display: grid; gap: 48px; } .request-form { display: block; background: #fff; box-shadow: 0px 0px 8px 0px rgba(0, 0, 0, 0.16); padding: 48px 32px; } .request-form__row + .request-form__row { margin-top: 16px; } .request-form__submit-button { display: grid; grid-template-columns: 225px; justify-content: center; margin-top: 32px; } .request-form__title { color: #000; font-family: BIZ UDPGothic; font-size: 20px; font-style: normal; font-weight: 400; line-height: 150%; /* 30px */ letter-spacing: 2px; border-bottom: 1px solid var(--333333, #333); padding-bottom: 9px; } .request-form__title + .request-form__row { margin-top: 20px; } .request-row { display: grid; } .request-row--detail .request-row__textbox { margin-top: 3px; } .request-row__title { color: #707070; font-family: BIZ UDPGothic; font-size: 14px; font-style: normal; font-weight: 400; line-height: 150%; /* 21px */ } .request-row__tag { color: #fff; font-family: BIZ UDPGothic; font-size: 10px; font-style: normal; font-weight: 400; line-height: 150%; /* 15px */ padding-left: 5px; padding-right: 5px; padding-top: 1px; display: inline-block; background: var(--MIKIblue, #005282); vertical-align: middle; margin-left: 3px; } .request-row__checkbox-list { display: grid; gap: 10px; margin-top: 11px; } .request-row__textbox { margin-top: 11px; } .request-row__address-list { display: grid; gap: 10px; margin-top: 11px; } .request-row__textbox + .request-row__checkbox { margin-top: 3px; } .request-row__error { font-size: 10px; margin-top: 4px; color: #ff0000; } .request-address-row { display: grid; } .request-address-row__label { color: #707070; font-family: BIZ UDPGothic; font-size: 14px; font-style: normal; font-weight: 400; line-height: 150%; /* 21px */ } .request-address-row__body { margin-top: 10px; display: flex; gap: 10px; } .request-address-row__button { flex-shrink: 0; flex-grow: 0; width: 114px; } .request-address-row__textbox { flex-grow: 1; } .request-address-row__selectbox { flex-grow: 1; } .request-address-row__error { font-size: 10px; margin-top: 4px; color: #ff0000; } .request-address-button { background: var(--MIKIblue, #005282); color: #e2e2e2; font-family: BIZ UDPGothic; font-size: 14px; font-style: normal; font-weight: 400; line-height: 150%; /* 21px */ text-align: center; width: 100%; height: 100%; cursor: pointer; transition: 0.25s; } .request-address-button:hover { opacity: 0.5; } .request-address-selectbox__body { border-radius: 5px; border: 1px solid #d9d9d9; background: #fff; width: 100%; color: var(--333333, #333); font-family: BIZ UDPGothic; font-size: 14px; font-style: normal; font-weight: 400; line-height: 150%; /* 21px */ letter-spacing: 2.66px; padding-top: 8px; padding-bottom: 9px; padding-left: 9px; padding-right: 9px; } /*.request-hope-row { display: grid; }*/ .request-hope-row__label { color: #707070; font-family: BIZ UDPGothic; font-size: 14px; font-style: normal; font-weight: 400; line-height: 150%; /* 21px */ padding-top: 11px; } .request-hope-row__body { margin-top: 10px; display: flex; gap: 10px; } .request-hope-row__button { flex-shrink: 0; flex-grow: 0; width: 114px; } .request-hope-row__textbox { flex-grow: 1; } .request-address-row__selectbox { flex-grow: 1; } .request-hope-row__error { font-size: 10px; margin-top: 4px; color: #ff0000; } .request-form-submit-button { display: grid; grid-template-columns: auto 12px; justify-content: center; align-items: center; padding-top: 12px; padding-bottom: 12px; background: var(--CV, #fa5c03); box-shadow: 3px 3px 8px 0px rgba(0, 0, 0, 0.16); } .request-form-submit-button__label { color: #fff; text-align: center; font-family: BIZ UDPGothic; font-size: 16px; font-style: normal; font-weight: 700; line-height: 150%; /* 24px */ letter-spacing: 1.6px; } .request-tel { padding-top: 57px; padding-bottom: 57px; } .request-tel__text { color: var(--f5f5f5, #f5f5f5); text-align: center; font-family: BIZ UDPGothic; font-size: 14px; font-style: normal; font-weight: 400; line-height: 150%; /* 21px */ letter-spacing: 1.4px; } .request-tel__tel-block { display: grid; justify-content: center; grid-template-columns: 48px auto; gap: 10px; align-items: center; margin-top: 3px; } .request-tel__tel { color: var(--f5f5f5, #f5f5f5); font-family: Montserrat; font-size: 36px; font-style: normal; font-weight: 600; line-height: 100%; /* 36px */ letter-spacing: 1.8px; } .request-tel__time { color: var(--f5f5f5, #f5f5f5); font-family: BIZ UDPGothic; font-size: 10px; font-style: normal; font-weight: 400; line-height: 150%; /* 15px */ letter-spacing: 0.7px; text-align: center; margin-top: 3px; } .request-card { display: block; background: #fff; box-shadow: 0px 0px 8px 0px rgba(0, 0, 0, 0.16); padding: 48px 20px; } .request-card__head { position: relative; } .request-card__checkbox { position: absolute; right: calc(50% + 106px); top: 0; bottom: 0; height: 20px; margin: auto; } .request-card__image { width: 141px; margin: auto; } .request-card__title { color: var(--MIKIblue, #005282); font-family: BIZ UDPGothic; font-size: 16px; font-style: normal; font-weight: 700; line-height: 150%; /* 24px */ letter-spacing: 1.6px; border-bottom: 1px solid var(--MIKIblue, #005282); margin-top: 10px; } .request-card__table { display: grid; gap: 10px; margin-top: 32px; } .request-card__row { padding-bottom: 9px; border-bottom: 1px dotted var(--707070, #707070); display: grid; grid-template-columns: 64px 1fr; align-items: center; } .request-card__dt { color: var(--333333, #333); font-family: BIZ UDPGothic; font-size: 16px; font-style: normal; font-weight: 400; line-height: 150%; /* 24px */ } .request-card__dd { color: var(--333333, #333); font-family: BIZ UDPGothic; font-size: 16px; font-style: normal; font-weight: 400; line-height: 150%; /* 24px */ } .request-card__floor-table { margin-top: 32px; } .request-card-checkbox__checkbox-body { display: none; } .request-card-checkbox__checkbox { width: 20px; height: 20px; border: 2px solid #b0b0b0; position: relative; flex-shrink: 0; } .request-card-checkbox__checkbox::before { content: ""; display: block; width: 14px; height: 8px; border-left: 3px solid #005282; border-bottom: 3px solid #005282; rotate: 0deg; opacity: 0; position: absolute; left: 2px; top: 2px; transition: 0.25s; } .request-card-checkbox__checkbox-body:checked + .request-card-checkbox__checkbox, .request-card-checkbox__checkbox--checked { border-color: #005282; } .request-card-checkbox__checkbox-body:checked + .request-card-checkbox__checkbox::before, .request-card-checkbox__checkbox--checked::before { opacity: 1; rotate: -45deg; } } @media screen and (min-width: 1024px) { .request-floor-table { position: relative; overflow: hidden; } .request-floor-table__body { width: 100%; border: none; } .request-floor-table__head { background: var(--E7F1F8, #e7f1f8); text-align: center; } .request-floor-table__row { border-bottom: 1px dotted var(--707070, #707070); background: #fff; } .request-floor-table__head-cell { color: var(--333333, #333); font-family: BIZ UDPGothic; font-size: 16px; font-style: normal; font-weight: 400; line-height: 150%; /* 24px */ letter-spacing: 1.6px; padding-top: 4px; padding-bottom: 4px; min-width: 80px; } .request-floor-table__head-cell:nth-of-type(1) { width: 200px; } .request-floor-table__cell { color: var(--333333, #333); text-align: center; font-family: BIZ UDPGothic; font-size: 14px; font-style: normal; font-weight: 400; line-height: 120%; /* 16.8px */ vertical-align: middle; text-align: center; padding-top: 11px; padding-bottom: 11px; position: relative; } .request-floor-table__cell span { color: var(--333333, #333); font-family: BIZ UDPGothic; font-size: 10px; font-style: normal; font-weight: 400; line-height: 120%; display: inline-block; margin-left: 0.5em; } .request-floor-table__cell:nth-of-type(1) { min-width: 200px; } .request-floor-table__checkbox { position: absolute; left: 20px; top: 10px; } .request-floor-table__button-list { display: flex; gap: 10px; } .request-floor-table__add-button { width: 110px; display: inline-block; } .request-floor-table__request-button { width: 102px; display: inline-block; } .request-floor-table__more-block { position: absolute; left: 0; bottom: 0; width: 100%; height: 80px; background: linear-gradient( 180deg, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.8) 56.13%, #fff 100% ); transition: 0.25s; } .request-floor-table.open .request-floor-table__more-block { opacity: 0; pointer-events: none; } .request-floor-table__more-button { position: absolute; left: 0; right: 0; bottom: 0; margin: auto; width: 120px; display: grid; grid-template-columns: auto 20px; place-items: center; cursor: pointer; gap: 10px; } .request-floor-table__more-button-label { color: var(--333333, #333); font-family: BIZ UDPGothic; font-size: 16px; font-style: normal; font-weight: 400; line-height: 150%; /* 24px */ letter-spacing: 1.6px; } .request-floor-table__more-button-icon { width: 20px; height: 20px; background: var(--1A1A1A, #1a1a1a); position: relative; } .request-floor-table__more-button-icon::before, .request-floor-table__more-button-icon::after { content: ""; display: block; position: absolute; inset: 0; margin: auto; width: 12px; height: 1px; background-color: #fff; } .request-floor-table__more-button-icon::after { rotate: 90deg; } } @media screen and (max-width: 1023px) { .sp-request-floor-table { position: relative; display: grid; gap: 20px; } .sp-request-floor-table__item { display: grid; gap: 10px; grid-template-columns: 20px 1fr; align-items: center; } .sp-request-floor-table__row + .sp-request-floor-table__row { border-top: 2px solid #fff; } .sp-request-floor-table__head-cell { background: #e7f1f8; color: var(--333333, #333); font-size: 12px; font-style: normal; font-weight: 400; line-height: 150%; /* 18px */ padding-top: 7px; padding-bottom: 7px; text-align: center; padding-left: 2px; padding-right: 2px; } .sp-request-floor-table__cell { color: var(--333333, #333); font-size: 12px; font-style: normal; font-weight: 400; line-height: 150%; /* 18px */ padding-left: 10px; padding-top: 7px; padding-bottom: 7px; padding-right: 2px; background: #fafafa; } } @media screen and (min-width: 1024px) { .thanks { padding-top: 128px; padding-bottom: 78px; background-image: url(/assets/images/pc/rent/request/request@2x.jpg); background-repeat: no-repeat; background-size: cover; min-height: calc(100vh - 46px); } .thanks__title { color: #fff; font-family: BIZ UDPGothic; font-size: 32px; font-style: normal; font-weight: 700; line-height: 150%; /* 48px */ letter-spacing: 3.2px; text-align: center; } .thanks__title::after { content: ""; display: block; width: 80px; height: 3px; margin: auto; margin-top: 10px; background: var(--logo-Lightblue, #9bccee); } .thanks__text { color: #fff; text-align: center; font-family: BIZ UDPGothic; font-size: 16px; font-style: normal; font-weight: 400; line-height: 180%; /* 28.8px */ letter-spacing: 1.6px; text-align: center; margin-top: 32px; } .thanks__tel { margin-top: 32px; } .thanks__button { display: grid; grid-template-columns: 240px; justify-content: center; margin-top: 32px; } .thanks__aside { margin-top: 48px; display: grid; grid-template-columns: minmax(0, 1200px); justify-content: center; padding-left: 20px; padding-right: 20px; } .thanks-tel__block { display: grid; grid-template-columns: 34px auto; gap: 10px; justify-content: center; } .thanks-tel__tel { color: var(--f5f5f5, #f5f5f5); font-family: Montserrat; font-size: 24px; font-style: normal; font-weight: 600; line-height: 100%; /* 24px */ letter-spacing: 1.2px; } .thanks-tel__time { color: var(--f5f5f5, #f5f5f5); font-family: BIZ UDPGothic; font-size: 10px; font-style: normal; font-weight: 400; line-height: 150%; /* 15px */ letter-spacing: 0.7px; text-align: center; margin-top: 3px; } .thanks-button { display: grid; grid-template-columns: auto 16px; gap: 20px; justify-content: center; align-items: center; background: var(--333333, #333); box-shadow: 3px 3px 8px 0px rgba(0, 0, 0, 0.16); padding-top: 13px; padding-bottom: 14px; transition: 0.25s; } .thanks-button__label { color: #fff; font-family: BIZ UDPGothic; font-size: 14px; font-style: normal; font-weight: 400; line-height: 150%; /* 21px */ letter-spacing: 1.4px; } .thanks-button:hover { opacity: 0.5; } .thanks-aside__title { color: var(--FAFAFA, #fafafa); font-family: BIZ UDPGothic; font-size: 20px; font-style: normal; font-weight: 700; line-height: 150%; /* 30px */ letter-spacing: 2px; border-bottom: 1px solid var(--FAFAFA, #fafafa); padding-bottom: 9px; } .thanks-aside__list { margin-top: 20px; display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; } .thanks-aside-card { display: block; background: #fff; box-shadow: 3px 3px 8px 0px rgba(0, 0, 0, 0.16); padding: 32px; position: relative; transition: 0.25s; } .thanks-aside-card__header { display: grid; justify-content: center; gap: 20px; grid-template-columns: 64px auto; align-items: center; border-bottom: 1px solid var(--MIKIblue, #005282); padding-bottom: 9px; } .thanks-aside-card__label { text-align: left; color: var(--MIKIblue, #005282); font-family: BIZ UDPGothic; font-size: 24px; font-style: normal; font-weight: 700; line-height: 120%; letter-spacing: 4.8px; text-align: left; } .thanks-aside-card__label-small { display: block; font-family: BIZ UDPGothic; font-size: 18px; font-style: normal; font-weight: 700; line-height: 120%; /* 21.6px */ letter-spacing: 3.6px; } .thanks-aside-card__text { color: var(--333333, #333); text-align: justify; font-family: BIZ UDPGothic; font-size: 16px; font-style: normal; font-weight: 400; line-height: 180%; /* 28.8px */ letter-spacing: 1.6px; margin-top: 10px; } .thanks-aside-card__arrow { background: var(--1A1A1A, #1a1a1a); padding-top: 10px; padding-bottom: 10px; padding-left: 8px; padding-right: 8px; width: 32px; height: 32px; position: absolute; right: 10px; bottom: 10px; } .thanks-aside-card:hover { opacity: 0.5; } } @media screen and (max-width: 1023px) { .thanks { padding-top: 120px; padding-bottom: 100px; background-image: url(/assets/images/sp/rent/request/request@2x.jpg); background-repeat: no-repeat; background-size: cover; } .thanks__title { color: #fff; text-align: center; font-family: BIZ UDPGothic; font-size: 24px; font-style: normal; font-weight: 700; line-height: 150%; /* 36px */ letter-spacing: 2.4px; } .thanks__title::after { content: ""; display: block; width: 80px; height: 3px; margin: auto; margin-top: 10px; background: var(--logo-Lightblue, #9bccee); } .thanks__text { color: #fff; font-family: BIZ UDPGothic; font-size: 16px; font-style: normal; font-weight: 400; line-height: 180%; /* 28.8px */ letter-spacing: 2.4px; text-align: left; margin-top: 32px; padding-left: 20px; padding-right: 20px; } .thanks__tel { margin-top: 32px; } .thanks__button { padding-left: 20px; padding-right: 20px; margin-top: 32px; } .thanks__aside { margin-top: 48px; padding-left: 20px; padding-right: 20px; } .thanks-tel__block { display: grid; grid-template-columns: 34px auto; gap: 10px; justify-content: center; } .thanks-tel__tel { color: var(--f5f5f5, #f5f5f5); font-family: Montserrat; font-size: 24px; font-style: normal; font-weight: 600; line-height: 100%; /* 24px */ letter-spacing: 1.2px; } .thanks-tel__time { color: var(--f5f5f5, #f5f5f5); font-family: BIZ UDPGothic; font-size: 10px; font-style: normal; font-weight: 400; line-height: 150%; /* 15px */ letter-spacing: 0.7px; text-align: center; margin-top: 3px; } .thanks-button { display: grid; grid-template-columns: auto 16px; gap: 20px; justify-content: center; align-items: center; background: var(--333333, #333); box-shadow: 3px 3px 8px 0px rgba(0, 0, 0, 0.16); padding-top: 20px; padding-bottom: 20px; } .thanks-button__label { color: #fff; font-family: BIZ UDPGothic; font-size: 14px; font-style: normal; font-weight: 400; line-height: 150%; /* 21px */ letter-spacing: 1.4px; } .thanks-aside__title { color: var(--FAFAFA, #fafafa); font-family: BIZ UDPGothic; font-size: 20px; font-style: normal; font-weight: 700; line-height: 150%; /* 30px */ letter-spacing: 2px; border-bottom: 1px solid var(--FAFAFA, #fafafa); padding-bottom: 9px; } .thanks-aside__list { margin-top: 20px; display: grid; gap: 18px; } .thanks-aside-card { display: block; background: #fff; box-shadow: 3px 3px 8px 0px rgba(0, 0, 0, 0.16); padding: 30px; position: relative; } .thanks-aside-card__header { display: flex; gap: 16px; align-items: center; border-bottom: 1px solid var(--MIKIblue, #005282); padding-bottom: 9px; } .thanks-aside-card__icon svg { width: 64px; } .thanks-aside-card__label { color: var(--MIKIblue, #005282); font-family: BIZ UDPGothic; font-size: 24px; font-style: normal; font-weight: 700; line-height: 120%; letter-spacing: 2px; text-align: left; } .thanks-aside-card__label-small { color: var(--MIKIblue, #005282); text-align: left; font-family: BIZ UDPGothic; font-size: 18px; font-style: normal; font-weight: 700; line-height: 120%; /* 21.6px */ letter-spacing: 2px; display: block; } .thanks-aside-card__text { color: var(--333333, #333); text-align: justify; font-family: BIZ UDPGothic; font-size: 16px; font-style: normal; font-weight: 400; line-height: 180%; /* 28.8px */ letter-spacing: 1.6px; margin-top: 10px; } .thanks-aside-card__arrow { background: var(--1A1A1A, #1a1a1a); padding-top: 10px; padding-bottom: 10px; padding-left: 8px; padding-right: 8px; width: 32px; height: 32px; position: absolute; right: 10px; bottom: 10px; } .thanks-aside__item:nth-of-type(1) .thanks-aside-card__icon { width: 50.6667px; } .thanks-aside__item:nth-of-type(1) .thanks-aside-card__icon svg { margin-left: -6.66665px; } .thanks-aside__item:nth-of-type(2) .thanks-aside-card__icon { width: 48px; } .thanks-aside__item:nth-of-type(2) .thanks-aside-card__icon svg { margin-left: -8px; } .thanks-aside__item:nth-of-type(3) .thanks-aside-card__icon { width: 51.2px; } .thanks-aside__item:nth-of-type(3) .thanks-aside-card__icon svg { margin-left: -6.4px; } } @media screen and (min-width: 1024px) { .tool { background: var(--FAFAFA, #fafafa); padding-bottom: 128px; } .tool__section { display: grid; grid-template-columns: minmax(0, 1200px); justify-content: center; padding-left: 20px; padding-right: 20px; margin-top: 80px; } .tool-kv { background-image: url(/assets/images/pc/tool/tool-kv@2x.jpg); background-repeat: no-repeat; background-size: cover; background-position: center; height: 480px; display: grid; place-content: center; } .tool-kv__title { background: var(--1A1A1A, #1a1a1a); width: 526px; display: grid; grid-template-columns: 80px auto; gap: 20px; justify-content: center; align-items: center; padding-top: 18px; padding-bottom: 18px; } .tool-kv__title-label1 { color: var(--FAFAFA, #fafafa); font-family: Montserrat; font-size: 40px; font-style: normal; font-weight: 600; line-height: 100%; /* 40px */ letter-spacing: 4px; } .tool-kv__title-label2 { color: var(--FAFAFA, #fafafa); font-family: BIZ UDPGothic; font-size: 16px; font-style: normal; font-weight: 700; line-height: 150%; /* 24px */ letter-spacing: 1.6px; } .tool-section { background: #fff; box-shadow: 0px 0px 8px 0px rgba(0, 0, 0, 0.16); padding: 80px; } .tool-section__title { text-align: center; } .tool-section__title1 { color: var(--1A1A1A, #1a1a1a); font-family: Montserrat; font-size: 48px; font-style: normal; font-weight: 600; line-height: 100%; /* 48px */ letter-spacing: 4.8px; } .tool-section__title2 { color: #000; font-family: BIZ UDPGothic; font-size: 14px; font-style: normal; font-weight: 400; line-height: 150%; /* 21px */ letter-spacing: 1.4px; } .tool-section__cost-button { display: grid; grid-template-columns: 480px; justify-content: center; margin-top: 48px; } .tool-section__section { margin-top: 48px; } .tool-section-lv2__title { display: grid; grid-template-columns: 36px 1fr; gap: 20px; border-bottom: 1px solid var(--MIKIblue, #005282); padding-bottom: 9px; align-items: center; } .tool-section-lv2__title-label { color: var(--MIKIblue, #005282); font-family: BIZ UDPGothic; font-size: 24px; font-style: normal; font-weight: 700; line-height: 150%; /* 36px */ letter-spacing: 2.4px; } .tool-section-lv2__text { color: var(--333333, #333); text-align: justify; font-family: BIZ UDPGothic; font-size: 16px; font-style: normal; font-weight: 400; line-height: 180%; /* 28.8px */ letter-spacing: 1.6px; margin-top: 20px; } .tool-cost-button { display: grid; grid-template-columns: 48px auto 20px; gap: 20px; padding-top: 16px; padding-bottom: 16px; justify-content: center; align-items: center; background: var(--1A1A1A, #1a1a1a); box-shadow: 3px 3px 8px 0px rgba(0, 0, 0, 0.16); transition: 0.25s; } .tool-cost-button__label { color: var(--FAFAFA, #fafafa); font-family: BIZ UDPGothic; font-size: 20px; font-style: normal; font-weight: 700; line-height: 150%; /* 30px */ letter-spacing: 2px; } .tool-cost-button:hover { opacity: 0.5; } .tool-flow-section__text { margin-top: 20px; color: var(--333333, #333); text-align: justify; font-family: BIZ UDPGothic; font-size: 16px; font-style: normal; font-weight: 400; line-height: 180%; /* 28.8px */ letter-spacing: 1.6px; } .tool-flow-section-lv2__title { margin-top: 48px; padding-bottom: 9px; border-bottom: 1px dotted var(--707070, #707070); color: var(--333333, #333); font-family: BIZ UDPGothic; font-size: 20px; font-style: normal; font-weight: 700; line-height: 150%; /* 30px */ letter-spacing: 2px; } .tool-flow-section-lv2__title::before { content: ""; display: inline-block; width: 20px; height: 3px; vertical-align: middle; background: var(--logo-Lightblue, #9bccee); margin-right: 10px; } .tool-flow-section-lv2__text { color: var(--333333, #333); text-align: justify; font-family: BIZ UDPGothic; font-size: 16px; font-style: normal; font-weight: 400; line-height: 180%; /* 28.8px */ letter-spacing: 1.6px; margin-top: 1.8em; } .tool-flow-section-lv2__title + .tool-flow-section-lv2__text { margin-top: 20px; } .tool-flow-section-lv2__list { margin-top: 1.8em; color: var(--333333, #333); text-align: justify; font-family: BIZ UDPGothic; font-size: 16px; font-style: normal; font-weight: 400; line-height: 180%; /* 28.8px */ letter-spacing: 1.6px; } .tool-flow-section-lv2__list-item::before { content: "・"; } .tool-flow-section-lv2__section { margin-top: 20px; } .tool-flow-section-lv2__order-list { margin-top: 20px; } .tool-flow-section-lv2__contract-list { margin-top: 20px; } .tool-flow-section-lv2__flow-list { margin-top: 20px; } .tool-flow-section-lv2__button { width: 398px; margin-top: 20px; } .tool-flow-section-lv3__title { color: var(--333333, #333); text-align: left; font-family: BIZ UDPGothic; font-size: 16px; font-style: normal; font-weight: 700; line-height: 150%; /* 24px */ letter-spacing: 1.6px; } .tool-flow-section-lv3__list { margin-top: 10px; } .tool-flow-list { display: grid; gap: 10px; list-style-type: square; padding-left: 1em; } .tool-flow-list__item { color: var(--333333, #333); text-align: left; font-family: BIZ UDPGothic; font-size: 14px; font-style: normal; font-weight: 400; line-height: 150%; /* 21px */ } .tool-flow-title { display: flex; gap: 30px; padding-bottom: 9px; border-bottom: 1px solid var(--MIKIblue, #005282); align-items: center; } .tool-flow-title__step { display: flex; gap: 10px; align-items: center; } .tool-flow-title__step-label { color: #000; font-family: Montserrat; font-size: 20px; font-style: normal; font-weight: 600; line-height: 100%; /* 20px */ } .tool-flow-title__step-no { color: var(--MIKIblue, #005282); font-family: Montserrat; font-size: 48px; font-style: italic; font-weight: 600; line-height: 100%; /* 48px */ } .tool-flow-title__label { color: var(--MIKIblue, #005282); font-family: BIZ UDPGothic; font-size: 24px; font-style: normal; font-weight: 700; line-height: 150%; /* 36px */ letter-spacing: 2.4px; } .tool-order-list { display: grid; gap: 20px; } .tool-order-item { gap: 20px; } .tool-order-item__title { color: var(--MIKIblue, #005282); text-align: justify; font-family: BIZ UDPGothic; font-size: 16px; font-style: normal; font-weight: 700; line-height: 180%; /* 28.8px */ letter-spacing: 1.6px; } .tool-order-item__text { margin-top: 10px; color: var(--333333, #333); text-align: justify; font-family: BIZ UDPGothic; font-size: 16px; font-style: normal; font-weight: 400; line-height: 180%; /* 28.8px */ letter-spacing: 1.6px; } .tool-order-item__banner { display: grid; grid-template-columns: minmax(0, 650px); justify-content: center; margin-top: 32px; padding-bottom: 28px; } .tool-order-item__list { margin-top: 10px; } .tool-order-item__section { margin-top: 10px; } .tool-order-item__section + .tool-order-item__section { margin-top: 20px; } .tool-order-item__title-lv2 { color: var(--1A1A1A, #1a1a1a); text-align: justify; font-family: BIZ UDPGothic; font-size: 15px; font-style: normal; font-weight: 700; line-height: 150%; /* 22.5px */ letter-spacing: 1.5px; padding-bottom: 9px; border-bottom: 1px solid var(--707070, #707070); } .tool-order-item__reference { margin-top: 20px; } .tool-reference { background: var(--f5f5f5, #f5f5f5); padding: 32px; } .tool-reference__title { display: flex; align-items: center; gap: 10px; color: var(--MIKIblue, #005282); text-align: justify; font-family: BIZ UDPGothic; font-size: 16px; font-style: normal; font-weight: 700; line-height: 100%; /* 16px */ letter-spacing: 1.6px; } .tool-reference__title-label { display: grid; grid-template-columns: 32px 32px; gap: 3px; } .tool-reference__title-label span { display: grid; place-items: center; height: 32px; background: var(--MIKIblue, #005282); color: #fff; text-align: justify; font-family: BIZ UDPGothic; font-size: 16px; font-style: normal; font-weight: 700; line-height: 100%; /* 16px */ letter-spacing: 1.6px; } .tool-reference__text { color: var(--333333, #333); text-align: justify; font-family: BIZ UDPGothic; font-size: 16px; font-style: normal; font-weight: 400; line-height: 180%; /* 28.8px */ letter-spacing: 1.6px; margin-top: 10px; } .tool-banner { display: block; background-image: url(/assets/images/pc/tool/tool-banner@2x.jpg); background-position: center; box-shadow: 3px 3px 8px 0px rgba(0, 0, 0, 0.16); background-repeat: no-repeat; background-size: cover; padding-top: 29px; padding-bottom: 30px; transition: 0.25s; } .tool-banner__catch { color: #fff; text-align: justify; font-family: BIZ UDPGothic; font-size: 32px; font-style: normal; font-weight: 700; line-height: 150%; /* 48px */ letter-spacing: 3.2px; text-align: center; } .tool-banner__block { background: var(--1A1A1A, #1a1a1a); padding-top: 5px; padding-bottom: 6px; display: grid; grid-template-columns: auto 20px; gap: 10px; align-items: center; width: 352px; margin: auto; justify-content: center; } .tool-banner__text { color: var(--FAFAFA, #fafafa); text-align: justify; font-family: BIZ UDPGothic; font-size: 16px; font-style: normal; font-weight: 700; line-height: 180%; /* 28.8px */ letter-spacing: 1.6px; } .tool-banner:hover { opacity: 0.5; } .tool-contract-list { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; } .tool-contract-card { background: #fff; box-shadow: 0px 0px 8px 0px rgba(0, 0, 0, 0.16); padding: 20px; height: 100%; } .tool-contract-card__title { color: var(--MIKIblue, #005282); font-family: BIZ UDPGothic; font-size: 16px; font-style: normal; font-weight: 700; line-height: 180%; /* 28.8px */ letter-spacing: 1.6px; text-align: center; } .tool-contract-card__text { color: var(--333333, #333); text-align: justify; font-family: BIZ UDPGothic; font-size: 14px; font-style: normal; font-weight: 400; line-height: 150%; /* 21px */ letter-spacing: 1.4px; margin-top: 10px; } .tool-download-button { display: grid; grid-template-columns: 32px auto; border: 1px solid var(--logo-Lightblue, #9bccee); background: #fff; box-shadow: 3px 3px 16px 0px rgba(0, 0, 0, 0.32); justify-content: center; align-items: center; padding-top: 15px; padding-bottom: 15px; color: var(--333333, #333); font-family: BIZ UDPGothic; font-size: 16px; font-style: normal; font-weight: 700; line-height: 150%; /* 24px */ letter-spacing: 1.6px; gap: 20px; transition: 0.25s; } .tool-download-button__icon svg path { transition: 0.25s; } .tool-download-button:hover { background-color: #333; color: #fff; } .tool-download-button:hover .tool-download-button__icon svg path { fill: #fff; } } @media screen and (max-width: 1023px) { .tool { background: var(--FAFAFA, #fafafa); padding-bottom: 128px; } .tool__section { margin-left: 20px; margin-right: 20px; margin-top: 70px; } .tool-kv { background-image: url(/assets/images/sp/tool/tool-kv@2x.jpg); background-repeat: no-repeat; background-size: cover; background-position: center; height: 480px; display: grid; align-items: center; } .tool-kv__title { background: var(--1A1A1A, #1a1a1a); margin-left: 18px; margin-right: 18px; display: grid; grid-template-columns: 40px auto; gap: 10px; justify-content: center; align-items: center; padding-top: 20px; padding-bottom: 20px; } .tool-kv__title-label1 { color: var(--FAFAFA, #fafafa); font-family: Montserrat; font-size: 30px; font-style: normal; font-weight: 600; line-height: 100%; /* 30px */ letter-spacing: 3px; } .tool-kv__title-label2 { color: var(--FAFAFA, #fafafa); font-family: BIZ UDPGothic; font-size: 13px; font-style: normal; font-weight: 700; line-height: 150%; /* 19.5px */ letter-spacing: 1.82px; } .tool-section { background: #fff; box-shadow: 0px 0px 8px 0px rgba(0, 0, 0, 0.16); padding-top: 50px; padding-bottom: 50px; padding-left: 30px; padding-right: 30px; } .tool-section__title { text-align: center; } .tool-section__title1 { color: var(--1A1A1A, #1a1a1a); font-family: Montserrat; font-size: 48px; font-style: normal; font-weight: 600; line-height: 100%; /* 48px */ letter-spacing: 4.8px; } .tool-section__title2 { color: #000; font-family: BIZ UDPGothic; font-size: 14px; font-style: normal; font-weight: 400; line-height: 150%; /* 21px */ letter-spacing: 1.4px; } .tool-section__cost-button { margin-top: 40px; } .tool-section__section { margin-top: 40px; } .tool-section__section + .tool-section__section { margin-top: 70px; } .tool-section-lv2__title { display: grid; grid-template-columns: auto; justify-items: center; gap: 20px; border-bottom: 1px solid var(--MIKIblue, #005282); padding-bottom: 9px; } .tool-section-lv2__title-icon { width: 36px; } .tool-section-lv2__title-label { color: var(--MIKIblue, #005282); text-align: center; font-family: BIZ UDPGothic; font-size: 20px; font-style: normal; font-weight: 700; line-height: 150%; /* 30px */ letter-spacing: 2px; } .tool-section-lv2__text { color: var(--333333, #333); text-align: justify; font-family: BIZ UDPGothic; font-size: 16px; font-style: normal; font-weight: 400; line-height: 180%; /* 28.8px */ letter-spacing: 1.6px; margin-top: 20px; } .tool-cost-button { display: grid; grid-template-columns: 25px auto 20px; gap: 10px; padding-top: 20px; padding-bottom: 20px; justify-content: center; align-items: center; background: var(--1A1A1A, #1a1a1a); box-shadow: 3px 3px 8px 0px rgba(0, 0, 0, 0.16); } .tool-cost-button__label { color: var(--FAFAFA, #fafafa); font-family: BIZ UDPGothic; font-size: 16px; font-style: normal; font-weight: 700; line-height: 150%; /* 24px */ letter-spacing: 1.6px; margin-right: 6px; } .tool-flow-section__text { margin-top: 20px; color: var(--333333, #333); text-align: justify; font-family: BIZ UDPGothic; font-size: 16px; font-style: normal; font-weight: 400; line-height: 180%; /* 28.8px */ letter-spacing: 1.6px; } .tool-flow-section-lv2__title { margin-top: 48px; padding-bottom: 9px; border-bottom: 1px dotted var(--707070, #707070); color: var(--333333, #333); font-family: BIZ UDPGothic; font-size: 20px; font-style: normal; font-weight: 700; line-height: 150%; /* 30px */ letter-spacing: 0.4px; display: flex; align-items: center; } .tool-flow-section-lv2__title::before { content: ""; display: inline-block; width: 20px; height: 3px; vertical-align: middle; background: var(--logo-Lightblue, #9bccee); margin-right: 10px; } .tool-flow-section-lv2__text { color: var(--333333, #333); text-align: justify; font-family: BIZ UDPGothic; font-size: 16px; font-style: normal; font-weight: 400; line-height: 180%; /* 28.8px */ letter-spacing: 1.6px; margin-top: 1.8em; } .tool-flow-section-lv2__title + .tool-flow-section-lv2__text { margin-top: 20px; } .tool-flow-section-lv2__list { margin-top: 1.8em; color: var(--333333, #333); text-align: justify; font-family: BIZ UDPGothic; font-size: 16px; font-style: normal; font-weight: 400; line-height: 180%; /* 28.8px */ letter-spacing: 1.6px; } .tool-flow-section-lv2__list-item { display: flex; } .tool-flow-section-lv2__list-item::before { content: "・"; font-feature-settings: inherit; } .tool-flow-section-lv2__section { margin-top: 20px; } .tool-flow-section-lv2__order-list { margin-top: 20px; } .tool-flow-section-lv2__contract-list { margin-top: 20px; } .tool-flow-section-lv2__flow-list { margin-top: 20px; } .tool-flow-section-lv2__button { margin-top: 20px; } .tool-flow-section-lv3__title { color: var(--333333, #333); text-align: left; font-family: BIZ UDPGothic; font-size: 16px; font-style: normal; font-weight: 700; line-height: 150%; /* 24px */ letter-spacing: 1.6px; } .tool-flow-section-lv3__list { margin-top: 10px; } .tool-flow-list { display: grid; gap: 10px; list-style-type: square; padding-left: 1em; } .tool-flow-list__item { color: var(--333333, #333); text-align: left; font-family: BIZ UDPGothic; font-size: 14px; font-style: normal; font-weight: 400; line-height: 150%; /* 21px */ } .tool-flow-title { display: grid; gap: 10px; padding-bottom: 9px; border-bottom: 1px solid var(--MIKIblue, #005282); } .tool-flow-title__step { display: flex; gap: 10px; align-items: center; } .tool-flow-title__step-label { color: #000; font-family: Montserrat; font-size: 20px; font-style: normal; font-weight: 600; line-height: 100%; /* 20px */ } .tool-flow-title__step-no { color: var(--MIKIblue, #005282); font-family: Montserrat; font-size: 48px; font-style: italic; font-weight: 600; line-height: 100%; /* 48px */ } .tool-flow-title__label { color: var(--MIKIblue, #005282); font-family: BIZ UDPGothic; font-size: 20px; font-style: normal; font-weight: 700; line-height: 150%; /* 30px */ letter-spacing: 0.6px; } .tool-order-list { display: grid; gap: 30px; } .tool-order-item { gap: 20px; } .tool-order-item__title { color: var(--MIKIblue, #005282); text-align: justify; font-family: BIZ UDPGothic; font-size: 16px; font-style: normal; font-weight: 700; line-height: 180%; /* 28.8px */ letter-spacing: 1.6px; } .tool-order-item__text { margin-top: 10px; color: var(--333333, #333); text-align: justify; font-family: BIZ UDPGothic; font-size: 16px; font-style: normal; font-weight: 400; line-height: 180%; /* 28.8px */ letter-spacing: 1.6px; } .tool-order-item__banner { display: grid; grid-template-columns: minmax(0, 650px); justify-content: center; margin-top: 32px; padding-bottom: 28px; } .tool-order-item__list { margin-top: 10px; } .tool-order-item__section { margin-top: 10px; } .tool-order-item__section + .tool-order-item__section { margin-top: 20px; } .tool-order-item__title-lv2 { color: var(--1A1A1A, #1a1a1a); text-align: justify; font-family: BIZ UDPGothic; font-size: 15px; font-style: normal; font-weight: 700; line-height: 150%; /* 22.5px */ letter-spacing: 1.5px; padding-bottom: 9px; border-bottom: 1px solid var(--707070, #707070); } .tool-order-item__reference { margin-top: 20px; } .tool-reference { background: var(--f5f5f5, #f5f5f5); padding: 20px; } .tool-reference__title { display: grid; gap: 10px; color: var(--MIKIblue, #005282); text-align: justify; font-family: BIZ UDPGothic; font-size: 16px; font-style: normal; font-weight: 700; letter-spacing: 1.6px; line-height: 180%; } .tool-reference__title-label { display: grid; grid-template-columns: 32px 32px; gap: 3px; } .tool-reference__title-label span { display: grid; place-items: center; height: 32px; background: var(--MIKIblue, #005282); color: #fff; text-align: justify; font-family: BIZ UDPGothic; font-size: 16px; font-style: normal; font-weight: 700; line-height: 100%; /* 16px */ letter-spacing: 1.6px; } .tool-reference__text { color: var(--333333, #333); text-align: justify; font-family: BIZ UDPGothic; font-size: 16px; font-style: normal; font-weight: 400; line-height: 180%; /* 28.8px */ letter-spacing: 1.6px; margin-top: 10px; } .tool-banner { display: block; background-image: url(/assets/images/sp/tool/tool-banner@2x.jpg); background-position: center; box-shadow: 3px 3px 8px 0px rgba(0, 0, 0, 0.16); background-repeat: no-repeat; background-size: cover; padding-top: 30px; padding-bottom: 30px; padding-left: 17px; padding-right: 17px; } .tool-banner__catch { color: #fff; text-align: justify; font-family: BIZ UDPGothic; font-size: 24px; font-style: normal; font-weight: 700; line-height: 150%; /* 36px */ letter-spacing: 2.4px; text-align: left; } .tool-banner__block { background: var(--1A1A1A, #1a1a1a); padding-top: 10px; padding-bottom: 10px; display: grid; grid-template-columns: auto 20px; align-items: center; justify-content: space-between; margin-top: 10px; padding-left: 20px; padding-right: 20px; } .tool-banner__text { color: var(--FAFAFA, #fafafa); text-align: justify; font-family: BIZ UDPGothic; font-size: 16px; font-style: normal; font-weight: 700; line-height: 150%; /* 24px */ letter-spacing: 1.6px; } .tool-contract-list { display: grid; gap: 30px; } .tool-contract-card { background: #fff; box-shadow: 0px 0px 8px 0px rgba(0, 0, 0, 0.16); padding: 20px; height: 100%; } .tool-contract-card__title { color: var(--MIKIblue, #005282); font-family: BIZ UDPGothic; font-size: 16px; font-style: normal; font-weight: 700; line-height: 180%; /* 28.8px */ letter-spacing: 1.6px; text-align: center; } .tool-contract-card__text { color: var(--333333, #333); text-align: justify; font-family: BIZ UDPGothic; font-size: 14px; font-style: normal; font-weight: 400; line-height: 150%; /* 21px */ letter-spacing: 1.4px; margin-top: 10px; } .tool-download-button { display: grid; grid-template-columns: 24px auto; border: 1px solid var(--logo-Lightblue, #9bccee); background: #fff; box-shadow: 3px 3px 16px 0px rgba(0, 0, 0, 0.32); justify-content: center; align-items: center; padding-top: 15px; padding-bottom: 15px; color: var(--333333, #333); font-family: BIZ UDPGothic; font-size: 16px; font-style: normal; font-weight: 700; line-height: 150%; /* 24px */ letter-spacing: 1.6px; gap: 10px; } } /* ラジオボタンFireFox対応 */ @-moz-document url-prefix() { .c-radio-button__body { display: block; } .c-radio-button::before, .c-radio-button::after { display: none; } .c-radio-button { padding-left: 0; } input[type="radio"] { position: relative; -webkit-appearance: button; -moz-appearance: button; appearance: button; -webkit-box-sizing: border-box; box-sizing: border-box; width: 16px; height: 16px; content: ""; background-color: white; border: 1px solid #aaaaaa; border-radius: 50%; vertical-align: middle; cursor: pointer; top: -2px; margin-right: 0.5em; } input[type="radio"]:checked { background-image: radial-gradient( circle at 50% 50%, #aaaaaa 40%, transparent 50% ); } } /* エリアボタン入れ子対応 */ ._nest { width: 100%; padding: 20px; } ._nest_nest { width: 100%; padding: 20px; } ._nest .search-block-body, ._nest .search-block-head:hover, ._nest .search-block-head.active { background: #cfe1ed; } ._nest_nest .search-block-body, ._nest_nest .search-block-head:hover, ._nest_nest .search-block-head.active { background: #bbd1df; } .search-aside__search-box._is-map { padding: 20px 40px; /*background: #e7f1f8;*/ } @media screen and (max-width: 1023px) { .search-aside__search-box._is-map { padding: 20px 20px; } } /* 検索サジェスト */ .search-aside__search-box, .fv-text-search-box { position: relative; } #suggestions { display: none; position: absolute; border: 1px solid #ccc; max-height: 420px; overflow-y: auto; z-index: 1000; background: #fff; } .fv-text-search-box #suggestions { top: 47px; width: calc(100% - 88px); } .search-aside__search-box #suggestions { top: 39px; width: calc(100% - 128px); } @media screen and (max-width: 1023px) { .search-aside__search-box #suggestions { top: 59px; width: calc(100% - 82px); } } .suggestion { font-size: 14px; line-height: 1.5; border-bottom: solid 1px #ececec; } .suggestion a { width: 100%; height: 100%; padding: 10px 20px; display: block; box-sizing: border-box; } .suggestion a:hover { background: #ececec; } .suggestion a > div { color: #797979; font-size: 12px; } .suggestion_grp { padding: 10px 20px; background: #838383; color: #fff; } /* ページャー対応 */ .disable { pointer-events: none; opacity: 0; } /* トップページオフィス探しを依頼するボタン */ .c-top-inner__cv { margin-top: 20px; } .c-top-inner-cv { display: block; background: var(--CV, #fa5c03); padding-block: 40px; display: flex; justify-content: center; gap: 16px; color: #fff; font-family: BIZ UDPGothic; font-size: 20px; font-style: normal; font-weight: 700; line-height: 150%; /* 24px */ letter-spacing: 1.6px; transition: 0.25s; box-shadow: 3px 3px 8px 0px rgba(0, 0, 0, 0.16); } .c-top-inner-cv:hover { opacity: 0.5; } .c-top-inner-cv__arrow { width: 16px; margin-top: 10px; } @media screen and (max-width: 1023px) { .c-top-inner__cv { padding-left: 20px; padding-right: 20px; } .c-top-inner-cv { padding-block: 20px; font-size: 16px; } .c-top-inner-cv__arrow { margin-top: 6px; } } /* FAQ */ .faq-list .qtext a { color: #005282; } /* Cokkie同意 */ #cookieConsentModal { font-family: "BIZ UDPGothic", sans-serif; position: fixed; z-index: 9999; left: 0px; bottom: 0px; background-color: rgba(0, 0, 0, 0.8); width: 100%; font-size: 14px; padding: 20px; color: #fff; } #cookieConsentModal .cookie-inner { max-width: 1200px; margin: 0 auto; } #cookieConsentModal .btn-area { margin: 0 auto; text-align: center; } #cookieConsentModal .check-area label { position: relative; padding-left: 24px; cursor: pointer; } #cookieConsentModal .check-area label::before { content: ""; display: block; width: 15px; height: 15px; border: solid 1px #fff; position: absolute; left: 0; top: 0; transition: 0.25s; } #cookieConsentModal input[type="checkbox"]:checked + label::after { border-right: 3px solid #9bccee; border-bottom: 3px solid #9bccee; content: ""; display: block; height: 14px; left: 5px; margin-top: -5px; position: absolute; top: 0; transform: rotate(45deg); width: 9px; } #cookieConsentModal .check-area > div { margin-bottom: 20px; } #cookieConsentModal .cokkie-ttl { font-size: 16px; font-weight: bold; margin-bottom: 12px; } #cookieConsentModal h3 { font-size: 14px; margin-bottom: 10px; } #cookieConsentModal p { font-size: 14px; line-height: 1.6; margin-bottom: 20px; font-weight: 400; } #cookieConsentModal p a { text-decoration: underline; } #cookieConsentModal button { padding: 10px 15px; border: solid 1px #fff; border-radius: 5px; } .feature-link, .newarrival-link { display: flex; flex-direction: column; } .feature-link__image, .newarrival-link__image { background: #e3e3e3; aspect-ratio: 2 / 3; display: flex; align-items: center; overflow: hidden; } .preview-detail__item._traffic, .rent-detail__item._traffic { min-height: 72px; } .case-example-card__image { background: #9bccee; aspect-ratio: 336 / 208; display: flex; align-items: center; } @media screen and (min-width: 1024px) { .case-example-card__title.font-l-16 { font-size: 15px; } .case-example-card__title.font-l-17 { font-size: 15px; } .case-example-card__title.font-l-18 { font-size: 14px; } .case-example-card__title.font-l-19 { font-size: 13px; } .case-example-card__title.font-l-20 { font-size: 13px; } .case-example-card__title.font-l-21 { font-size: 13px; } .case-example-card__title.font-l-22 { font-size: 12px; } .case-example-card__title.font-l-23 { font-size: 12px; } .case-example-card__title.font-l-24 { font-size: 11px; } .case-example-card__title.font-l-25 { font-size: 11px; } .case-example-card__title.font-l-26 { font-size: 11px; } .case-example-card__title.font-l-27 { font-size: 11px; } .case-example-card__title.font-l-28 { font-size: 11px; } .case-example-card__title.font-l-29 { font-size: 10px; } .case-example-card__title.font-l-30 { font-size: 10px; } .case-example-card__title.font-l-31 { font-size: 10px; } .case-example-card__title.font-l-32 { font-size: 10px; } } @media screen and (min-width: 1024px) { .request-card__dd .font-l-37 { font-size: 15px; } .request-card__dd .font-l-38 { font-size: 15px; } .request-card__dd .font-l-39 { font-size: 15px; } .request-card__dd .font-l-40 { font-size: 15px; } .request-card__dd .font-l-41 { font-size: 15px; } .request-card__dd .font-l-42 { font-size: 14px; } .request-card__dd .font-l-43 { font-size: 14px; } .request-card__dd .font-l-44 { font-size: 13px; } .request-card__dd .font-l-45 { font-size: 13px; } .request-card__dd .font-l-46 { font-size: 12px; } .request-card__dd .font-l-47 { font-size: 12px; } .request-card__dd .font-l-46 { font-size: 11px; } .request-card__dd .font-l-45 { font-size: 11px; } .request-card__dd .font-l-44 { font-size: 10px; } .request-card__dd .font-l-43 { font-size: 10px; } } .print-info { text-align: right; font-size: 12px; height: auto !important; padding: 0 0 10px 10px; } .print-info-sp { font-size: 12px; padding: 10px 0 0 0; } /* 電話番号調整 */ .clmn-tel { display: flex; align-items: center; } .clmn-tel input:nth-child(1) { width: 80px; } .clmn-tel input:nth-child(3) { width: 100px; } .clmn-tel input:nth-child(5) { width: 100px; } .clmn-tel input:nth-child(1), .clmn-tel input:nth-child(3) { margin-right: 10px; } .clmn-tel input:nth-child(3), .clmn-tel input:nth-child(5) { margin-left: 10px; } @media screen and (max-width: 1023px) { .clmn-tel input:nth-child(1) { width: 25%; } .clmn-tel input:nth-child(3) { width: 30%; } .clmn-tel input:nth-child(5) { width: 30%; } .clmn-tel input:nth-child(1), .clmn-tel input:nth-child(3) { margin-right: 5px; } .clmn-tel input:nth-child(3), .clmn-tel input:nth-child(5) { margin-left: 5px; } } @media screen and (min-width: 1024px) { .rent-detail__item.is-fixed { position: relative; padding-right: 110px; } .rent-detail__item .rent-detail__button.is-fixed { position: absolute; right: 0; top: -2px; margin-left: 0; } } .request-area-row__body { display: flex; gap: 0px; } .radio__area { align-items: center; } .radio__hope { width: 150px; } .clmn-Space, .clmn-SpaceNumber { display: none; padding-right: 30px; } .clmn-Space.show, .clmn-SpaceNumber.show { display: flex; align-items: center; position: relative; } .clmn-SpaceNumber.show .search-filter-row__range-character__note { width: 22em; bottom: -18px; } .clmn-Space span, .clmn-SpaceNumber span { font-size: 14px; padding-left: 5px; } @media screen and (max-width: 1023px) { .request-area-row__body._hope__body { flex-wrap: wrap; padding-top: 11px; } .clmn-Space, .clmn-SpaceNumber { padding-top: 11px; margin-bottom: 20px; } .search-filter-row__radio-button-list.radio__area.radio__etc { width: 100%; } } .btn-all-clear { display: block; width: 100%; padding: 20px 20px 10px; text-align: right; } .btn-all-clear span { font-size: 13px; position: relative; padding-left: 20px; } .btn-all-clear span::before { content: ""; background: url("../images/pc/common/ico-close.svg"); background-size: cover; width: 16px; height: 16px; position: absolute; left: 0; display: block; } /*20240624追加*/ .search-filter-row__price_no__note { font-size: 14px; line-height: 1.5; padding-top: 10px; color: #333; } @media screen and (min-width: 1024px) { .c-textbox._area { width: 400px; } .radio__area.radio__etc { width: 275px; } } .search-filter-row__radio-button-item._other { width: 80px; } .c-form-wrapper sup { vertical-align: super; font-size: 70%; } @media screen and (max-width: 1023px) { .request-area-row__body._hope__body { flex-wrap: wrap; padding-top: 11px; } .clmn-Space, .clmn-SpaceNumber { padding-top: 11px; margin-bottom: 20px; } .request-hope-row__note { grid-column: 2 / 3; font-size: 12px; margin-top: 4px; margin-bottom: 4px; } .c-radio-button__etc { width: 5em; } } .c-textbox__body:disabled { background: #ededed !important; } .rent-detail__floor { display: flex; align-items: center; } .rent-detail__floor__ico { background: #009348; display: flex; justify-content: center; align-items: center; color: #fff; font-size: 12px; width: 80px; height: 20px; letter-spacing: 0.1em; margin-right: 5px; } .rent-detail__item__note { display: flex; align-items: flex-end; justify-content: space-between; flex-wrap: wrap; font-size: 12px; } .rent-detail__item__note__text { font-size: 12px; line-height: 1.6; width: calc(100% - 8.5em); } .rent-detail__item__note__text__link { width: 8em; color: #005282; display: flex; align-items: center; justify-content: flex-end; } .rent-detail__item__note__text__link a { margin-right: 5px; } .rent-detail__item__note__text__link a:hover { text-decoration: underline; } @media screen and (max-width: 1023px) { .rent-detail__floor__ico { font-size: 10px; width: 52px; height: 20px; margin-right: 2px; letter-spacing: 0; } .rent-detail__floor__ico__text { font-size: 11px; } .rent-detail__item__note { font-size: 12px; } .rent-detail__item__note__text { width: 100%; } .rent-detail__item__note__text__link { width: 100%; } } @media screen and (min-width: 1024px) { .rent-card__detail-button.__new-style { justify-content: flex-end; } } @media screen and (min-width: 1024px) { .hide__pc__controls button { display: none; } } .c-path__item a { text-decoration: underline; color: #005282; } /*エリア概要*/ .area-outline { margin-top: 30px; } .area-outline .text { font-size: 14px; line-height: 1.7; letter-spacing: 0.01em; } @media screen and (max-width: 1023px) { .area-outline { margin-top: 20px; } .area-outline .text { font-size: 13px; } } hr.no-border { border: none; margin-bottom: 128px; } @media screen and (max-width: 1023px) { hr.no-border { margin-bottom: 64px; } } .zoom-link a span { color: #005282; font-size: 14px; display: inline-block; vertical-align: middle; } .zoom-link a svg { width: 18px; display: inline-block; vertical-align: middle; } .zoom-link { padding-top: 10px; } @media screen and (max-width: 1023px) { .zoom-link a span { font-size: 13px; } .zoom-link a svg { width: 16px; } .zoom-link { padding-top: 8px; } } .kv__title2.note-sup { position: relative; padding-right: 0.3em; } .kv__title2.note-sup::after { content: "※"; position: absolute; font-size: 30%; right: 0; top: -30%; } .btn-more { background: #1a1a1a; width: 120px; height: 30px; display: flex; justify-content: center; align-items: center; cursor: pointer; margin: 15px auto 0; color: #fff; font-size: 12px; box-shadow: 3px 3px 16px 0px rgba(0, 0, 0, 0.32); } .btn-more:hover { opacity: 0.5; } .btn-more span { padding-right: 20px; position: relative; } .btn-more span::before { content: ""; width: 11px; height: 1px; background: #fff; display: block; position: absolute; right: 0; top: 5px; } .btn-more span::after { content: ""; width: 1px; height: 11px; background: #fff; display: block; position: absolute; right: 5px; top: 0; } .full-modal { width: 100%; height: 100%; position: fixed; left: 0; top: 0; z-index: 100; visibility: hidden; opacity: 0; transition: all 0.2s ease 0s; } .full-modal .full-modal-inner { width: 100%; height: 100%; background: rgba(0, 0, 0, 0.8); position: absolute; left: 0; top: 0; z-index: 110; } .full-modal .fv__continue-search { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); width: 500px; z-index: 120; } .full-modal .fv__continue-search .btn-more { display: none; } @media screen and (max-width: 1023px) { .full-modal .fv__continue-search { width: 96%; } } @media screen and (min-width: 1024px) { .c-footer-sitemap._new { display: flex; justify-content: space-between; width: 100%; max-width: 1200px; margin: 0 auto 48px; } .prefectures .c-footer-sitemap__category-top:hover { opacity: 1 !important; } .prefectures { width: 100%; max-width: 1200px; margin: 0 auto; } .prefectures-list { display: flex; flex-wrap: wrap; gap: 20px; } .c-footer-sitemap__copyright._new { margin-top: 30px; text-align: right; } } .result-list { display: flex; margin-top: 50px; } .result-list-title { font-weight: bold; padding-right: 20px; width: 120px; box-sizing: border-box; color: #005282; font-size: 15px; line-height: 1.6; } .result-list .prefectures-list { width: calc(100% - 120px); } .result-list .c-footer-sitemap__category-children { margin-top: 0px; font-size: 13px; } @media screen and (max-width: 1023px) { .result-list .c-footer-sitemap__category-children { border-top: none; } .result-list { flex-direction: column; margin-top: 30px; } .result-list .c-footer-sitemap__category-children { display: flex; flex-wrap: wrap; } .result-list-title { width: 100%; } .result-list .prefectures-list { width: 100%; } .result-list .c-footer-sitemap__category-children { margin-top: 0; } } .txt-end { text-align: center; font-family: BIZ UDPGothic; font-size: 26px; font-style: normal; font-weight: 700; line-height: 150%; letter-spacing: 3.6px; padding: 50px 0 100px; } .txt-end br { display: none; } @media screen and (max-width: 1023px) { .txt-end { font-size: 18px; padding: 25px 0 50px; } .txt-end br { display: block; } .preview__header.no_room { margin-left: 20px; margin-right: 20px; } .preview__title.no_room { font-size: 24px; } } .is-new { position: relative; } .is-new::before { content: "新着"; background: #e60012; color: #fff; border-radius: 3px; padding: 2px 6px; font-size: 12px; display: block; top: 10px; left: -20px; z-index: 99; position: absolute; } .rent-card__room-table .is-new::before { padding: 2px 4px; top: 12px; left: -24px; font-size: 10px; } @media screen and (max-width: 1023px) { .is-new::before { padding: 2px 6px !important; font-size: 12px !important; top: -10px !important; left: -5px !important; } }