@charset "UTF-8"; /* Theme Name: DIGITALSCAPE 2025 Theme URL: https://corp.dsp.co.jp Description: 株式会社デジタルスケープコーポレートサイト2025 Author: DDS r_katano Version: 0.0 */ /*** The new CSS reset - version 1.11 (last updated 20.9.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; } /* Fix mobile Safari increase font-size on landscape mode */ html { -moz-text-size-adjust: none; -webkit-text-size-adjust: none; text-size-adjust: none; } /* 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; -moz-appearance: revert; appearance: revert; } /* preformatted text - use only for this feature */ :where(pre) { all: revert; box-sizing: border-box; } /* reset default text opacity of input placeholder */ ::-moz-placeholder { color: unset; } ::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; box-sizing: border-box; } /* linear */ /* Sine（最も弱い） */ /* easeInSine */ /* easeOutSine */ /* easeInOutSine */ /* Quad（弱め。Sineより強く、Cubicより弱い） */ /* easeInQuad */ /* easeOutQuad */ /* easeInOutQuad */ /* Cubic（Quadより強く、Quartより弱い） */ /* easeInCubic */ /* easeOutCubic */ /* easeInOutCubic */ /* Quart（Cubicより強く、Quintより弱い） */ /* easeInQuart */ /* easeOutQuart */ /* easeInOutQuart */ /* Quint（Quartより強く、Expoより弱い） */ /* easeInQuint */ /* easeOutQuint */ /* easeInOutQuint */ /* Expo（最も強い） */ /* easeInExpo */ /* easeOutExpo */ /* easeInOutExpo */ /* Circ（Expoのような強さを持つが、加速や減速の時間がよりゆるやか。） */ /* easeInCirc */ /* easeOutCirc */ /* easeInOutCirc */ /* Back（少し行き過ぎてから戻ってくるような動き） */ /* easeInBack */ /* easeOutBack */ /* easeInOutBack */ @font-face { font-family: "Noto Sans JP"; src: url(assets/fonts/NotoSansJP-Regular.ttf) format("truetype"); font-weight: 400; font-style: normal; font-display: fallback; } @font-face { font-family: "Noto Sans JP"; src: url(assets/fonts/NotoSansJP-Medium.ttf) format("truetype"); font-weight: 500; font-style: normal; font-display: fallback; } @font-face { font-family: "Noto Sans JP"; src: url(assets/fonts/NotoSansJP-Bold.ttf) format("truetype"); font-weight: 700; font-style: normal; font-display: fallback; } @font-face { font-family: "Noto Sans JP"; src: url(assets/fonts/NotoSansJP-Black.ttf) format("truetype"); font-weight: 900; font-style: normal; font-display: fallback; } body { width: 100%; margin: 0px; min-width: 23.4375rem; min-height: 100vh; font-family: "Noto Sans JP", sans-serif; font-size: 1rem; line-height: 1.75; letter-spacing: 0.05em; overflow-x: hidden; /* スクロールバーのスクロールボタンを非表示にする */ } body::-webkit-scrollbar-track { background: transparent; } body::-webkit-scrollbar-thumb { background: transparent; } a { text-decoration: none; } :where(img) { vertical-align: bottom; } .l-wrapper { display: grid; grid-template-columns: repeat(1, minmax(0, 1fr)); grid-template-rows: 1fr auto; width: 100%; min-height: 100vh; overflow-x: hidden; padding-top: 60px; } .is-home .l-wrapper { padding-top: 0px; } .l-main { padding-top: 60px; } .l-main.-home { padding-top: 0px; } .p-about-grid-list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); max-width: 1080px; margin-top: 60px; margin-right: auto; margin-left: auto; } .p-about-grid-list-box__wrapper { display: flex; width: 100%; } .p-about-grid-list-box__number { flex-grow: 1; display: flex; justify-content: center; align-items: center; padding: 25px; padding-bottom: 1em !important; } .p-about-grid-list-tag { display: inline-flex; padding: 2px 16px; font-size: 20px; font-weight: 700; color: #fff; background: #00869b; border-radius: 78px; } .p-about-grid-list-number { font-size: 36px; font-weight: 700; } .p-about-grid-list-number strong { font-size: 68px; font-weight: 900; color: #00869b; } .p-about-grid-list-box__service { padding: 40px; padding-top: 20px !important; padding-top: 2em; } .p-about-grid-list-service { text-align: center; font-size: 46px; font-weight: 700; color: #00869b; } .p-about-grid-list-text { text-align: center; font-size: 30px; font-weight: 700; line-height: 100%; } .p-about-grid-list-text strong { color: #00869b; } .p-about-grid-list-box__about { padding: 25px; } .p-about-grid-list-about-text { padding-top: 30px; font-size: 20px; font-weight: 400; } .p-about-grid-list-about-text strong { font-weight: 700; } .p-about-grid-list-border { border: 1.5px solid #00869b; } .p-about-grid-list-border--right { border-right: 1.5px solid #00869b; } .p-about-grid-list-border--top { border-top: 1.5px solid #00869b; } .p-card { position: relative; display: flex; flex-direction: column; gap: 16px 24px; height: 100%; } .p-card__label { margin-bottom: -0.5rem; } .p-card__thumbnail { aspect-ratio: 16/9; overflow: hidden; outline: 1px solid #008b9b; } .p-card__thumbnail img { display: block; width: 100%; aspect-ratio: 16/9; -o-object-fit: cover; object-fit: cover; } .p-card__title { font-size: 1.125rem; font-weight: 700; } .p-card__subtitle { font-weight: 700; } .p-card.-title-green .p-card__title { color: #008b9b; } .p-card.-img-auto .p-card__thumbnail { aspect-ratio: initial; overflow: hidden; } .p-card.-img-auto .p-card__thumbnail img { aspect-ratio: initial; -o-object-fit: initial; object-fit: initial; } a.p-card { text-decoration: none; } a.p-card .p-card__title { position: relative; transition: color 0.2s ease-out; padding-left: 35px; } a.p-card .p-card__title::before { content: ""; position: absolute; top: 0.25em; left: 0; display: block; width: 1.25em; height: 1.25em; background-color: #ffffff; border: 1px solid #008b9b; border-radius: 50%; transition: background-color 0.2s cubic-bezier(0.445, 0.05, 0.55, 0.95); } a.p-card .p-card__title::after { content: ""; position: absolute; top: 0.625em; left: 0.375em; -webkit-mask: url('data:image/svg+xml;charset=UTF-8,') no-repeat center center; mask: url('data:image/svg+xml;charset=UTF-8,') no-repeat center center; background-color: #008b9b; display: block; width: 0.5em; height: 0.5em; transition: background-color 0.2s cubic-bezier(0.445, 0.05, 0.55, 0.95); } a.p-card .p-card__thumbnail img { transition: filter 0.2s ease-out; } a.p-card:hover .p-card__title { color: #008b9b; } a.p-card:hover .p-card__title::before { background-color: #008b9b; } a.p-card:hover .p-card__title::after { background-color: #ffffff; } a.p-card:hover .p-card__thumbnail img { filter: brightness(0.9); } .p-case-card { display: grid; grid-template-columns: repeat(1, minmax(0, 1fr)); gap: 24px; height: 100%; padding: 24px 16px; outline: 1px solid #b9b9b9; } .p-case-card__main { display: grid; grid-template-columns: repeat(1, minmax(0, 1fr)); gap: 12px 0px; } .p-case-card__image { max-width: 400px; margin-right: auto; margin-left: auto; } .p-case-card__image > img { display: block; width: 100%; height: auto; } .p-case-card__title { padding-bottom: 8px; font-size: 1.25rem; font-weight: 500; line-height: 1.35; } .p-case-card__lead { grid-column: span 2/span 2; color: #ff4e00; } .p-case-card__label { display: inline-block; padding: 5px 8px 7px; background-color: #008b9b; color: #ffffff; font-weight: 500; line-height: 1; } .p-case-card__description { margin-top: 8px; } .p-cta { padding: 80px 80px; background-color: #008b9b; } .p-cta__inner { display: grid; grid-template-columns: repeat(1, minmax(0, 1fr)); gap: 20px; max-width: -moz-max-content; max-width: max-content; max-width: 1240px; margin-right: auto; margin-left: auto; padding: 40px; background-color: #ffffff; border-radius: 8px; } .p-cta__text { display: flex; align-items: center; justify-content: center; flex-wrap: wrap; color: #003c44; font-weight: 500; line-height: 1.5; text-align: center; font-size: 1.125rem; } .p-cta__text.-lead { font-size: 2.5rem; line-height: 1.3; font-weight: 700; } .p-cta__text .marker-orange { color: #ff4e00; } .p-cta__text .marker-green { color: #008b9b; } .p-cta__cards { display: flex; align-items: stretch; justify-content: center; flex-wrap: wrap; gap: 20px; margin-top: 40px; max-width: 1240px; margin-right: auto; margin-left: auto; } .p-cta__card { flex: 1 0 calc(50% - 10px); max-width: 800px; display: grid; grid-template-columns: repeat(1, minmax(0, 1fr)); gap: 16px 0px; background-color: #ffffff; padding: 32px 16px; border-radius: 8px; } .p-cta.-light { position: relative; background-color: #d0eff1; overflow: hidden; } .p-cta.-light::before { content: ""; opacity: 10%; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); display: block; width: 5500px; aspect-ratio: 3/1; -webkit-mask: url(./assets/img/bg-logo.svg) no-repeat center center; mask: url(./assets/img/bg-logo.svg) no-repeat center center; opacity: 50%; background-color: #ffffff; } .p-cta.-light .p-cta__inner { padding: 0px; background-color: transparent; } .editor-styles-wrapper .wp-block-post-content > :where(*), .p-section__inner .lazyblock-inner-blocks > :where(*), .p-editable > :where(*) { margin-top: 2rem; margin-bottom: 2rem; } .editor-styles-wrapper .wp-block-post-content > :where(*):first-child, .p-section__inner .lazyblock-inner-blocks > :where(*):first-child, .p-editable > :where(*):first-child { margin-top: 0px !important; } .editor-styles-wrapper .wp-block-post-content > :where(*):last-child, .p-section__inner .lazyblock-inner-blocks > :where(*):last-child, .p-editable > :where(*):last-child { margin-bottom: 0px !important; } .editor-styles-wrapper .wp-block-post-content > :where(h2), .editor-styles-wrapper .wp-block-post-content > :where(h3), .editor-styles-wrapper .wp-block-post-content > :where(h4), .editor-styles-wrapper .wp-block-post-content > :where(h5), .editor-styles-wrapper .wp-block-post-content > :where(h6), .p-section__inner .lazyblock-inner-blocks > :where(h2), .p-section__inner .lazyblock-inner-blocks > :where(h3), .p-section__inner .lazyblock-inner-blocks > :where(h4), .p-section__inner .lazyblock-inner-blocks > :where(h5), .p-section__inner .lazyblock-inner-blocks > :where(h6), .p-editable > :where(h2), .p-editable > :where(h3), .p-editable > :where(h4), .p-editable > :where(h5), .p-editable > :where(h6) { font-weight: 700; } .editor-styles-wrapper .wp-block-post-content :where(a:not([class])), .p-section__inner .lazyblock-inner-blocks :where(a:not([class])), .p-editable :where(a:not([class])) { position: relative; color: #008b9b; word-break: break-all; overflow-wrap: break-word; font-weight: 500; text-decoration: underline; text-underline-offset: 4px; transition: opacity 0.2s cubic-bezier(0.86, 0, 0.07, 1); } .editor-styles-wrapper .wp-block-post-content :where(a:not([class])):hover, .p-section__inner .lazyblock-inner-blocks :where(a:not([class])):hover, .p-editable :where(a:not([class])):hover { opacity: 0.8; will-change: opacity; } .editor-styles-wrapper .wp-block-post-content :where(a:not([class]))[target=_blank]::after, .p-section__inner .lazyblock-inner-blocks :where(a:not([class]))[target=_blank]::after, .p-editable :where(a:not([class]))[target=_blank]::after { content: ""; -webkit-mask: url('data:image/svg+xml;charset=UTF-8,') no-repeat center center; mask: url('data:image/svg+xml;charset=UTF-8,') no-repeat center center; background-color: #008b9b; transform: translateY(2px); display: inline-block; width: 1em; height: 1em; margin: 0px 4px; } .editor-styles-wrapper .wp-block-post-content :where(a:not([class]))[target=_blank]:has(img)::after, .p-section__inner .lazyblock-inner-blocks :where(a:not([class]))[target=_blank]:has(img)::after, .p-editable :where(a:not([class]))[target=_blank]:has(img)::after { content: none; } .editor-styles-wrapper .wp-block-post-content :where(ol.wp-block-list) > li, .editor-styles-wrapper .wp-block-post-content :where(ul.wp-block-list) > li, .editor-styles-wrapper .wp-block-post-content :where(ol:not([class])) > li, .editor-styles-wrapper .wp-block-post-content :where(ul:not([class])) > li, .p-section__inner .lazyblock-inner-blocks :where(ol.wp-block-list) > li, .p-section__inner .lazyblock-inner-blocks :where(ul.wp-block-list) > li, .p-section__inner .lazyblock-inner-blocks :where(ol:not([class])) > li, .p-section__inner .lazyblock-inner-blocks :where(ul:not([class])) > li, .p-editable :where(ol.wp-block-list) > li, .p-editable :where(ul.wp-block-list) > li, .p-editable :where(ol:not([class])) > li, .p-editable :where(ul:not([class])) > li { position: relative; padding-left: 1.75em; } .editor-styles-wrapper .wp-block-post-content :where(ol.wp-block-list) > li::before, .editor-styles-wrapper .wp-block-post-content :where(ul.wp-block-list) > li::before, .editor-styles-wrapper .wp-block-post-content :where(ol:not([class])) > li::before, .editor-styles-wrapper .wp-block-post-content :where(ul:not([class])) > li::before, .p-section__inner .lazyblock-inner-blocks :where(ol.wp-block-list) > li::before, .p-section__inner .lazyblock-inner-blocks :where(ul.wp-block-list) > li::before, .p-section__inner .lazyblock-inner-blocks :where(ol:not([class])) > li::before, .p-section__inner .lazyblock-inner-blocks :where(ul:not([class])) > li::before, .p-editable :where(ol.wp-block-list) > li::before, .p-editable :where(ul.wp-block-list) > li::before, .p-editable :where(ol:not([class])) > li::before, .p-editable :where(ul:not([class])) > li::before { position: absolute; } .editor-styles-wrapper .wp-block-post-content :where(ol.wp-block-list) > li + li, .editor-styles-wrapper .wp-block-post-content :where(ul.wp-block-list) > li + li, .editor-styles-wrapper .wp-block-post-content :where(ol:not([class])) > li + li, .editor-styles-wrapper .wp-block-post-content :where(ul:not([class])) > li + li, .p-section__inner .lazyblock-inner-blocks :where(ol.wp-block-list) > li + li, .p-section__inner .lazyblock-inner-blocks :where(ul.wp-block-list) > li + li, .p-section__inner .lazyblock-inner-blocks :where(ol:not([class])) > li + li, .p-section__inner .lazyblock-inner-blocks :where(ul:not([class])) > li + li, .p-editable :where(ol.wp-block-list) > li + li, .p-editable :where(ul.wp-block-list) > li + li, .p-editable :where(ol:not([class])) > li + li, .p-editable :where(ul:not([class])) > li + li { margin-top: 0.5em; } .editor-styles-wrapper .wp-block-post-content :where(ol.wp-block-list), .editor-styles-wrapper .wp-block-post-content :where(ol:not([class])), .p-section__inner .lazyblock-inner-blocks :where(ol.wp-block-list), .p-section__inner .lazyblock-inner-blocks :where(ol:not([class])), .p-editable :where(ol.wp-block-list), .p-editable :where(ol:not([class])) { counter-reset: olmarker; } .editor-styles-wrapper .wp-block-post-content :where(ol.wp-block-list) > li, .editor-styles-wrapper .wp-block-post-content :where(ol:not([class])) > li, .p-section__inner .lazyblock-inner-blocks :where(ol.wp-block-list) > li, .p-section__inner .lazyblock-inner-blocks :where(ol:not([class])) > li, .p-editable :where(ol.wp-block-list) > li, .p-editable :where(ol:not([class])) > li { counter-increment: olmarker; } .editor-styles-wrapper .wp-block-post-content :where(ol.wp-block-list) > li::before, .editor-styles-wrapper .wp-block-post-content :where(ol:not([class])) > li::before, .p-section__inner .lazyblock-inner-blocks :where(ol.wp-block-list) > li::before, .p-section__inner .lazyblock-inner-blocks :where(ol:not([class])) > li::before, .p-editable :where(ol.wp-block-list) > li::before, .p-editable :where(ol:not([class])) > li::before { content: counter(olmarker) "."; left: 0; font-weight: 500; } .editor-styles-wrapper .wp-block-post-content :where(ul.wp-block-list) > li::before, .editor-styles-wrapper .wp-block-post-content :where(ul:not([class])) > li::before, .p-section__inner .lazyblock-inner-blocks :where(ul.wp-block-list) > li::before, .p-section__inner .lazyblock-inner-blocks :where(ul:not([class])) > li::before, .p-editable :where(ul.wp-block-list) > li::before, .p-editable :where(ul:not([class])) > li::before { content: ""; top: calc(0.75em - 1px); left: 0.25em; display: block; width: 0.5em; height: 0.5em; background-color: #008b9b; border-radius: 50%; } .editor-styles-wrapper .wp-block-post-content :where(strong), .editor-styles-wrapper .wp-block-post-content :where(b), .p-section__inner .lazyblock-inner-blocks :where(strong), .p-section__inner .lazyblock-inner-blocks :where(b), .p-editable :where(strong), .p-editable :where(b) { font-weight: 700; } .editor-styles-wrapper .wp-block-post-content > :where(iframe:not([class])), .p-section__inner .lazyblock-inner-blocks > :where(iframe:not([class])), .p-editable > :where(iframe:not([class])) { margin-top: 0px; margin-bottom: 0px; } .editor-styles-wrapper .wp-block-post-content .wp-block-image, .p-section__inner .lazyblock-inner-blocks .wp-block-image, .p-editable .wp-block-image { padding: 60px; background-color: #f1f6f7; } .editor-styles-wrapper .wp-block-post-content.-news > :where(h2), .p-section__inner .lazyblock-inner-blocks.-news > :where(h2), .p-editable.-news > :where(h2) { font-size: 1.25rem; margin-top: 4em; padding-bottom: 0.25em; border-bottom: 1px solid #008b9b; } .editor-styles-wrapper .wp-block-post-content.-news > :where(h3), .p-section__inner .lazyblock-inner-blocks.-news > :where(h3), .p-editable.-news > :where(h3) { font-size: 1.125rem; margin-top: 3em; } .editor-styles-wrapper .wp-block-post-content.-news > :where(h4), .p-section__inner .lazyblock-inner-blocks.-news > :where(h4), .p-editable.-news > :where(h4) { font-size: 1rem; margin-top: 3em; } .editor-styles-wrapper .wp-block-post-content.-news :where(strong:not([class])), .p-section__inner .lazyblock-inner-blocks.-news :where(strong:not([class])), .p-editable.-news :where(strong:not([class])) { font-weight: 700; } .editor-styles-wrapper .wp-block-post-content .p-section__inner .lazyblock-inner-blocks > :where(h2), .editor-styles-wrapper .wp-block-post-content.-posts > :where(h2), .p-section__inner .lazyblock-inner-blocks .p-section__inner .lazyblock-inner-blocks > :where(h2), .p-section__inner .lazyblock-inner-blocks.-posts > :where(h2), .p-editable .p-section__inner .lazyblock-inner-blocks > :where(h2), .p-editable.-posts > :where(h2) { position: relative; padding-bottom: 1rem; color: #008b9b; margin-top: 4em; font-size: 1.625rem; font-weight: 700; } .editor-styles-wrapper .wp-block-post-content .p-section__inner .lazyblock-inner-blocks > :where(h2)::before, .editor-styles-wrapper .wp-block-post-content .p-section__inner .lazyblock-inner-blocks > :where(h2)::after, .editor-styles-wrapper .wp-block-post-content.-posts > :where(h2)::before, .editor-styles-wrapper .wp-block-post-content.-posts > :where(h2)::after, .p-section__inner .lazyblock-inner-blocks .p-section__inner .lazyblock-inner-blocks > :where(h2)::before, .p-section__inner .lazyblock-inner-blocks .p-section__inner .lazyblock-inner-blocks > :where(h2)::after, .p-section__inner .lazyblock-inner-blocks.-posts > :where(h2)::before, .p-section__inner .lazyblock-inner-blocks.-posts > :where(h2)::after, .p-editable .p-section__inner .lazyblock-inner-blocks > :where(h2)::before, .p-editable .p-section__inner .lazyblock-inner-blocks > :where(h2)::after, .p-editable.-posts > :where(h2)::before, .p-editable.-posts > :where(h2)::after { content: ""; position: absolute; bottom: 0; display: block; } .editor-styles-wrapper .wp-block-post-content .p-section__inner .lazyblock-inner-blocks > :where(h2)::before, .editor-styles-wrapper .wp-block-post-content.-posts > :where(h2)::before, .p-section__inner .lazyblock-inner-blocks .p-section__inner .lazyblock-inner-blocks > :where(h2)::before, .p-section__inner .lazyblock-inner-blocks.-posts > :where(h2)::before, .p-editable .p-section__inner .lazyblock-inner-blocks > :where(h2)::before, .p-editable.-posts > :where(h2)::before { left: 0; width: 2.5rem; height: 3px; background-color: #ff4e00; } .editor-styles-wrapper .wp-block-post-content .p-section__inner .lazyblock-inner-blocks > :where(h2)::after, .editor-styles-wrapper .wp-block-post-content.-posts > :where(h2)::after, .p-section__inner .lazyblock-inner-blocks .p-section__inner .lazyblock-inner-blocks > :where(h2)::after, .p-section__inner .lazyblock-inner-blocks.-posts > :where(h2)::after, .p-editable .p-section__inner .lazyblock-inner-blocks > :where(h2)::after, .p-editable.-posts > :where(h2)::after { left: 3.125rem; transform: translateY(-1px); width: calc(100% - 3.125rem); height: 1px; background-color: #008b9b; } .editor-styles-wrapper .wp-block-post-content .p-section__inner .lazyblock-inner-blocks > :where(h3), .editor-styles-wrapper .wp-block-post-content.-posts > :where(h3), .p-section__inner .lazyblock-inner-blocks .p-section__inner .lazyblock-inner-blocks > :where(h3), .p-section__inner .lazyblock-inner-blocks.-posts > :where(h3), .p-editable .p-section__inner .lazyblock-inner-blocks > :where(h3), .p-editable.-posts > :where(h3) { margin-top: 2.5em; color: #008b9b; font-size: 1.25rem; font-weight: 700; } .editor-styles-wrapper .wp-block-post-content .p-section__inner .lazyblock-inner-blocks > :where(h4), .editor-styles-wrapper .wp-block-post-content.-posts > :where(h4), .p-section__inner .lazyblock-inner-blocks .p-section__inner .lazyblock-inner-blocks > :where(h4), .p-section__inner .lazyblock-inner-blocks.-posts > :where(h4), .p-editable .p-section__inner .lazyblock-inner-blocks > :where(h4), .p-editable.-posts > :where(h4) { margin-top: 2.25em; font-size: 1.125rem; font-weight: 700; } .editor-styles-wrapper .wp-block-post-content .p-section__inner .lazyblock-inner-blocks > :where(h5), .editor-styles-wrapper .wp-block-post-content.-posts > :where(h5), .p-section__inner .lazyblock-inner-blocks .p-section__inner .lazyblock-inner-blocks > :where(h5), .p-section__inner .lazyblock-inner-blocks.-posts > :where(h5), .p-editable .p-section__inner .lazyblock-inner-blocks > :where(h5), .p-editable.-posts > :where(h5) { margin-top: 2.25em; font-weight: 700; } .p-footer-navigation { width: 100%; display: grid; grid-template: "pages pages sites info" auto "pages pages cta cta" auto/minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1fr); gap: 48px 24px; } .p-footer-navigation__item { display: flex; flex-direction: column; align-items: flex-start; gap: 24px; } .p-footer-navigation__item > a:not([class]) { color: #ffffff; transition: opacity 0.2s cubic-bezier(0.445, 0.05, 0.55, 0.95); } .p-footer-navigation__item > a:not([class]):hover { opacity: 0.5; } .p-footer-navigation__group { display: flex; flex-direction: column; gap: 40px; } .p-footer-navigation__group.-pages { grid-area: pages; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); font-weight: 700; } .p-footer-navigation__group.-pages > *:first-child { grid-row: span 2/span 2; } .p-footer-navigation__group.-sites, .p-footer-navigation__group.-info { grid-area: sites; font-weight: 400; font-size: 0.875em; gap: 16px; } .p-footer-navigation__group.-info { grid-area: info; } .p-footer-navigation__group.-child { gap: 16px; font-size: 0.75em; font-weight: 400; } .p-footer-navigation__group.-child .p-footer-navigation__item { position: relative; padding-left: 20px; } .p-footer-navigation__group.-child .p-footer-navigation__item::before { content: ""; position: absolute; top: 0.625rem; left: 0; display: block; width: 0.625rem; height: 2px; background-color: #008b9b; } .p-footer-navigation__cta { grid-area: cta; display: flex; align-items: flex-end; justify-content: center; } .p-footer { position: relative; z-index: 10; } .p-footer__navigation { background-color: #003c44; padding: 3.5rem 1.5rem; } .p-footer__bottom { padding: 1.5rem; } .p-footer__inner { max-width: 1080px; margin-right: auto; margin-left: auto; } .p-footer__about { display: flex; align-items: center; justify-content: space-between; gap: 20px 20px; } .p-footer__copyright { display: flex; flex-wrap: wrap; gap: 0px 0.4em; font-size: 0.75em; } .p-footer__logos { display: flex; align-items: center; gap: 0px 40px; } .p-footer__logo { width: 100px; } .p-footer__logo > a { display: block; } .p-footer__logo > a > img { display: block; } .p-footer__logo.-imagica-group { width: 120px; } .p-footer__logo.-pmark { width: 72px; } .p-form { display: grid; grid-template-columns: repeat(1, minmax(0, 1fr)); gap: 40px 0px; } .p-form__label > label { display: block; color: #008b9b; font-size: 14px !important; font-weight: 700; margin-bottom: 8px; padding: 0px 8px; } .p-form__checkbox .wpcf7-acceptance, .p-form__checkbox .wpcf7-checkbox { display: grid; grid-template-columns: repeat(1, minmax(0, 1fr)); gap: 8px; } .p-form__checkbox .wpcf7-acceptance .wpcf7-list-item, .p-form__checkbox .wpcf7-checkbox .wpcf7-list-item { display: block; margin-left: 24px; } .p-form__checkbox .wpcf7-acceptance .wpcf7-list-item .wpcf7-list-item-label, .p-form__checkbox .wpcf7-checkbox .wpcf7-list-item .wpcf7-list-item-label { position: relative; cursor: pointer; } .p-form__checkbox .wpcf7-acceptance .wpcf7-list-item .wpcf7-list-item-label::before, .p-form__checkbox .wpcf7-acceptance .wpcf7-list-item .wpcf7-list-item-label::after, .p-form__checkbox .wpcf7-checkbox .wpcf7-list-item .wpcf7-list-item-label::before, .p-form__checkbox .wpcf7-checkbox .wpcf7-list-item .wpcf7-list-item-label::after { position: absolute; display: block; } .p-form__checkbox .wpcf7-acceptance .wpcf7-list-item .wpcf7-list-item-label::before, .p-form__checkbox .wpcf7-checkbox .wpcf7-list-item .wpcf7-list-item-label::before { top: 4px; left: -24px; width: 17px; height: 17px; background-color: #efffff; border: 1px solid #008b9b; border-radius: 2px; } .p-form__checkbox .wpcf7-acceptance .wpcf7-list-item .wpcf7-list-item-label::after, .p-form__checkbox .wpcf7-checkbox .wpcf7-list-item .wpcf7-list-item-label::after { top: 8px; left: -20px; display: none; width: 9px; height: 6px; border-bottom: 2px solid #008b9b; border-left: 2px solid #008b9b; transform: rotate(-45deg); } .p-form__checkbox .wpcf7-acceptance .wpcf7-list-item input[type=checkbox]:checked + .wpcf7-list-item-label::after, .p-form__checkbox .wpcf7-checkbox .wpcf7-list-item input[type=checkbox]:checked + .wpcf7-list-item-label::after { display: block; } .p-form__select { position: relative; } .p-form__select::after { content: ""; position: absolute; top: 21px; right: 10px; display: block; border-top: 6px solid #008b9b; border-right: 6px solid transparent; border-left: 6px solid transparent; } .p-form__select .wpcf7-select { display: block; width: 100%; padding: 8px 16px; border: 1px solid #008b9b; border-radius: 8px; background-color: #efffff; cursor: pointer; } .p-form__select .wpcf7-select .placeholder { color: #b4b4b4; } .p-form__select .wpcf7-select.wpcf7-not-valid { border-color: red; } .p-form__radio .wpcf7-radio { display: grid; grid-template-columns: repeat(1, minmax(0, 1fr)); gap: 8px; } .p-form__radio .wpcf7-radio .wpcf7-list-item { display: block; margin-left: 24px; } .p-form__radio .wpcf7-radio .wpcf7-list-item .wpcf7-list-item-label { position: relative; cursor: pointer; } .p-form__radio .wpcf7-radio .wpcf7-list-item .wpcf7-list-item-label::before, .p-form__radio .wpcf7-radio .wpcf7-list-item .wpcf7-list-item-label::after { position: absolute; display: block; border-radius: 50%; } .p-form__radio .wpcf7-radio .wpcf7-list-item .wpcf7-list-item-label::before { top: 4px; left: -24px; width: 17px; height: 17px; border: 1px solid #008b9b; background-color: #efffff; } .p-form__radio .wpcf7-radio .wpcf7-list-item .wpcf7-list-item-label::after { top: 8px; left: -20px; display: none; width: 9px; height: 9px; background-color: #008b9b; } .p-form__radio .wpcf7-radio .wpcf7-list-item input[type=radio]:checked + .wpcf7-list-item-label::after { display: block; } .p-form__input :where(input[type=text]), .p-form__input :where(input[type=tel]), .p-form__input :where(input[type=email]), .p-form__input :where(input[type=url]), .p-form__input :where(input[type=number]), .p-form__input :where(textarea) { display: block; width: 100%; border: 1px solid #008b9b; border-radius: 8px; background-color: #efffff; } .p-form__input :where(input[type=text])::-moz-placeholder, .p-form__input :where(input[type=tel])::-moz-placeholder, .p-form__input :where(input[type=email])::-moz-placeholder, .p-form__input :where(input[type=url])::-moz-placeholder, .p-form__input :where(input[type=number])::-moz-placeholder, .p-form__input :where(textarea)::-moz-placeholder { color: #b4b4b4; } .p-form__input :where(input[type=text])::placeholder, .p-form__input :where(input[type=tel])::placeholder, .p-form__input :where(input[type=email])::placeholder, .p-form__input :where(input[type=url])::placeholder, .p-form__input :where(input[type=number])::placeholder, .p-form__input :where(textarea)::placeholder { color: #b4b4b4; } .p-form__input :where(input[type=text]).wpcf7-not-valid, .p-form__input :where(input[type=tel]).wpcf7-not-valid, .p-form__input :where(input[type=email]).wpcf7-not-valid, .p-form__input :where(input[type=url]).wpcf7-not-valid, .p-form__input :where(input[type=number]).wpcf7-not-valid, .p-form__input :where(textarea).wpcf7-not-valid { border-color: red; } .p-form__input :where(input[type=text]), .p-form__input :where(input[type=tel]), .p-form__input :where(input[type=email]), .p-form__input :where(input[type=url]), .p-form__input :where(input[type=number]), .p-form__input :where(textarea) { padding: 8px 16px; } .p-form__row.-submit { display: flex; justify-content: center; } .p-form__row.-required .p-form__label > label::after { content: "*"; color: red; margin-left: 4px; } .wpcf7 .wpcf7-spinner { display: none !important; } .wpcf7 .wpcf7-not-valid-tip { font-size: 14px !important; padding: 0px 8px; } .wpcf7 form .wpcf7-response-output { margin: 0px; margin-top: 32px; padding: 16px; border: 2px solid #00a0d2; } .wpcf7 form.sent .wpcf7-response-output { display: none; border-color: red; } .wpcf7 form.invalid .wpcf7-response-output { border-color: red; } .p-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 58px 30px; } .p-grid__item.-span-2 { grid-column: span 2/span 2; } .p-grid.-gap-normal { gap: 16px; } .p-grid.-col-1 { grid-template-columns: repeat(1, minmax(0, 1fr)); } .p-grid.-col-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); } .p-grid.-items-center { align-items: center; } .p-grid.-center-1item { grid-template-columns: repeat(1, minmax(0, 525px)); place-content: center; } .p-header-navigation { position: relative; display: flex; align-items: center; gap: 32px; height: 100%; padding: 46px 0px 16px; } .p-header-navigation__main { display: flex; gap: 0px 32px; width: 100%; } .p-header-navigation__main > li { position: relative; } .p-header-navigation__main > li > a { position: relative; display: block; height: 100%; font-weight: 500; transition: color 0.2s cubic-bezier(0.445, 0.05, 0.55, 0.95); } .p-header-navigation__main > li > a:hover { color: #008b9b; } .p-header-navigation__main > li > a::before { content: ""; position: absolute; top: calc(50% - 0.625em); right: 1.25em; display: block; width: 1.25em; height: 1.25em; background-color: #ffffff; border: 1px solid #008b9b; border-radius: 50%; } .p-header-navigation__main > li > a::after { content: ""; position: absolute; top: calc(50% - 0.25em); right: 1.625em; -webkit-mask: url('data:image/svg+xml;charset=UTF-8,') no-repeat center center; mask: url('data:image/svg+xml;charset=UTF-8,') no-repeat center center; background-color: #008b9b; display: block; width: 0.5em; height: 0.5em; } .p-header-navigation__main > li > a:has(+ .p-header-navigation__childs)::before { display: none; } .p-header-navigation__main > li > a:has(+ .p-header-navigation__childs)::after { -webkit-mask: url('data:image/svg+xml;charset=UTF-8,'); mask: url('data:image/svg+xml;charset=UTF-8,'); width: 1rem; height: 1rem; } .p-header-navigation__main > li > a:has(+ .p-header-navigation__childs).is-child-show::after { -webkit-mask: url('data:image/svg+xml;charset=UTF-8,'); mask: url('data:image/svg+xml;charset=UTF-8,'); } .p-header-navigation__main > li.-current > a > span { position: relative; display: inline-block; } .p-header-navigation__main > li.-current > a > span::after { display: block; position: absolute; bottom: -4px; left: 0; width: 100%; height: 2px; background-color: #008b9b; content: ""; } .p-header-navigation__sub { display: flex; gap: 0px 24px; width: 100%; } .p-header-navigation__sub > li { font-size: 0.875rem; } .p-header-navigation__sub > li > a { font-weight: 500; transition: color 0.2s cubic-bezier(0.445, 0.05, 0.55, 0.95); } .p-header-navigation__sub > li > a:hover { color: #008b9b; } .p-header-navigation__tools { display: flex; justify-content: space-between; gap: 28px 24px; } .p-header-navigation__tools > li { display: flex; align-items: center; } .p-header-navigation__childs { display: flex; flex-direction: column; gap: 20px 0px; } .p-header-navigation__childs::before { content: ""; position: absolute; top: 0; left: 50%; transform: translate(-50%, -100%); display: block; width: 50%; height: 1rem; } .p-header-navigation__childs > li > a { position: relative; display: block; font-weight: 500; transition: color 0.2s cubic-bezier(0.445, 0.05, 0.55, 0.95); } .p-header-navigation__childs > li > a:hover { color: #008b9b; } .p-header-navigation__childs > li > a::before { content: ""; position: absolute; top: calc(50% - 0.625em); right: 1.25em; display: block; width: 1.25em; height: 1.25em; background-color: #ffffff; border: 1px solid #008b9b; border-radius: 50%; } .p-header-navigation__childs > li > a::after { content: ""; position: absolute; top: calc(50% - 0.25em); right: 1.625em; -webkit-mask: url('data:image/svg+xml;charset=UTF-8,') no-repeat center center; mask: url('data:image/svg+xml;charset=UTF-8,') no-repeat center center; background-color: #008b9b; display: block; width: 0.5em; height: 0.5em; } .p-header-navigation__cta { display: flex; justify-content: center; } .p-header { position: fixed; top: 0; left: 0; right: 0; z-index: 9999; display: flex; align-items: center; justify-content: space-between; width: 100%; padding: 0px 20px; background-color: #ffffff; box-shadow: none; transition: background-color 0.2s cubic-bezier(0.445, 0.05, 0.55, 0.95), box-shadow 0.2s cubic-bezier(0.445, 0.05, 0.55, 0.95); } .p-header__sitelogo { position: relative; z-index: 2; flex: 0 0 200px; } .p-header__sitelogo a { display: flex; align-items: center; justify-content: center; } .p-header__open, .p-header__close { position: relative; z-index: 3; display: flex; align-items: center; justify-content: center; cursor: pointer; } .p-header__open svg, .p-header__close svg { width: 30px; height: 30px; pointer-events: none; } .p-header__open:focus, .p-header__close:focus { outline: none; } .p-header__close { display: none; position: absolute; top: 15px; right: 20px; } .is-menu-open .p-header__close { display: flex; } .is-menu-open .p-header__open { display: none; } .p-header__content { align-self: stretch; } .p-header__content.is-open { transition: opacity 0.2s cubic-bezier(0.445, 0.05, 0.55, 0.95); opacity: 1; pointer-events: all; will-change: opacity; } .p-header__content.is-closing { transition: opacity 0.2s cubic-bezier(0.445, 0.05, 0.55, 0.95); will-change: opacity; } .is-home .p-header { background-color: rgba(255, 255, 255, 0); } .is-scrolled .p-header { background-color: #ffffff; box-shadow: 0px 0px 8px 2px rgba(185, 185, 185, 0.15); } .p-header:hover { background-color: #ffffff; box-shadow: 0px 0px 8px 2px rgba(185, 185, 185, 0.15); } .p-home-mission { position: relative; padding-bottom: 150px; } .p-home-mission::before { content: ""; position: absolute; top: 0; left: 0; z-index: -1; display: block; width: 100%; height: 100%; background-color: #efffff; } .p-home-mission::after { --half-height: 1000px; --half-width: calc(500 / 1600 * 100vw); content: ""; position: absolute; right: 0; bottom: 0; z-index: -1; display: block; border-top: var(--half-height) solid transparent; border-right: var(--half-width) solid #d0eff1; border-bottom: var(--half-height) solid #d0eff1; border-left: var(--half-width) solid transparent; } .p-home-mission__inner { position: relative; overflow-x: hidden; } .p-home-mission__image { position: relative; z-index: 2; height: 900px; pointer-events: none; } .p-home-mission__image img { width: 100%; height: 100%; -o-object-fit: cover; object-fit: cover; } .p-home-mission__body { position: relative; z-index: 2; max-width: 1240px; margin-top: -270px; margin-right: auto; margin-left: auto; padding-top: 70px; padding-bottom: 70px; padding-left: 460px; } .p-home-mission__body::before { content: ""; position: absolute; top: 0; transform: translateX(-70px); z-index: -1; display: block; width: 100vw; height: 100%; background-color: #ffffff; } .p-home-mission__title { position: relative; display: flex; flex-direction: column; align-items: flex-start; } .p-home-mission__title > :where(span) { display: block; color: #008b9b; } .p-home-mission__title > :where(span):first-child { position: absolute; top: -195px; left: -8px; font-size: 9.375rem; font-weight: 900; line-height: 1; } .p-home-mission__title > :where(span):nth-child(2) { color: #000000; font-size: 1.875rem; font-weight: 700; letter-spacing: 0.12em; } .p-home-mission__lead { margin-top: 50px; font-size: 1.25rem; font-weight: 500; line-height: 2.2; } .p-home-mission__link { margin-top: 44px; } .p-home-mv { height: 100vh; max-height: 800px; background-color: #ffffff; } .p-home-mv__scroller { position: absolute; z-index: 10; transform-origin: right bottom; transform: rotate(90deg); padding-right: 72px; color: #ff4e00; font-size: 0.75rem; } .p-home-mv__scrollerBar { position: absolute; top: 50%; right: 0; transform: translate(0%, calc(-50% + 1px)); width: 60px; height: 2px; font-size: 0px; overflow: hidden; } .p-home-mv__scrollerBar::before, .p-home-mv__scrollerBar::after { content: ""; position: absolute; display: block; width: 100%; height: 100%; } .p-home-mv__scrollerBar::before { background-color: rgba(255, 78, 0, 0.2); } .p-home-mv__scrollerBar::after { width: 20px; height: 100%; background-color: #ff4e00; animation: loopScroll 2s cubic-bezier(0.755, 0.05, 0.855, 0.06) infinite; } @keyframes loopScroll { 0% { transform: translateX(-25px); } 100% { transform: translateX(80px); } } .p-home-mv__inner { position: relative; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); grid-template-rows: repeat(1, minmax(0, 1fr)); max-width: 1600px; margin-right: auto; margin-left: auto; height: 100%; overflow: hidden; } .p-home-mv__textBlock { position: relative; z-index: 2; height: 100%; pointer-events: none; } .p-home-mv__text { position: absolute; } .p-home-mv__text > img { display: block; width: 100%; height: auto; } .p-home-mv__imageBlock { position: relative; height: 100%; pointer-events: none; } .p-home-mv__image { position: absolute; width: 800px; height: 100%; overflow: hidden; } .p-home-mv__image > img { width: 100%; height: 100%; -o-object-fit: cover; object-fit: cover; } .p-home-mv__leftmask { position: absolute; top: 0; left: 0; width: 194px; height: 100%; background-color: #ffffff; border-right: 2px solid #008b9b; transform-origin: top right; transform: skewX(-13.5deg); } .p-home-mv__leftmask::after { content: ""; position: absolute; top: 0; right: -32px; display: block; width: 16px; height: 100%; background-color: #008b9b; } .p-home-mv__rightmask { position: absolute; top: 0; right: 0; width: 208px; height: 100%; background-color: #ffffff; transform-origin: bottom left; transform: skewX(-13.5deg); border-left: 16px solid #008b9b; } .p-home-news { padding: 0px 20px; padding-top: 100px; padding-bottom: 140px; } .p-home-news__inner { display: grid; grid-template-columns: max-content minmax(0, 1fr); gap: 32px 140px; max-width: 1240px; margin-right: auto; margin-left: auto; } .p-home-news__header { display: flex; gap: 32px; } .p-home-news__title { font-size: 3.125rem; font-weight: 900; line-height: 1; } .p-home-pickup { padding-top: 100px; padding-bottom: 100px; } .p-home-pickup__inner { max-width: 1240px; margin-right: auto; margin-left: auto; } .p-home-pickup__title { font-size: 2.5rem; font-weight: 900; text-align: center; } .p-home-recruit { position: relative; padding: 150px 20px; } .p-home-recruit::before { content: ""; position: absolute; top: 0; right: 0; bottom: 0; z-index: -1; display: block; width: 40%; background-color: #d0eff1; } .p-home-recruit__inner { display: flex; align-items: center; gap: 56px; max-width: 1240px; margin-right: auto; margin-left: auto; } .p-home-recruit__title { display: flex; flex-direction: column; align-items: flex-start; } .p-home-recruit__title > span { display: block; } .p-home-recruit__title > span:first-child { color: #008b9b; font-size: 3.75rem; font-weight: 900; line-height: 1; } .p-home-recruit__title > span:nth-child(2) { font-size: 1.25rem; font-weight: 700; } .p-home-recruit__list { display: flex; gap: 30px 24px; } .p-home-service { position: relative; padding-bottom: 120px; } .p-home-service::before { --half-height: 1050px; --half-width: calc(700 / 1600 * 100vw); content: ""; position: absolute; z-index: -1; bottom: 0; left: 0; display: block; border-top: var(--half-height) solid transparent; border-right: var(--half-width) solid transparent; border-bottom: var(--half-height) solid #efffff; border-left: var(--half-width) solid #efffff; } .p-home-service__inner { position: relative; padding: 0px 20px; } .p-home-service__inner.-canvas { display: flex; justify-content: center; padding: 0px; } .p-home-service__body { position: relative; max-width: 1240px; margin-right: auto; margin-left: auto; } .p-home-service__title { position: relative; display: flex; flex-direction: column; align-items: flex-start; } .p-home-service__title > :where(span) { display: block; color: #008b9b; } .p-home-service__title > :where(span):first-child { font-size: 4.75rem; font-weight: 900; line-height: 1; letter-spacing: 0.05em; } .p-home-service__texts { display: flex; justify-content: start; margin-top: 15px; margin-bottom: 40px; } .p-home-service__texts p { font-size: 1.25rem; font-weight: 500; } .p-home-service__lead { display: flex; flex-wrap: wrap; color: #008b9b; font-size: 3.375rem; font-weight: 900; } .p-home-service__lead span { display: flex; flex-wrap: wrap; } .p-home-service__description { position: relative; z-index: 2; display: flex; } .p-home-service__description > p { padding-left: 30px; border-left: 2px solid #008b9b; font-size: 1.25rem; font-weight: 700; line-height: 2.2; } .p-home-service__description.-top { position: relative; z-index: 3; } .p-home-service__description.-bottom { align-items: flex-end; justify-content: space-between; flex-wrap: wrap; gap: 40px; } .p-home-service__description.-bottom > * { flex-grow: 1; } .p-home-service__titleBg { position: absolute; top: 0; left: 50%; font-size: 40rem; word-wrap: break-word; color: #d0eff1; font-weight: 900; line-height: 0.8em; } .p-home-service__canvas { flex-shrink: 0; position: relative; } .p-home-service__canvas *[class^=service-svg-] { position: absolute; z-index: 2; } .p-home-service__list { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; margin: 20px auto 60px auto; max-width: 1240px; } .p-home-service__list li { position: relative; max-width: 400px; margin-right: auto; margin-left: auto; background-color: #fff; border: 2px solid #d0eff0; box-shadow: 4px 4px 0px 0px rgba(0, 134, 155, 0.2); border-radius: 12px; } .p-home-service__list li a:hover { background-color: #d4f0f4; transition: color 0.2s cubic-bezier(0.445, 0.05, 0.55, 0.95), border-color 0.2s cubic-bezier(0.445, 0.05, 0.55, 0.95), background-color 0.2s cubic-bezier(0.445, 0.05, 0.55, 0.95); border-radius: 8px; } .p-home-service__list a { height: 100%; } .p-home-service__list a::before { content: ""; display: block; position: absolute; bottom: 13px; right: 15px; width: 2.5em; height: 2.5em; border-radius: 50%; background-color: #008b9b; } .p-home-service__list a::after { content: ""; display: block; position: absolute; bottom: 25px; right: 26px; width: 1em; height: 1em; background-color: #fff; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' version='1.1' viewBox='0 0 7.64 5.62' fill='none' stroke='%23008b9b'%3E%3Cpath d='m5,.31l2,2.47-2,2.53'/%3E%3Cpath d='m7,2.82H0'/%3E%3C/svg%3E") no-repeat center center; -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' version='1.1' viewBox='0 0 7.64 5.62' fill='none' stroke='%23008b9b'%3E%3Cpath d='m5,.31l2,2.47-2,2.53'/%3E%3Cpath d='m7,2.82H0'/%3E%3C/svg%3E") no-repeat center center; } .p-home-service__list li a { display: block; padding: 30px; padding-bottom: 50px; } .p-home-service__list figure { display: flex; justify-content: center; } .p-home-service__listTitle { display: flex; align-items: center; margin-bottom: 18px; height: 60px; font-size: 28px; font-weight: 700; line-height: 110%; } .p-home-service__listText { font-size: 16px; font-weight: 400; line-height: 150%; } .p-hr-card { display: grid; grid-template-columns: repeat(1, minmax(0, 1fr)); align-content: start; gap: 12px 0px; height: 100%; padding: 16px; outline: 1px solid #b9b9b9; } .p-hr-card__header { display: grid; grid-template-columns: max-content minmax(0, 1fr); gap: 8px 12px; align-items: center; } .p-hr-card__image { grid-row: span 1/span 1; width: 80px; aspect-ratio: 1/1; padding: 8px 4px 0px; border-radius: 50%; outline: 1px solid #b9b9b9; overflow: hidden; } .p-hr-card__image > img { display: block; width: 100%; aspect-ratio: 1/1; -o-object-fit: cover; object-fit: cover; -o-object-position: top center; object-position: top center; } .p-hr-card__title { font-size: 1.25rem; font-weight: 500; line-height: 1.35; } .p-hr-card__lead { grid-column: span 2/span 2; color: #ff4e00; } .p-hr-card__label { display: inline-block; padding: 5px 8px 7px; background-color: #008b9b; color: #ffffff; font-weight: 500; line-height: 1; } .p-hr-card__list { margin-top: 8px; } .p-hr-card__listItem { position: relative; padding-left: 1em; } .p-hr-card__listItem::before { content: ""; position: absolute; top: 0.875em; left: 0; display: block; width: 0.5em; height: 2px; background-color: #008b9b; } .p-link-list { display: grid; grid-template-columns: repeat(1, minmax(0, 1fr)); gap: 24px 0px; } .p-link-list__row { outline: 1px solid #b9b9b9; } .p-link-list__link { display: grid; grid-template-columns: repeat(1, minmax(0, 1fr)); gap: 16px 0px; background-color: #ffffff; padding: 16px; } .p-link-list__link:hover .p-link-list__title { color: #008b9b; } .p-link-list__link:hover .p-link-list__title::before { background-color: #d4f0f4; } .p-link-list__link:hover .p-link-list__title::after { background-color: #008b9b; } .p-link-list__title { position: relative; padding-right: 40px; font-size: 1.125rem; font-weight: 700; transition: color 0.2s ease-out; } .p-link-list__title::before { content: ""; position: absolute; top: calc(50% - 0.625rem); right: 0; display: block; width: 1.25rem; height: 1.25rem; background-color: #008b9b; border: 1px solid #008b9b; border-radius: 50%; transition: background-color 0.2s ease-out; } .p-link-list__title::after { content: ""; position: absolute; top: calc(50% - 0.25rem); right: 0.375rem; -webkit-mask: url('data:image/svg+xml;charset=UTF-8,') no-repeat center center; mask: url('data:image/svg+xml;charset=UTF-8,') no-repeat center center; background-color: #ffffff; display: block; width: 0.5rem; height: 0.5rem; transition: background-color 0.2s ease-out; } .p-link-list__description { display: -webkit-box; overflow: hidden; text-overflow: ellipsis; -webkit-box-orient: vertical; -webkit-line-clamp: 3; } .p-news-list__item:not(:last-child) { padding-bottom: 48px; } .p-news-list__item.-new .p-news-list__title::before { content: "New"; margin-right: 0.75em; font-weight: 700; letter-spacing: 0em; color: #008b9b; } .p-news-list__link { display: grid; grid-template-columns: max-content max-content minmax(0, 1fr); gap: 16px 24px; } .p-news-list__link:hover .p-news-list__title { color: #008b9b; } .p-news-list__date { color: #b4b4b4; font-size: 1rem; font-weight: 700; } .p-news-list__title { transition: color 0.2s cubic-bezier(0.445, 0.05, 0.55, 0.95); } .p-news-list.-border .p-news-list__item { padding-top: 32px; padding-bottom: 32px; border-bottom: 1px solid #b4b4b4; } .p-news-list.-border .p-news-list__item:first-child { border-top: 1px solid #b4b4b4; } .p-news-list.-icon .p-news-list__link { position: relative; padding-right: 56px; } .p-news-list.-icon .p-news-list__link::before { content: ""; position: absolute; top: calc(50% - 0.625em); right: 0; display: block; width: 1.25em; height: 1.25em; background-color: #ffffff; border: 1px solid #008b9b; border-radius: 50%; transition: background-color 0.2s cubic-bezier(0.445, 0.05, 0.55, 0.95); } .p-news-list.-icon .p-news-list__link::after { content: ""; position: absolute; top: calc(50% - 0.25em); right: 0.375em; -webkit-mask: url('data:image/svg+xml;charset=UTF-8,') no-repeat center center; mask: url('data:image/svg+xml;charset=UTF-8,') no-repeat center center; background-color: #008b9b; display: block; width: 0.5em; height: 0.5em; transition: background-color 0.2s cubic-bezier(0.445, 0.05, 0.55, 0.95); } .p-news-list.-icon .p-news-list__link:hover::before { background-color: #008b9b; } .p-news-list.-icon .p-news-list__link:hover::after { background-color: #ffffff; } .p-notice { display: grid; grid-template-columns: repeat(1, minmax(0, 1fr)); gap: 8px 0px; padding: 32px 24px; background-color: #f1f6f7; } .p-notice__heading { font-weight: 700; } .p-notice__text { display: flex; flex-direction: column; align-items: flex-start; gap: 8px; } .p-page-header { padding-bottom: 80px; } .p-page-header__image { position: relative; overflow: hidden; height: 340px; } .p-page-header__image::before, .p-page-header__image::after { content: ""; position: absolute; bottom: 0; right: 0; z-index: 2; display: block; width: 100vw; } .p-page-header__image::before { --half-height: calc(80 / 1600 * 100vw); border-top: var(--half-height) solid transparent; border-right: 50vw solid #008b9b; border-bottom: var(--half-height) solid #008b9b; border-left: 50vw solid transparent; } .p-page-header__image::after { --half-height: calc(60 / 1600 * 100vw); border-top: var(--half-height) solid transparent; border-right: 50vw solid #ffffff; border-bottom: var(--half-height) solid #ffffff; border-left: 50vw solid transparent; } .p-page-header__image > img { display: block; width: 100%; height: 100%; -o-object-fit: cover; object-fit: cover; } .p-page-header__body { margin-top: 8px; position: relative; padding: 0px 20px; z-index: 3; } .p-page-header__breadcrumb { display: flex; justify-content: start; max-width: 1080px; margin-right: auto; margin-left: auto; } .p-page-header__title { max-width: 1080px; margin-top: 40px; margin-right: auto; margin-left: auto; } .p-page-header__information { display: flex; align-items: center; justify-content: space-between; max-width: 1080px; margin-top: 40px; margin-right: auto; margin-left: auto; } .p-page-header__date { text-align: right; } .p-page { position: relative; padding: 0px 20px 80px; } .p-page__inner { position: relative; z-index: 3; display: grid; grid-template-columns: repeat(1, minmax(0, 1fr)); gap: 80px 40px; max-width: 1080px; margin-right: auto; margin-left: auto; } .p-page__inner + .p-page__inner { margin-top: 104px; } .p-page__side { position: relative; } .p-page__sideInner { position: sticky; top: 142px; height: auto; } .p-page.-thanks .p-page__inner { max-width: 800px; } .p-page.-bg-green { margin-top: 80px; padding: 80px 20px 160px; } .p-page.-bg-green::before, .p-page.-bg-green::after { content: ""; position: absolute; top: 50%; left: 50%; z-index: 2; pointer-events: none; } .p-page.-bg-green::before { transform: translate(-50%, -50%) skewY(8deg); background-color: #d0eff1; width: 100vw; height: calc(100% - 6.9444444444vw); } .p-page.-bg-green::after { transform: translate(-50%, -50%) skewY(-4deg); background-color: #efffff; width: 100vw; height: calc(100% + 6.6666666667vw); } .p-pickup-slider { position: relative; width: 100%; } .p-pickup-slider .swiper-slide { aspect-ratio: 16/9; display: flex; align-items: center; justify-content: center; background-color: #b4b4b4; } .p-pickup-slider .swiper-slide a { display: block; } .p-pickup-slider .swiper-slide a:hover img { filter: brightness(0.9); } .p-pickup-slider .swiper-slide img { display: block; aspect-ratio: 16/9; -o-object-fit: cover; object-fit: cover; transition: filter 0.2s ease-in; } .p-pickup-slider .swiper-button-prev, .p-pickup-slider .swiper-button-next { width: 40px; height: 40px; margin-top: 0px; background-color: #ffffff; border: 1px solid #ff4e00; border-radius: 50%; cursor: pointer; } .p-pickup-slider .swiper-button-prev::after, .p-pickup-slider .swiper-button-next::after { color: #ff4e00; font-size: 1rem; line-height: 1; } .p-pickup-slider .swiper-button-prev:has(~ .swiper-pagination), .p-pickup-slider .swiper-button-next:has(~ .swiper-pagination) { top: 50%; transform: translateY(calc(-50% - 27px)); } .p-pickup-slider .swiper-pagination { position: relative; top: auto; bottom: auto; left: auto; display: flex; align-items: center; justify-content: center; gap: 0px 10px; padding: 0px 20px; padding-top: 50px; } .p-pickup-slider .swiper-pagination .swiper-pagination-bullet { flex: 0 1 45px; display: block; max-width: 45px; height: 4px; margin: 0px; background-color: #e2e2e2; border-radius: 0px; opacity: 1; cursor: pointer; transition: background-color 0.2s cubic-bezier(0.445, 0.05, 0.55, 0.95); } .p-pickup-slider .swiper-pagination .swiper-pagination-bullet.swiper-pagination-bullet-active { background-color: #ff4e00; } .p-recruit-card { position: relative; padding-right: 20px; padding-bottom: 20px; } .p-recruit-card__body { display: block; } .p-recruit-card__image { width: 100%; aspect-ratio: 270/430; overflow: hidden; } .p-recruit-card__image img { width: 100%; height: 100%; -o-object-fit: cover; object-fit: cover; transition: filter 0.2s cubic-bezier(0.445, 0.05, 0.55, 0.95); } .p-recruit-card__description { position: absolute; right: 0; bottom: 0; min-height: 236.5px; margin-left: 20px; padding: 30px; background-color: #ffffff; border-top: 2px solid #ff4e00; box-shadow: 0px 2px 8px 0px rgba(0, 0, 0, 0.1); } .p-recruit-card__title { color: #008b9b; font-weight: 700; } .p-recruit-card__lead { margin-top: 1.5rem; font-size: 0.875rem; display: -webkit-box; overflow: hidden; text-overflow: ellipsis; -webkit-box-orient: vertical; -webkit-line-clamp: 5; } .p-recruit-card a:hover .p-recruit-card__image img { filter: brightness(0.9); } .p-section { position: relative; padding: 80px 20px 80px; } .p-section > .lazyblock-inner-blocks { display: grid; grid-template-columns: repeat(1, minmax(0, 1fr)); row-gap: 104px; } .p-section > .lazyblock-inner-blocks.block-editor-block-list__layout > * { width: 100%; } .p-section__inner { position: relative; z-index: 3; max-width: 1080px; margin-right: auto; margin-left: auto; } .p-section__inner + .p-section__inner { margin-top: 104px; } .p-section.-fluid { padding-right: 0px; padding-left: 0px; } .-bg-green + .p-section { margin-top: 80px; } .p-section.-bg-green { margin-top: 80px; padding: 80px 20px 160px; } .p-section.-bg-green::before, .p-section.-bg-green::after { content: ""; position: absolute; top: 50%; left: 50%; z-index: 2; pointer-events: none; } .p-section.-bg-green::before { transform: translate(-50%, -50%) skewY(8deg); background-color: #d0eff1; width: 100vw; height: calc(100% - 6.9444444444vw); } .p-section.-bg-green::after { transform: translate(-50%, -50%) skewY(-4deg); background-color: #efffff; width: 100vw; height: calc(100% + 6.6666666667vw); } .p-section.-sample { position: relative; padding: 80px 20px 80px; border-top: 1px solid #d9d9d9; } .p-section.-sample::before { content: attr(data-sec-name); position: absolute; top: 0; left: 0; z-index: 2; display: block; width: -moz-max-content; width: max-content; padding: 0.5em 1em; background-color: red; color: #ffffff; font-size: 0.75rem; } .p-section.-sample .p-section__inner > * + * { margin-top: 2.5rem; } .p-section.-sample:last-child { border-bottom: 1px solid #d9d9d9; } .p-service-list { display: grid; grid-template-columns: minmax(0, 1fr); gap: 56px 60px; } .p-service-list__item { display: grid; grid-template-columns: repeat(1, minmax(0, 1fr)); gap: 16px 30px; } .p-service-list__item:first-child .p-service-list__description { padding-top: 0.25rem; } .p-service-list__thumbnail { display: flex; gap: 16px; } .p-service-list__image { width: 100%; } .p-service-list__image > img { display: block; aspect-ratio: 16/9; -o-object-fit: cover; object-fit: cover; } .p-service-list__title { display: flex; align-items: center; justify-content: flex-start; font-size: 1.25rem; font-weight: 700; } .p-side-navigation__group { padding: 0.5rem 0px; background-color: #008b9b; border-radius: 1.25rem; } .p-side-navigation__item:not(:last-child) { border-bottom: 1px solid rgba(255, 255, 255, 0.5); } .p-side-navigation__item a { position: relative; display: block; padding: 1rem 3.75rem 1rem 1.875rem; color: #ffffff; font-weight: 700; transition: opacity 0.2s ease-out; } .p-side-navigation__item a:hover { opacity: 0.5; } .p-side-navigation__item a::before { content: ""; position: absolute; top: 50%; right: 1.2em; transform: translateY(-50%); display: block; width: 1.25em; height: 1.25em; background-color: #ffffff; border: 1px solid #008b9b; border-radius: 50%; } .p-side-navigation__item a::after { content: ""; position: absolute; top: calc(50% - 0.25em); right: 1.575em; -webkit-mask: url('data:image/svg+xml;charset=UTF-8,') no-repeat center center; mask: url('data:image/svg+xml;charset=UTF-8,') no-repeat center center; background-color: #008b9b; display: block; width: 0.5em; height: 0.5em; } .p-service-introduction { position: relative; width: 100%; text-align: center; letter-spacing: initial; } .p-service-introduction__bg { position: absolute; top: 0; left: calc((100vw - 100%) / -2); z-index: -1; width: 100vw; height: 100%; background-color: #f4f4f4; background-image: url(./assets/img/img_service-introduction_sp.jpg); background-size: cover; background-position: center; background-repeat: no-repeat; transform: scaleY(0.9); border-top-left-radius: 2000px 300px; border-top-right-radius: 2000px 300px; border-bottom-left-radius: 2000px 300px; border-bottom-right-radius: 2000px 300px; } .p-service-introduction__item { position: absolute; top: 0; left: 50%; transform: translate(-50%, 0); display: flex; align-items: center; justify-content: center; aspect-ratio: 1/1; padding: 8px; border-radius: 50%; background-color: #328694; color: #ffffff; text-align: center; font-size: 14px; transition: background-color 0.2s ease-out; } .p-service-introduction__item:hover { background-color: #008b9b !important; } .p-service-introduction__title { font-weight: 700; font-size: 2em; line-height: 1.25; white-space: nowrap; } .p-service-introduction__description { margin-top: 1em; font-weight: 500; line-height: 1.5; white-space: nowrap; } .p-service-introduction__item.-typeM { background-color: #5b9ea9; font-size: 12px; } .p-service-introduction__item.-typeS { background-color: #6faab4; font-size: 11px; } .p-service-introduction__item.-typeXS { font-size: 10px; background-color: #8bb5bc; font-weight: 700; } .p-service-introduction__item.-type01 { transform: translate(-50%, 12%); } .p-service-introduction__item.-type02 { transform: translate(-73%, 115%); } .p-service-introduction__item.-type02 .p-service-introduction__title { margin-top: 1.75em; } .p-service-introduction__item.-type03 { padding: 16px; transform: translate(-75%, 232%); } .p-service-introduction__item.-type03 .p-service-introduction__title { margin-top: 0.5em; } .p-service-introduction__item.-type04 { transform: translate(-8%, 234%); } .p-service-introduction__item.-type04 .p-service-introduction__title { margin-top: 1em; } .p-service-introduction__item.-type05 { transform: translate(-8%, 386%); } .p-service-introduction__item.-type05 .p-service-introduction__title { margin-top: 1em; } .p-service-introduction__item.-type06 { padding: 16px; transform: translate(-107%, 525%); } .p-service-introduction__item.-type06 .p-service-introduction__title { margin-top: -0.5em; } .p-service-introduction__item.-type07 { transform: translate(6%, 559%); padding: 16px; } .p-service-introduction__item.-type08 { transform: translate(-93%, 654%); } .c-accordion { outline: 1px solid #b9b9b9; } .c-accordion__button { --arrow-color: #ffffff; --bg-color: #008b9b; position: relative; padding: 16px 56px 16px 16px; font-weight: 700; cursor: pointer; } .c-accordion__button::before, .c-accordion__button::after { content: ""; position: absolute; display: block; } .c-accordion__button::before { top: calc(50% - 0.75em); right: 16px; width: 1.5em; height: 1.5em; background-color: var(--bg-color); border: 1px solid #008b9b; border-radius: 50%; transition: background-color 0.2s cubic-bezier(0.77, 0, 0.175, 1); } .c-accordion__button::after { top: calc(50% - 0.25em - 1px); display: block; width: 0.5em; right: calc(16px + 0.75em - 0.25em); height: 0.5em; border-right: 2px solid var(--arrow-color); border-bottom: 2px solid var(--arrow-color); transform: rotate(45deg); transition: border-color 0.2s cubic-bezier(0.77, 0, 0.175, 1); } .c-accordion__inner { padding: 0rem 1.5rem 1.25rem; opacity: 0; transition: opacity 0.2s cubic-bezier(0.77, 0, 0.175, 1); } .c-accordion + .c-accordion { margin-top: 1rem; } .c-accordion .js-accordion-content { overflow: hidden; height: 0px; } .c-accordion.-faq { position: relative; } .c-accordion.-faq::before { content: "Q"; position: absolute; top: calc(30px - 1em); left: 16px; color: #008b9b; font-size: 1.5em; font-weight: 900; } .c-accordion.-faq .c-accordion__button { padding-left: 48px; } .c-accordion.is-open .c-accordion__button::after { top: calc(50% - 0.25em + 2px); transform: scale(1, -1) rotate(45deg); } .c-accordion.is-open .c-accordion__button:hover { outline: none; } .c-accordion.is-open .c-accordion__inner { opacity: 1; } .c-breadcrumb { height: 28px; overflow: hidden; } .c-breadcrumb > ol { display: flex; align-items: center; overflow-x: auto; white-space: nowrap; gap: 0px 32px; } .c-breadcrumb > ol > li { position: relative; font-size: 0.875rem; } .c-breadcrumb > ol > li:not(:first-child)::before { content: ""; position: absolute; top: 13px; left: -18px; transform: translate(-50%, -50%) rotate(45deg); display: block; width: 6px; height: 6px; border-top: 1px solid #b4b4b4; border-right: 1px solid #b4b4b4; } .c-breadcrumb > ol > li > a { display: block; color: #008b9b; } .c-breadcrumb > ol > li > span { display: block; color: #b4b4b4; } .c-button, .c-buttons a, .c-buttons button { --bg-color: #ffffff; --border-color: #000000; --text-color: #000000; --icon-border-color: #b9b9b9; position: relative; display: inline-flex; align-items: center; justify-content: center; cursor: pointer; min-width: 16.25rem; min-height: 50px; padding: 0.5em 3rem; border: 1px solid #000000; border-radius: 400px; font-size: 1.125rem; font-weight: 400; line-height: 1.2; vertical-align: bottom; background-color: var(--bg-color); border-color: var(--border-color); color: var(--text-color); transition: color 0.2s cubic-bezier(0.445, 0.05, 0.55, 0.95), border-color 0.2s cubic-bezier(0.445, 0.05, 0.55, 0.95), background-color 0.2s cubic-bezier(0.445, 0.05, 0.55, 0.95); } .c-button::before, .c-buttons a::before, .c-buttons button::before { content: ""; position: absolute; top: calc(50% - 0.625em); right: 0.875em; display: block; width: 1.25em; height: 1.25em; background-color: #ffffff; border: 1px solid var(--border-color); border-radius: 50%; } .c-button::after, .c-buttons a::after, .c-buttons button::after { content: ""; position: absolute; top: calc(50% - 0.25em); right: 1.25em; -webkit-mask: url('data:image/svg+xml;charset=UTF-8,') no-repeat center center; mask: url('data:image/svg+xml;charset=UTF-8,') no-repeat center center; background-color: var(--border-color); display: block; width: 0.5em; height: 0.5em; } .c-button span, .c-buttons a span, .c-buttons button span { text-align: left; -webkit-user-select: none; -moz-user-select: none; user-select: none; } .c-button[target=_blank]::before, .c-buttons a[target=_blank]::before, .c-buttons button[target=_blank]::before { display: none; } .c-button[target=_blank]::after, .c-buttons a[target=_blank]::after, .c-buttons button[target=_blank]::after { -webkit-mask: url('data:image/svg+xml;charset=UTF-8,') no-repeat center center; mask: url('data:image/svg+xml;charset=UTF-8,') no-repeat center center; top: calc(50% - 0.5em); width: 1em; height: 1em; } .c-button.-contact, .c-buttons a.-contact, .c-buttons button.-contact { padding: 0.5em 1rem; } .c-button.-contact::before, .c-buttons a.-contact::before, .c-buttons button.-contact::before { -webkit-mask: url('data:image/svg+xml;charset=UTF-8,') no-repeat center center; mask: url('data:image/svg+xml;charset=UTF-8,') no-repeat center center; position: relative; top: initial; right: initial; left: initial; display: inline-block; width: 1em; height: 1em; margin-right: 0.5em; background-color: var(--text-color); border: none; border-radius: 0%; } .c-button.-contact::after, .c-buttons a.-contact::after, .c-buttons button.-contact::after { display: none; } .c-button.-white-orange, .c-buttons a.-white-orange, .c-buttons button.-white-orange { --bg-color: #ffffff; --border-color: #ff4e00; --text-color: #ff4e00; } .c-button.-white-orange:hover, .c-buttons a.-white-orange:hover, .c-buttons button.-white-orange:hover { --bg-color: #ffeee6; } .c-button.-white-orange[target=_blank]::after, .c-buttons a.-white-orange[target=_blank]::after, .c-buttons button.-white-orange[target=_blank]::after { background-color: var(--text-color); } .c-button.-orange-white, .c-buttons a.-orange-white, .c-buttons button.-orange-white { --bg-color: #ff4e00; --border-color: #ff4e00; --text-color: #ffffff; } .c-button.-orange-white:after, .c-buttons a.-orange-white:after, .c-buttons button.-orange-white:after { --icon-border-color: #ff4e00; } .c-button.-orange-white:hover, .c-buttons a.-orange-white:hover, .c-buttons button.-orange-white:hover { --bg-color: #ffb391; } .c-button.-orange-white[target=_blank]::after, .c-buttons a.-orange-white[target=_blank]::after, .c-buttons button.-orange-white[target=_blank]::after { background-color: var(--text-color); } .c-button.-white-green, .c-buttons a.-white-green, .c-buttons button.-white-green { --bg-color: #ffffff; --border-color: #008b9b; --text-color: #008b9b; } .c-button.-white-green:hover, .c-buttons a.-white-green:hover, .c-buttons button.-white-green:hover { --bg-color: #d4f0f4; } .c-button.-white-green[target=_blank]::after, .c-buttons a.-white-green[target=_blank]::after, .c-buttons button.-white-green[target=_blank]::after { background-color: var(--text-color); } .c-button.-green-white, .c-buttons a.-green-white, .c-buttons button.-green-white { --bg-color: #008b9b; --border-color: #008b9b; --text-color: #ffffff; } .c-button.-green-white:after, .c-buttons a.-green-white:after, .c-buttons button.-green-white:after { --icon-border-color: #008b9b; } .c-button.-green-white:hover, .c-buttons a.-green-white:hover, .c-buttons button.-green-white:hover { --bg-color: #79ccd6; } .c-button.-green-white[target=_blank]::after, .c-buttons a.-green-white[target=_blank]::after, .c-buttons button.-green-white[target=_blank]::after { background-color: var(--text-color); } .c-button.-orange-white.-disabled, .c-buttons a.-orange-white.-disabled, .c-buttons button.-orange-white.-disabled, .c-button.-orange-white:disabled, .c-buttons a.-orange-white:disabled, .c-buttons button.-orange-white:disabled, .c-button.-green-white.-disabled, .c-buttons a.-green-white.-disabled, .c-buttons button.-green-white.-disabled, .c-button.-green-white:disabled, .c-buttons a.-green-white:disabled, .c-buttons button.-green-white:disabled { --bg-color: #b9b9b9; --border-color: #b9b9b9; --text-color: #ffffff; pointer-events: none; } .c-button.-orange-white.-disabled:after, .c-buttons a.-orange-white.-disabled:after, .c-buttons button.-orange-white.-disabled:after, .c-button.-orange-white:disabled:after, .c-buttons a.-orange-white:disabled:after, .c-buttons button.-orange-white:disabled:after, .c-button.-green-white.-disabled:after, .c-buttons a.-green-white.-disabled:after, .c-buttons button.-green-white.-disabled:after, .c-button.-green-white:disabled:after, .c-buttons a.-green-white:disabled:after, .c-buttons button.-green-white:disabled:after { --icon-border-color: #b9b9b9; } .c-button.-white-orange.-disabled, .c-buttons a.-white-orange.-disabled, .c-buttons button.-white-orange.-disabled, .c-button.-white-orange:disabled, .c-buttons a.-white-orange:disabled, .c-buttons button.-white-orange:disabled, .c-button.-white-green.-disabled, .c-buttons a.-white-green.-disabled, .c-buttons button.-white-green.-disabled, .c-button.-white-green:disabled, .c-buttons a.-white-green:disabled, .c-buttons button.-white-green:disabled { --bg-color: #ffffff; --border-color: #b9b9b9; --text-color: #b9b9b9; pointer-events: none; } .c-button.-large, .c-buttons a.-large, .c-buttons button.-large { min-width: 25rem; min-height: 60px; font-size: 1.5rem; font-weight: 700; } .c-button.-small, .c-buttons a.-small, .c-buttons button.-small { min-width: 13.75rem; min-height: 40px; font-size: 1rem; } .c-buttons { display: flex; align-items: center; justify-content: flex-start; flex-wrap: wrap; gap: 1.25rem; } .c-buttons.-large a, .c-buttons.-large button { min-width: 25rem; min-height: 60px; font-size: 1.5rem; font-weight: 700; } .c-buttons.-small a, .c-buttons.-small button { min-width: 13.75rem; min-height: 40px; font-size: 1rem; } .c-buttons.-center { justify-content: center; } .c-buttons.-right { justify-content: flex-end; } .wp-block-lazyblock-ids-button { margin-top: 4rem; margin-bottom: 4rem; } .c-definition-list { display: grid; grid-template-columns: max-content minmax(0, 1fr); gap: 16px 32px; } .c-definition-list > :where(dt) { font-weight: 700; } .c-definition-list > :where(dt):nth-of-type(even) { background-color: #ffffff; } .c-definition-list > :where(dd):nth-of-type(even) { background-color: #ffffff; } .c-definition-list + .c-definition-list { margin-top: 0px !important; } .c-definition-list.-border { gap: 0px; } .c-definition-list.-border > :where(dt), .c-definition-list.-border > :where(dd) { padding: 16px 32px; border-bottom: 1px solid #b4b4b4; } .c-definition-list.-monthly { grid-template-columns: 2.625em minmax(0, 1fr); } .c-definition-list.-monthly > :where(dt):nth-of-type(even), .c-definition-list.-monthly > :where(dd):nth-of-type(even) { background-color: inherit; } .c-flow { position: relative; display: grid; grid-template-columns: repeat(1, minmax(0, 1fr)); gap: 16px 0px; padding-bottom: 16px; counter-reset: flow-no; } .c-flow::before { content: ""; position: absolute; top: 32px; left: 38px; width: 4px; height: calc(100% - 32px); background-color: #b9b9b9; } .c-flow__item { counter-increment: flow-no; position: relative; display: grid; grid-template-columns: repeat(1, minmax(0, 1fr)); gap: 16px 24px; background-color: #ffffff; outline: 1px solid #b9b9b9; padding: 16px 16px 16px 80px; } .c-flow__heading { position: relative; font-size: 1.25rem; font-weight: 500; } .c-flow__heading::after { content: counter(flow-no); position: absolute; top: calc(50% - 24px); left: -64px; display: flex; align-items: center; justify-content: center; width: 48px; height: 48px; padding-bottom: 1px; padding-left: 1px; background-color: #008b9b; border-radius: 50%; color: #ffffff; font-size: 1.5rem; font-weight: 500; } .c-flow__heading::before { content: ""; position: absolute; top: calc(50% - 28px); left: -68px; display: block; width: 56px; height: 56px; background-color: #ffffff; border-radius: 50%; } .c-flow__image { padding: 24px; max-width: 500px; background-color: #f1f6f7; } .c-flow__image > img { display: block; width: 100%; } .c-heading1 { color: #008b9b; font-size: 2.875rem; font-weight: 700; } .is-news .c-heading1 { font-size: 2.5rem; } .c-heading1.-center { text-align: center; } .c-heading2 { color: #008b9b; font-size: 1.625rem; font-weight: 700; } .c-heading2.-border { position: relative; padding-bottom: 1rem; } .c-heading2.-border::before, .c-heading2.-border::after { content: ""; position: absolute; bottom: 0; display: block; } .c-heading2.-border::before { left: 0; width: 2.5rem; height: 3px; background-color: #ff4e00; } .c-heading2.-border::after { left: 3.125rem; transform: translateY(-1px); width: calc(100% - 3.125rem); height: 1px; background-color: #008b9b; } .c-heading3 { color: #008b9b; font-size: 1.25rem; font-weight: 700; } .c-heading4 { color: #008b9b; font-size: 1rem; font-weight: 700; } .c-introduction-president__image { display: flex; justify-content: flex-end; } .c-introduction-president__image > img { width: 33.333333%; aspect-ratio: 1/1; -o-object-fit: cover; object-fit: cover; } .c-introduction-president__name { margin-top: 1em; font-weight: 500; text-align: right; } .c-label, .c-labels li { position: relative; display: inline-block; width: -moz-max-content; width: max-content; padding: 12px 49px 12px 16px; color: #ffffff; line-height: 1; } .c-label::before, .c-labels li::before { content: ""; position: absolute; top: 0; left: 0; z-index: -1; display: block; width: calc(100% - 33px); height: 100%; background-color: #008b9b; } .c-label:after, .c-labels li:after { content: ""; position: absolute; top: 0; right: 0; display: block; border-top: 20px solid transparent; border-right: 15px solid transparent; border-bottom: 20px solid #ff4e00; border-left: 15px solid #ff4e00; } .c-labels { display: flex; flex-wrap: wrap; gap: 16px; } .c-labels li { flex-shrink: 0; } .c-lang { display: flex; } .c-lang > li { font-size: 0.875rem; } .c-lang > li > span { position: relative; display: block; color: #008b9b; } .c-lang > li > span::after { content: ""; position: absolute; bottom: 0; left: 0; display: block; width: 100%; height: 2px; background-color: #008b9b; } .c-lang > li > a { font-weight: 500; transition: color 0.2s cubic-bezier(0.445, 0.05, 0.55, 0.95); } .c-lang > li > a:hover { color: #008b9b; } .c-lang > li:not(:first-child) { position: relative; margin-left: 8px; padding-left: 9px; } .c-lang > li:not(:first-child)::before { content: ""; position: absolute; top: 50%; left: 0; transform: translateY(-45%); display: block; width: 1px; height: 50%; background-color: #000000; } .c-link { position: relative; display: inline-block; padding-bottom: 12px; font-weight: 700; cursor: pointer; transition: color 0.2s ease-out; } .c-link::after { content: ""; position: absolute; bottom: 0; left: 0; display: block; width: 100%; height: 2px; background-color: #008b9b; } .c-link:hover { color: #008b9b; } .c-link span { position: relative; display: block; padding-right: 40px; } .c-link span::before { content: ""; position: absolute; top: calc(50% - 0.625em); right: 0; display: block; width: 1.25em; height: 1.25em; background-color: #ffffff; border: 1px solid #008b9b; border-radius: 50%; } .c-link span::after { content: ""; position: absolute; top: calc(50% - 0.25em); right: calc(0.625rem - 0.25em); -webkit-mask: url('data:image/svg+xml;charset=UTF-8,') no-repeat center center; mask: url('data:image/svg+xml;charset=UTF-8,') no-repeat center center; background-color: #008b9b; display: block; width: 0.5em; height: 0.5em; } .c-pagination__inner { display: flex; align-items: center; justify-content: center; gap: 10px; } .c-pagination__start :where(a), .c-pagination__start :where(span), .c-pagination__end :where(a), .c-pagination__end :where(span), .c-pagination__prev :where(a), .c-pagination__prev :where(span), .c-pagination__next :where(a), .c-pagination__next :where(span) { position: relative; display: flex; align-items: center; width: 120px; height: 50px; padding-bottom: 2px; background-color: #ffffff; border: 1px solid #b4b4b4; border-radius: 100px; transition: background-color 0.2s cubic-bezier(0.445, 0.05, 0.55, 0.95); } .c-pagination__start :where(a):hover, .c-pagination__start :where(span):hover, .c-pagination__end :where(a):hover, .c-pagination__end :where(span):hover, .c-pagination__prev :where(a):hover, .c-pagination__prev :where(span):hover, .c-pagination__next :where(a):hover, .c-pagination__next :where(span):hover { background-color: #f5f5f5; } .c-pagination__start :where(a)::before, .c-pagination__start :where(a)::after, .c-pagination__start :where(span)::before, .c-pagination__start :where(span)::after, .c-pagination__end :where(a)::before, .c-pagination__end :where(a)::after, .c-pagination__end :where(span)::before, .c-pagination__end :where(span)::after, .c-pagination__prev :where(a)::before, .c-pagination__prev :where(a)::after, .c-pagination__prev :where(span)::before, .c-pagination__prev :where(span)::after, .c-pagination__next :where(a)::before, .c-pagination__next :where(a)::after, .c-pagination__next :where(span)::before, .c-pagination__next :where(span)::after { content: ""; position: absolute; top: 50%; display: block; width: 8px; height: 8px; border-top: 2px solid #b4b4b4; border-right: 2px solid #b4b4b4; } .c-pagination__start.-disabled :where(a), .c-pagination__start.-disabled :where(span), .c-pagination__end.-disabled :where(a), .c-pagination__end.-disabled :where(span), .c-pagination__prev.-disabled :where(a), .c-pagination__prev.-disabled :where(span), .c-pagination__next.-disabled :where(a), .c-pagination__next.-disabled :where(span) { pointer-events: none; opacity: 0.5; } .c-pagination__start, .c-pagination__prev { margin-right: 20px; } .c-pagination__start :where(a), .c-pagination__start :where(span), .c-pagination__prev :where(a), .c-pagination__prev :where(span) { justify-content: flex-start; padding-left: 46px; } .c-pagination__start :where(a)::before, .c-pagination__start :where(a)::after, .c-pagination__start :where(span)::before, .c-pagination__start :where(span)::after, .c-pagination__prev :where(a)::before, .c-pagination__prev :where(a)::after, .c-pagination__prev :where(span)::before, .c-pagination__prev :where(span)::after { transform: translateY(-50%) rotate(-135deg); left: 50%; } .c-pagination__start :where(a)::before, .c-pagination__start :where(span)::before, .c-pagination__prev :where(a)::before, .c-pagination__prev :where(span)::before { transform: translate(-37px, -50%) rotate(-135deg); } .c-pagination__start :where(a)::after, .c-pagination__start :where(span)::after, .c-pagination__prev :where(a)::after, .c-pagination__prev :where(span)::after { transform: translate(-29px, -50%) rotate(-135deg); } .c-pagination__end, .c-pagination__next { margin-left: 20px; } .c-pagination__end :where(a), .c-pagination__end :where(span), .c-pagination__next :where(a), .c-pagination__next :where(span) { justify-content: flex-end; padding-right: 46px; } .c-pagination__end :where(a)::before, .c-pagination__end :where(a)::after, .c-pagination__end :where(span)::before, .c-pagination__end :where(span)::after, .c-pagination__next :where(a)::before, .c-pagination__next :where(a)::after, .c-pagination__next :where(span)::before, .c-pagination__next :where(span)::after { right: 50%; } .c-pagination__end :where(a)::before, .c-pagination__end :where(span)::before, .c-pagination__next :where(a)::before, .c-pagination__next :where(span)::before { transform: translate(37px, -50%) rotate(45deg); } .c-pagination__end :where(a)::after, .c-pagination__end :where(span)::after, .c-pagination__next :where(a)::after, .c-pagination__next :where(span)::after { transform: translate(29px, -50%) rotate(45deg); } .c-pagination__prev :where(a)::before, .c-pagination__prev :where(span)::before, .c-pagination__next :where(a)::before, .c-pagination__next :where(span)::before { display: none; } .c-pagination__pages { display: flex; align-items: center; justify-content: center; gap: 10px; } .c-pagination__page :where(a), .c-pagination__page :where(span) { display: flex; align-items: center; justify-content: center; width: 50px; height: 50px; padding-bottom: 2px; border-radius: 50%; font-weight: 700; line-height: 1; transition: background-color 0.2s cubic-bezier(0.445, 0.05, 0.55, 0.95); } .c-pagination__page :where(a):hover, .c-pagination__page :where(span):hover { background-color: rgba(0, 139, 155, 0.1); } .c-pagination__page.-current :where(a), .c-pagination__page.-current :where(span) { background-color: #008b9b; pointer-events: none; color: #ffffff; } .c-radio > :where(*) { display: flex; } .c-radio :where(input[type=radio]) { display: none; } .c-radio :where(input[type=radio]) + label { position: relative; padding-left: 24px; color: #000000; font-size: 16px; font-weight: 400; cursor: pointer; } .c-radio :where(input[type=radio]) + label::before, .c-radio :where(input[type=radio]) + label::after { content: ""; position: absolute; display: block; border-radius: 50%; } .c-radio :where(input[type=radio]) + label::before { top: 6px; left: 0; width: 17px; height: 17px; border: 1px solid #008b9b; background-color: #efffff; } .c-radio :where(input[type=radio]) + label::after { top: 10px; left: 4px; display: none; width: 9px; height: 9px; background-color: #008b9b; } .c-radio :where(input[type=radio]):checked + label::after { display: block; } .c-search { display: flex; align-items: center; justify-content: flex-start; gap: 4px; width: 100%; line-height: 1; border-radius: 100px; } .c-search button { flex-shrink: 0; display: flex; align-items: center; justify-content: center; width: 24px; height: 24px; padding-top: 1px; cursor: pointer; } .c-search button svg { width: 1rem; height: 1rem; pointer-events: none; } .c-search button svg path { transition: fill 0.2s cubic-bezier(0.445, 0.05, 0.55, 0.95), stroke 0.2s cubic-bezier(0.445, 0.05, 0.55, 0.95); } .c-search button:hover svg path:first-child { fill: #008b9b; } .c-search button:hover svg path:last-child { stroke: #008b9b; } .c-search input[type=text] { width: 100%; line-height: 1; padding-bottom: 1px; } .c-search input[type=text]::-moz-placeholder { color: #b9b9b9; font-size: 14px; } .c-search input[type=text]::placeholder { color: #b9b9b9; font-size: 14px; } .c-search.is-show { animation: searchFieldShow 0.2s cubic-bezier(0.445, 0.05, 0.55, 0.95); width: 300px; padding: 2px 12px; border: 1px solid #efefef; background-color: #efefef; } .c-search.is-show input[type=text] { display: block; } .c-search.is-hide { animation: searchFieldHide 0.2s cubic-bezier(0.445, 0.05, 0.55, 0.95); } @keyframes searchFieldShow { 0% { width: 24px; padding: 2px 0px; border: 1px solid transparent; } 100% { width: 300px; padding: 2px 12px; border: 1px solid #efefef; } } @keyframes searchFieldHide { 0% { width: 300px; padding: 2px 12px; border: 1px solid #efefef; } 100% { width: 24px; padding: 2px 0px; border: 1px solid transparent; } } .c-select { position: relative; } .c-select::after { content: ""; position: absolute; top: calc(50% - 3px); right: 8px; display: block; border-top: 6px solid #008b9b; border-right: 6px solid transparent; border-left: 6px solid transparent; } .c-select > :where(select) { position: relative; display: block; width: 100%; padding: 8px 40px 8px 16px; border: 1px solid #008b9b; border-radius: 8px; background-color: #efffff; cursor: pointer; } .c-sitemap { position: relative; } .c-sitemap::after { content: ""; position: absolute; top: 28px; left: 3px; display: block; width: 2px; height: calc(100% - 28px); background-color: #b9b9b9; } .c-sitemap > li > ul { margin-top: 2em; } .c-sitemap > li > ul > li + li { margin-top: 2em; } .c-sitemap > li > ul > li { position: relative; } .c-sitemap > li > ul > li::after { content: ""; position: absolute; top: 28px; left: 3px; display: block; width: 2px; height: calc(100% - 28px); background-color: #b9b9b9; } .c-sitemap > li > ul > li > ul { margin-top: 2em; display: grid; grid-template-columns: repeat(1, minmax(0, 1fr)); gap: 2em; } .c-sitemap li > ul { padding-left: 1em; } .c-sitemap ul { margin-top: 1em; } .c-sitemap li { position: relative; padding-left: 1em; } .c-sitemap li::before { content: ""; position: absolute; top: 11px; left: 0; display: block; width: 8px; height: 8px; background-color: #008b9b; border-radius: 50%; } .c-sitemap a { transition: color 0.2s ease-out; font-weight: 500; } .c-sitemap a:hover { color: #008b9b; } .c-stacking-table { display: grid; grid-template-columns: repeat(1, minmax(0, 1fr)); } .c-stacking-table__term, .c-stacking-table__data { border-bottom: 1px solid #b9b9b9; padding: 24px 0px; } .c-stacking-table__term { font-weight: 700; } .c-stacking-table.-term-strong .c-stacking-table__term { font-size: 1.25rem; color: #008b9b; } .c-stacking-table + .c-stacking-table, .wp-block-lazyblock-stacking-table + .wp-block-lazyblock-stacking-table { margin-top: 0px; } .c-stacking-table, .wp-block-lazyblock-stacking-table { margin-bottom: 0px; } .c-table.-type-compare { overflow-x: scroll; } .c-table.-type-compare > table { width: 100%; border-collapse: collapse; } .c-table.-type-compare > table > thead > tr > th, .c-table.-type-compare > table > thead > tr > td, .c-table.-type-compare > table > tbody > tr > th, .c-table.-type-compare > table > tbody > tr > td { border: 1px solid #000000; padding: 16px; } .c-table.-type-compare > table > thead > tr > th { background-color: #008b9b; color: #ffffff; font-weight: 500; text-align: center; vertical-align: middle; } .c-table.-type-compare > table > thead > tr > th:first-child { width: auto; } .c-table.-type-compare > table > tbody > tr > th { font-weight: 500; vertical-align: top; white-space: nowrap; } .c-table.-type-compare > table > tbody > tr > td { vertical-align: middle; } .c-table.-emphasis-1 > table > tbody > tr > td:nth-of-type(1) { background-color: #fcedd5; } .c-table.-emphasis-2 > table > tbody > tr > td:nth-of-type(2) { background-color: #fcedd5; } .c-table.-emphasis-3 > table > tbody > tr > td:nth-of-type(3) { background-color: #fcedd5; } .c-table.-emphasis-4 > table > tbody > tr > td:nth-of-type(4) { background-color: #fcedd5; } .c-tag { --tag-color: #b9b9b9; --tag-red: #ba3636; --tag-yellow: #c17700; --tag-green: #516f4f; --tag-sky: #3d8c95; --tag-blue: #58719f; --tag-purple: #a75ea4; --tag-pink: #b75988; display: flex; align-items: center; justify-content: center; width: 150px; padding: 8px 8px 8px; background-color: #ffffff; border: 1px solid var(--tag-color); color: var(--tag-color); font-size: 0.875rem; line-height: 1; } .c-tag.-red { --tag-color: var(--tag-red); } .c-tag.-yellow { --tag-color: var(--tag-yellow); } .c-tag.-green { --tag-color: var(--tag-green); } .c-tag.-sky { --tag-color: var(--tag-sky); } .c-tag.-blue { --tag-color: var(--tag-blue); } .c-tag.-purple { --tag-color: var(--tag-purple); } .c-tag.-pink { --tag-color: var(--tag-pink); } .c-to-top { position: sticky; bottom: 0; z-index: 10; } .c-to-top__inner { position: relative; width: 100%; max-width: 1600px; margin-right: auto; margin-left: auto; } .c-to-top__button { position: absolute; right: 10px; bottom: 30px; display: block; width: 50px; height: 50px; border-radius: 50%; background-color: #b4b4b4; font-size: 0px; opacity: 0; transition: opacity 0.2s cubic-bezier(0.445, 0.05, 0.55, 0.95); } .c-to-top__button::after { content: ""; position: absolute; top: 50%; left: 50%; transform: translate(-50%, calc(-50% + 3px)) rotate(45deg); display: block; width: 14px; height: 14px; border-top: 2px solid #ffffff; border-left: 2px solid #ffffff; transition: transform 0.2s cubic-bezier(0.445, 0.05, 0.55, 0.95); } .c-to-top__button:hover::after { transform: translate(-50%, -50%) rotate(45deg); } .is-scrolled .c-to-top__button { opacity: 1; pointer-events: all; } .font-bold { font-weight: 700; } .js-inview-title { position: relative; display: inline-block; } .js-inview-title .js-inview-title-mask { position: absolute; top: 0; right: 0; display: inline-flex; justify-content: flex-end; color: #d0eff1; overflow: hidden; white-space: nowrap; } .mt-8 { margin-top: 8px; } .mt-16 { margin-top: 16px; } .mt-24 { margin-top: 24px; } .mt-32 { margin-top: 32px; } .mt-36 { margin-top: 36px; } .mt-40 { margin-top: 40px; } .mt-48 { margin-top: 48px; } .mt-50 { margin-top: 50px; } .mt-64 { margin-top: 64px; } .mt-104 { margin-top: 104px; } .mb-16 { margin-bottom: 16px; } .text-center { text-align: center; } .text-right { text-align: right; } .text-sub-title { font-size: 1.25rem; } @media only screen and (min-width: 769px){ .p-card.-web-row { display: grid; grid-template-columns: minmax(0, 3fr) minmax(0, 2fr); align-items: center; } .p-card.-web-row .p-card__thumbnail { grid-row: span 3/span 3; } .p-card.-web-row .p-card__title { align-self: end; } .p-card.-web-row .p-card__buttonBlock { align-self: start; } .p-pickup-slider .swiper-button-prev, .p-pickup-slider .swiper-button-next { width: 50px; height: 50px; } .p-pickup-slider .swiper-button-prev::after, .p-pickup-slider .swiper-button-next::after { font-size: 1.25rem; } .p-service-list { grid-template-columns: repeat(2, minmax(0, 1fr)); } .p-service-list__item { grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); } .p-service-list__item:first-child { grid-column: span 2/span 2; grid-template-columns: max-content minmax(0, 1fr); } .p-service-list__item:first-child .p-service-list__thumbnail { grid-column: span 2/span 2; } .p-service-list__item:first-child .p-service-list__description { grid-column: span 1/span 1; } .p-service-list__description { grid-column: span 2/span 2; } } @media only screen and (min-width: 769px) and (max-width: 1024px){ .editor-styles-wrapper .wp-block-post-content .wp-block-image, .p-section__inner .lazyblock-inner-blocks .wp-block-image, .p-editable .wp-block-image { padding: 40px; } .p-home-mv__text { top: 50%; left: 0; transform: translate(10px, -50%); width: 47.5vw; max-width: 700px; } .p-home-mv__image > img { -o-object-position: left center; object-position: left center; } .c-sitemap > li > ul > li > ul { grid-template-columns: repeat(2, minmax(0, 1fr)); } .sp { display: none !important; } } @media only screen and (min-width: 1025px){ html { scroll-padding-top: 102px; } .l-wrapper { padding-top: 102px; } .is-home .l-wrapper { padding-top: 0px; } .l-main { padding-top: 102px; } .l-main.-home { padding-top: 0px; } .p-card__title { font-size: 1.25rem; } .p-case-card { grid-template-columns: minmax(0, 1fr) max-content; gap: 24px; padding: 24px; } .p-case-card__main { gap: 16px 0px; } .p-case-card__image { width: 400px; max-width: initial; } .p-case-card__title { padding-bottom: 16px; font-size: 1.5rem; align-self: end; } .p-case-card__lead { grid-column: span 1/span 1; align-self: start; } .p-case-card__description { margin-top: 12px; } .p-footer-navigation__cta { justify-content: flex-end; } .p-grid.-gap-normal { gap: 24px; } .p-header-navigation__main { gap: 0px 16px; } .p-header-navigation__main > li > a:hover + .p-header-navigation__childs { opacity: 1; pointer-events: all; } .p-header-navigation__main > li > a::before { display: none; } .p-header-navigation__main > li > a::after { display: none; } .p-header-navigation__sub > li > a:hover + .p-header-navigation__childs { opacity: 1; pointer-events: all; } .p-header-navigation__tools { position: absolute; top: 8px; right: 0; } .p-header-navigation__childs { gap: 12px 0px; position: absolute; bottom: -1rem; left: 50%; transform: translate(-50%, 100%); width: -moz-max-content; width: max-content; padding: 1.25rem 1rem; background-color: #ffffff; border: 1px solid rgba(185, 185, 185, 0.5); border-radius: 1rem; box-shadow: 0px 0px 8px 2px rgba(185, 185, 185, 0.15); opacity: 0; pointer-events: none; transition: opacity 0.2s cubic-bezier(0.445, 0.05, 0.55, 0.95); } .p-header-navigation__childs:hover { opacity: 1; pointer-events: all; } .p-header-navigation__childs > li > a::before { display: none; } .p-header-navigation__childs > li > a::after { display: none; } .p-header__open, .p-header__close { display: none; } .p-home-mv { min-height: 668px; } .p-home-mv__scroller { right: 50px; bottom: 0; } .p-home-mv__text { top: calc(50% + 51px); right: 0; transform: translate(40px, -50%); width: 100%; max-width: 700px; } .p-home-news__header { flex-direction: column; align-items: flex-start; } .p-home-pickup__title { font-size: 3.125rem; } .p-home-service__inner.-canvas { overflow-x: hidden; } .p-home-service__description.-top { justify-content: flex-end; padding-right: 9.6774193548%; } .p-home-service__titleBg { transform: translate(-55%, 0%); } .p-home-service__svgGroup { position: absolute; top: 0; right: 0; bottom: 0; left: 0; } .p-home-service__canvas { width: 1240px; padding-top: 170px; height: 1300px; } .p-home-service__canvas .service-svg-cubes { top: 120px; left: 10.4838709677%; width: 8.064516129%; } .p-home-service__canvas .service-svg-people1 { top: 260px; left: 32.2580645161%; width: 5%; } .p-home-service__canvas .service-svg-cube { top: 250px; right: -2.4193548387%; width: 6.4516129032%; } .p-home-service__canvas .service-svg-pc { top: 280px; left: -1.6129032258%; width: 33.8709677419%; } .p-home-service__canvas .service-svg-video { top: 430px; right: 9.6774193548%; width: 32.4193548387%; } .p-home-service__canvas .service-svg-robots { top: 770px; left: 29.8387096774%; width: 22.9032258065%; } .p-home-service__canvas .service-svg-gear { top: 1065px; right: 7.2580645161%; width: 9.6774193548%; } .p-home-service__canvas .service-svg-people2 { top: 400px; right: 0; width: 7.9838709677%; } .p-home-service__canvas .service-svg-people3 { top: 840px; left: -3.2258064516%; width: 10.2419354839%; } .p-home-service__canvas .service-svg-people4 { top: 1048px; right: 22.5806451613%; width: 10.4032258065%; } .p-hr-card { gap: 16px 0px; padding: 24px; } .p-hr-card__header { gap: 8px 16px; } .p-hr-card__image { grid-row: span 2/span 2; width: 100px; } .p-hr-card__title { font-size: 1.5rem; align-self: end; } .p-hr-card__lead { grid-column: span 1/span 1; align-self: start; } .p-hr-card__list { margin-top: 12px; } .p-link-list__link { padding: 24px; } .p-link-list__title { font-size: 1.25rem; } .p-link-list.-col2-pc { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; } .p-page.-col-2 .p-page__inner { grid-template-columns: minmax(0, 1fr) 280px; } .p-pickup-slider { padding-right: 80px; padding-left: 80px; } .p-pickup-slider.-less-center .swiper-wrapper { justify-content: center; } .p-service-introduction { aspect-ratio: 1/1; max-width: 1000px; margin-right: auto; margin-left: auto; overflow: visible; } .p-service-introduction__bg { top: 66px; left: 0; width: 100%; height: 85%; background-image: url(./assets/img/img_service-introduction.jpg); border-radius: 50%; transform: scale(1.1); } .p-service-introduction__item { top: 50%; transform: translate(-50%, -50%); font-size: 18px; } .p-service-introduction__item.-typeM { font-size: 15px; } .p-service-introduction__item.-typeS { font-size: 14px; } .p-service-introduction__item.-typeXS { font-size: 13px; } .p-service-introduction__item.-type01 { transform: translate(-50%, -50%); } .p-service-introduction__item.-type02 { transform: translate(25%, -140%); } .p-service-introduction__item.-type03 { transform: translate(-140%, 20%); } .p-service-introduction__item.-type04 { transform: translate(65%, 45%); } .p-service-introduction__item.-type05 { transform: translate(-175%, -100%); } .p-service-introduction__item.-type06 { transform: translate(-30%, 100%); } .p-service-introduction__item.-type07 { transform: translate(-90%, -190%); } .p-service-introduction__item.-type08 { transform: translate(120%, -50%); } .c-accordion__button { padding: 24px 72px 24px 24px; } .c-accordion__button::before { right: 24px; } .c-accordion__button::after { right: calc(24px + 0.75em - 0.25em); } .c-accordion__button:hover { --arrow-color: #008b9b; --bg-color: #d4f0f4; } .c-accordion.-faq::before { top: calc(38px - 1em); left: 24px; } .c-accordion.-faq .c-accordion__button { padding-left: 64px; } .c-flow { gap: 24px 0px; padding-bottom: 24px; } .c-flow::before { top: 48px; left: 54px; height: calc(100% - 48px); } .c-flow__item { display: flex; padding: 24px 24px 24px 112px; } .c-flow__description { flex: 1 1 0px; } .c-flow__heading { font-size: 1.5rem; } .c-flow__heading::after { top: calc(50% - 32px); left: -88px; width: 64px; height: 64px; font-size: 2rem; } .c-flow__heading::before { top: calc(50% - 36px); left: -92px; width: 72px; height: 72px; } .c-flow__image { flex: 0 1 50%; padding: 40px; } .c-search { width: 24px; padding: 2px 0px; border: 1px solid transparent; } .c-search input[type=text] { display: none; } .c-sitemap > li > ul > li > ul { grid-template-columns: repeat(3, minmax(0, 1fr)); } .c-stacking-table { grid-template-columns: 25% minmax(0, 1fr); } .sp { display: none !important; } .mb { display: none !important; } .tab { display: none !important; } } @media only screen and (min-width: 1200px){ .p-header-navigation__main { gap: 0px 32px; } } @media screen and (max-width: 1440px){ .p-about-grid-list-tag { font-size: 1.4vw; } .p-about-grid-list-number { font-size: 2.4vw; } .p-about-grid-list-number strong { font-size: 4.8vw; } .p-about-grid-list-service { font-size: 3.2vw; } .p-about-grid-list-text { font-size: 2.2vw; } .p-about-grid-list-about-text { font-size: 1.4vw; } } @media only screen and (max-width: 1024px){ html { scroll-padding-top: 60px; } .p-header-navigation { flex-direction: column; align-items: stretch; padding: 80px 0px; overflow-y: auto; background-color: #ffffff; } .p-header-navigation::before { content: ""; position: fixed; top: 0; left: 0; display: block; width: 100%; height: 80px; background: linear-gradient(#ffffff, #ffffff 75%, rgba(255, 255, 255, 0) 100%); z-index: 2; } .p-header-navigation__main { display: block; } .p-header-navigation__main > li { border-bottom: 1px solid rgba(41, 36, 35, 0.1); } .p-header-navigation__main > li > a { padding: 28px 20px; } .p-header-navigation__tools { flex-wrap: wrap; padding: 0px 20px; } .p-header-navigation__tools > li:first-child { width: 100%; } .p-header-navigation__childs { height: 0px; overflow: hidden; } .p-header-navigation__childs > li:last-child { margin-bottom: 28px; } .p-header-navigation__childs > li > a { padding: 0px 40px; } .p-header { width: 100vw; padding: 15px 20px; min-height: 60px; } .p-header__sitelogo { flex: 0 0 120px; } .p-header__content { position: fixed; top: 0; right: 0; bottom: 0; left: 0; z-index: 1; min-width: 375px; opacity: 0; pointer-events: none; } .p-home-mission { padding-bottom: 100px; } .p-home-mission::after { --half-width: calc(600 / 1600 * 100vw); --half-height: calc(600 / 375 * 100vw); } .p-home-mission__image { height: auto; aspect-ratio: 16/9; } .p-home-mission__body { margin-top: -40px; padding-top: 44px; padding-right: 20px; padding-bottom: 44px; padding-left: 84px; } .p-home-mission__body::before { transform: translateX(0); left: 3.25rem; width: 100%; } .p-home-mission__title > :where(span):first-child { top: -82px; font-size: 3.125rem; } .p-home-mission__title > :where(span):nth-child(2) { font-size: 1.25rem; } .p-home-mission__lead { margin-top: 30px; font-size: 1rem; } .p-home-mv { max-height: 668px; min-height: 600px; } .p-home-mv__scroller { left: -100px; bottom: 0; } .p-home-mv__image { width: 668px; max-width: calc(100% + 100px); transform: translateX(-100px); } .p-home-mv__rightmask { display: none; } .p-home-news { padding-bottom: 100px; } .p-home-news__inner { grid-template-columns: minmax(0, 1fr); } .p-home-news__header { justify-content: space-between; } .p-home-news__title { font-size: 2.5rem; } .p-home-recruit__inner { flex-direction: column; align-items: stretch; padding: 0px 22.5px; } .p-home-service::before { --half-height: calc(600 / 375 * 100vw); } .p-home-service__title { align-items: center; } .p-home-service__title > :where(span):first-child { font-size: 17.0666666667vw; } .p-home-service__texts { justify-content: center; } .p-home-service__texts p { letter-spacing: -0.01em; } .p-home-service__lead { font-size: 1.625rem; } .p-home-service__description > p { padding-left: 20px; font-size: 1rem; line-height: 1.875; } .p-home-service__description.-top { order: 1; padding: 0px 20px; } .p-home-service__titleBg { font-size: 76.8vw; top: 80px; left: -4.8vw; } .p-home-service__titleBg br { display: none; } .p-home-service__titleBg span { display: block; } .p-home-service__svgGroup { position: relative; padding: 0px 20px; } .p-home-service__svgGroup.-mb-top { order: 0; position: absolute; top: 0; left: 0; width: 100%; } .p-home-service__svgGroup.-mb-bottom { order: 2; height: 128vw; } .p-home-service__canvas { display: grid; grid-template-columns: minmax(0, 1fr); } .p-home-service__canvas { width: 100%; padding-top: 80px; padding-top: 32vw; } .p-home-service__canvas .service-svg-cubes { top: 12.8vw; left: 5.3333333333vw; width: 16vw; } .p-home-service__canvas .service-svg-people1 { top: 8.5333333333vw; right: 16vw; width: 12.8vw; } .p-home-service__canvas .service-svg-cube { top: 101.3333333333vw; top: 5.3333333333vw; right: 20.8vw; width: 14.1333333333vw; } .p-home-service__canvas .service-svg-pc { top: 96vw; top: 1.0666666667vw; left: 2.6666666667vw; width: 51.2vw; } .p-home-service__canvas .service-svg-video { top: 138.6666666667vw; top: 42.6666666667vw; right: 2.6666666667vw; width: 53.8666666667vw; } .p-home-service__canvas .service-svg-robots { top: 173.3333333333vw; top: 77.3333333333vw; left: 10.6666666667vw; width: 38.9333333333vw; } .p-home-service__canvas .service-svg-gear { top: 186.6666666667vw; top: 90.6666666667vw; right: 32vw; width: 14.4vw; } .p-home-service__canvas .service-svg-people2 { top: 117.3333333333vw; top: 21.3333333333vw; right: 5.3333333333vw; width: 18.1333333333vw; } .p-home-service__canvas .service-svg-people3 { top: 144vw; top: 48vw; left: 10.6666666667vw; width: 21.6vw; } .p-home-service__canvas .service-svg-people4 { top: 197.3333333333vw; top: 101.3333333333vw; right: 10.6666666667vw; width: 21.3333333333vw; } .p-news-list__link { grid-template-columns: max-content minmax(0, 1fr); } .p-news-list__title { grid-column: span 2/span 2; } .p-page-header { padding-bottom: 40px; } .p-page-header__breadcrumb { margin-top: 16px; } .p-page.-bg-green { margin-top: 40px; padding: 60px 20px 160px; } .p-section.-fluid-mb { padding-right: 0px; padding-left: 0px; } .p-section.-fluid-mb .p-section__inner { max-width: 100%; } .p-section.-bg-green { margin-top: 40px; padding: 60px 20px 160px; } .p-service-introduction { height: 1350px; } .p-service-introduction__inner { position: absolute; top: 0; left: calc((100vw - 100%) / -2); display: block; width: 100vw; height: 100%; overflow: hidden; } .c-definition-list { gap: 0px; grid-template-columns: repeat(1, minmax(0, 1fr)); } .c-definition-list > :where(dd) { padding-left: 8px; } .c-definition-list > :where(dd) + :where(dt) { margin-top: 16px; } .c-definition-list.-border > :where(dt), .c-definition-list.-border > :where(dd) { padding: 12px 16px; } .c-definition-list.-border > :where(dt) { border-color: #e2e2e2; } .c-definition-list.-border > :where(dd) + :where(dt) { margin-top: 0px; } .c-definition-list.-monthly { grid-template-columns: repeat(1, minmax(0, 1fr)); } .c-pagination__start :where(a), .c-pagination__start :where(span), .c-pagination__end :where(a), .c-pagination__end :where(span), .c-pagination__prev :where(a), .c-pagination__prev :where(span), .c-pagination__next :where(a), .c-pagination__next :where(span) { width: 50px; font-size: 0px; } .c-pagination__start :where(a)::before, .c-pagination__start :where(span)::before { transform: translate(calc(-50% + 4.5px), -50%) rotate(-135deg); } .c-pagination__start :where(a)::after, .c-pagination__start :where(span)::after { transform: translate(calc(-50% - 2.5px), -50%) rotate(-135deg); } .c-pagination__prev :where(a)::after, .c-pagination__prev :where(span)::after { transform: translate(calc(-50% + 1px), -50%) rotate(-135deg); } .c-pagination__next :where(a)::after, .c-pagination__next :where(span)::after { transform: translate(calc(50% - 1px), -50%) rotate(45deg); } .c-pagination__end :where(a)::before, .c-pagination__end :where(span)::before { transform: translate(calc(50% - 4.5px), -50%) rotate(45deg); } .c-pagination__end :where(a)::after, .c-pagination__end :where(span)::after { transform: translate(calc(50% + 2.5px), -50%) rotate(45deg); } .c-search { padding: 8px 12px; border: 1px solid #c4c4c4; } .c-stacking-table__term { border-bottom: none; padding-bottom: 0px; } .c-to-top__button { bottom: 10px; } .pc { display: none !important; } } @media screen and (max-width: 1024px){ .p-home-service__listTitle { font-size: 2.4vw; } } @media only screen and (max-width: 768px){ .p-cta { padding: 80px 20px; } .p-cta__inner { gap: 24px; padding: 40px 20px; } .p-cta__text { font-size: 1rem; } .p-cta__text.-lead { font-size: 1.75rem; } .editor-styles-wrapper .wp-block-post-content .wp-block-image, .p-section__inner .lazyblock-inner-blocks .wp-block-image, .p-editable .wp-block-image { padding: 20px; } .editor-styles-wrapper .wp-block-post-content .p-section__inner .lazyblock-inner-blocks > :where(h2), .editor-styles-wrapper .wp-block-post-content.-posts > :where(h2), .p-section__inner .lazyblock-inner-blocks .p-section__inner .lazyblock-inner-blocks > :where(h2), .p-section__inner .lazyblock-inner-blocks.-posts > :where(h2), .p-editable .p-section__inner .lazyblock-inner-blocks > :where(h2), .p-editable.-posts > :where(h2) { font-size: 1.375rem; } .p-footer-navigation { grid-template: "pages" auto "sites" auto "info" auto "cta" auto/minmax(0, 1fr); } .p-footer-navigation__group { gap: 48px; } .p-footer-navigation__group.-pages > *:first-child { grid-row: span 1/span 1; grid-column: span 2/span 2; } .p-footer-navigation__group.-sites, .p-footer-navigation__group.-info { flex-direction: row; } .p-footer-navigation__group.-info { flex-wrap: wrap; } .p-footer__about { flex-wrap: wrap; } .p-footer__copyright { justify-content: center; flex: 0 0 100%; } .p-footer__logos { justify-content: center; flex: 0 0 100%; } .p-grid { grid-template-columns: repeat(1, minmax(0, 1fr)); } .p-grid__item.-span-2 { grid-column: span 1/span 1; } .p-grid.-col-2 { grid-template-columns: repeat(1, minmax(0, 1fr)); } .p-home-mv__text { top: calc(50% - 30px); left: 0; transform: translate(8px, -50%); width: calc(100% + 20px); max-width: 700px; } .p-home-mv__image > img { -o-object-position: 15% center; object-position: 15% center; -o-object-position: 12% center; object-position: 12% center; } .p-home-recruit__title > span:first-child { font-size: 1.5556rem; } .p-home-recruit__title > span:nth-child(2) { font-size: 1.125rem; } .p-home-recruit__list { flex-direction: column; align-items: center; } .p-home-service__texts p { font-size: 1rem; } .p-news-list.-icon .p-news-list__link { padding-right: 40px; } .p-page-header__image { height: 135px; } .p-page-header__image::before { --half-height: calc(18 / 375 * 100vw); } .p-page-header__image::after { --half-height: calc(14 / 375 * 100vw); } .p-page-header__title { margin-top: 24px; } .p-page-header__information { margin-top: 24px; } .p-page__inner + .p-page__inner { margin-top: 72px; } .p-recruit-card { max-width: 400px; } .p-section { padding: 80px 20px 80px; } .p-section > .lazyblock-inner-blocks { row-gap: 72px; } .p-section__inner { max-width: 576px; } .p-section__inner + .p-section__inner { margin-top: 72px; } .p-section.-fluid-sp { padding-right: 0px; padding-left: 0px; } .p-section.-fluid-sp .p-section__inner { max-width: 100%; } .p-service-list__thumbnail { flex-direction: column; } .p-service-list__title br { display: none; } .c-breadcrumb { height: 21px; } .c-breadcrumb > ol { gap: 0px 24px; } .c-breadcrumb > ol > li { font-size: 0.75rem; } .c-breadcrumb > ol > li:not(:first-child)::before { top: 12px; left: -14px; width: 5px; height: 5px; } .c-button.-large, .c-buttons a.-large, .c-buttons button.-large { min-width: 20.9375rem; font-size: 1.25rem; } .c-buttons.-large a, .c-buttons.-large button { min-width: 20.9375rem; font-size: 1.25rem; } .c-heading1 { font-size: 1.625rem; } .is-news .c-heading1 { font-size: 1.625rem; } .c-heading2 { font-size: 1.375rem; } .c-introduction-president__image > img { width: 50%; } .c-pagination__start :where(a), .c-pagination__start :where(span) { display: none; } .c-pagination__end :where(a), .c-pagination__end :where(span) { display: none; } .c-table.-type-compare { font-size: 0.875rem; width: calc(100vw - 20px); padding-right: 20px; padding-bottom: 20px; } .c-table.-type-compare > table { width: 768px; } .tab { display: none !important; } .lg { display: none !important; } .mt-sp-30 { margin-top: 30px; } .mt-sp-72 { margin-top: 72px; } .text-sub-title { font-size: 1rem; } } @media screen and (max-width: 768px){ .p-about-grid-list { grid-template-columns: repeat(1, minmax(0, 1fr)); margin-top: 20px; } .p-about-grid-list-box__number { padding: 15px; } .p-about-grid-list-tag { font-size: 14px; } .p-about-grid-list-number { font-size: 25px; } .p-about-grid-list-number strong { font-size: 48px; } .p-about-grid-list-box__service { padding: 20px; } .p-about-grid-list-service { font-size: 34px; } .p-about-grid-list-text { font-size: 22px; } .p-about-grid-list-about { padding: 15px; } .p-about-grid-list-about-text { font-size: 14px; } .p-about-grid-list-border--bottom--sp { border-bottom: 1.5px solid #00869b; } .p-about-grid-list > .p-about-grid-list-border--right { border: none; } .p-home-service__list { grid-template-columns: repeat(1, minmax(0, 1fr)); gap: 40px; } .p-home-service__listTitle { justify-content: center; font-size: 28px; } } @media screen and (max-width: 425px){ .p-about-grid-list-number { font-size: 7vw; } .p-about-grid-list-number strong { font-size: 10vw; } .p-about-grid-list-service { font-size: 7.6vw; } .p-about-grid-list-text { font-size: 5vw; } }