/*!************************************************************************************************!*\ !*** css ./node_modules/css-loader/dist/cjs.js!./node_modules/the-new-css-reset/css/reset.css ***! \************************************************************************************************/ /*** The new CSS reset - version 1.11.2 (last updated 15.11.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, summary { list-style: none; } /* For images to not be able to exceed their container */ img { max-inline-size: 100%; max-block-size: 100%; } /* removes spacing between cells in tables */ table { border-collapse: collapse; } /* Safari - solving issue when using user-select:none on the text input doesn't working */ input, textarea { -webkit-user-select: auto; } /* revert the 'white-space' property for textarea elements on Safari */ textarea { white-space: revert; } /* minimum style to allow to style meter element */ meter { -webkit-appearance: revert; appearance: revert; } /* preformatted text - use only for this feature */ :where(pre) { all: revert; box-sizing: border-box; } /* reset default text opacity of input placeholder */ ::placeholder { color: unset; } /* 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; } /* Remove details summary webkit styles */ ::-webkit-details-marker { display: none; } /*!*************************************************************************************************************!*\ !*** css ./node_modules/css-loader/dist/cjs.js!./node_modules/sass-loader/dist/cjs.js!./src/scss/main.scss ***! \*************************************************************************************************************/ @charset "UTF-8"; .l-footer { position: relative; z-index: 1; } .l-footer__main { background: #E5F6F6; padding: 32px 24px; } @media (min-width: 768px) { .l-footer__main { padding: 80px 120px; } } @media (min-width: 1280px) { .l-footer__main { padding: 104px 24px; } } .l-footer__main_inner { display: grid; gap: 48px; } @media (min-width: 768px) { .l-footer__main_inner { gap: 56px; margin: 0 auto; max-width: 720px; width: 100%; } } @media (min-width: 1280px) { .l-footer__main_inner { gap: 64px; max-width: 1060px; } } .l-footer__logo { display: flex; } .l-footer__logo > img { width: 189px; } @media (min-width: 1280px) { .l-footer__logo > img { width: 238px; } } .l-footer__menu_wrapper { display: grid; gap: 56px; } @media (min-width: 768px) { .l-footer__menu_wrapper { gap: 48px; } } @media (min-width: 1280px) { .l-footer__menu_wrapper { gap: 80px; grid-template-columns: auto 1fr 152px; } } .l-footer_menu_inner { display: grid; } @media (min-width: 768px) { .l-footer_menu_inner { gap: 80px; grid-template-columns: repeat(2, 1fr); } } @media (min-width: 1280px) { .l-footer_menu_inner { grid-template-columns: repeat(2, auto); } } .l-footer__menu { align-self: start; display: grid; gap: 8px; } .l-footer__menu_hr { background: #303030; height: 1px; margin: 24px 0; width: 20px; } @media (min-width: 768px) { .l-footer__menu_hr { display: none; } } .l-footer__menu_item { font-size: 16px; font-weight: 700; line-height: 1.5; } @media (min-width: 1280px) { .l-footer__menu_item { font-weight: 500; } } .l-footer__menu_item.l-footer__menu_item--accordion { padding: 0; } .l-footer__menu_item.l-footer__menu_item--button { padding: 0; } .l-footer__menu_item.l-footer__menu_item--button > a { align-items: center; background: #FFFFFF; border-radius: 100px; display: inline-flex; font-size: 14px; font-weight: 500; height: 44px; justify-content: center; margin-top: 8px; position: relative; transition: background 0.3s ease; width: 124px; } @media (min-width: 768px) { .l-footer__menu_item.l-footer__menu_item--button > a { border-radius: 40px; font-size: 16px; height: auto; padding: 4px 16px; width: fit-content; } } .l-footer__menu_item.l-footer__menu_item--button > a::after { content: none; } @media (hover: hover) { .l-footer__menu_item.l-footer__menu_item--button > a:hover { background: #99E6E4; } } .l-footer__menu_item > a { display: block; padding: 12px 0; position: relative; width: fit-content; } @media (min-width: 1280px) { .l-footer__menu_item > a { padding: 4px 0; } } @media (hover: hover) { .l-footer__menu_item > a:hover::after { opacity: 1; } } .l-footer__menu_item > a::after { background-color: #303030; bottom: 12px; content: ""; height: 1px; left: 0; opacity: 0; position: absolute; transition: opacity 0.3s ease; width: 100%; } @media (min-width: 1280px) { .l-footer__menu_item > a::after { bottom: 4px; } } .l-footer__menu_toggle { align-items: center; cursor: pointer; display: flex; gap: 4px; padding: 12px 0; position: relative; } @media (min-width: 1280px) { .l-footer__menu_toggle { padding: 4px 0; } } @media (hover: hover) { .l-footer__menu_toggle:hover::after { opacity: 1; } } .l-footer__menu_toggle::after { background-color: #303030; bottom: 12px; content: ""; height: 1px; left: 0; opacity: 0; position: absolute; transition: opacity 0.3s ease; width: 100%; } @media (min-width: 1280px) { .l-footer__menu_toggle::after { bottom: 4px; } } .l-footer__menu_icon .l-footer__menu_icon_close { display: flex; } .l-footer__menu_icon .l-footer__menu_icon_open { display: none; } .is-accordion-open .l-footer__menu_icon .l-footer__menu_icon_close { display: none; } .is-accordion-open .l-footer__menu_icon .l-footer__menu_icon_open { display: flex; } .l-footer__accordion { display: grid; grid-template-rows: 0fr; overflow: hidden; transition: grid-template-rows 0.4s ease; } .is-accordion-open .l-footer__accordion { grid-template-rows: 1fr; } .l-footer__accordion_inner { overflow: hidden; } .l-footer__accordion_menu { display: grid; padding-left: 24px; } @media (min-width: 1280px) { .l-footer__accordion_menu { margin-top: 4px; } } .l-footer__accordion_item { font-size: 14px; font-weight: 700; line-height: 1.5; } @media (min-width: 1280px) { .l-footer__accordion_item { font-weight: 500; } } .l-footer__accordion_item > a { display: block; padding: 13.5px 0; position: relative; width: fit-content; } @media (min-width: 1280px) { .l-footer__accordion_item > a { padding: 4px 0; } } @media (hover: hover) { .l-footer__accordion_item > a:hover::after { opacity: 1; } } .l-footer__accordion_item > a::after { background-color: #303030; bottom: 13.5px; content: ""; height: 1px; left: 0; opacity: 0; position: absolute; transition: opacity 0.3s ease; width: 100%; } @media (min-width: 1280px) { .l-footer__accordion_item > a::after { bottom: 4px; } } .l-footer__sub-menu { display: grid; gap: 2px; } @media (min-width: 1280px) { .l-footer__sub-menu { align-self: flex-start; gap: 8px; } } .l-footer__sub-menu_item { font-size: 14px; line-height: 1.5; } @media (min-width: 1280px) { .l-footer__sub-menu_item { font-size: 12px; } } .l-footer__sub-menu_item > a { display: block; padding: 11.5px 0; position: relative; width: fit-content; } @media (min-width: 1280px) { .l-footer__sub-menu_item > a { padding: 4px 0; } } @media (hover: hover) { .l-footer__sub-menu_item > a:hover::after { opacity: 1; } } .l-footer__sub-menu_item > a::after { background-color: #303030; bottom: 11.5px; content: ""; height: 1px; left: 0; opacity: 0; position: absolute; transition: opacity 0.3s ease; width: 100%; } @media (min-width: 1280px) { .l-footer__sub-menu_item > a::after { bottom: 4px; } } @media (min-width: 768px) { .l-footer__services { margin-top: 16px; } } @media (min-width: 1280px) { .l-footer__services { margin-top: 0; } } .l-footer__services_list { display: flex; flex-wrap: wrap; gap: 16px; margin-top: 8px; } .l-footer__services_title { font-size: 12px; font-weight: 700; line-height: 1.5; } .l-footer__services_item { background: #FFFFFF; border-radius: 4px; height: 66px; width: 152px; } .l-footer__services_link { align-items: center; display: flex; height: 100%; justify-content: center; width: 100%; } .l-footer__bottom { display: grid; gap: 8px; justify-content: end; } .l-footer__bottom_link { display: flex; margin-left: auto; } .l-footer__bottom_copy { font-size: 12px; letter-spacing: 0; line-height: 1.9; } .l-footer__sub { background: #FFFFFF; padding: 24px; } @media (min-width: 768px) { .l-footer__sub { padding: 40px; } } @media (min-width: 768px) { .l-footer__sub__inner { margin: 0 auto; max-width: 816px; } } @media (min-width: 1280px) { .l-footer__sub__inner { max-width: 1060px; } } .l-footer__sub_item { font-size: 12px; font-weight: 500; letter-spacing: 0; line-height: 1.5; padding-left: 20px; position: relative; } .l-footer__sub_item::before { content: "※"; left: 0; position: absolute; } .l-header { background: #FFFFFF; border-bottom-left-radius: 8px; border-bottom-right-radius: 8px; height: 75px; left: 50%; position: fixed; top: 0; transform: translate(-50%); transition: border-radius 0.4s 0.3s ease, height 0.4s ease, top 0.4s ease; width: calc(100vw - 20px); z-index: 3; } @media (min-width: 768px) { .l-header { height: 85px; width: calc(100vw - 48px); } } @media (min-width: 961px) { .l-header { height: 111px; } } @media (min-width: 1280px) { .l-header { width: calc(100vw - 80px); } } .l-header.is-menu-open { border-radius: 0; transition: none; } @media (min-width: 961px) { body:not(.is-page-top) .l-header { height: 80px; } } body.is-footer-visible .l-header { top: -75px; } @media (min-width: 768px) { body.is-footer-visible .l-header { top: -85px; } } @media (min-width: 961px) { body.is-footer-visible .l-header { top: -80px; } } .l-header__main { align-items: center; display: grid; grid-template-columns: repeat(2, auto); height: 100%; justify-content: space-between; padding: 0 8px; } @media (min-width: 768px) { .l-header__main { padding: 0 4px 0 16px; } } @media (min-width: 961px) { .l-header__main { grid-template-columns: auto 1fr auto; padding: 0 4px 0 24px; } } .l-header__logo { align-items: center; display: flex; padding: 0 16px; } @media (min-width: 961px) { .l-header__logo { padding: 0 16px 0 0; } } .l-header__logo > img { transition: width 0.4s ease; } @media (min-width: 961px) { .l-header__logo > img { width: 128px; } } @media (min-width: 1280px) { .l-header__logo > img { width: 152px; } } @media (min-width: 961px) { body:not(.is-page-top) .l-header__logo > img { width: 112px; } } .l-header__buttons { display: flex; gap: 16px; } @media (min-width: 961px) { .l-header__buttons { padding-left: 4px; } } .l-header__buttons_links { display: none; gap: 4px; } @media (min-width: 768px) { .l-header__buttons_links { display: flex; } } .l-header__buttons_link { border-radius: 4px; height: 77px; transition: height 0.4s ease; width: 77px; } @media (min-width: 961px) { .l-header__buttons_link { height: 103px; width: 8.0124869927vw; } } @media (min-width: 1280px) { .l-header__buttons_link { width: 118px; } } .l-header__buttons_link.l-header__buttons_link--download { background: #FCF27B; } @media (hover: hover) { .l-header__buttons_link.l-header__buttons_link--download > a:hover { background: #FCEB2A; } } .l-header__buttons_link.l-header__buttons_link--contact { background: #99E6E4; } @media (hover: hover) { .l-header__buttons_link.l-header__buttons_link--contact > a:hover { background: #64DCD9; } } @media (min-width: 961px) { body:not(.is-page-top) .l-header__buttons_link { height: 72px; } } .l-header__buttons_link > a { align-items: center; font-size: 10px; font-weight: 700; display: flex; flex-direction: column; gap: 4px; height: 100%; justify-content: center; line-height: 1.3; text-align: center; transition: background 0.3s ease; } @media (min-width: 1280px) { .l-header__buttons_link > a { font-size: 12px; line-height: 1.5; } } @media (hover: hover) { body.is-page-top .l-header__buttons_link > a:hover .l-header__buttons_link_icon::before { height: 42px; width: 42px; } } @media (hover: hover) and (min-width: 961px) { body.is-page-top .l-header__buttons_link > a:hover .l-header__buttons_link_icon::before { height: 66px; width: 66px; } } @media (min-width: 1280px) { .l-header__buttons_link > a br { display: none; } } .l-header__buttons_link_icon { align-items: center; display: flex; height: 38px; justify-content: center; padding: 7.5px; position: relative; transition: height 0.4s ease; z-index: 3; } @media (min-width: 961px) { .l-header__buttons_link_icon { height: 60px; padding: 12.5px; } } @media (min-width: 961px) { body:not(.is-page-top) .l-header__buttons_link_icon { height: 0; position: absolute; } } .l-header__buttons_link_icon::before { align-items: center; background: #FFFFFF; border-radius: 40px; content: ""; display: flex; height: 38px; justify-content: center; left: 50%; position: absolute; top: 50%; transform: translate(-50%, -50%); transition: height 0.4s ease, width 0.4s ease; width: 38px; z-index: -1; } @media (min-width: 961px) { .l-header__buttons_link_icon::before { height: 60px; width: 60px; } } @media (min-width: 961px) { body:not(.is-page-top) .l-header__buttons_link_icon::before { height: 0; transition: none; width: 0; } } @media (min-width: 961px) { .l-header__buttons_link_icon > img { height: 35px; width: 35px; } } @media (min-width: 961px) { body:not(.is-page-top) .l-header__buttons_link_icon > img { height: 0; } } .l-header__menu-button { cursor: pointer; display: flex; } @media (min-width: 961px) { .l-header__menu-button { display: none; } } .l-header.is-menu-open .l-header__menu-button .l-header__menu-button_open { display: none; } .l-header.is-menu-open .l-header__menu-button .l-header__menu-button_close { display: block; } .l-header__menu-button_open { height: 100%; } .l-header__menu-button_close { display: none; height: 100%; } .l-header__nav { background: #FFFFFF; border-bottom-left-radius: 8px; border-bottom-right-radius: 8px; display: grid; grid-template-rows: 0fr; left: 50%; max-height: calc(100dvh - 134px); overflow: hidden; position: absolute; transform: translateX(-50%); transition: grid-template-rows 0.4s ease; top: 75px; width: calc(100vw - 20px); } @media (min-width: 768px) { .l-header__nav { max-height: calc(100dvh - 85px); top: 85px; width: calc(100vw - 48px); } } @media (min-width: 961px) { .l-header__nav { grid-template-rows: 1fr; height: auto; left: auto; overflow: visible; position: relative; top: auto; transform: translateX(0); width: 100%; } } .l-header.is-menu-open .l-header__nav { grid-template-rows: 1fr; } .l-header__nav_wrapper { overflow: hidden; } @media (min-width: 961px) { .l-header__nav_wrapper { overflow: visible; } } .l-header.is-menu-open .l-header__nav_wrapper { overflow: auto; } .l-header__nav_inner { display: grid; gap: 24px; padding: 16px 24px 40px; } @media (min-width: 768px) { .l-header__nav_inner { align-items: start; gap: 32px; grid-template-columns: repeat(2, 1fr); margin: 0 auto; max-width: 734px; padding: 64px 32px; } } @media (min-width: 961px) { .l-header__nav_inner { gap: 5px; grid-template-columns: 1fr; padding: 0 16px 0 10px; max-width: none; } } @media (min-width: 1280px) { .l-header__nav_inner { padding: 0 30px; } } .l-header__menu { display: grid; gap: 8px; } @media (min-width: 961px) { .l-header__menu { display: flex; gap: 16px; justify-content: flex-end; } } @media (min-width: 1280px) { .l-header__menu { gap: 32px; } } .l-header__menu_item { font-size: 16px; font-weight: 700; letter-spacing: 0.04em; line-height: 1.5; position: relative; } @media (min-width: 961px) { .l-header__menu_item { font-size: 12px; } } @media (min-width: 1280px) { .l-header__menu_item { font-size: 14px; } } .l-header__menu_item.l-header__menu_item--accordion { padding: 0; } .l-header__menu_item.is-current { pointer-events: none; } .l-header__menu_item.is-current > a::after { left: 0; width: 100%; } .l-header__menu_item > a { display: inline-block; padding: 12px 0; position: relative; } @media (min-width: 961px) { .l-header__menu_item > a { padding: 4px 0; } } .l-header__menu_item > a::after { background-color: #99E6E4; bottom: 6px; content: ""; height: 3px; left: 50%; position: absolute; transition: left 0.3s ease, width 0.3s ease; width: 0; } @media (min-width: 961px) { .l-header__menu_item > a::after { bottom: -2px; } } @media (hover: hover) { .l-header__menu_item > a:hover::after { left: 0; width: 100%; } } .l-header__menu_toggle { align-items: center; cursor: pointer; display: inline-flex; gap: 4px; padding: 12px 0; position: relative; z-index: 3; } @media (min-width: 961px) { .l-header__menu_toggle { padding: 4px 0; } } .l-header__menu_toggle::after { background-color: #99E6E4; bottom: 6px; content: ""; height: 3px; left: 50%; position: absolute; transition: left 0.3s ease, width 0.3s ease; width: 0; } @media (min-width: 961px) { .l-header__menu_toggle::after { bottom: -3px; } } @media (hover: hover) { .l-header__menu_toggle:hover::after { left: 0; width: 100%; } } @media (hover: hover) and (min-width: 961px) { .l-header__menu_toggle:hover::after { width: 0; } } .l-header__menu_toggle.is-current::after { left: 0; width: 100%; } .l-header__menu_icon .l-header__menu_icon_close { display: flex; } .l-header__menu_icon .l-header__menu_icon_open { display: none; } .is-accordion-open .l-header__menu_icon .l-header__menu_icon_close { display: none; } .is-accordion-open .l-header__menu_icon .l-header__menu_icon_open { display: flex; } .l-header__accordion { display: grid; grid-template-rows: 0fr; overflow: hidden; pointer-events: none; transition: grid-template-rows 0.4s ease; } .is-accordion-open .l-header__accordion { grid-template-rows: 1fr; pointer-events: auto; } @media (min-width: 961px) { .l-header__accordion { top: 0; padding-top: 52px; position: absolute; width: max-content; } } @media (min-width: 961px) { body:not(.is-page-top) .l-header__accordion { padding-top: 57px; } } .l-header__accordion_inner { overflow: hidden; } .l-header__accordion_menu { display: grid; padding-left: 24px; } @media (min-width: 961px) { .l-header__accordion_menu { background: #FFFFFF; border-radius: 4px; gap: 2px; padding: 8px 16px; } } .l-header__accordion_item { font-size: 14px; font-weight: 700; line-height: 1.5; } @media (min-width: 961px) { .l-header__accordion_item { font-size: 12px; font-weight: 500; } } @media (min-width: 1280px) { .l-header__accordion_item { font-size: 14px; } } @media (min-width: 961px) { .l-header__accordion_item:nth-child(n+2) { border-top: 1px solid #99E6E4; } } .l-header__accordion_item > a { display: block; padding: 13.5px 0; transition: color 0.3s ease; } @media (min-width: 961px) { .l-header__accordion_item > a { padding: 8px; } } @media (hover: hover) { .l-header__accordion_item > a:hover { color: #58B1AF; } } .l-header__sub-menu { display: grid; gap: 4px; transition: height 0.4s ease; } @media (min-width: 768px) { .l-header__sub-menu { gap: 8px; } } @media (min-width: 961px) { .l-header__sub-menu { align-items: center; display: flex; gap: 16px; height: 41px; justify-content: flex-end; order: -1; } } @media (min-width: 1280px) { .l-header__sub-menu { gap: 32px; } } @media (min-width: 961px) { body:not(.is-page-top) .l-header__sub-menu { height: 0; transition: height 0.4s ease; opacity: 0; pointer-events: none; } } .l-header__sub-menu_item { font-size: 14px; line-height: 1.5; } @media (min-width: 961px) { .l-header__sub-menu_item { font-size: 12px; } } .l-header__sub-menu_item > a { align-items: center; display: inline-flex; padding: 11.5px 0; position: relative; } @media (min-width: 961px) { .l-header__sub-menu_item > a { padding: 4px 0; } } .l-header__sub-menu_item > a::after { background-color: #303030; bottom: 8.5px; content: ""; height: 1px; left: 50%; position: absolute; transition: left 0.3s ease, width 0.3s ease; width: 0; } @media (min-width: 961px) { .l-header__sub-menu_item > a::after { bottom: 1px; } } @media (hover: hover) { .l-header__sub-menu_item > a:hover::after { left: 0; width: 100%; } } .l-header__sub-menu_hr { background: #303030; height: 1px; margin: 16px 0; width: 20px; } @media (min-width: 961px) { .l-header__sub-menu_hr { height: 12px; margin: 0; width: 1px; } } .l-header__sub-menu_login { align-items: center; background: #E5F6F6; border-radius: 100px; display: flex; font-size: 14px; height: 44px; line-height: 1.5; margin-top: 16px; padding: 11.5px 24px; transition: background 0.3s ease; width: fit-content; } @media (min-width: 961px) { .l-header__sub-menu_login { font-size: 11px; height: 26px; justify-content: center; margin-top: 0; padding: 0; width: 98px; } } @media (min-width: 1280px) { .l-header__sub-menu_login { font-size: 12px; } } @media (hover: hover) { .l-header__sub-menu_login:hover { background: #99E6E4; } } .l-header__sub-menu_info { align-items: center; border: 1px solid #FF5500; border-radius: 16px; color: #FF5500; display: none; font-size: 11px; height: 26px; justify-content: center; line-height: 1.5; transition: background 0.3s ease, color 0.3s ease; width: 66px; } @media (min-width: 961px) { .l-header__sub-menu_info { display: flex; } } @media (min-width: 1280px) { .l-header__sub-menu_info { font-size: 12px; width: 120px; } } @media (hover: hover) { .l-header__sub-menu_info:hover { background: #FF5500; color: #FFFFFF; } } .l-header__cta { transition: opacity 0.4s ease; z-index: 3; } body.is-page-bottom .l-header__cta { opacity: 0; } .l-main { margin-top: 80px; } @media (min-width: 768px) { .l-main { margin-top: 111px; } } body.p-news-single .l-main { margin-top: 136px; } @media (min-width: 768px) { body.p-news-single .l-main { margin-top: 165px; } } @media (min-width: 961px) { body.p-news-single .l-main { margin-top: 191px; } } body.p-news-single.news-emergency .l-main { margin-top: 80px; } @media (min-width: 768px) { body.p-news-single.news-emergency .l-main { margin-top: 111px; } } .l-main__page-title { display: grid; gap: 8px; justify-content: center; padding: 48px 24px 72px; text-align: center; } @media (min-width: 768px) { .l-main__page-title { padding: 80px 68px; } } .l-main__page-title_en { font-size: 16px; font-weight: 700; letter-spacing: 0.02em; line-height: 2; } @media (min-width: 1280px) { .l-main__page-title_en { font-size: 18px; } } .l-main__page-title_ja { font-size: 20px; font-weight: 700; letter-spacing: 0.02em; line-height: 1.6; position: relative; } @media (min-width: 1280px) { .l-main__page-title_ja { font-size: 24px; } } .l-main__page-title_ja::after { background: #FCF27B; bottom: 0; content: ""; height: 9px; left: 50%; min-width: calc(100% + 36px); position: absolute; transform: translateX(-50%); z-index: -1; } .l-main__contents { max-width: 824px; background: #FFFFFF; display: grid; gap: 56px; padding: 72px 24px; } @media (min-width: 768px) { .l-main__contents { max-width: min(100vw - 80px, 824px); } } @media (min-width: 961px) { .l-main__contents { max-width: min(100vw - 137px, 1008px); } } @media (min-width: 1280px) { .l-main__contents { max-width: 1240px; } } @media (min-width: 768px) { .l-main__contents { border-radius: 8px; gap: 80px; margin: 0 auto; padding: 80px 64px; } } @media (min-width: 1280px) { .l-main__contents { padding: 80px 180px; } } @media (min-width: 1280px) { body.p-case .l-main__contents, body.p-thanks_g .l-main__contents, body.p-estimate .l-main__contents, body.p-download .l-main__contents, body.p-it-hojo .l-main__contents, body.p-specification .l-main__contents { padding: 80px 90px; } } body.p-form_g .l-main__contents { gap: 48px; } body.p-faq .l-main__contents { padding: 40px 24px 72px; } @media (min-width: 768px) { body.p-faq .l-main__contents { border-bottom-left-radius: 0; border-bottom-right-radius: 0; padding: 80px 64px; } } @media (min-width: 1280px) { body.p-faq .l-main__contents { padding: 80px 90px 120px; } } @media (min-width: 1280px) { body.p-financeall .l-main__contents { padding: 80px 90px; } } body.p-news .l-main__contents { padding: 24px; } @media (min-width: 768px) { body.p-news .l-main__contents { padding: 80px 24px; } } body.p-news-single .l-main__contents { gap: 0; padding: 56px 24px; } @media (min-width: 768px) { body.p-news-single .l-main__contents { padding: 80px 64px; } } @media (min-width: 1280px) { body.p-news-single .l-main__contents { padding: 80px 180px; } } .lg-break { display: none; } @media (min-width: 1280px) { .lg-break { display: block; } } .lgs-break { display: none; } @media (min-width: 1020px) { .lgs-break { display: block; } } .sm_lg-break { display: block; } @media (min-width: 768px) { .sm_lg-break { display: none; } } @media (min-width: 1280px) { .sm_lg-break { display: block; } } .md-break { display: none; } @media (min-width: 768px) { .md-break { display: block; } } .s-md-break { display: block; } @media (min-width: 821px) { .s-md-break { display: none; } } .fix-md-break { display: none; } @media (min-width: 768px) { .fix-md-break { display: block; } } @media (min-width: 1280px) { .fix-md-break { display: none; } } .sm-break { display: block; } @media (min-width: 768px) { .sm-break { display: none; } } .sm_md-break { display: block; } @media (min-width: 1280px) { .sm_md-break { display: none; } } .ld-main__contents_head { max-width: 824px; display: grid; gap: 56px; padding: 0 24px; } @media (min-width: 768px) { .ld-main__contents_head { max-width: min(100vw - 80px, 824px); } } @media (min-width: 961px) { .ld-main__contents_head { max-width: min(100vw - 137px, 1008px); } } @media (min-width: 1280px) { .ld-main__contents_head { max-width: 1240px; } } @media (min-width: 768px) { .ld-main__contents_head { gap: 80px; margin: 0 auto; padding: 0; } } @media (min-width: 1280px) { .ld-main__contents_head { padding: 0 90px; } } body.p-flow .ld-main__contents_head { max-width: 824px; padding: 0 24px; gap: 48px; } @media (min-width: 768px) { body.p-flow .ld-main__contents_head { max-width: 824px; } } @media (min-width: 1280px) { body.p-flow .ld-main__contents_head { max-width: 880px; padding: 0; } } body.p-support .ld-main__contents_head { max-width: 824px; gap: 48px; padding: 0; } @media (min-width: 768px) { body.p-support .ld-main__contents_head { max-width: min(100vw - 80px, 824px); } } @media (min-width: 961px) { body.p-support .ld-main__contents_head { max-width: min(100vw - 100px, 824px); } } @media (min-width: 1280px) { body.p-support .ld-main__contents_head { max-width: 1240px; } } body.p-agency .ld-main__contents_head { max-width: 824px; gap: 48px; padding: 0; } @media (min-width: 768px) { body.p-agency .ld-main__contents_head { max-width: min(100vw - 80px, 824px); } } @media (min-width: 961px) { body.p-agency .ld-main__contents_head { max-width: min(100vw - 100px, 824px); } } @media (min-width: 1280px) { body.p-agency .ld-main__contents_head { max-width: 1240px; } } .ld-main__contents { max-width: 824px; display: grid; gap: 104px; padding: 88px 24px 0; } @media (min-width: 768px) { .ld-main__contents { max-width: min(100vw - 80px, 824px); } } @media (min-width: 961px) { .ld-main__contents { max-width: min(100vw - 100px, 824px); } } @media (min-width: 1280px) { .ld-main__contents { max-width: 1240px; } } @media (min-width: 768px) { .ld-main__contents { gap: 144px; margin: 0 auto; padding: 80px 24px 0; } } @media (min-width: 1280px) { .ld-main__contents { gap: 200px; padding: 80px 64px 0; } } body.p-about .ld-main__contents { max-width: 904px; padding: 88px 24px 0; } @media (min-width: 961px) { body.p-about .ld-main__contents { max-width: min(100vw - 80px, 904px); } } @media (min-width: 1280px) { body.p-about .ld-main__contents { max-width: 1240px; } } @media (min-width: 768px) { body.p-about .ld-main__contents { padding: 104px 40px 0; } } @media (min-width: 1280px) { body.p-about .ld-main__contents { padding: 144px 0 0; } } body.p-function .ld-main__contents { max-width: 824px; padding: 88px 24px 0; gap: 80px; } @media (min-width: 768px) { body.p-function .ld-main__contents { max-width: min(100vw - 80px, 824px); } } @media (min-width: 961px) { body.p-function .ld-main__contents { max-width: min(100vw - 137px, 1008px); } } @media (min-width: 1280px) { body.p-function .ld-main__contents { max-width: 1240px; } } @media (min-width: 768px) { body.p-function .ld-main__contents { padding: 104px 0 0; gap: 100px; } } @media (min-width: 1280px) { body.p-function .ld-main__contents { padding: 120px 40px 0; gap: 100px; } } body.p-flow .ld-main__contents, body.p-support .ld-main__contents { padding: 104px 24px 0; gap: 104px; } @media (min-width: 768px) { body.p-flow .ld-main__contents, body.p-support .ld-main__contents { padding: 104px 0 0; gap: 80px; } } @media (min-width: 1280px) { body.p-flow .ld-main__contents, body.p-support .ld-main__contents { gap: 104px; padding: 104px 0 0; } } body.p-agency .ld-main__contents { max-width: 824px; padding: 0; gap: 120px; } @media (min-width: 768px) { body.p-agency .ld-main__contents { max-width: min(100vw - 80px, 824px); } } @media (min-width: 961px) { body.p-agency .ld-main__contents { max-width: min(100vw - 80px, 880px); } } @media (min-width: 1280px) { body.p-agency .ld-main__contents { max-width: 1240px; } } .l-section { display: grid; gap: 24px; } .l-section.l-section--gap-sm { gap: 16px; } .l-section__title { font-size: 20px; font-weight: 700; letter-spacing: 0.02em; line-height: 1.6; display: grid; text-align: center; } @media (min-width: 1280px) { .l-section__title { font-size: 28px; } } @media (min-width: 768px) { .l-section__title { display: block; } } .l-section__sub_title { font-size: 16px; font-weight: 700; letter-spacing: 0.02em; line-height: 1.6; } @media (min-width: 1280px) { .l-section__sub_title { font-size: 18px; } } .l-section__title2 { font-size: 28px; font-weight: 700; letter-spacing: 0.02em; line-height: 1.6; display: grid; text-align: center; } @media (min-width: 1280px) { .l-section__title2 { font-size: 32px; } } @media (min-width: 768px) { .l-section__title2 { display: block; } } .l-section_head { display: grid; gap: 32px; } .l-section__title3 { font-size: 20px; font-weight: 700; letter-spacing: 0.02em; line-height: 1.8; display: grid; text-align: center; } @media (min-width: 1280px) { .l-section__title3 { font-size: 28px; } } .l-section-page-bottom { position: relative; z-index: 1; } .l-section-page-bottom__breadcrumb { max-width: 824px; margin: 0 auto; padding: 32px 24px 64px; } @media (min-width: 768px) { .l-section-page-bottom__breadcrumb { max-width: min(100vw - 80px, 824px); } } @media (min-width: 961px) { .l-section-page-bottom__breadcrumb { max-width: min(100vw - 137px, 1008px); } } @media (min-width: 1280px) { .l-section-page-bottom__breadcrumb { max-width: 1240px; } } @media (min-width: 768px) { .l-section-page-bottom__breadcrumb { padding: 56px 0 104px; } } body.p-top .l-section-page-bottom__breadcrumb { display: none; } .l-section-page-bottom__links { align-items: center; background: #FFFFFF; display: grid; gap: 32px; justify-content: center; padding: 48px 24px 32px; } @media (min-width: 768px) { .l-section-page-bottom__links { display: flex; gap: 24px; padding: 80px 0 32px; } } @media (min-width: 1280px) { .l-section-page-bottom__links { gap: 80px; padding: 120px 0 40px; } } .l-section-page-bottom__links_item { max-width: calc(100vw - 48px); width: 327px; } @media (min-width: 768px) { .l-section-page-bottom__links_item { max-width: none; width: 348px; } } @media (min-width: 1280px) { .l-section-page-bottom__links_item { width: 490px; } } .l-section-page-bottom__page-up { background: #FFFFFF; display: grid; justify-content: end; padding: 40px 24px; } @media (min-width: 768px) { .l-section-page-bottom__page-up { padding: 40px 65.5px; } } @media (min-width: 1280px) { .l-section-page-bottom__page-up { padding: 40px 61.5px; } } .c-anchor-link { align-items: center; background: #E5F6F6; border-radius: 8px; display: flex; font-size: 16px; font-weight: 700; line-height: 1.4; letter-spacing: 0.02em; max-width: 327px; padding: 17px 44px 17px 16px; position: relative; transition: background 0.4s ease; width: 100%; } @media (min-width: 768px) { .c-anchor-link { min-height: 66px; } } @media (min-width: 1280px) { .c-anchor-link { font-size: 16px; padding: 20.5px 52px 20.5px 16px; width: 252px; } } @media (min-width: 1280px) and (min-width: 1280px) { .c-anchor-link { font-size: 18px; } } .c-anchor-link::after { background-image: url(../img/arrow_down.svg); background-repeat: no-repeat; background-position: center; background-size: 20px 20px; content: ""; height: 20px; position: absolute; right: 16px; top: 50%; transform: translateY(-50%); width: 20px; } @media (hover: hover) { .c-anchor-link:hover { background: #99E6E4; } } .c-sub-anchor-link { align-items: center; border-radius: 8px; display: flex; font-size: 16px; font-weight: 700; line-height: 1.4; letter-spacing: 0.02em; padding: 8px 44px 8px 16px; position: relative; transition: background 0.4s ease; width: 100%; } @media (min-width: 768px) { .c-sub-anchor-link { min-height: 82px; padding: 17px 44px 17px 16px; } } .c-sub-anchor-link::after { background-image: url(../img/arrow_down.svg); background-repeat: no-repeat; background-position: center; background-size: 20px 20px; content: ""; height: 20px; position: absolute; right: 16px; top: 50%; transform: translateY(-50%); width: 20px; } .c-breadcrumb { display: flex; flex-wrap: wrap; gap: 8px 20px; } .c-breadcrumb__item { font-size: 12px; line-height: 1.8; letter-spacing: 0.02em; position: relative; } .c-breadcrumb__item::after { background-image: url(../img/breadcrumb.svg); background-repeat: no-repeat; background-size: contain; content: ""; height: 16px; position: absolute; right: -18px; top: 50%; transform: translateY(-50%); width: 16px; } .c-breadcrumb__item:last-child { color: #787878; } .c-breadcrumb__item:last-child::after { display: none; } .c-breadcrumb__item > a { text-underline-offset: 2.88px; text-decoration: underline; } .c-button-primary { align-items: center; background: #99E6E4; border-radius: 500px; cursor: pointer; display: flex; gap: 16px; height: 72px; justify-content: center; margin: 0 auto; max-width: 340px; padding: 16px 80px 16px 56px; position: relative; transition: background 0.4s ease; width: 100%; } @media (min-width: 1280px) { .c-button-primary { min-height: 82px; max-width: 430px; padding: 28.5px 88px 28.5px 64px; } } @media (hover: hover) { .c-button-primary:hover { background: #FCF27B; } .c-button-primary:hover::after { height: 46px; right: 21px; width: 46px; } } @media (hover: hover) and (min-width: 1280px) { .c-button-primary:hover::after { height: 56px; right: 20px; width: 56px; } } .c-button-primary::after { background-color: #FFFFFF; background-image: url(../img/arrow.svg); background-repeat: no-repeat; background-position: center; background-size: 28px 28px; border-radius: 40px; content: ""; height: 40px; position: absolute; right: 24px; transition: height 0.4s ease, right 0.4s ease, width 0.4s ease; width: 40px; } @media (min-width: 1280px) { .c-button-primary::after { background-size: 32px 32px; border-radius: 48px; height: 48px; width: 48px; } } .c-button-primary.c-button-primary--download::after { background-image: url(../img/download.svg); } .c-button-primary.c-button-primary--print::after { background-image: url(../img/print.svg); } .c-button-primary.c-button-primary--search::after { background-image: url(../img/search.svg); } .c-button-primary.c-button-primary--break-before-md { width: fit-content; } .c-button-primary.button-340 { max-width: 340px; } .c-button-primary__text { font-size: 16px; font-weight: 700; letter-spacing: 0.02em; line-height: 1.4; display: grid; text-align: center; } @media (min-width: 1280px) { .c-button-primary__text { font-size: 18px; } } @media (min-width: 768px) { .c-button-primary--break-before-md .c-button-primary__text { display: block; } } .c-button-primary-big { align-items: center; background: #99E6E4; border-radius: 500px; cursor: pointer; display: flex; gap: 16px; justify-content: center; margin: 0 auto; padding: 16px 72px 16px 48px; position: relative; transition: background 0.4s ease; min-height: 72px; width: 327px; } @media (min-width: 768px) { .c-button-primary-big { padding: 23.5px 88px 23.5px 56px; width: auto; } } @media (min-width: 1280px) { .c-button-primary-big { min-height: 82px; padding: 32.5px 96px 32.5px 64px; } } @media (min-width: 768px) { .c-button-primary-big.c-button__480 { width: 100%; max-width: 273px; } } @media (min-width: 1280px) { .c-button-primary-big.c-button__480 { max-width: 480px; } } @media (hover: hover) { .c-button-primary-big:hover { background: #FCF27B; } .c-button-primary-big:hover::after { height: 46px; right: 13px; width: 46px; } } @media (hover: hover) and (min-width: 768px) { .c-button-primary-big:hover::after { right: 21px; } } @media (hover: hover) and (min-width: 1280px) { .c-button-primary-big:hover::after { height: 56px; right: 20px; width: 56px; } } .c-button-primary-big::after { background-color: #FFFFFF; background-image: url(../img/arrow.svg); background-repeat: no-repeat; background-position: center; background-size: 28px 28px; border-radius: 40px; content: ""; height: 40px; position: absolute; right: 16px; transition: height 0.4s ease, right 0.4s ease, width 0.4s ease; width: 40px; } @media (min-width: 768px) { .c-button-primary-big::after { right: 24px; } } @media (min-width: 1280px) { .c-button-primary-big::after { background-size: 32px 32px; border-radius: 48px; height: 48px; width: 48px; } } .c-button-primary-big.c-button-primary--arrow-down::after { background-image: url(../img/arrow-down-white.svg); } .c-button-primary-big.c-button-primary--break-before-md { width: fit-content; } @media (min-width: 1280px) { .c-button-primary-big.c-button-primary--break-before-md.c-button__fix_480 { width: 480px; } } .c-button-primary-l_big.c-button-primary--break-before-md { max-width: 100%; } @media (min-width: 1280px) { .c-button-primary-l_big.c-button-primary--break-before-md { width: 100%; } } .c-button-primary-big__text { font-size: 18px; font-weight: 700; letter-spacing: 0.02em; line-height: 1.4; display: grid; text-align: center; } @media (min-width: 1280px) { .c-button-primary-big__text { font-size: 22px; } } @media (min-width: 768px) { .c-button-primary--break-before-md .c-button-primary-big__text { display: block; } } .c-button-secondary { font-size: 16px; font-weight: 700; letter-spacing: 0.02em; line-height: 1.4; align-items: center; border: 1px solid #99E6E4; border-radius: 500px; cursor: pointer; display: flex; gap: 16px; justify-content: center; max-width: 100%; padding: 13px 72px 13px 56px; position: relative; transition: background 0.7s ease; width: fit-content; } @media (min-width: 1280px) { .c-button-secondary { font-size: 18px; } } @media (hover: hover) { .c-button-secondary:hover { background: #99E6E4; } .c-button-secondary:hover::after { background: #FFFFFF; background-image: url(../img/arrow.svg); background-position: center; background-repeat: no-repeat; background-size: 24px 24px; height: 37px; right: 21.5px; width: 37px; } } @media (hover: hover) and (min-width: 1280px) { .c-button-secondary:hover::after { height: 41px; width: 41px; } } .c-button-secondary::after { background-color: #B9EAE9; background-image: url(../img/arrow.svg); background-position: center; background-repeat: no-repeat; background-size: 24px 24px; border-radius: 40px; content: ""; height: 32px; position: absolute; right: 24px; transition: background 0.4s ease, height 0.4s ease, right 0.4s ease, width 0.4s ease; width: 32px; } @media (min-width: 1280px) { .c-button-secondary::after { border-radius: 48px; height: 36px; width: 36px; } } .c-button-secondary.c-button-secondary--download::after { background-image: url(../img/download.svg); background-repeat: no-repeat; background-position: center; background-size: 25px 25px; } .c-button-secondary.c-button-secondary--print::after { background-image: url(../img/print.svg); background-repeat: no-repeat; background-position: center; background-size: 25px 25px; } .c-button-secondary.c-button-secondary--search::after { background-image: url(../img/search.svg); background-repeat: no-repeat; background-position: center; background-size: 25px 25px; } .c-button-secondary__text { text-align: center; } .c-button-download { align-items: center; background: #99E6E4; border-radius: 500px; cursor: pointer; display: flex; gap: 16px; height: 48px; justify-content: center; margin: 0 auto; max-width: 279px; padding: 12px 68px 12px 56px; position: relative; transition: background 0.4s ease; width: 100%; } @media (min-width: 768px) { .c-button-download { max-width: 289px; } } @media (min-width: 1280px) { .c-button-download { max-width: 271px; padding: 10.5px 68px 10.5px 56px; } } @media (hover: hover) { .c-button-download:hover { background: #FCF27B; } .c-button-download:hover::after { height: 36px; right: 20px; width: 36px; } } .c-button-download::after { background-color: #FFFFFF; background-image: url(../img/arrow.svg); background-repeat: no-repeat; background-position: center; background-size: 19.6px 19.6px; border-radius: 40px; content: ""; height: 28px; position: absolute; right: 24px; transition: height 0.4s ease, right 0.4s ease, width 0.4s ease; width: 28px; } @media (min-width: 1280px) { .c-button-download::after { background-size: 19px 19px; right: 24px; } } .c-button-download.c-button-download--download::after { background-image: url(../img/download.svg); } .c-button-download__text { font-size: 16px; font-weight: 700; letter-spacing: 0.02em; line-height: 1.4; display: grid; text-align: center; } @media (min-width: 1280px) { .c-button-download__text { font-size: 18px; } } .c-button-card { border-radius: 12px; display: grid; gap: 4px; padding: 16px 24px; position: relative; overflow: hidden; } @media (min-width: 768px) { .c-button-card { gap: 16px; padding: 24px; } } @media (min-width: 1280px) { .c-button-card { gap: 50px; padding: 32px; } } .c-button-card::before { background: linear-gradient(90deg, rgb(153, 230, 228) 0%, rgb(208, 239, 182) 50%, rgb(232, 243, 162) 100%); content: ""; inset: 0; pointer-events: none; position: absolute; transition: opacity 0.4s ease; } @media (hover: hover) { .c-button-card:hover::before { opacity: 0.7; } .c-button-card:hover .c-button-card__icon::after { height: 52px; width: 52px; } } @media (hover: hover) and (min-width: 1280px) { .c-button-card:hover .c-button-card__icon::after { height: 62px; width: 62px; } } .c-button-card > * { position: relative; z-index: 1; } .c-button-card__text { font-size: 20px; font-weight: 700; letter-spacing: 0.02em; line-height: 1.8; } @media (min-width: 768px) { .c-button-card__text { font-size: 24px; } } .c-button-card__icon { align-items: center; display: flex; height: 40px; justify-content: center; margin-left: auto; padding: 6px; position: relative; width: 40px; } @media (min-width: 1280px) { .c-button-card__icon { height: 48px; padding: 8px; width: 48px; } } .c-button-card__icon::after { background: #FFFFFF; border-radius: 40px; content: ""; height: 40px; position: absolute; transition: height 0.4s ease, width 0.4s ease; width: 40px; z-index: -1; } @media (min-width: 1280px) { .c-button-card__icon::after { height: 48px; width: 48px; } } @media (min-width: 1280px) { .c-button-card__icon > img { height: 32px; width: 32px; } } .c-button-page-up { cursor: pointer; display: grid; gap: 8px; } @media (hover: hover) { .c-button-page-up:hover .c-button-page-up__icon::before { background: #99E6E4; transform: scale(1.4); } } .c-button-page-up__icon { align-items: center; display: flex; height: 40px; justify-content: center; margin: 0 auto; position: relative; width: 40px; z-index: 1; } .c-button-page-up__icon::before { background: #E5F6F6; border-radius: 64px; height: 40px; content: ""; position: absolute; transition: background 0.4s ease, transform 0.4s ease; width: 40px; z-index: -1; } .c-button-page-up__text { font-size: 16px; font-weight: 700; letter-spacing: 0.02em; line-height: 1.6; } @media (min-width: 1280px) { .c-button-page-up__text { font-size: 18px; } } .c-button-next { align-items: center; background: #99E6E4; border-radius: 500px; cursor: pointer; display: flex; gap: 16px; height: 72px; justify-content: center; margin: 0 auto; max-width: 193px; padding: 25px 0; position: relative; transition: background 0.4s ease; width: 100%; } @media (min-width: 1280px) { .c-button-next { max-width: 264px; padding: 25px 0; min-height: 83px; } } @media (hover: hover) { .c-button-next:hover { background: #FCF27B; } } .c-button-next .c-button-next__text { font-size: 16px; font-weight: 700; letter-spacing: 0.02em; line-height: 1.4; display: grid; text-align: center; } @media (min-width: 1280px) { .c-button-next .c-button-next__text { font-size: 18px; } } .c-button-next.eventOff { pointer-events: none; opacity: 0; display: none; transition: opacity 0.3s; } .c-button-next.nextBox { margin-top: 8px; } .c-buttun-center { display: flex; justify-content: center; } .c-cta { bottom: 0; display: grid; grid-template-columns: repeat(2, 1fr); position: fixed; width: 100%; } @media (min-width: 768px) { .c-cta { display: none; } } .c-cta__item.c-cta__item--download { background: #FCF27B; } @media (hover: hover) { .c-cta__item.c-cta__item--download > a:hover { background: #FCEB2A; } } .c-cta__item.c-cta__item--contact { background: #99E6E4; } @media (hover: hover) { .c-cta__item.c-cta__item--contact > a:hover { background: #64DCD9; } } .c-cta__item > a { align-items: center; display: flex; gap: 4px; justify-content: center; padding: 11px 0; transition: background 0.3s ease; } .c-cta__item_text { font-size: 12px; font-weight: 700; line-height: 1.3; } .c-form__input { font-size: 16px; font-weight: 700; letter-spacing: 0.02em; line-height: 1.6; border: 1px solid #787878; border-radius: 4px; height: 44px; padding: 0 8px; width: 100%; } @media (min-width: 1280px) { .c-form__input { font-size: 18px; } } .c-form__input:focus { border: 2px solid #58B1AF; } .c-form__input.has-error { border: 2px solid #FF5500; } .field-error { color: #FF5500; text-align: center; } .q-form__input { font-size: 14px; font-weight: 500; letter-spacing: 0.02em; line-height: 1.6; border: 1px solid #787878; border-radius: 4px; height: 44px; padding: 0 8px; width: 100%; } @media (min-width: 1280px) { .q-form__input { font-size: 16px; } } .q-form__input:focus { border: 2px solid #58B1AF; } .q-form__input.has-error { border: 2px solid #FF5500; } .q-form__input.q-form__date { max-width: 100%; } @media (min-width: 768px) { .q-form__input.q-form__date { max-width: 100%; } } .c-form__label { font-size: 16px; font-weight: 700; letter-spacing: 0.02em; line-height: 1.6; } @media (min-width: 1280px) { .c-form__label { font-size: 18px; } } .q-form__label { font-size: 16px; font-weight: 700; letter-spacing: 0.02em; line-height: 1.6; } @media (min-width: 1280px) { .q-form__label { font-size: 18px; } } @media (min-width: 768px) { .q-form__label { text-align: right; } } .q-form__select__label { font-size: 14px; } @media (min-width: 1280px) { .q-form__select__label { font-size: 18px; } } .c-form__select { font-size: 14px; font-weight: 500; letter-spacing: 0.02em; line-height: 1.6; appearance: none; background: #E8E8E8; border: 1px solid #787878; border-radius: 4px; cursor: pointer; padding: 8px 40px 8px 8px; width: 100%; } @media (min-width: 1280px) { .c-form__select { font-size: 16px; } } .c-form__select.has-value { background: #FFFFFF; } .q-form__select { font-size: 28px; font-weight: 700; letter-spacing: 0.02em; line-height: 1; appearance: none; -webkit-appearance: none; background: #FFFFFF; border: 1px solid #787878; border-radius: 4px; cursor: pointer; padding: 5px 75px 3px 10px; text-align: right !important; width: 100%; height: 44px; } @media (min-width: 1280px) { .q-form__select { font-size: 32px; } } @supports (-webkit-appearance: none) { .q-form__select { direction: rtl; text-align: left; } } @media (min-width: 1280px) { .q-form__select { padding: 3px 75px 3px 10px; } } .q-form__select.has-value { background: #99E6E4; } .c-form__select-wrapper { position: relative; width: 100%; } .c-form__select-wrapper::after { background-image: url(../img/icon_formSelect.svg); background-repeat: no-repeat; background-size: contain; content: ""; height: 24px; pointer-events: none; position: absolute; right: 8px; top: 50%; transform: translateY(-50%); width: 24px; } .q-form__select-wrapper { position: relative; width: 120px; } .q-form__select-wrapper::before { display: flex; align-items: flex-end; font-size: 16px; letter-spacing: 0.2em; line-height: 1; content: "枚"; height: 32px; pointer-events: none; position: absolute; right: 47px; bottom: 12px; } @media (min-width: 768px) { .q-form__select-wrapper::before { font-size: 18px; } } .q-form__select-wrapper::after { background-image: url(../img/icon_formSelect.svg); background-repeat: no-repeat; background-size: contain; content: ""; height: 24px; pointer-events: none; position: absolute; right: 8px; top: 50%; transform: translateY(-50%); width: 24px; } .q-form__select-wrapper.hw__token::before { content: "台"; } .c-text-link { color: #58B1AF; cursor: pointer; text-decoration: underline; transition: color 0.4s ease; } @media (hover: hover) { .c-text-link:hover { color: #2D7991; } } .c-text-link-with-icon { font-size: 14px; color: #58B1AF; cursor: pointer; display: inline; letter-spacing: 0.02em; line-height: 2; text-decoration: underline; text-decoration-thickness: 0.08em; text-underline-offset: 0.24em; transition: color 0.4s ease; } @media (min-width: 1280px) { .c-text-link-with-icon { font-size: 16px; } } .c-text-link-with-icon::after { background-image: url("data:image/svg+xml,%3Csvg width=%2724%27 height=%2724%27 viewBox=%270 0 24 24%27 fill=%27none%27 xmlns=%27http://www.w3.org/2000/svg%27%3E%3Cpath d=%27M7.5 5.5L16.5 13L7.5 20.5%27 stroke=%27%2358B1AF%27 stroke-width=%271.5%27 stroke-miterlimit=%2710%27/%3E%3C/svg%3E"); background-size: contain; background-repeat: no-repeat; content: ""; display: inline-block; height: 1.5em; transition: background-image 0.4s ease; vertical-align: text-top; width: 1.5em; } @media (hover: hover) { .c-text-link-with-icon:hover { color: #2D7991; } .c-text-link-with-icon:hover::after { background-image: url("data:image/svg+xml,%3Csvg width=%2724%27 height=%2724%27 viewBox=%270 0 24 24%27 fill=%27none%27 xmlns=%27http://www.w3.org/2000/svg%27%3E%3Cpath d=%27M7.5 5.5L16.5 13L7.5 20.5%27 stroke=%27%232D7991%27 stroke-width=%271.5%27 stroke-miterlimit=%2710%27/%3E%3C/svg%3E"); } } .c-text-link-with-icon.c-text-link-icon_under::after { background-image: url("data:image/svg+xml,%3Csvg width=%2724%27 height=%2724%27 viewBox=%270 0 24 24%27 fill=%27none%27 xmlns=%27http://www.w3.org/2000/svg%27%3E%3Cpath d=%27M20.5 8.5L13 17.5L5.5 8.5%27 stroke=%27%2358B1AF%27 stroke-width=%271.5%27 stroke-miterlimit=%2710%27/%3E%3C/svg%3E"); } @media (hover: hover) { .c-text-link-with-icon.c-text-link-icon_under:hover { color: #2D7991; } .c-text-link-with-icon.c-text-link-icon_under:hover::after { background-image: url("data:image/svg+xml,%3Csvg width=%2724%27 height=%2724%27 viewBox=%270 0 24 24%27 fill=%27none%27 xmlns=%27http://www.w3.org/2000/svg%27%3E%3Cpath d=%27M20.5 8.5L13 17.5L5.5 8.5%27 stroke=%27%232D7991%27 stroke-width=%271.5%27 stroke-miterlimit=%2710%27/%3E%3C/svg%3E"); } } .c-text-link_underline { color: #303030; text-decoration: underline; } @media (hover: hover) { .c-text-link_underline:hover { text-decoration: none; } } .c-tab { display: flex; flex-wrap: wrap; gap: 8px 4px; } @media (min-width: 768px) { .c-tab { justify-content: center; } } .c-tab__item.is-current > a { border-bottom-color: #99E6E4; color: #303030; pointer-events: none; } .c-tab__item > a { font-size: 14px; font-weight: 700; letter-spacing: 0.02em; line-height: 1.4; border-bottom: 2px solid #E8E8E8; display: block; color: #787878; padding: 8px; transition: border-bottom-color 0.3s ease, color 0.3s ease; } @media (min-width: 1280px) { .c-tab__item > a { font-size: 16px; } } @media (hover: hover) { .c-tab__item > a:hover { border-bottom-color: #99E6E4; color: #303030; } } .c-tag { align-items: center; background: #99E6E4; font-size: 12px; display: flex; justify-content: center; min-width: 124px; padding: 4px 10px; } .c-tag.tag-emergency { color: #FFFFFF; background: #FF5500; } .c-table__wrapper { width: calc(100vw - 48px); } @media (min-width: 768px) { .c-table__wrapper { width: min(100vw - 208px, 696px); } } @media (min-width: 961px) { .c-table__wrapper { width: min(100vw - 265px, 880px); } } @media (min-width: 1280px) { .c-table__wrapper { width: 100%; } } .c-table__wrapper.table_gray-wrapper { width: calc(100vw - 96px); } @media (min-width: 768px) { .c-table__wrapper.table_gray-wrapper { width: min(100vw - 256px, 696px); } } @media (min-width: 961px) { .c-table__wrapper.table_gray-wrapper { width: min(100vw - 313px, 880px); } } @media (min-width: 1280px) { .c-table__wrapper.table_gray-wrapper { width: 100%; } } .c-table, .e-table { border-collapse: collapse; transform-origin: top left; width: 719px; -webkit-text-size-adjust: 50%; } @media (min-width: 768px) { .c-table, .e-table { width: 696px; } } @media (min-width: 961px) { .c-table, .e-table { width: 100%; } } .c-table.j-table, .e-table.j-table { width: 695px; } @media (min-width: 768px) { .c-table.j-table, .e-table.j-table { width: 672px; } } @media (min-width: 961px) { .c-table.j-table, .e-table.j-table { width: 100%; } } .c-table__th { font-size: 14px; font-weight: 700; letter-spacing: 0.02em; line-height: 1.4; background: #99E6E4; border: 1px solid #FFFFFF; padding: 8px 0; text-align: center; vertical-align: middle; } @media (min-width: 1280px) { .c-table__th { font-size: 18px; } } .c-table__td { font-size: 14px; font-weight: 500; letter-spacing: 0.02em; line-height: 1.4; border-bottom: 1px solid #E8E8E8; border-left: 1px solid #E8E8E8; padding: 8px 0; text-align: center; vertical-align: middle; } @media (min-width: 1280px) { .c-table__td { font-size: 18px; } } .c-table__td:last-of-type { border-right: 1px solid #E8E8E8; } .c-text-main { font-size: 16px; font-weight: 500; letter-spacing: 0.02em; line-height: 2; } @media (min-width: 1280px) { .c-text-main { font-size: 18px; } } .c-text-annotation-with-mark { font-size: 12px; font-weight: 500; letter-spacing: 0; line-height: 1.5; padding-left: 1.6666666667em; position: relative; } .c-text-annotation-with-mark::before { content: "※"; left: 0; position: absolute; top: 0; } .c-ul { position: relative; } .c-ul__li { font-size: 16px; font-weight: 500; letter-spacing: 0.02em; line-height: 2; display: flex; } @media (min-width: 1280px) { .c-ul__li { font-size: 18px; } } .c-ul__li:before { content: "・"; } .s-ul__li { font-size: 14px; font-weight: 500; letter-spacing: 0.02em; line-height: 1.6; padding-left: 1.25em; position: relative; } @media (min-width: 1280px) { .s-ul__li { font-size: 16px; } } .s-ul__li::before { content: "・"; left: 0; position: absolute; } @counter-style braket-style { system: extends decimal; prefix: "（"; suffix: "）"; } @counter-style circle-style { system: numeric; symbols: "⓪" "①" "②" "③" "④" "⑤" "⑥" "⑦" "⑧" "⑨" "⑩"; suffix: " "; } .information-ol { list-style-type: decimal; } .information-ol.ol-child_braket { list-style-type: braket-style; margin-left: 0.65em; } .information-ol.ol-child_circle { list-style-type: circle-style; } .i-ol__li { font-size: 14px; font-weight: 500; letter-spacing: 0.02em; line-height: 1.6; margin-left: 1.25em; } @media (min-width: 1280px) { .i-ol__li { font-size: 16px; } } .p-case__filter { border: 1px solid #99E6E4; border-radius: 8px; } .p-case__filter_accordion { font-size: 20px; font-weight: 700; letter-spacing: 0.02em; line-height: 1.6; background: #E5F6F6; border-radius: 8px; cursor: pointer; padding: 8px 24px; position: relative; transition: background 0.4s ease, border-radius 0.4s ease; width: 100%; } @media (min-width: 1280px) { .p-case__filter_accordion { font-size: 28px; } } @media (hover: hover) { .p-case__filter_accordion:hover { background: #99E6E4; } } #case-filter.is-open .p-case__filter_accordion { background: #99E6E4; border-bottom-left-radius: 0; border-bottom-right-radius: 0; } .p-case__filter_accordion::after { background-image: url(../img/icon_accordion-item_open.svg); background-repeat: no-repeat; background-position: center; background-size: 16px 16px; content: ""; height: 16px; position: absolute; right: 24px; top: 50%; transform: translateY(-50%); transition: transform 0.4s ease; width: 16px; } #case-filter.is-open .p-case__filter_accordion::after { background-image: url(../img/icon_accordion-item_close.svg); } .p-case__filter_content { display: grid; grid-template-rows: 0fr; overflow: hidden; transition: grid-template-rows 0.4s ease; } #case-filter.is-open .p-case__filter_content { grid-template-rows: 1fr; } .p-case__filter_content_inner { overflow: hidden; } .p-case__filter_fieldset { display: grid; gap: 8px; padding: 8px 24px; } @media (min-width: 768px) { .p-case__filter_fieldset { gap: 4px; padding: 16px 24px 8px; } .p-case__filter_fieldset:not(:first-child) { padding: 8px 24px; } } @media (min-width: 1280px) { .p-case__filter_fieldset { grid-template-columns: 160px 1fr; gap: 40px; padding: 16px 24px 12px; } .p-case__filter_fieldset:not(:first-child) { padding: 12px 24px; } } .p-case__filter_legend { font-size: 16px; letter-spacing: 0.02em; line-height: 2; } @media (min-width: 1280px) { .p-case__filter_legend { font-size: 18px; font-weight: 700; } } .p-case__filter_list { display: flex; flex-wrap: wrap; gap: 8px; } @media (min-width: 768px) { .p-case__filter_list { gap: 16px; } } .p-case__filter_item { align-items: center; align-self: center; background: #E5F6F6; cursor: pointer; display: flex; gap: 8px; padding: 2px 8px; } .p-case__filter_item.is-checked { background: #99E6E4; } .p-case__filter_checkbox { border: 1px solid #303030; height: 14px; position: relative; width: 14px; } .p-case__filter_checkbox::after { background-image: url(../img/check.svg); background-repeat: no-repeat; background-position: center; background-size: 7px 7px; content: ""; height: 7px; left: 50%; opacity: 0; position: absolute; top: 50%; transform: translate(-50%, -50%); width: 7px; } .p-case__filter_item.is-checked .p-case__filter_checkbox::after { opacity: 1; } .p-case__filter_name { font-size: 14px; font-weight: 700; letter-spacing: 0.02em; line-height: 1.8; } .p-case__filter_button-wrapper { font-size: 14px; letter-spacing: 0.02em; line-height: 2; padding: 16px 24px; } @media (min-width: 768px) { .p-case__filter_button-wrapper { padding: 0 24px 16px; } } .p-case__filter_button-wrapper .c-text-link { display: block; margin-left: auto; text-underline-offset: 0.24em; } .p-case__card-list { display: grid; gap: 56px; } @media (min-width: 768px) { .p-case__card-list { gap: 35px; grid-template-columns: repeat(2, 1fr); } } @media (min-width: 1280px) { .p-case__card-list { grid-template-columns: repeat(3, 1fr); } } .p-case__item.is-hidden { display: none; } .p-case__card { background: #E5F6F6; border-radius: 8px; display: flex; flex-direction: column; height: 100%; padding: 24px 24px 72px; position: relative; transition: background 0.4s ease; } @media (min-width: 768px) { .p-case__card { padding: 30px 30px 72px; } } .p-case__card::after { background-color: #FFFFFF; background-image: url(../img/arrow.svg); background-position: center; background-repeat: no-repeat; background-size: 25px 25px; border-radius: 48px; bottom: 16px; content: ""; height: 40px; position: absolute; right: 24px; transition: background 0.4s ease, bottom 0.4s ease, height 0.4s ease, right 0.4s ease, width 0.4s ease; width: 40px; } @media (min-width: 768px) { .p-case__card::after { bottom: 28px; right: 32px; } } @media (hover: hover) { .p-case__card:hover { background: #99E6E4; } .p-case__card:hover::after { background-image: url(../img/arrow.svg); background-position: center; background-repeat: no-repeat; background-size: 25px 25px; bottom: 24px; height: 48px; right: 28px; width: 48px; } .p-case__card:hover .p-case__card_img > img { scale: 1.05; } } .p-case__card_img { aspect-ratio: 282/160; overflow: hidden; } @media (min-width: 768px) { .p-case__card_img { aspect-ratio: 270/137.96; } } .p-case__card_img > img { height: 100%; object-fit: cover; transition: scale 0.4s ease; width: 100%; } .p-case__card_title { font-size: 16px; font-weight: 700; letter-spacing: 0.02em; line-height: 1.5; margin-top: 16px; } @media (min-width: 768px) { .p-case__card_title { font-size: 18px; margin-top: 24px; } } .p-case__card_company { font-size: 14px; letter-spacing: 0.02em; line-height: 1.8; margin-top: 16px; } @media (min-width: 768px) { .p-case__card_company { margin-top: 8px; } } .p-case__card_tags { display: flex; flex-wrap: wrap; gap: 8px; padding-top: 8px; } @media (min-width: 768px) { .p-case__card_tags { gap: 16px; padding-top: 24px; } } .p-case__card_tag { background: #FFFFFF; font-size: 14px; font-weight: 700; letter-spacing: 0.02em; line-height: 1.8; padding: 2px 8px; } .p-case-single__head { padding: 48px 0; } @media (min-width: 768px) { .p-case-single__head { padding: 64px 24px; } } @media (min-width: 1280px) { .p-case-single__head { padding: 140px 24px 136px; } } .p-case-single__head_inner { display: grid; gap: 24px; } @media (min-width: 768px) { .p-case-single__head_inner { gap: 32px; margin: 0 auto; max-width: 720px; } } @media (min-width: 1280px) { .p-case-single__head_inner { gap: 64px; max-width: 1242px; } } .p-case-single__hero { display: grid; gap: 24px; } @media (min-width: 768px) { .p-case-single__hero { gap: 32px; } } @media (min-width: 1280px) { .p-case-single__hero { grid-template-columns: 54.9919484702% 41.7874396135%; } } .p-case-single__title { font-size: 22px; font-weight: 700; line-height: 1.6; letter-spacing: 2px; padding: 0 24px; } @media (min-width: 768px) { .p-case-single__title { font-size: 22px; padding: 0; } } @media (min-width: 1280px) { .p-case-single__title { font-size: 32px; letter-spacing: 3.6px; } } .p-case-single__main-img { aspect-ratio: 375/200; overflow: hidden; } @media (min-width: 768px) { .p-case-single__main-img { aspect-ratio: 720/354.2; margin-top: 8px; } } @media (min-width: 1280px) { .p-case-single__main-img { aspect-ratio: 683/336; grid-row: 1/3; height: 100%; margin-top: 0; order: -1; width: 100%; } } .p-case-single__main-img > img { height: 100%; object-fit: cover; width: 100%; } .p-case-single__head_info { display: grid; padding: 0 24px; } @media (min-width: 768px) { .p-case-single__head_info { padding: 0; } } @media (min-width: 1280px) { .p-case-single__head_info { align-self: end; } } .p-case-single__sub-title { font-size: 18px; letter-spacing: 0.02em; line-height: 2; } @media (min-width: 768px) { .p-case-single__sub-title { padding: 2px 0; } } @media (min-width: 1280px) { .p-case-single__sub-title { font-size: 20px; line-height: 1.6; padding: 4px 0; } } .p-case-single__tags { display: flex; flex-wrap: wrap; gap: 8px; padding-top: 8px; } @media (min-width: 1280px) { .p-case-single__tags { max-width: 400px; } } .p-case-single__tag { background: #FFFFFF; font-size: 14px; font-weight: 700; letter-spacing: 0.02em; line-height: 1.8; padding: 2px 8px; } .p-case-single__head_lead { font-size: 16px; letter-spacing: 0.02em; line-height: 1.8; margin-top: 16px; padding: 0 24px; } @media (min-width: 768px) { .p-case-single__head_lead { font-size: 16px; margin-top: 32px; padding: 0; } } @media (min-width: 768px) and (min-width: 1280px) { .p-case-single__head_lead { font-size: 18px; } } @media (min-width: 1280px) { .p-case-single__head_lead { margin: 40px auto 0; max-width: 1060px; } } .p-case-single__summaries { display: grid; gap: 24px; margin-top: 24px; padding: 0 24px; } @media (min-width: 768px) { .p-case-single__summaries { margin-top: 32px; padding: 0; } } @media (min-width: 1280px) { .p-case-single__summaries { gap: 16px; margin: 0 auto; max-width: 880px; width: 100%; } } .p-case-single__summary { background: #FFFFFF; border-radius: 8px; } @media (min-width: 1280px) { .p-case-single__summary { display: grid; grid-template-columns: 249px 1fr; } } .p-case-single__summary_title { align-items: center; background: #99E6E4; border-bottom-left-radius: 0; border-bottom-right-radius: 0; border-top-left-radius: 8px; border-top-right-radius: 8px; display: flex; gap: 8px; padding: 8px; } @media (min-width: 1280px) { .p-case-single__summary_title { border-bottom-left-radius: 8px; border-top-right-radius: 0; padding: 40px 24px; } } .p-case-single__summary_list { padding: 16px; } @media (min-width: 1280px) { .p-case-single__summary_list { align-items: center; display: grid; padding: 16px 48px; } } .p-case-single__summary_item { font-size: 14px; font-weight: 500; letter-spacing: 0.02em; line-height: 1.8; padding-left: 1.25em; position: relative; } @media (min-width: 1280px) { .p-case-single__summary_item { font-size: 16px; } } .p-case-single__summary_item::before { content: "・"; left: 0; position: absolute; } .p-case-single__body { background: #FFFFFF; display: grid; gap: 120px; padding: 64px 24px 120px; } @media (min-width: 768px) { .p-case-single__body { border-radius: 8px; margin: 0 auto; max-width: 824px; padding: 80px 64px; } } @media (min-width: 1280px) { .p-case-single__body { max-width: 1240px; padding: 80px 180px 120px; } } .p-case-single__body section { display: grid; gap: 32px; } @media (min-width: 768px) { .p-case-single__body section { gap: 24px; } } @media (min-width: 1280px) { .p-case-single__body section { gap: 40px; } } .p-case-single__body h2 { font-size: 20px; font-weight: 700; letter-spacing: 0.02em; line-height: 1.8; text-align: center; } @media (min-width: 768px) { .p-case-single__body h2 { font-size: 20px; font-weight: 700; letter-spacing: 0.02em; line-height: 1.6; } } @media (min-width: 768px) and (min-width: 1280px) { .p-case-single__body h2 { font-size: 28px; } } .p-case-single__body figure { display: grid; gap: 8px; padding: 16px 0; } @media (min-width: 768px) { .p-case-single__body figure { margin: 0 auto; max-width: 560px; padding: 32px 0; } } @media (min-width: 1280px) { .p-case-single__body figure { padding: 24px 0; } } .p-case-single__body figcaption { font-size: 12px; font-weight: 500; letter-spacing: 0; line-height: 1.5; } .p-case-single__body img { width: 100%; } .p-case-single__body .p-case-single__body_paragraph { display: grid; gap: 16px; font-size: 14px; letter-spacing: 0.02em; line-height: 1.8; } @media (min-width: 768px) { .p-case-single__body .p-case-single__body_paragraph { font-size: 14px; gap: 25.2px; } } @media (min-width: 768px) and (min-width: 1280px) { .p-case-single__body .p-case-single__body_paragraph { font-size: 16px; } } @media (min-width: 1280px) { .p-case-single__body .p-case-single__body_paragraph { gap: 28.8px; } } .p-cooperation__wrapper { display: grid; gap: 24px; } .p-cooperation__th { font-size: 14px; font-weight: 700; letter-spacing: 0.02em; line-height: 1.4; background: #99E6E4; border-bottom: 1px solid #99E6E4; border-left: 1px solid #99E6E4; border-top: 1px solid #99E6E4; padding: 24px 0; text-align: center; } @media (min-width: 1280px) { .p-cooperation__th { font-size: 16px; } } .p-cooperation__th:last-of-type { border-right: 1px solid #99E6E4; } .p-cooperation__th:nth-of-type(n+2) { border-left: 1px solid #FFFFFF; } .p-cooperation__td { font-size: 12px; font-weight: 500; letter-spacing: 0.02em; line-height: 1.4; border: 1px solid #E8E8E8; padding: 16px; vertical-align: middle; } @media (min-width: 1280px) { .p-cooperation__td { font-size: 14px; } } .p-cooperation__annotation { padding-top: 8px; } .p-cooperation__annotation::before { top: 8px; } .p-faq__head { display: grid; gap: 24px; } @media (min-width: 768px) { .p-faq__head { gap: 16px; } } .p-faq-link__group { display: grid; gap: 8px; } @media (min-width: 768px) { .p-faq-link__group { align-items: start; gap: 24px; grid-template-columns: 124px 1fr; } } .p-faq-link__group_title { font-size: 14px; font-weight: 700; line-height: 2; letter-spacing: 0.02em; } @media (min-width: 1280px) { .p-faq-link__group_title { font-size: 16px; } } @media (min-width: 768px) { .p-faq-link__group_title { padding: 19px 0; text-align: center; } } @media (min-width: 1280px) { .p-faq-link__group_title { padding: 17px 0; } } .p-faq-link__group_list { display: grid; gap: 8px; } @media (min-width: 768px) { .p-faq-link__group_list { align-items: center; gap: 16px; grid-template-columns: repeat(2, 1fr); } } @media (min-width: 1280px) { .p-faq-link__group_list { display: flex; gap: 16px 24px; flex-wrap: wrap; } } .p-faq-link__group_list .c-anchor-link { max-width: none; } @media (min-width: 768px) { .p-faq-link__group_list .c-anchor-link { max-height: 66px; } } @media (min-width: 1280px) { .p-faq-link__group_list .c-anchor-link { padding: 0 52px 0 16px; width: 252px; } } .p-faq__form { border-top: 1px solid #99E6E4; margin-top: 16px; padding-top: 32px; } @media (min-width: 768px) { .p-faq__form { padding: 32px 24px 0; } } @media (min-width: 1280px) { .p-faq__form { display: grid; gap: 14px 122px; grid-template-columns: 1fr 270px; } } .p-faq__form__item { display: grid; } @media (min-width: 768px) { .p-faq__form__item { align-items: center; gap: 24px; grid-template-columns: 98px 1fr; } } .p-faq__form_label { font-size: 14px; font-weight: 700; letter-spacing: 0.02em; line-height: 1.4; } @media (min-width: 1280px) { .p-faq__form_label { font-size: 16px; } } @media (min-width: 768px) { .p-faq__form_label { width: 98px; } } .p-faq__form_input { margin-top: 16px; } @media (min-width: 768px) { .p-faq__form_input { margin-top: 0; } } .p-faq__form_button { margin: 24px auto 0; padding: 13px 72px 13px 56px; width: 196px; } @media (min-width: 768px) { .p-faq__form_button { margin: 32px auto 0; width: 318px; } } @media (min-width: 1280px) { .p-faq__form_button { margin: 0; } } .p-faq__form_button-icon { padding: 4px; } .p-faq__form_clear { display: block; font-size: 14px; letter-spacing: 0.02em; line-height: 2; margin: 16px auto; } @media (min-width: 1280px) { .p-faq__form_clear { grid-column: 2/3; margin: 8px 0 8px auto; } } .p-faq__qa, .p-it-hojo__content { max-width: 824px; background: #FFFFFF; display: grid; gap: 40px; padding-bottom: 72px; } @media (min-width: 768px) { .p-faq__qa, .p-it-hojo__content { max-width: min(100vw - 80px, 824px); } } @media (min-width: 961px) { .p-faq__qa, .p-it-hojo__content { max-width: min(100vw - 137px, 1008px); } } @media (min-width: 1280px) { .p-faq__qa, .p-it-hojo__content { max-width: 1240px; } } @media (min-width: 768px) { .p-faq__qa, .p-it-hojo__content { background: #FFFFFF; border-bottom-left-radius: 8px; border-bottom-right-radius: 8px; gap: 56px; margin: 0 auto; padding: 0 64px 80px; } } @media (min-width: 1280px) { .p-faq__qa, .p-it-hojo__content { padding: 0 90px 80px; } } .p-faq__qa_group { scroll-margin-top: 75px; } @media (min-width: 768px) { .p-faq__qa_group { scroll-margin-top: 85px; } } @media (min-width: 961px) { .p-faq__qa_group { scroll-margin-top: 80px; } } .p-faq__qa_group_head { align-items: end; background: #E5F6F6; gap: 8px 16px; display: grid; grid-template-columns: 1fr 90px; padding: 32px 24px; } @media (min-width: 768px) { .p-faq__qa_group_head { align-items: center; border-radius: 8px; grid-template-columns: auto 1fr 194px; padding: 24px; } } .p-faq__qa_group_category { background: #99E6E4; font-size: 14px; font-weight: 700; letter-spacing: 0.02em; line-height: 2; padding: 0 7.5px; width: fit-content; } .p-faq__qa_group_title { font-size: 20px; font-weight: 700; letter-spacing: 0.02em; line-height: 1.4; } @media (min-width: 1280px) { .p-faq__qa_group_title { font-size: 24px; } } .p-faq__qa_group_toggle-all { display: grid; gap: 4px; grid-column: 2/3; grid-row: 1/3; } @media (min-width: 768px) { .p-faq__qa_group_toggle-all { align-items: center; gap: 8px; grid-column: 3/4; grid-row: 1/2; grid-template-columns: repeat(2, auto); } } .p-faq__qa_group_toggle-all .text { color: #787878; display: flex; font-size: 12px; font-weight: 700; justify-content: center; letter-spacing: 0.02em; line-height: 1.6; } @media (min-width: 768px) { .p-faq__qa_group_toggle-all .text { font-size: 14px; } } .p-faq__qa_group_toggle-all .button { background: #FFFFFF; border: 1px solid #787878; border-radius: 4px; color: #787878; cursor: pointer; display: flex; font-size: 14px; justify-content: center; letter-spacing: 0.02em; line-height: 2; padding: 4px 20px 4px 8px; position: relative; } @media (min-width: 768px) { .p-faq__qa_group_toggle-all .button { font-size: 16px; padding: 4px 20px 4px 4px; width: 100px; } } .p-faq__qa_group_toggle-all .button::after { background-image: url(../img/icon_accordion_open.svg); background-repeat: no-repeat; background-position: center; background-size: 12px 12px; content: ""; height: 12px; position: absolute; right: 12.5px; top: 50%; transform: translateY(-50%); transition: transform 0.4s ease; width: 12px; } @media (min-width: 768px) { .p-faq__qa_group_toggle-all .button::after { background-size: 16px 16px; height: 16px; width: 16px; } } .p-faq__qa_group_toggle-all .button[aria-expanded=true]::after { background-image: url(../img/icon_accordion_close.svg); background-repeat: no-repeat; background-position: center; background-size: 12px 12px; } @media (min-width: 768px) { .p-faq__qa_group_toggle-all .button[aria-expanded=true]::after { background-size: 16px 16px; height: 16px; width: 16px; } } .p-faq__qa_list { padding: 0 24px; } @media (min-width: 768px) { .p-faq__qa_list { padding: 0; } } .p-faq__qa_item { scroll-margin-top: 75px; border-bottom: 1px solid #99E6E4; } @media (min-width: 768px) { .p-faq__qa_item { scroll-margin-top: 85px; } } @media (min-width: 961px) { .p-faq__qa_item { scroll-margin-top: 80px; } } .p-faq__qa_item:last-of-type { border-bottom: none; } .p-faq__question { cursor: pointer; display: grid; gap: 18px; grid-template-columns: 22px 1fr; padding: 16px 56px 8px 0; position: relative; width: 100%; } @media (min-width: 768px) { .p-faq__question { gap: 36px; padding: 16px 80px 16px 24px; } } .p-faq__question::after { background-image: url(../img/icon_accordion-item_open.svg); background-repeat: no-repeat; background-position: center; background-size: 12px 12px; content: ""; height: 12px; position: absolute; right: 0; top: 50%; transform: translateY(-50%); transition: transform 0.4s ease; width: 12px; } @media (min-width: 768px) { .p-faq__question::after { background-size: 16px 16px; height: 16px; right: 24px; width: 16px; } } .p-faq__question[aria-expanded=true]::after { background-image: url(../img/icon_accordion-item_close.svg); background-repeat: no-repeat; background-position: center; background-size: 12px 12px; } @media (min-width: 768px) { .p-faq__question[aria-expanded=true]::after { background-size: 16px 16px; } } .p-faq__question_label { font-size: 18px; font-weight: 700; letter-spacing: 0.02em; line-height: 2; } @media (min-width: 768px) { .p-faq__question_label { font-size: 24px; } } .p-faq__question_text { font-size: 16px; font-weight: 700; letter-spacing: 0.02em; line-height: 1.6; padding-top: 6px; } @media (min-width: 1280px) { .p-faq__question_text { font-size: 18px; } } @media (min-width: 768px) { .p-faq__question_text { padding-top: 12px; } } .p-faq__answer { display: grid; grid-template-rows: 0fr; margin-top: 8px; padding-right: 56px; transition: grid-template-rows 0.4s ease; } @media (min-width: 768px) { .p-faq__answer { margin-top: 0; padding: 0 108px 0 24px; transition: grid-template-rows 0.4s ease, margin-top 0.4s ease; } } .p-faq__answer.is-open { grid-template-rows: 1fr; padding-bottom: 16px; } @media (min-width: 768px) { .p-faq__answer.is-open { margin-top: -16px; transition: grid-template-rows 0.4s ease; } } .p-agency .p-faq__answer { padding-right: 46px; } @media (min-width: 768px) { .p-agency .p-faq__answer { padding: 0 108px 0 24px; } } .p-faq__answer__inner { display: grid; gap: 18px; grid-template-columns: 22px 1fr; overflow: hidden; } @media (min-width: 768px) { .p-faq__answer__inner { gap: 36px; } } .p-faq__answer_label { font-size: 18px; font-weight: 700; letter-spacing: 0.02em; line-height: 2; } @media (min-width: 768px) { .p-faq__answer_label { font-size: 24px; } } .p-faq__answer_contents { display: grid; font-size: 14px; gap: 8px; letter-spacing: 0.02em; line-height: 1.6; padding-top: 6px; } .p-faq__answer_contents_group { display: grid; } .p-faq__answer_contents_group h4 { font-weight: bold; line-height: 1.8; } .p-faq__answer_contents_group h4 + p { margin-top: 4px; } .p-faq__answer_contents_group:not(.p-faq__answer_contents_group--with-head) p { font-size: 14px; font-weight: 700; letter-spacing: 0.02em; line-height: 1.8; } @media (min-width: 1280px) { .p-faq__answer_contents_group:not(.p-faq__answer_contents_group--with-head) p { font-size: 16px; } } .p-faq__answer_contents_group li { padding-left: 1.5em; position: relative; } .p-faq__answer_contents_group li::before { content: "・"; position: absolute; left: 0; } .p-faq__answer_contents_group a { width: fit-content; } .p-faq__answer_contents_group dl { display: grid; grid-template-columns: max-content 1fr; } .p-faq__answer_contents_group dl .dl-item { display: contents; } .p-faq__answer_contents_group dl dt { align-self: start; } .p-faq__answer_contents_group dl dd { display: flex; flex-direction: column; padding-left: 1em; position: relative; } .p-faq__answer_contents_group dl dd::before { content: "："; left: 0; position: absolute; top: 0; } .p-faq__answer_contents_annotation { font-size: 12px; font-weight: 500; letter-spacing: 0; line-height: 1.5; margin-top: 4px; padding-left: 16px; position: relative; } .p-faq__answer_contents_annotation::before { content: "※"; left: 0; position: absolute; top: 0; } .p-financeall__section { display: grid; gap: 24px; } @media (min-width: 1280px) { .p-financeall__section { gap: 40px; } } .p-financeall__button-secondary { margin: auto 0; } @media (min-width: 768px) { .p-financeall__button-secondary { margin: 0; } } .p-financeall__text { font-size: 16px; line-height: 2; letter-spacing: 0.02em; } @media (min-width: 1280px) { .p-financeall__text { font-size: 18px; } } .p-financeall__text-sub { font-size: 14px; font-weight: 500; letter-spacing: 0.02em; line-height: 1.6; } @media (min-width: 1280px) { .p-financeall__text-sub { font-size: 16px; } } .p-financeall__buttons { display: grid; gap: 20px; margin-top: 24px; } @media (min-width: 768px) { .p-financeall__buttons { display: flex; margin-top: 34px; } } @media (min-width: 1280px) { .p-financeall__buttons { justify-content: center; margin-top: 24px; } } @media (min-width: 1280px) { .p-financeall__buttons .c-button-primary { margin: 0; } } .p-financeall__filter { border: 1px solid #99E6E4; border-radius: 8px; margin-top: 64px; } .p-financeall__filter_header { background: #E5F6F6; border-top-left-radius: 8px; border-top-right-radius: 8px; display: grid; gap: 4px; padding: 16px; } @media (min-width: 768px) { .p-financeall__filter_header { align-items: center; display: flex; justify-content: space-between; padding: 8px 24px; } } .p-financeall__filter_title { font-size: 20px; font-weight: 700; letter-spacing: 0.02em; line-height: 1.6; } @media (min-width: 1280px) { .p-financeall__filter_title { font-size: 28px; } } .p-financeall__filter_annotation { font-size: 12px; font-weight: 500; letter-spacing: 0; line-height: 1.5; } .p-financeall__form { margin-top: 16px; } @media (min-width: 768px) { .p-financeall__form { margin-top: 0; } } @media (min-width: 1280px) { .p-financeall__form { align-items: center; display: grid; grid-template-columns: 1fr 318px; grid-template-areas: "code button" "name button" "type button"; } } .p-financeall__form-group { display: grid; gap: 4px; padding: 8px 16px 16px; } @media (min-width: 768px) { .p-financeall__form-group { align-items: center; gap: 24px; grid-template-columns: 164px 1fr; padding: 16px 24px; } } @media (min-width: 1280px) { .p-financeall__form-group { grid-template-columns: 184px 1fr; } } .p-financeall__form-group:nth-child(n+2) { border-top: 1px solid #99E6E4; } .p-financeall__form_button-wrapper { padding: 16px 16px 24px; } @media (min-width: 768px) { .p-financeall__form_button-wrapper { padding: 24px; } } @media (min-width: 1280px) { .p-financeall__form_button-wrapper { grid-area: button; } } .p-financeall__filter_footer { padding: 0 24px 16px 24px; } @media (min-width: 768px) { .p-financeall__filter_footer { padding: 8px 24px 16px; } } .p-financeall__filter_annotation { font-size: 12px; font-weight: 500; letter-spacing: 0; line-height: 1.5; } .p-financeall__filter_annotation_item { padding-left: 20px; position: relative; } .p-financeall__filter_annotation_item::before { content: "※"; left: 0; position: absolute; } .p-financeall__filter_warning { font-size: 12px; font-weight: 500; letter-spacing: 0; line-height: 1.5; color: #FF5500; } .p-financeall__annotation { font-size: 12px; font-weight: 500; letter-spacing: 0; line-height: 1.5; background: #E5F6F6; display: grid; gap: 10px; margin-top: 40px; padding: 16px; } @media (min-width: 768px) { .p-financeall__annotation { margin-top: 48px; padding: 16px 24px; } } .p-financeall__annotation_item { padding-left: 20px; position: relative; } .p-financeall__annotation_item::before { content: "・"; left: 0; position: absolute; } .p-financeall__annotation_item > span { color: #FF5500; } .p-financeall__table_wrapper { margin-top: 40px; } .p-financeall__table { border-collapse: separate; border-spacing: 0; } .p-financeall__table .c-table__th { border: none; } .p-financeall__thead { position: sticky; top: 75px; transition: top 0.4s ease; z-index: 1; } @media (min-width: 768px) { .p-financeall__thead { top: 85px; } } @media (min-width: 961px) { .p-financeall__thead { top: 80px; } } body.is-footer-visible .p-financeall__thead { top: 0 !important; } .p-financeall__thead tr .c-table__th { border-left: 1px solid #FFFFFF; } .p-financeall__thead tr > .c-table__th:first-of-type { border-left: 1px solid #99E6E4; } .p-financeall__thead tr > .c-table__th:last-of-type { border-right: 1px solid #99E6E4; } .p-financeall__thead tr:first-of-type > .c-table__th { border-top: 1px solid #99E6E4; } .p-financeall__thead tr:first-of-type > .c-table__th:nth-of-type(3) { border-bottom: 1px solid #FFFFFF; } .p-financeall__thead tr:last-of-type > .c-table__th { border-left: 1px solid #FFFFFF; } .p-financeall__tbody_tr.is-even td { background: #EBF9F9; } .p-financeall__tbody_tr.is-hidden { display: none; } .p-financeall__empty-message { display: grid; gap: 24px; justify-content: center; margin-top: 32px; } .p-financeall__empty-message.is-hidden { display: none; } .p-financeall__empty-message_text { text-align: center; } .p-financeall__empty-message_button { margin: 0 auto; } .p-financeall__table-annotation { display: grid; gap: 16px; margin-top: 72px; } @media (min-width: 768px) { .p-financeall__table-annotation { margin-top: 80px; } } .p-financeall__table-annotation_item { font-size: 12px; font-weight: 500; letter-spacing: 0; line-height: 1.5; display: flex; gap: 8px; } .p-download__section { display: grid; gap: 24px; } @media (min-width: 1280px) { .p-download__section { gap: 40px; } } .p-download__section.p-download__section_head { gap: 24px; } .p-download__section_gap_80 { display: grid; gap: 56px; } @media (min-width: 768px) { .p-download__section_gap_80 { gap: 80px; } } .p-download__group_gap_16 { display: grid; gap: 8px; } @media (min-width: 1280px) { .p-download__group_gap_16 { gap: 16px; } } .p-thanks__group_gap_16 { display: grid; gap: 8px; } @media (min-width: 1280px) { .p-thanks__group_gap_16 { gap: 16px; } } @media (min-width: 1280px) { .section__small { padding: 0 90px; } } .p-download__text, .p-estimate__text, .p-404__text { font-size: 16px; font-weight: 500; letter-spacing: 0.02em; line-height: 2; line-height: 2; letter-spacing: 0.02em; } @media (min-width: 1280px) { .p-download__text, .p-estimate__text, .p-404__text { font-size: 18px; } } .p-download__text { font-size: 16px; font-weight: 500; letter-spacing: 0.02em; line-height: 2; } @media (min-width: 1280px) { .p-download__text { font-size: 18px; } } .p-thanks__text { font-size: 14px; font-weight: 500; letter-spacing: 0.02em; line-height: 1.8; } @media (min-width: 1280px) { .p-thanks__text { font-size: 16px; } } .p-thanks__text span { font-weight: 700; } .p-download__text-sub { font-size: 14px; font-weight: 500; letter-spacing: 0.02em; line-height: 1.6; text-align: left; } @media (min-width: 1280px) { .p-download__text-sub { font-size: 16px; } } .p-download__text-sub span { font-weight: 700; } .p-text__center { text-align: center; } .p-text__right { text-align: right; } .p-text__lg_center { text-align: left; } @media (min-width: 1280px) { .p-text__lg_center { text-align: center; } } .p-text__sm_left { text-align: left; } @media (min-width: 768px) { .p-text__sm_left { text-align: center; } } .p-download__text-sub { font-size: 12px; font-weight: 500; letter-spacing: 0.02em; line-height: 1.8; } @media (min-width: 1280px) { .p-download__text-sub { font-size: 14px; } } .p-download__buttons { display: grid; gap: 20px; margin-top: 24px; } @media (min-width: 768px) { .p-download__buttons { display: flex; margin-top: 34px; } } @media (min-width: 1280px) { .p-download__buttons { justify-content: center; margin-top: 24px; } } .p-download__card-list { display: grid; gap: 32px; } @media (min-width: 768px) { .p-download__card-list { gap: 32px; grid-template-columns: repeat(2, 1fr); } } @media (min-width: 768px) { .item__last_one-colmun > *:last-child:nth-child(odd) { grid-column: span 2; } } .p-download__item { background: #E5F6F6; border-radius: 8px; display: flex; flex-direction: column; align-items: center; justify-content: space-between; height: 100%; padding: 32px 24px 24px; } @media (min-width: 1280px) { .p-download__item { padding: 48px 32px 32px; } } .p-download__item .item__last_one-colmun__button_wrap { width: 100%; } @media (min-width: 768px) { .p-download__item .item__last_one-colmun__button_wrap { width: calc(50% - 40px); margin: auto; } } .p-download__card_img { display: flex; justify-content: center; align-items: center; margin-bottom: 16px; } .p-download__card_img > img { width: 100%; max-width: 240px; box-shadow: 0px 0px 14.86px 0px rgba(0, 0, 0, 0.1); } @media (min-width: 1280px) { .p-download__card_img > img { max-width: 320px; } } @media (min-width: 1280px) { .p-download__card_img { margin-bottom: 24px; } } .p-download__card_title { display: flex; flex-direction: column; justify-content: center; font-size: 18px; font-weight: 700; letter-spacing: 0.02em; line-height: 1.5; text-align: center; } @media (min-width: 768px) { .p-download__card_title { flex-direction: row; gap: 1em; } } @media (min-width: 1280px) { .p-download__card_title { font-size: 22px; } } .p-download__card_text { padding: 16px 0 24px; text-align: center; } @media (min-width: 768px) { .p-download__card_text { text-align: left; } } .p-news__item { align-items: center; display: grid; gap: 10px; grid-template-columns: 1fr 40px; justify-content: space-between; padding: 12px 12px 12px 0; transition: background 0.4s ease; } @media (min-width: 1280px) { .p-news__item { gap: 49px; grid-template-columns: 1fr 48px; padding: 12px 24px 16px; } } .p-news__item:not(:last-child) { border-bottom: 1px solid #99E6E4; } @media (hover: hover) { .p-news__item:hover { background: #E5F6F6; } .p-news__item:hover .p-news__icon::before { background: #FFFFFF; transform: scale(1.2); } } .p-news__data { display: grid; gap: 4px; } @media (min-width: 1280px) { .p-news__data { grid-template-columns: 235px 1fr; } } .p-news__meta { align-items: center; display: flex; gap: 16px; padding-top: 12px; } @media (min-width: 1280px) { .p-news__meta { align-items: start; padding-top: 13.5px; } } .p-news__date { font-size: 18px; letter-spacing: 0.04em; line-height: 1.4; } .p-news__title { font-size: 16px; font-weight: 700; letter-spacing: 0.02em; line-height: 1.6; padding-top: 10px; } @media (min-width: 1280px) { .p-news__title { font-size: 18px; } } .p-news__icon { align-items: center; display: flex; height: 40px; justify-content: center; position: relative; transition: background 0.7s ease; width: 40px; z-index: 1; } @media (min-width: 1280px) { .p-news__icon { height: 48px; width: 48px; } } .p-news__icon::before { background: #E5F6F6; border-radius: 48px; height: 40px; content: ""; position: absolute; transition: background 0.4s ease, transform 0.4s ease; width: 40px; z-index: -1; } @media (min-width: 1280px) { .p-news__icon::before { height: 48px; width: 48px; } } .p-news-single__head { display: grid; gap: 13.5px; } .p-news-single__title { font-size: 20px; font-weight: 700; letter-spacing: 0.02em; line-height: 1.6; } @media (min-width: 1280px) { .p-news-single__title { font-size: 28px; } } .p-news-single__meta { align-items: center; display: flex; gap: 16px; } .p-news-single__date { font-size: 20px; letter-spacing: 0.04em; line-height: 1.4; } .p-news-single__body { display: grid; gap: 40px; margin-top: 32px; } @media (min-width: 768px) { .p-news-single__body { margin-top: 48px; } } .p-news-single__body p { font-size: 16px; font-weight: 500; letter-spacing: 0.02em; line-height: 2; } @media (min-width: 1280px) { .p-news-single__body p { font-size: 18px; } } .p-news-single__body img { display: block; margin: 0 auto; max-width: 617px; width: 100%; } .p-news-single__info_contents { padding-top: 4px; } .p-price__sub-section, .p-information__sub-section { padding: 0; } @media (min-width: 768px) { .p-price__sub-section, .p-information__sub-section { padding: 0 24px; } } .p-price__text { font-size: 14px; font-weight: 500; letter-spacing: 0.02em; line-height: 1.6; } @media (min-width: 1280px) { .p-price__text { font-size: 16px; } } .p-price__table-main_th { font-size: 14px; font-weight: 700; letter-spacing: 0.02em; line-height: 1.4; background: #99E6E4; border-bottom: 1px solid #99E6E4; border-left: 1px solid #99E6E4; border-top: 1px solid #99E6E4; padding: 14px 0; text-align: center; width: 33.3333333333%; } @media (min-width: 1280px) { .p-price__table-main_th { font-size: 18px; } } @media (min-width: 1280px) { .p-price__table-main_th { padding: 11.5px 0; } } .p-price__table-main_th:nth-of-type(n+2) { border-left: 1px solid #FFFFFF; } .p-price__table-main_td { font-size: 14px; font-weight: 700; letter-spacing: 0.02em; line-height: 1.4; border: 1px solid #E8E8E8; height: 56px; text-align: center; vertical-align: middle; width: 33.3333333333%; } @media (min-width: 1280px) { .p-price__table-main_td { font-size: 18px; } } @media (min-width: 1280px) { .p-price__table-main_td { height: 66px; } } .p-price__table-price_th { background: #99E6E4; border-bottom: 1px solid #99E6E4; border-left: 1px solid #99E6E4; border-top: 1px solid #99E6E4; text-align: center; vertical-align: middle; } .p-price__table-price_th:last-of-type { border-right: 1px solid #99E6E4; } .p-price__table-price_th:nth-of-type(n+2) { border-left: 1px solid #FFFFFF; } .p-price__table-price_th.p-price__table-price_th--service { font-size: 14px; font-weight: 700; letter-spacing: 0.02em; line-height: 1.4; width: 10%; } @media (min-width: 1280px) { .p-price__table-price_th.p-price__table-price_th--service { font-size: 18px; } } .p-price__table-price_th.p-price__table-price_th--item { font-size: 14px; font-weight: 700; letter-spacing: 0.02em; line-height: 1.4; width: 28%; } @media (min-width: 1280px) { .p-price__table-price_th.p-price__table-price_th--item { font-size: 18px; } } .p-price__table-price_th.p-price__table-price_th--price { font-size: 14px; font-weight: 500; letter-spacing: 0.02em; line-height: 1.4; border-bottom: 1px solid #FFFFFF; padding: 8px 0; width: 42%; } @media (min-width: 1280px) { .p-price__table-price_th.p-price__table-price_th--price { font-size: 18px; } } .p-price__table-price_th.p-price__table-price_th--price-child { font-size: 14px; font-weight: 500; letter-spacing: 0.02em; line-height: 1.4; border-left: 1px solid #FFFFFF; padding: 8px 0; width: 21%; } @media (min-width: 1280px) { .p-price__table-price_th.p-price__table-price_th--price-child { font-size: 18px; } } .p-price__table-price_th.p-price__table-price_th--unit { font-size: 14px; font-weight: 500; letter-spacing: 0.02em; line-height: 1.4; width: 20%; } @media (min-width: 1280px) { .p-price__table-price_th.p-price__table-price_th--unit { font-size: 18px; } } .e-price__table-price_th { font-size: 14px; font-weight: 700; letter-spacing: 0.02em; line-height: 1.4; background: #99E6E4; border-bottom: 1px solid #99E6E4; border-left: 1px solid #99E6E4; border-top: 1px solid #99E6E4; text-align: center; vertical-align: middle; padding: 16px 0; } @media (min-width: 1280px) { .e-price__table-price_th { font-size: 16px; } } .e-price__table-price_th:last-of-type { border-right: 1px solid #99E6E4; } .e-price__table-price_th:nth-of-type(n+2) { border-left: 1px solid #FFFFFF; } .e-price__table-price_th.e-price__table-price_th--num { width: 5%; } .e-price__table-price_th.e-price__table-price_th--service { width: 15%; } .e-price__table-price_th.e-price__table-price_th--item { width: 25%; } .e-price__table-price_th.e-price__table-price_th--price { width: 10%; } .e-price__table-price_th.e-price__table-price_th--price-subTotal { padding: 8px 0; width: 10%; } .e-price__table-price_th.e-price__table-price_th--price { width: 10%; } .e-price__table-price_th.e-price__table-price_th--unit { width: 15%; } .e-price__table-price_th.e-price__table-price_th--note { width: 20%; } .p-price__table-price_td { font-size: 14px; font-weight: 500; letter-spacing: 0.02em; line-height: 1.4; border: 1px solid #E8E8E8; height: 56px; padding: 0 5px; text-align: center; vertical-align: middle; } @media (min-width: 1280px) { .p-price__table-price_td { font-size: 18px; } } @media (min-width: 768px) { .p-price__table-price_td { height: 66px; } } .p-price__table-price_td.p-price__table-price_td--head-main { font-size: 14px; font-weight: 700; letter-spacing: 0.02em; line-height: 1.4; } @media (min-width: 1280px) { .p-price__table-price_td.p-price__table-price_td--head-main { font-size: 18px; } } .p-price__table-price_td.p-price__table-price_td--item { text-align: left; } .p-price__table-price_td.p-price__table-price_td--item-head { width: 10%; } .p-price__table-price_td.p-price__table-price_td--bhe { background: #EFF7C3; } .p-price__table-price_td.p-price__table-price_td--valux { background: #FEFCDE; } .e-price__table-price_td { font-size: 12px; font-weight: 500; letter-spacing: 0.02em; line-height: 1.4; border: 1px solid #E8E8E8; text-align: center; vertical-align: middle; } @media (min-width: 1280px) { .e-price__table-price_td { font-size: 14px; } } @media (min-width: 768px) { .e-price__table-price_td { height: 52px; } } .e-price__table-price_td.e-price__table-price_td--service { padding: 0 16px; text-align: left; } .e-price__table-price_td.e-price__table-price_td--item, .e-price__table-price_td.e-price__table-price_td--unit, .e-price__table-price_td.e-price__table-price_td--note { text-align: left; padding: 6px 16px; } .e-price__table-price_td.e-price__table-price_td--price { text-align: right; padding: 0 16px; } .e-price__table-price_td.e-price__table-price_td--bhe { background: #EFF7C3; } .e-price__table-price_td.e-price__table-price_td--item-head { width: 10%; } .e-price__table-price_td.e-price__table-price_td--valux { background: #FEFCDE; } .e-price__table-price_td.e-price__table-price_td--sub { background: #EBF9F9; } .e-price__table-price_td.e-price__table-price_td--total-price { font-size: 14px; font-weight: 700; letter-spacing: 0.02em; line-height: 1.8; text-align: right; padding: 0 16px; } @media (min-width: 1280px) { .e-price__table-price_td.e-price__table-price_td--total-price { font-size: 16px; } } .e-price__table-price_td--total-inner { display: flex; gap: 4.5px; justify-content: center; } .e-price__table-price_td--total { font-size: 14px; font-weight: 700; letter-spacing: 0.02em; line-height: 1.8; height: 68px; } @media (min-width: 1280px) { .e-price__table-price_td--total { font-size: 16px; } } .e-price__table-price_td--total span { display: flex; align-items: center; } .e-price__table-price_td--total span.e-price-inner-title { padding-right: 20px; } .p-price__table-price_td-inner { font-size: 14px; font-weight: 700; letter-spacing: 0.02em; line-height: 1.2; display: flex; gap: 4px; } @media (min-width: 1280px) { .p-price__table-price_td-inner { font-size: 16px; } } .p-price__table-example_th-main { background: #99E6E4; } .p-price__table-example_th-sub { background: #EBF9F9; } .p-price__table-example_th { font-size: 14px; font-weight: 700; letter-spacing: 0.02em; line-height: 1.4; text-align: center; vertical-align: middle; width: 27%; } @media (min-width: 1280px) { .p-price__table-example_th { font-size: 18px; } } .p-price__table-example_th:first-of-type { width: 19%; } tr.p-price__table-example_th-main .p-price__table-example_th { border-bottom: 1px solid #99E6E4; border-left: 1px solid #99E6E4; border-top: 1px solid #99E6E4; padding: 8px 0; } tr.p-price__table-example_th-main .p-price__table-example_th:last-of-type { border-right: 1px solid #99E6E4; } tr.p-price__table-example_th-main .p-price__table-example_th:nth-of-type(n+2) { border-left: 1px solid #FFFFFF; } tr.p-price__table-example_th-sub .p-price__table-example_th { border: 1px solid #E8E8E8; padding: 10px 0; } .p-price__table-example_td { font-size: 14px; font-weight: 700; letter-spacing: 0.02em; line-height: 1.4; border: 1px solid #E8E8E8; padding: 8px 0; text-align: center; vertical-align: middle; width: 27%; } @media (min-width: 1280px) { .p-price__table-example_td { font-size: 18px; } } .p-price__table-example_td:first-of-type { width: 19%; } .p-price__annotation { font-size: 12px; font-weight: 500; letter-spacing: 0; line-height: 1.5; display: inline-block; padding-left: 20px; position: relative; } @media (min-width: 768px) { .p-price__annotation { margin: 0 auto; width: fit-content; } } .p-price__annotation:before { content: "※"; left: 0; position: absolute; top: 0; } .p-price__annotation_without_mark { font-size: 12px; font-weight: 500; letter-spacing: 0; line-height: 1.5; display: inline-block; } @media (min-width: 768px) { .p-price__annotation_without_mark { margin: 0 auto; width: fit-content; } } .p-price__sub-section, .p-information__sub-section { border-bottom: 1px solid #99E6E4; display: grid; gap: 16px; padding-bottom: 24px; } @media (min-width: 768px) { .p-price__sub-section, .p-information__sub-section { gap: 8px; } } .p-price__sub-section:first-of-type, .p-information__sub-section:first-of-type { margin-top: 32px; } .p-price__sub-section.estimate-sub:first-of-type, .p-price__sub-section.information-sub:first-of-type, .p-information__sub-section.estimate-sub:first-of-type, .p-information__sub-section.information-sub:first-of-type { margin-top: 0; } .p-price__sub-section_title, .p-information__sub-section_title { font-size: 16px; font-weight: 700; letter-spacing: 0.02em; line-height: 1.6; } @media (min-width: 1280px) { .p-price__sub-section_title, .p-information__sub-section_title { font-size: 18px; } } .p-price__sub-section_text, .p-information__sub-section_text { font-size: 14px; font-weight: 500; letter-spacing: 0.02em; line-height: 1.6; } @media (min-width: 1280px) { .p-price__sub-section_text, .p-information__sub-section_text { font-size: 16px; } } #secQ1, #secQ2, #secQ3, #secQ4 { display: none; opacity: 0; transition: opacity 0.5s; } .balloon { transition: opacity 0.3s; width: 300px; font-size: 12px; font-weight: 500; letter-spacing: 0.02em; line-height: 1.8; color: #FFFFFF; padding: 16px 24px; background: #303030; border-radius: 8px; display: none; position: absolute; opacity: 0; z-index: 1; } @media (min-width: 1280px) { .balloon { font-size: 14px; } } .balloon::after { content: ""; display: none; position: absolute; bottom: -12px; left: 50%; transform: translateX(-50%); width: 15px; height: 12.9903810568px; background: #303030; clip-path: polygon(0 0, 100% 0, 50% 100%); } @media (min-width: 768px) { .balloon::after { display: block; } } .p-estimate__section_gap_80 { display: grid; gap: 80px; } .p-estimate__section_lg_gap_80 { display: grid; gap: 56px; } @media (min-width: 768px) { .p-estimate__section_lg_gap_80 { gap: 80px; } } .p-estimate__section_gap_16 { display: grid; gap: 16px; } .p-estimate__section_gap_24 { display: grid; gap: 24px; } .p-estimate__section_gap_48 { display: grid; gap: 24px; } @media (min-width: 768px) { .p-estimate__section_gap_48 { gap: 48px; } } .p-estimate__bottom-section_gap_48, .p-estimate__section_gap_fix_48 { display: grid; gap: 48px; } .p-section__navigation { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0; } .p-section__list { font-size: 12px; font-weight: 700; letter-spacing: 0.02em; line-height: 1.4; height: 61px; display: flex; flex-direction: column; align-items: center; justify-content: center; color: #787878; background: #E5F6F6; position: relative; margin-right: 24px; padding: 13.5px 0 13.5px 5.68px; } @media (min-width: 768px) { .p-section__list { font-size: 14px; } } @media (min-width: 1280px) { .p-section__list { font-size: 18px; } } @media (min-width: 768px) { .p-section__list { padding-left: 8px; flex-direction: row; } } .p-section__list::after { content: ""; position: absolute; top: 50%; right: -24px; transform: translateY(-50%); width: 0; height: 0; border-top: 30.5px solid transparent; border-bottom: 30.5px solid transparent; border-left: 24px solid #E5F6F6; } .p-section__list.p-section__current { color: #303030; background: #99E6E4; } .p-section__list.p-section__current::after { border-left: 24px solid #99E6E4; } @media (min-width: 768px) { .p-estimate__buttons { display: flex; } } @media (min-width: 1280px) { .p-estimate__buttons { justify-content: center; } } @media (min-width: 1280px) { .p-estimate__buttons .c-button-primary { margin: 0; } } .estimate-form-content-wrapper { display: grid; gap: 120px; } .q-item { display: grid; gap: 24px; } .q-sub-item { border: 1px solid #99E6E4; border-radius: 4px; } .q-sub-item .q-sub-title { font-size: 16px; font-weight: 700; letter-spacing: 0.02em; line-height: 1.6; padding: 12px 24px; background: #E5F6F6; } @media (min-width: 1280px) { .q-sub-item .q-sub-title { font-size: 18px; } } .q-title-wrapper { display: grid; gap: 8px; text-align: center; } .q-title-wrapper .q-num { font-size: 32px; display: flex; justify-content: center; align-items: center; width: 64px; height: 64px; padding: 14px 12px 18px; margin: auto; line-height: 1; background: #99E6E4; border-radius: 34px; } @media (min-width: 1280px) { .q-title-wrapper .q-num { font-size: 32px; } } .q-title-wrapper h3 { font-size: 20px; font-weight: 700; letter-spacing: 0.02em; line-height: 1.8; } @media (min-width: 1280px) { .q-title-wrapper h3 { font-size: 28px; } } .q-title-wrapper h3 .q-title-sm { display: inline-flex; align-items: center; } .q-title-wrapper .q-title-small { font-size: 12px; font-weight: 500; letter-spacing: 0; line-height: 1.5; } .q-estimate__field { padding: 24px 0; border-bottom: 1px solid #99E6E4; } .q-estimate__field:last-child { border: none; } .q-estimate__field_check { display: flex; align-items: center; padding: 24px; gap: 8px; border-bottom: 1px solid #99E6E4; } @media (min-width: 1280px) { .q-estimate__field_check { padding: 24px 24px 24px 64px; } } .q-estimate__field_check:last-child { border: none; } .q-estimate__field_select { display: flex; flex-direction: column; padding: 24px; gap: 16px; border-bottom: 1px solid #99E6E4; } @media (min-width: 768px) { .q-estimate__field_select { align-items: center; flex-direction: row; gap: 32px; } } @media (min-width: 1280px) { .q-estimate__field_select { padding: 24px 24px 24px 64px; } } .q-estimate__field_select:last-child { border: none; } .q-estimate__select-group { display: flex; align-items: center; gap: 16px; min-width: 168px; } .p-estimate__input-group { display: grid; gap: 8px; padding: 0 24px; } @media (min-width: 768px) { .p-estimate__input-group { align-items: center; gap: 24px; grid-template-columns: 145px 1fr; padding-right: 125px; } } .p-estimate__input_name { font-size: 16px; font-weight: 700; letter-spacing: 0.02em; line-height: 1.6; } @media (min-width: 1280px) { .p-estimate__input_name { font-size: 18px; } } .p-estimate__check_item { margin-right: 8px; display: flex; align-items: center; } .p-estimate__checkBox { width: 36px; height: 36px; background: #FFFFFF; border: 1px solid #787878; border-radius: 4px; position: relative; min-width: 36px; cursor: pointer; } .p-estimate__checkBox.is-checked { background: #99E6E4; } .p-estimate__checkBox.is-checked::after { opacity: 1; } .p-estimate__checkBox::after { background-image: url(../img/icon_check.svg); background-repeat: no-repeat; background-position: center; background-size: 34px 34px; content: ""; width: 34px; height: 34px; left: 50%; opacity: 0; position: absolute; top: 50%; transform: translate(-50%, -50%); } .balloon-group { display: inline; align-items: center; } @media (min-width: 768px) { .balloon-group { display: inline-flex; } } .markHint { width: 28px; height: 28px; font-size: 16px; font-weight: 500; line-height: 2; letter-spacing: 0.2em; display: inline-flex; justify-content: center; align-items: center; text-align: center; border-radius: 12px; cursor: pointer; position: relative; padding-left: 3px; padding-bottom: 2px; color: #FF5500; z-index: 1; transition: background 0.4s ease; margin-left: 8px; } .markHint::before { content: ""; border: 1px solid #FF5500; width: 24px; height: 24px; border-radius: 12px; position: absolute; left: 2px; top: 2px; transition: background 0.4s ease, transform 0.4s ease; z-index: -1; } .markHint:hover { color: #FFFFFF; } .markHint:hover::before { transform: scale(1.16); border-radius: 14px; background: #FF5500; } .q-title-annotation { font-size: 12px; font-weight: 500; letter-spacing: 0; line-height: 1.5; display: grid; gap: 8px; } .q-title-annotation p { padding-left: 20px; position: relative; } .q-title-annotation p::before { content: "※"; display: block; position: absolute; left: 0; top: 0; } .p-result .e-form-button { display: flex; justify-content: center; } .e-form-button-secondary { display: flex; flex-direction: column; justify-content: center; } .estimate-header { display: grid; gap: 8px; } .estimate-header-item { display: flex; justify-content: space-between; align-items: center; } .estimate-header-item.company_text { font-size: 14px; font-weight: 500; letter-spacing: 0.02em; line-height: 1.6; justify-content: flex-end; text-align: right; } @media (min-width: 1280px) { .estimate-header-item.company_text { font-size: 16px; } } .estimate-header-item .c_name { font-size: 16px; font-weight: 500; letter-spacing: 0.02em; line-height: 2; } @media (min-width: 1280px) { .estimate-header-item .c_name { font-size: 18px; } } .estimate-header-item h3 { font-size: 16px; font-weight: 700; letter-spacing: 0.02em; line-height: 2; } @media (min-width: 1280px) { .estimate-header-item h3 { font-size: 18px; } } .estimate-header-item span { font-size: 14px; font-weight: 500; letter-spacing: 0.02em; line-height: 1.8; } @media (min-width: 1280px) { .estimate-header-item span { font-size: 16px; } } .result-table-wrapper { display: grid; gap: 8px; } .result-item { display: grid; gap: 24px; } .result--footer-button-wrapper { max-width: 480px; margin: auto; display: grid; gap: 16px; } .p-it-hojo__head { display: grid; gap: 32px; } .p-it-hojo-link__group_list { display: grid; gap: 16px; } @media (min-width: 768px) { .p-it-hojo-link__group_list { align-items: center; gap: 16px; grid-template-columns: repeat(2, 1fr); } } @media (min-width: 1280px) { .p-it-hojo-link__group_list { flex-wrap: wrap; grid-template-columns: repeat(3, 1fr); } } .p-it-hojo-link__group_list li { align-items: center; } .p-it-hojo-link__group_list li:nth-child(1) a span::before { content: "1. "; position: absolute; left: 0; } .p-it-hojo-link__group_list li:nth-child(2) a span::before { content: "2. "; position: absolute; left: 0; } .p-it-hojo-link__group_list li:nth-child(3) a span::before { content: "3. "; position: absolute; left: 0; } .p-it-hojo-link__group_list li:nth-child(4) a span::before { content: "4. "; position: absolute; left: 0; } .p-it-hojo-link__group_list li:nth-child(5) a span::before { content: "5. "; position: absolute; left: 0; } .p-it-hojo-link__group_list li:nth-child(6) a span::before { content: "6. "; position: absolute; left: 0; } .p-it-hojo-link__group_list li:nth-child(7) a span::before { content: "7. "; position: absolute; left: 0; } .p-it-hojo-link__group_list li:nth-child(8) a span::before { content: "8. "; position: absolute; left: 0; } .p-it-hojo-link__group_list li:nth-child(9) a span::before { content: "9. "; position: absolute; left: 0; } .p-it-hojo-link__group_list li:nth-child(10) a span::before { content: "10. "; position: absolute; left: 0; } .p-it-hojo-link__group_list li .c-anchor-link span { display: block; position: relative; padding-left: 16px; } .p-it-hojo-link__group_list .c-anchor-link { font-size: 14px; font-weight: 700; letter-spacing: 0.02em; line-height: 1.4; width: 100%; max-width: 100%; max-height: 56px; } @media (min-width: 1280px) { .p-it-hojo-link__group_list .c-anchor-link { font-size: 16px; } } @media (min-width: 1280px) { .p-it-hojo-link__group_list .c-anchor-link { padding: 8px 52px 8px 16px; } } .p-it-hojo_accordion { font-size: 20px; font-weight: 700; letter-spacing: 0.02em; line-height: 1.6; background: #E5F6F6; border-radius: 8px; cursor: pointer; padding: 24px 80px 24px 44px; position: relative; transition: background 0.4s ease, border-radius 0.4s ease; width: 100%; } @media (min-width: 1280px) { .p-it-hojo_accordion { font-size: 24px; } } @media (min-width: 768px) { .p-it-hojo_accordion { padding: 24px 80px 24px 48px; } } @media (hover: hover) { .p-it-hojo_accordion:hover { background: #99E6E4; } } .p-it-hojo_group .is-open .p-it-hojo_accordion { background: #99E6E4; } .p-it-hojo_accordion::after { background-image: url(../img/icon_accordion-item_open.svg); background-repeat: no-repeat; background-position: center; background-size: 16px 16px; content: ""; height: 16px; position: absolute; right: 24px; top: 50%; transform: translateY(-50%); transition: transform 0.4s ease; width: 16px; } .p-it-hojo_group.is-open .p-it-hojo_accordion::after { background-image: url(../img/icon_accordion-item_close.svg); } .p-it-hojo_sub_accordion { font-size: 16px; font-weight: 700; letter-spacing: 0.02em; line-height: 1.6; background: #99E6E4; cursor: pointer; padding: 24px 80px 24px 24px; position: relative; transition: background 0.4s ease, border-radius 0.4s ease; width: 100%; } @media (min-width: 1280px) { .p-it-hojo_sub_accordion { font-size: 18px; } } @media (hover: hover) { .p-it-hojo_sub_accordion:hover { background: #E5F6F6; } } .p-it-hojo_sub_accordion::after { background-image: url(../img/icon_accordion-item_open.svg); background-repeat: no-repeat; background-position: center; background-size: 16px 16px; content: ""; height: 16px; position: absolute; right: 24px; top: 50%; transform: translateY(-50%); transition: transform 0.4s ease; width: 16px; } .sub_accordion-content.is-open .p-it-hojo_sub_accordion::after { background-image: url(../img/icon_accordion-item_close.svg); } .p-it-hojo-content { display: grid; gap: 72px; } @media (min-width: 768px) { .p-it-hojo-content { gap: 80px; } } @media (min-width: 1280px) { .p-it-hojo-content { gap: 120px; } } .p-it-hojo_group-content_inner { display: grid; gap: 24px; } .p-it-hojo_group-content_head { padding-top: 24px; } .p-it-hojo_group-content { display: grid; grid-template-rows: 0fr; overflow: hidden; transition: grid-template-rows 0.4s ease; } .p-it-hojo_group.is-open .p-it-hojo_group-content { grid-template-rows: 1fr; } .p-it-hojo_group-content .p-it-hojo_group-content_inner { overflow: hidden; } .p-it-hojo_group-content .p-it-hojo_group-content_gap_48 { display: grid; gap: 48px; } .p-it-hojo_group-content .p-it-hojo_group-content_gap_24 { display: grid; gap: 24px; } .p-it-hojo_sub_group-sub_accordion-content { display: grid; grid-template-rows: 0fr; overflow: hidden; transition: grid-template-rows 0.4s ease; } .p-it-hojo_sub_group.sub_accordion-content.is-open .p-it-hojo_sub_group-sub_accordion-content { grid-template-rows: 1fr; } .p-it-hojo_sub_group-sub_accordion-content .p-it-hojo_sub_group-content_inner { overflow: hidden; } .p-it-hojo_group { display: grid; } .p-it-hojo_group:nth-child(1) button.p-it-hojo_accordion::before { content: "1. "; padding-right: 0.25em; align-items: flex-start; position: absolute; left: 24px; } .p-it-hojo_group:nth-child(2) button.p-it-hojo_accordion::before { content: "2. "; padding-right: 0.25em; align-items: flex-start; position: absolute; left: 24px; } .p-it-hojo_group:nth-child(3) button.p-it-hojo_accordion::before { content: "3. "; padding-right: 0.25em; align-items: flex-start; position: absolute; left: 24px; } .p-it-hojo_group:nth-child(4) button.p-it-hojo_accordion::before { content: "4. "; padding-right: 0.25em; align-items: flex-start; position: absolute; left: 24px; } .p-it-hojo_group:nth-child(5) button.p-it-hojo_accordion::before { content: "5. "; padding-right: 0.25em; align-items: flex-start; position: absolute; left: 24px; } .p-it-hojo_group:nth-child(6) button.p-it-hojo_accordion::before { content: "6. "; padding-right: 0.25em; align-items: flex-start; position: absolute; left: 24px; } .p-it-hojo_group:nth-child(7) button.p-it-hojo_accordion::before { content: "7. "; padding-right: 0.25em; align-items: flex-start; position: absolute; left: 24px; } .p-it-hojo_group:nth-child(8) button.p-it-hojo_accordion::before { content: "8. "; padding-right: 0.25em; align-items: flex-start; position: absolute; left: 24px; } .p-it-hojo_group:nth-child(9) button.p-it-hojo_accordion::before { content: "9. "; padding-right: 0.25em; align-items: flex-start; position: absolute; left: 24px; } .p-it-hojo_group:nth-child(10) button.p-it-hojo_accordion::before { content: "10. "; padding-right: 0.25em; align-items: flex-start; position: absolute; left: 24px; } .p-it-hojo-sub-text_group { display: grid; gap: 8px; } .p-it-hojo-sub-text_group.text_group_gap_4 { gap: 4px; } .p-it-hojo-sub-image_group { width: 100%; padding: 24px; display: flex; justify-content: center; flex-direction: column; gap: 16px; background: #E5F6F6; text-align: center; } @media (min-width: 1280px) { .p-it-hojo-sub-image_group { max-width: 742px; margin: auto; } } .p-it-hojo-sub-image_group img { max-width: 100%; } @media (min-width: 768px) { .p-it-hojo-sub-image_group img { max-width: 536px; } } .p-it-hojo-sub-image_group .p-it-hojo-sub_image-title { font-size: 16px; font-weight: 700; letter-spacing: 0.02em; line-height: 1.6; } @media (min-width: 1280px) { .p-it-hojo-sub-image_group .p-it-hojo-sub_image-title { font-size: 18px; } } .p-it-hojo-sub-cc_group { width: 100%; display: grid; padding: 24px; gap: 24px; background: #E5F6F6; } .p-it-hojo-sub-cc_group h2 { text-align: center; } .p-it-hojo-sub-cc_group h3 { font-size: 16px; font-weight: 700; letter-spacing: 0.02em; line-height: 1.6; } @media (min-width: 1280px) { .p-it-hojo-sub-cc_group h3 { font-size: 18px; } } .p-it-hojo-sub-cc_group .contact-tel { font-size: 20px; line-height: 1.6; font-weight: 500; } @media (min-width: 1280px) { .p-it-hojo-sub-cc_group .contact-tel { font-size: 24px; } } .p-it-hojo-sub-cc_group .p-it-hojo-sub-child_group.p-it-hojo-contact { display: flex; flex-direction: column; gap: 4px; } .p-it-hojo_group_title { font-size: 20px; font-weight: 700; letter-spacing: 0.02em; line-height: 1.6; } @media (min-width: 1280px) { .p-it-hojo_group_title { font-size: 28px; } } .p-it-hojo_sub_group_title { font-size: 16px; font-weight: 700; letter-spacing: 0.02em; line-height: 1.6; margin-top: 24px; } @media (min-width: 1280px) { .p-it-hojo_sub_group_title { font-size: 18px; } } .pt-it-hojo-table_gray { padding: 10px; background: #F4F4F4; font-size: 16px; font-weight: 500; letter-spacing: 0.02em; line-height: 2; } @media (min-width: 1280px) { .pt-it-hojo-table_gray { font-size: 18px; } } @media (min-width: 768px) { .pt-it-hojo-table_gray { padding: 24px; } } .pt-it-hojo-table_gray .j-table th { width: 100px; font-weight: 700; } .pt-it-hojo-table_gray .j-table td { padding-top: 24px; } .pt-it-hojo-table_gray .j-table .pt-it-hojo-table_gray_th_head { width: 100%; font-size: 20px; font-weight: 700; letter-spacing: 0.02em; line-height: 1.6; padding: 0; } @media (min-width: 1280px) { .pt-it-hojo-table_gray .j-table .pt-it-hojo-table_gray_th_head { font-size: 28px; } } .pt-it-hojo-table_gray .sub-content-child-table_tag { display: flex; gap: 16px; padding-top: 16px; grid-template-columns: repeat(2, 1fr); } .pt-it-hojo-table_gray span { font-size: 14px; line-height: 1.8; letter-spacing: 0.02em; padding: 2px 8px; } .pt-it-hojo-table_gray .table-tag-bizhaweye { background: #D3E867; } .pt-it-hojo-table_gray .table-tag-tetrabridge { background: #99E6E4; } .pt-it-hojo-table_gray .table-tag-valux { background: #FDD11B; } .pt-it-hojo-table_gray li { padding-left: 0.5em; } .pt-it-hojo-table_gray li:nth-child(1)::before { content: "1. "; padding-right: 0; align-items: flex-start; } .pt-it-hojo-table_gray li:nth-child(2)::before { content: "2. "; padding-right: 0; align-items: flex-start; } .pt-it-hojo-table_gray li:nth-child(3)::before { content: "3. "; padding-right: 0; align-items: flex-start; } .pt-it-hojo-table_gray li:nth-child(4)::before { content: "4. "; padding-right: 0; align-items: flex-start; } .pt-it-hojo-table_gray li:nth-child(5)::before { content: "5. "; padding-right: 0; align-items: flex-start; } .pt-it-hojo-table_gray li:nth-child(6)::before { content: "6. "; padding-right: 0; align-items: flex-start; } .pt-it-hojo-table_gray li:nth-child(7)::before { content: "7. "; padding-right: 0; align-items: flex-start; } .pt-it-hojo-table_gray li:nth-child(8)::before { content: "8. "; padding-right: 0; align-items: flex-start; } .pt-it-hojo-table_gray li:nth-child(9)::before { content: "9. "; padding-right: 0; align-items: flex-start; } .pt-it-hojo-table_gray li:nth-child(10)::before { content: "10. "; padding-right: 0; align-items: flex-start; } .p-it-hojo_sub_group { display: grid; gap: 16px; } .p-it-hojo_sub_group.sub_accordion-content { gap: 0; } .p-it-hojo_sub_group.text_group_gap_8 { gap: 8px; } .p-it-hojo_sub_group.inqury-content { max-width: 694px; margin: auto; display: flex; justify-content: center; flex-direction: column; } .p-it-hojo-sub-cc_group { max-width: 742px; margin: auto; } .p-it-hojo-button { display: flex; justify-content: center; } .p-it-hojo-main-text { font-size: 16px; font-weight: 500; letter-spacing: 0.02em; line-height: 2; } @media (min-width: 1280px) { .p-it-hojo-main-text { font-size: 18px; } } .p-it-hojo-sub-text { font-size: 14px; font-weight: 500; letter-spacing: 0.02em; line-height: 2; } @media (min-width: 1280px) { .p-it-hojo-sub-text { font-size: 16px; } } .text-caution { color: #FF5500; } .pt-it-hojo_item-detail { display: grid; gap: 24px; } .p-it-hojo__th { font-size: 14px; font-weight: 700; letter-spacing: 0.02em; line-height: 1.4; background: #99E6E4; border-bottom: 1px solid #FFFFFF; padding: 16px 0; text-align: center; vertical-align: middle; } @media (min-width: 1280px) { .p-it-hojo__th { font-size: 18px; } } .p-it-hojo__th:nth-of-type(n+2) { border-left: 1px solid #FFFFFF; } .p-it-hojo__th.p-it-hojo__th_head-60 { width: 60%; padding: 25px 0; } .p-it-hojo__th.p-it-hojo__th_head-20 { width: 20%; padding: 25px 0; } .p-it-hojo__td { font-size: 14px; font-weight: 500; letter-spacing: 0.02em; line-height: 1.4; border-top: 1px solid #FFFFFF; border-bottom: 1px solid #FFFFFF; background: #E5F6F6; padding: 16px 24px; vertical-align: middle; } @media (min-width: 1280px) { .p-it-hojo__td { font-size: 16px; } } .p-it-hojo__td.table-th_head { font-size: 14px; font-weight: 700; letter-spacing: 0.02em; line-height: 1.4; text-align: center; border-right: 1px solid #FFFFFF; } @media (min-width: 1280px) { .p-it-hojo__td.table-th_head { font-size: 18px; } } .p-it-hojo__td.table-td_center { text-align: center; } .p-it-hojo__td.table-td_middle { border-left: 1px solid #FFFFFF; border-right: 1px solid #FFFFFF; } .p-it-hojo__td.table-td_mini { font-size: 12px; font-weight: 500; letter-spacing: 0.02em; line-height: 1.4; padding: 20px 16px; } @media (min-width: 1280px) { .p-it-hojo__td.table-td_mini { font-size: 14px; } } .p-it-hojo__td.p-it-hojo__td_head-10 { font-size: 14px; font-weight: 700; letter-spacing: 0.02em; line-height: 1.4; width: 10%; background: #99E6E4; text-align: center; border-right: 1px solid #FFFFFF; padding: 0; } @media (min-width: 1280px) { .p-it-hojo__td.p-it-hojo__td_head-10 { font-size: 18px; } } .p-it-hojo__th_inner { display: flex; align-items: center; flex-direction: column; } .p-it-hojo__th_inner .p-it-hojo__th_sub { font-size: 12px; font-weight: 500; letter-spacing: 0; line-height: 1.5; } .p-it-hojo-table-big___th { font-size: 14px; font-weight: 700; letter-spacing: 0.02em; line-height: 1.4; background: #99E6E4; border-left: 1px solid #FFFFFF; border-top: 1px solid #99E6E4; padding: 16px 0; text-align: center; vertical-align: middle; } @media (min-width: 1280px) { .p-it-hojo-table-big___th { font-size: 16px; } } .p-it-hojo-table-big___th:first-of-type { border-left: 1px solid #99E6E4; } .p-it-hojo-table-big___th:last-of-type { border-right: 1px solid #99E6E4; padding: 0; } .p-it-hojo-table-big___th.p-it-hojo__th--service, .p-it-hojo-table-big___th.p-it-hojo__th--sub_price { width: 15%; } .p-it-hojo-table-big___th.p-it-hojo__th--price { width: 25%; } .p-it-hojo__table-price_td { font-size: 12px; font-weight: 500; letter-spacing: 0.02em; line-height: 1.4; border: 1px solid #E8E8E8; padding: 20px 16px; vertical-align: middle; } @media (min-width: 1280px) { .p-it-hojo__table-price_td { font-size: 14px; } } .p-it-hojo__table-price_td.p-it-hojo__table-price_td-head { text-align: center; } .p-it-hojo__table-price_td.p-it-hojo__table-price_td-sub_head { max-width: 100px; } .p-it-hojo__table-price_td.p-it-hojo__table_td--bhe { background: #EFF7C3; } .p-it-hojo__table-price_td.p-it-hojo__table_td--valux { background: #FEFCDE; } .p-it-hojo__table-price_td.p-it-hojo__table_td--tbe { background: #E5F6F6; } .p-it-hojo__table-price_td.p-it-hojo__table-price_difference { background: #FFEEE5; } .p-it-hojo__table-price_td.p-it-hojo__table_td--sub_total { font-size: 16px; background: #F4F4F4; } .p-it-hojo__table-price_td .p-it-hojo__table_td--total_normal.table-arrow_td { position: relative; } .p-it-hojo__table-price_td .p-it-hojo__table_td--total_normal.table-arrow_td::after { content: ""; width: 25px; height: 14px; display: block; position: absolute; top: 50%; right: -16px; transform: translateY(-50%); z-index: -1; background-image: url(../img/table_arrow.svg); background-repeat: no-repeat; background-position: center; z-index: 1; } @media (min-width: 1280px) { .p-it-hojo__table-price_td .p-it-hojo__table_td--total_normal.table-arrow_td::after { width: 49px; height: 14px; right: 0; background-image: url(../img/table_arrow_big.svg); } } .p-it-hojo__table-price_td .p-it-hojo__table_td--total { color: #FF5500; font-size: 16px; } .p-it-hojo__table-price_td .p-it-hojo__table-anontation { font-size: 12px; font-weight: 500; letter-spacing: 0; line-height: 1.5; } .p-it-hojo__table-bottom-wrapper { display: flex; justify-content: flex-end; padding-top: 14.42px; } .p-it-hojo__table-bottom-wrapper .p-it-hojo__table-bottom_baloon { position: relative; color: #FFFFFF; background: #FF5500; border-radius: 4px; font-size: 16px; font-weight: 700; line-height: 1.8; letter-spacing: 0.02em; text-align: center; padding: 7.5px 16px; z-index: 1; } .p-it-hojo__table-bottom-wrapper .p-it-hojo__table-bottom_baloon::before { content: ""; width: 38px; height: 36px; display: block; background: #FF5500; clip-path: polygon(50% 0, 100% 100%, 0 100%); position: absolute; top: -15px; left: 50%; transform: translateX(-50%); z-index: -1; } .p-top__fv { height: 100vh; position: fixed; width: 100vw; z-index: 1; } .p-top__fv_inner { height: 100%; position: relative; width: 100%; } @media (min-width: 768px) { .p-top__fv_inner { margin: 0 auto; max-width: 720px; width: 83.3333333333%; } } @media (min-width: 1280px) { .p-top__fv_inner { max-width: 1078px; width: 100%; } } .p-top__fv_title { left: 0; position: absolute; top: 50%; } .p-top__fv_bg { height: calc(var(--locked-vh) * 100); left: 0; object-fit: cover; position: fixed; top: 0; transition: height 0.4s ease; width: 100vw; } @media (min-width: 768px) { .p-top__fv_bg { height: 100vh; transition: none; } } .p-top__fv_obj { height: auto; left: -27px; position: absolute; top: calc(403px + 29.3333333333vw); transform: translateY(-50%); width: 100vw; } @media (min-width: 768px) { .p-top__fv_obj { left: calc(50% - 230px); top: max(320px, 50vh); width: 640px; } } @media (min-width: 1280px) { .p-top__fv_obj { left: calc(50% - 310px); top: max(400px, 50vh + 40px); width: 900px; } } .p-top__fv_mask-group { transform-origin: calc(100vw - 27px - 28.8vw) calc(403px + 29.3333333333vw); } @media (min-width: 768px) { .p-top__fv_mask-group { transform-origin: calc(50% + 223px) max(320px, 50vh); } } @media (min-width: 1280px) { .p-top__fv_mask-group { transform-origin: calc(50% + 327px) max(400px, 50vh + 40px); } } .p-top__fv_mask { position: absolute; top: 0; left: 0; width: 100vw; height: 100vh; background: linear-gradient(115.44deg, #A0E7E6 12.46%, #ADEFC6 84.8%); mask-image: linear-gradient(#000, #000), url(../img/mask_circle.svg); mask-repeat: no-repeat, no-repeat; mask-position: 0 0, calc(100% - 27px) 405px; mask-size: cover, 57.6vw, auto; mask-composite: exclude; } @media (min-width: 768px) { .p-top__fv_mask { mask-position: 0 0, calc(50% + 225px) max(140px, 50vh - 187px); mask-size: cover, 365px, auto; } } @media (min-width: 1280px) { .p-top__fv_mask { mask-position: 0 0, calc(50% + 320px) max(149px, 50vh - 220px); mask-size: cover, 500px, auto; } } .p-top__fv_contents { left: 24px; position: absolute; top: 104px; width: 100%; } @media (min-width: 768px) { .p-top__fv_contents { left: 0; top: max(230px, 50vh - 90px); } } @media (min-width: 1280px) { .p-top__fv_contents { top: max(210px, 50vh - 150px); } } .p-top__fv_title_sub { display: block; font-size: 16px; font-weight: 700; letter-spacing: 0.02em; line-height: 1.4; padding: 0 4px; position: relative; width: fit-content; z-index: 1; } @media (min-width: 1280px) { .p-top__fv_title_sub { font-size: 28px; font-weight: 700; line-height: 1.5; } } .p-top__fv_title_sub::after { background: #FCF27B; bottom: 0; content: ""; height: 8px; left: 50%; position: absolute; transform: translateX(-50%); z-index: -1; width: 100%; } @media (min-width: 1280px) { .p-top__fv_title_sub::after { height: 16px; } } .p-top__fv_title_main { font-size: 26px; font-weight: 700; letter-spacing: 0.02em; line-height: 1.8; display: grid; padding-top: 8px; } @media (min-width: 1280px) { .p-top__fv_title_main { font-size: 44px; } } @media (min-width: 768px) { .p-top__fv_title_main { grid-template-columns: auto 1fr; padding-top: 16px; } } @media (min-width: 768px) { .p-top__fv_title_main span:last-of-type { grid-column: 1/3; } } .p-top__fv_button { font-size: 16px; font-weight: 700; letter-spacing: 0.02em; line-height: 1.4; background: rgba(255, 255, 255, 0.75); border: 1px solid #FFFFFF; border-radius: 32px; display: flex; margin-top: 16px; padding: 14px 56px 14px 14px; position: relative; transition: background 0.7s ease; width: fit-content; z-index: 1; } @media (min-width: 1280px) { .p-top__fv_button { font-size: 18px; } } @media (min-width: 768px) { .p-top__fv_button { border-radius: 48px; margin-top: 136px; padding: 23.5px 72px 23.5px 32px; } } @media (min-width: 1280px) { .p-top__fv_button { margin-top: 180px; } } .p-top__fv_button::after { background: #99E6E4; background-image: url(../img/arrow.svg); background-position: center; background-repeat: no-repeat; background-size: 24px 24px; border-radius: 40px; content: ""; height: 32px; position: absolute; right: 14px; top: 50%; transform: translateY(-50%); transition: background 0.4s ease, height 0.4s ease, right 0.4s ease, width 0.4s ease; width: 32px; } @media (min-width: 768px) { .p-top__fv_button::after { border-radius: 48px; height: 40px; right: 16px; width: 40px; } } @media (hover: hover) { .p-top__fv_button:hover { background: rgb(255, 255, 255); } .p-top__fv_button:hover::after { background-image: url(../img/arrow.svg); background-position: center; background-repeat: no-repeat; background-size: 24px 24px; height: 37px; right: 11.5px; width: 37px; } } @media (hover: hover) and (min-width: 768px) { .p-top__fv_button:hover::after { height: 48px; right: 12px; width: 48px; } } .p-top__fv_circle { background: linear-gradient(115.44deg, rgba(160, 231, 230, 0.8) 42.46%, rgba(173, 239, 198, 0.8) 56.8%); border-radius: 50%; height: 1px; left: calc(100vw - 27px - 28.8vw); position: absolute; top: calc(403px + 29.3333333333vw); transform: translate(-50%, -50%); transform-origin: top left; width: 1px; } @media (min-width: 768px) { .p-top__fv_circle { left: calc(50% + 223px); top: max(320px, 50vh); } } @media (min-width: 1280px) { .p-top__fv_circle { left: calc(50% + 327px); top: max(400px, 50vh + 40px); } } .p-top__fv-scroll { height: 100vh; position: relative; } .p-top__lead { height: 100vh; padding: 123px 24px 0; position: relative; z-index: 1; } @media (min-width: 768px) { .p-top__lead { padding: 0 24px; } } .p-top__lead_inner { height: 100%; } @media (min-width: 768px) { .p-top__lead_inner { align-items: center; display: flex; margin: 0 auto; max-width: 720px; width: 83.3333333333%; } } @media (min-width: 1280px) { .p-top__lead_inner { max-width: 1060px; } } .p-top__lead_text { font-size: 16px; font-weight: 700; letter-spacing: 0.02em; line-height: 2; transform: translateY(1em); transition: transform 0.4s ease; } @media (min-width: 768px) { .p-top__lead_text { font-size: 20px; padding-top: 8px; transform: translateY(0); } } @media (min-width: 1280px) { .p-top__lead_text { font-size: 24px; } } body.is-scrolled .p-top__lead_text { transform: translateY(0); } .p-top__lead_text .line { display: inline; overflow: visible; } @media (min-width: 768px) { .p-top__lead_text .line { display: block; overflow: hidden; } } .p-top__lead_text .word { transform: translateY(100%); transition: opacity 0.4s ease, transform 0.4s ease; opacity: 0; } @media (min-width: 768px) { .p-top__lead_text .word { display: inline-block; } } body.is-scrolled .p-top__lead_text .word { transform: translateY(0); opacity: 1; } .p-top__lead_news { background: rgba(255, 255, 255, 0.7); border-radius: 8px; margin-top: 104px; opacity: 0; transform: translateY(1em); transition: background 0.4s ease, opacity 0.4s ease, transform 0.4s ease; } @media (min-width: 768px) { .p-top__lead_news { bottom: 60px; margin: 0 auto; max-width: 720px; position: absolute; width: 83.3333333333%; } } @media (min-width: 1280px) { .p-top__lead_news { max-width: 1060px; } } body.is-scrolled .p-top__lead_news { opacity: 1; transform: translateY(0); } @media (hover: hover) { .p-top__lead_news:hover { background: #FFFFFF; } } .p-top__lead_news_link { display: block; padding: 16px 16px 4px 16px; } @media (min-width: 768px) { .p-top__lead_news_link { align-items: center; display: grid; grid-template-columns: auto 1fr auto; padding: 10px 24px; } } .p-top__lead_news_meta { align-items: center; display: flex; flex-wrap: wrap; gap: 8px; } @media (min-width: 768px) { .p-top__lead_news_meta { gap: 20px; } } .p-top__lead_news_meta time { font-size: 14px; letter-spacing: 0.04em; line-height: 1.4; } @media (min-width: 768px) { .p-top__lead_news_meta time { font-size: 18px; } } @media (min-width: 1280px) { .p-top__lead_news_meta time { font-size: 20px; } } .p-top__lead_news_meta span { background: #99E6E4; border-radius: 4px; font-size: 12px; letter-spacing: 0.04em; line-height: 1.4; padding: 4px 8px; text-align: center; width: fit-content; } @media (min-width: 1280px) { .p-top__lead_news_meta span { font-size: 14px; padding: 4px 10px; min-width: 140px; } } .p-top__lead_news_title { font-size: 12px; font-weight: 700; letter-spacing: 0.02em; line-height: 1.8; margin-top: 8px; } @media (min-width: 768px) { .p-top__lead_news_title { font-size: 14px; margin-top: 0; overflow: hidden; padding-left: 20px; text-overflow: ellipsis; white-space: nowrap; } } @media (min-width: 1280px) { .p-top__lead_news_title { font-size: 16px; } } .p-top__lead_news_icon { display: block; margin-left: auto; padding: 4px; } .p-top__introduction { background: rgb(255, 255, 255); padding: 56px 0 144px; position: relative; z-index: 2; } @media (min-width: 768px) { .p-top__introduction { padding: 120px 0 192px; } } @media (min-width: 1280px) { .p-top__introduction { padding: 120px 0 284px; } } .p-top__introduction::before { background: linear-gradient(141.83deg, rgba(153, 230, 228, 0.5) 4.25%, rgba(177, 234, 208, 0.5) 60.59%, rgba(208, 239, 182, 0.5) 99.52%); content: ""; inset: 0; pointer-events: none; position: absolute; } .p-top__company { position: relative; } .p-top__company_template { display: none; } .p-top__company_title { font-size: 20px; font-weight: 700; letter-spacing: 0.02em; line-height: 1.6; text-align: center; } @media (min-width: 1280px) { .p-top__company_title { font-size: 28px; } } .p-top__company_container { display: grid; gap: 10px; margin-top: 16px; } @media (min-width: 768px) { .p-top__company_container { margin-top: 32px; } } .p-top__company_slider { display: flex; overflow: hidden; } .p-top__company_track { display: flex; flex-shrink: 0; white-space: nowrap; } .p-top__company_track:nth-child(odd) { animation: move-left-odd 100s linear infinite; animation-delay: -50s; } @media (min-width: 768px) { .p-top__company_track:nth-child(odd) { animation: move-left-odd 200s linear infinite; animation-delay: -100s; } } .p-top__company_slider.is-row2 .p-top__company_track:nth-child(odd) { animation: move-right-odd 120s linear infinite; animation-delay: -60s; } .p-top__company_track:nth-child(even) { animation: move-left-even 100s linear infinite; } @media (min-width: 768px) { .p-top__company_track:nth-child(even) { animation: move-left-even 200s linear infinite; } } .p-top__company_slider.is-row2 .p-top__company_track:nth-child(even) { animation: move-right-even 120s linear infinite; } .p-top__company_track img { margin-left: 10px; width: 111px; } @media (min-width: 768px) { .p-top__company_track img { margin-left: 24px; width: 140px; } } @media (min-width: 1280px) { .p-top__company_track img { width: 170px; } } @keyframes move-left-odd { from { transform: translateX(100%); } to { transform: translateX(-100%); } } @keyframes move-left-even { from { transform: translateX(0); } to { transform: translateX(-200%); } } @keyframes move-right-odd { from { transform: translateX(-100%); } to { transform: translateX(100%); } } @keyframes move-right-even { from { transform: translateX(-200%); } to { transform: translateX(0%); } } .z-content, .p-top__section { position: relative; z-index: 2; } .p-top__section { border-radius: 24px 24px 0 0; margin-top: -24px; } @media (min-width: 768px) { .p-top__section { border-radius: 32px 32px 0 0; margin-top: -32px; } } .p-top__section.p-top_white { background: #FFFFFF; } .p-top__section.p-top_blue { background: #E5F6F6; } .p-top__management-content-small { padding: 0 24px; display: grid; gap: 120px; } @media (min-width: 768px) { .p-top__management-content-small { padding: 0 40px; } } @media (min-width: 1280px) { .p-top__management-content-small { gap: 184px; padding: 0; } } .p-top__gap64 { display: grid; gap: 64px; } .p-top__gap56 { display: grid; gap: 56px; } @media (min-width: 768px) { .p-top__gap56 { gap: 64px; } } .p-top__gap40 { display: grid; gap: 40px; } @media (min-width: 1280px) { .p-top__gap40 { gap: 64px; } } .p-top__management_title { font-size: 26px; line-height: 1.6; font-weight: 700; letter-spacing: 0.028em; } @media (min-width: 1280px) { .p-top__management_title { font-size: 44px; } } .p-top__management_sub_title { font-size: 20px; letter-spacing: 0.02em; font-weight: 700; line-height: 1.6; } @media (min-width: 1280px) { .p-top__management_sub_title { font-size: 34px; } } .p-top__management-content__lead { background: #FFFFFF; border-radius: 8px; width: 100%; max-width: 1240px; margin: 0 auto; padding: 30px 32.5px; } @media (min-width: 768px) { .p-top__management-content__lead { max-width: 720px; padding: 72px 91px; } } @media (min-width: 1280px) { .p-top__management-content__lead { max-width: 913px; padding: 72px 80px; } } .management__lead { display: flex; align-items: center; flex-direction: column; gap: 36px; } @media (min-width: 768px) { .management__lead { justify-content: flex-start; flex-direction: row; gap: 48px; } } .management__lead .management__lead_image { width: 262px; } @media (min-width: 1280px) { .management__lead .management__lead_image { width: 311px; } } .management__lead .management__lead_group { flex-grow: 1; display: grid; gap: 16px; } @media (min-width: 1280px) { .management__lead .management__lead_group { gap: 40px; } } .management__lead p { padding-left: 36px; position: relative; font-size: 20px; font-weight: 700; line-height: 1.8; letter-spacing: 0.02em; } @media (min-width: 1280px) { .management__lead p { font-size: 32px; } } .management__lead p::before { content: ""; display: block; width: 16px; height: 16px; border-radius: 8px; background: #99E6E4; position: absolute; left: 8px; top: 50%; transform: translateY(-50%); } .p-top-title_line { position: relative; z-index: 1; padding: 0 4px; } @media (min-width: 1280px) { .p-top-title_line { padding: 0 8px; } } .p-top-title_line::after { content: ""; display: block; position: absolute; width: 100%; height: 11px; z-index: -1; bottom: -5px; left: 0; } @media (min-width: 1280px) { .p-top-title_line::after { bottom: 0; } } .p-top__management .p-top-title_line::after { background: #FCF27B; } .p-top__plan .p-top-title_line::after { background: #FFFFFF; bottom: -4px; height: 13px; } @media (min-width: 768px) { .p-top__plan .p-top-title_line::after { bottom: -4px; height: 22px; } } .lead_item_sub { font-size: 12px; font-weight: 500; letter-spacing: 0.02em; line-height: 1.6; padding-left: 36px; } @media (min-width: 1280px) { .lead_item_sub { font-size: 18px; } } .p-top__management-content_function-wrapper { margin: 0 auto; } @media (min-width: 768px) { .p-top__management-content_function-wrapper { max-width: 720px; } } @media (min-width: 1280px) { .p-top__management-content_function-wrapper { max-width: 920px; } } .p-top__management-content_function { display: grid; grid-template-columns: repeat(1, 1fr); gap: 24px; } @media (min-width: 768px) { .p-top__management-content_function { grid-template-columns: repeat(2, 1fr); gap: 16px; } } @media (min-width: 1280px) { .p-top__management-content_function { grid-template-columns: repeat(3, 1fr); } } .function-item { display: flex; flex-direction: column; align-items: center; gap: 16px; background: #FFFFFF; border-radius: 4px; padding: 24px; } @media (min-width: 768px) { .function-item { padding: 28px 46px; gap: 24px; } } @media (min-width: 821px) { .function-item { padding: 28px 56px; } } @media (min-width: 1280px) { .function-item { padding: 28px; } } .function-item .p-top__function-title { font-size: 20px; font-weight: 700; letter-spacing: 0.02em; line-height: 1.6; } @media (min-width: 1280px) { .function-item .p-top__function-title { font-size: 24px; } } .function-item .function-item_bottom { display: grid; gap: 14px; } .function-item p { font-size: 16px; font-weight: 500; letter-spacing: 0.02em; line-height: 1.6; } .function-item img { width: 130px; } @media (min-width: 768px) { .function-item img { width: 140px; } } .p-top__section-title { font-size: 26px; font-weight: 700; line-height: 1.6; letter-spacing: 0.02em; } @media (min-width: 768px) { .p-top__section-title { font-size: 32px; } } @media (min-width: 1280px) { .p-top__section-title { font-size: 40px; } } .p-top__plan { padding: 72px 24px 128px; } @media (min-width: 768px) { .p-top__plan { padding: 160px 0 192px; } } .p-top__plan-content { display: grid; grid-template-columns: 1fr; margin: 0 auto; } @media (min-width: 768px) { .p-top__plan-content { max-width: 780px; padding: 0 40px; } } @media (min-width: 1280px) { .p-top__plan-content { max-width: 1080px; grid-template-columns: 437px 1fr; padding: 0; } } @media (min-width: 1280px) { .p-top__plan-content .plan-content__title { grid-row: 1; } } .p-top__plan-content .plan-content__list { display: grid; gap: 12px; margin-top: 40px; } @media (min-width: 768px) { .p-top__plan-content .plan-content__list { gap: 16px; } } @media (min-width: 1280px) { .p-top__plan-content .plan-content__list { margin: 0; grid-row: 1/4; } } .p-top__plan-content .plan_list-bottom { display: flex; justify-content: flex-end; margin-top: 8px; } @media (min-width: 768px) { .p-top__plan-content .plan_list-bottom { margin: 0; } } .p-top__plan-content .plan-content__button { display: flex; gap: 16px; flex-direction: column; align-items: center; margin-top: 64px; } @media (min-width: 768px) { .p-top__plan-content .plan-content__button { gap: 24px; } } @media (min-width: 1280px) { .p-top__plan-content .plan-content__button { align-items: flex-start; padding: 56px 97px 0 0; margin: 0; } } .p-top__plan-content .plan-content__button .c-button-primary { max-width: 340px; } @media (min-width: 1280px) { .p-top__plan-content .plan-content__button .c-button-primary { margin: 0; } } .p-top__plan-content .list-content { padding: 28px 0; border-radius: 4px; display: flex; flex-direction: column; align-items: center; gap: 4px; } @media (min-width: 768px) { .p-top__plan-content .list-content { flex-direction: row; justify-content: center; padding: 40px 0; gap: 48px; } } .p-top__plan-content .list-content h4 { font-size: 18px; font-weight: 700; letter-spacing: 0.02em; line-height: 1.8; } @media (min-width: 768px) { .p-top__plan-content .list-content h4 { font-size: 22px; } } .p-top__plan-content .list-content.plan_list-blue { background: #CCF3F1; border: 1px solid #99E6E4; } .p-top__plan-content .list-content.plan_list-green { background: #D6F4D3; border: 1px solid #ACE9A8; } .p-top__plan-content .list-content.plan_list-yellow { background: #FDF9BD; border: 1px solid #FCF27B; } .p-top__plan-content .list-content .list-content_left { display: flex; justify-content: center; align-items: center; flex-direction: row; gap: 8px; width: 270px; } @media (min-width: 768px) { .p-top__plan-content .list-content .list-content_left { width: 247px; flex-direction: column; gap: 4px; } } .p-top__plan-content .list-content .list-content_right { font-size: 24px; font-weight: 700; letter-spacing: 0.04em; line-height: 1.5; } @media (min-width: 768px) { .p-top__plan-content .list-content .list-content_right { font-size: 48px; } } .p-top__plan-content .list-content span { font-size: 28px; } @media (min-width: 768px) { .p-top__plan-content .list-content span { font-size: 48px; } } .p-top__plan-content .list-content span .t-32 { font-size: 18px; } @media (min-width: 768px) { .p-top__plan-content .list-content span .t-32 { font-size: 32px; } } .p-top__plan-content .list-content span .t-28 { font-size: 18px; } @media (min-width: 768px) { .p-top__plan-content .list-content span .t-28 { font-size: 28px; } } .p-top__plan-content .list-content .plan-icon_group { display: flex; justify-content: center; align-items: center; gap: 4px; } @media (min-width: 768px) { .p-top__plan-content .list-content .plan-icon_group { gap: 8px; } } .p-top__plan-content .list-content .pi_plus { width: 16px; height: 16px; } @media (min-width: 768px) { .p-top__plan-content .list-content .pi_plus { width: 21px; height: 21px; } } .p-top__plan-content .list-content .plan-icon { width: 32px; height: 32px; } @media (min-width: 768px) { .p-top__plan-content .list-content .plan-icon { width: 40px; height: 40px; } } .p-top__support { padding: 72px 24px 128px; } @media (min-width: 768px) { .p-top__support { padding: 120px 0 192px; } } .p-top__support .p-top__support-content { margin: 0 auto; display: grid; grid-template-columns: 1fr; gap: 40px; } @media (min-width: 768px) { .p-top__support .p-top__support-content { max-width: 768px; padding: 0 8px 0 40px; } } @media (min-width: 821px) { .p-top__support .p-top__support-content { max-width: 720px; padding: 0; } } @media (min-width: 1280px) { .p-top__support .p-top__support-content { grid-template-columns: 652.42px 1fr; gap: 0 60px; max-width: 1080px; } } @media (min-width: 1280px) { .p-top__support .support-content__title { grid-column: 2/2; } } @media (min-width: 1280px) { .p-top__support .support-content__step { grid-row: 1/3; } } .p-top__support .support-content__button { margin-top: 24px; } @media (min-width: 1280px) { .p-top__support .support-content__button { margin-top: 84.5px; grid-column: 2/2; } } .p-top__support .support-content__button .c-button-primary { max-width: 340px; } @media (min-width: 1280px) { .p-top__support .support-content__button .c-button-primary { margin: 0; } } .p-top__support .step-wrapper { display: flex; justify-content: flex-start; position: relative; height: 266px; max-width: 100%; } @media (min-width: 768px) { .p-top__support .step-wrapper { height: 352px; } } .p-top__support .step-content { background: #FFFFFF; padding: 0px; border-radius: 4px; height: 100%; display: flex; justify-content: center; } @media (min-width: 768px) { .p-top__support .step-content { justify-content: flex-start; padding: 38px 0 42px; } } .p-top__support .step-content.step_left { width: calc(50% + 4px); clip-path: polygon(0 0%, calc(100% - 28px) 0%, 100% 50%, calc(100% - 28px) 100%, 0 100%, 0% 50%); position: absolute; top: 0; left: 0; } @media (min-width: 768px) { .p-top__support .step-content.step_left { width: calc(50% + 13px); clip-path: polygon(0 0%, calc(100% - 76px) 0%, 100% 50%, calc(100% - 76px) 100%, 0 100%, 0% 50%); } } @media (min-width: 1280px) { .p-top__support .step-content.step_left { width: calc(50% + 12px); clip-path: polygon(0 0%, calc(100% - 74px) 0%, 100% 50%, calc(100% - 74px) 100%, 0 100%, 0% 50%); } } .p-top__support .step-content.step_left .step-content_inner { margin-left: 18px; max-width: 224px; } @media (min-width: 768px) { .p-top__support .step-content.step_left .step-content_inner { margin-left: 52.23px; } } @media (min-width: 1280px) { .p-top__support .step-content.step_left .step-content_inner { margin-left: 37px; } } .p-top__support .step-content.step_left .step-content_inner h4 { background: linear-gradient(90deg, #99E6E4 0%, #D0EFB6 100%); } .p-top__support .step-content.step_right { width: calc(50% + 16px); clip-path: polygon(0% 0%, calc(100% - 34px) 0%, 100% 50%, calc(100% - 34px) 100%, 0% 100%, 28px 50%); position: absolute; top: 0; right: 0; } @media (min-width: 768px) { .p-top__support .step-content.step_right { width: calc(50% + 35px); clip-path: polygon(0% 0%, calc(100% - 90px) 0%, 100% 50%, calc(100% - 90px) 100%, 0% 100%, 76px 50%); } } @media (min-width: 1280px) { .p-top__support .step-content.step_right { width: calc(50% + 38px); clip-path: polygon(0% 0%, calc(100% - 80px) 0%, 100% 50%, calc(100% - 80px) 100%, 0% 100%, 72px 50%); } } .p-top__support .step-content.step_right .step-content_inner { margin-left: 36px; max-width: 222px; } @media (min-width: 768px) { .p-top__support .step-content.step_right .step-content_inner { margin-left: 98px; } } @media (min-width: 1280px) { .p-top__support .step-content.step_right .step-content_inner { margin-left: 84px; } } .p-top__support .step-content.step_right .step-content_inner h4 { background: linear-gradient(90deg, #D0EFB6 0%, #FCF27B 100%); } .p-top__support .step-content_inner { margin-right: 30px; display: flex; flex-direction: column; justify-content: flex-start; align-items: center; gap: 16px; margin-top: 28px; } @media (min-width: 768px) { .p-top__support .step-content_inner { margin: 0; justify-content: flex-start; } } .p-top__support .step-content_inner h4 { font-size: 16px; letter-spacing: 0.02em; line-height: 1.4; display: flex; align-items: center; justify-content: center; width: 100px; height: 100px; border-radius: 80px; } @media (min-width: 768px) { .p-top__support .step-content_inner h4 { font-size: 24px; width: 140px; height: 140px; } } .p-top__support .step-content_inner p { font-size: 12px; font-weight: 500; line-height: 1.6; letter-spacing: 0.02em; } @media (min-width: 768px) { .p-top__support .step-content_inner p { font-size: 18px; } } .p-top__case { padding: 72px 24px 128px; } @media (min-width: 768px) { .p-top__case { padding: 120px 0 192px; } } .p-top__company-info { padding: 72px 24px 104px; display: grid; gap: 48px; } @media (min-width: 768px) { .p-top__company-info { padding: 140px 0; gap: 80px; } } .p-top__company-info p { font-size: 16px; font-weight: 500; line-height: 2; letter-spacing: 0.02em; } .top__company-info-content { max-width: 720px; margin: 0 auto; display: grid; grid-template-columns: 1fr; gap: 56px; } @media (min-width: 1280px) { .top__company-info-content { max-width: 1080px; grid-template-columns: 425px 624px; gap: 32px; } } .p-top__company-info-title { font-size: 26px; font-weight: 700; line-height: 1.6; letter-spacing: 0.02em; } @media (min-width: 768px) { .p-top__company-info-title { font-size: 32px; } } .p-top__company-info_head { display: grid; gap: 32px; } .p-top__company-info_service { font-size: 16px; font-weight: 500; line-height: 1.8; letter-spacing: 0.02em; text-align: center; display: flex; flex-direction: column; align-items: center; gap: 28px; background: #FFFFFF; padding: 48px 0; border-radius: 4px; } @media (min-width: 768px) { .p-top__company-info_service { gap: 32px; padding: 50px 0; } } .p-top__company-info_service span { font-size: 16px; font-weight: 500; line-height: 1.8; font-weight: 700; letter-spacing: 0.02em; text-align: center; } .p-top__company-info_service_group { display: grid; grid-template-columns: repeat(1, 1fr); gap: 32px; } @media (min-width: 768px) { .p-top__company-info_service_group { grid-template-columns: repeat(2, 1fr); gap: 48px; } } .p-top__company-info_service_group div { display: flex; align-items: center; flex-direction: column; gap: 4px; } @media (min-width: 768px) { .p-top__company-info_service_group div { gap: 8px; } } .p-top__company-info_service_group div a { display: flex; } .p-top__company-info_service_group p { font-weight: 700; line-height: 2; } @media (min-width: 768px) { .p-top__company-info_service_group p { line-height: 1.6; } } .p-top__company-info_logo { display: flex; justify-content: center; align-items: center; flex-direction: column; gap: 16px; max-width: 233px; margin: 0 auto; } @media (min-width: 768px) { .p-top__company-info_logo { max-width: 388px; } } .p-top__company-info_logo span { font-size: 16px; font-weight: 700; line-height: 1.8; letter-spacing: 0.02em; } @media (min-width: 768px) { .p-top__company-info_logo span { font-size: 24px; } } .p-top__management { display: grid; } .p-top__management .management_group_title { font-size: 18px; font-weight: 500; letter-spacing: 0.02em; line-height: 1.8; } @media (min-width: 768px) { .p-top__management .management_group_title { font-size: 20px; } } .p-top__management-content-large { padding-bottom: 80px; margin: 120px 0 48px; gap: 48px; } @media (min-width: 768px) { .p-top__management-content-large { padding-bottom: 96px; gap: 56px; } } @media (min-width: 1280px) { .p-top__management-content-large { padding-bottom: 130px; margin: 184px 0 48px; gap: 88px; } } .p-top__management-content-large::after { content: ""; width: 100px; height: 40px; background-image: url(../img/top-arrow-down.svg); background-repeat: no-repeat; background-size: 100px 40px; position: absolute; bottom: 0; left: 50%; transform: translateX(-50%); } @media (min-width: 1280px) { .p-top__management-content-large::after { width: 185px; height: 75px; background-size: 185px 75px; } } .p-top__management-wrapper { margin: 0 auto; padding: 0 10px; width: 100%; } @media (min-width: 768px) { .p-top__management-wrapper { max-width: 824px; padding: 0; } } @media (min-width: 1280px) { .p-top__management-wrapper { max-width: 1240px; padding: 0; } } .p-top__management-content { background: #FFFFFF; border-radius: 8px; padding: 40px 23px 56px; display: flex; flex-direction: column; gap: 40px; } @media (min-width: 768px) { .p-top__management-content { padding: 72px 92px; justify-content: space-between; gap: 56px; } } @media (min-width: 1280px) { .p-top__management-content { padding: 72px; flex-direction: row; gap: 32px; } } @media (min-width: 768px) { .p-top__management .p-top__management-content { padding: 72px 0; } } @media (min-width: 1280px) { .p-top__management .p-top__management-content { padding: 72px; } } .p-top__management-content .management_group-left { flex-grow: 1; display: grid; gap: 24px; margin: 0 auto; width: 309px; } @media (min-width: 768px) { .p-top__management-content .management_group-left { width: 100%; max-width: 640px; gap: 32px; } } @media (min-width: 1280px) { .p-top__management-content .management_group-left { max-width: 808px; } } .p-top__management-content .management_group-left .management_group_list { display: grid; gap: 12px; grid-template-columns: repeat(1, 1fr); } @media (min-width: 768px) { .p-top__management-content .management_group-left .management_group_list { grid-template-columns: repeat(3, 1fr); gap: 15px; } } @media (min-width: 1280px) { .p-top__management-content .management_group-left .management_group_list { gap: 20px; } } .p-top__management-content .management-content-right { display: grid; gap: 24px; margin: 0 auto; width: 309px; } @media (min-width: 768px) { .p-top__management-content .management-content-right { gap: 32px; width: 100%; max-width: 640px; } } @media (min-width: 1280px) { .p-top__management-content .management-content-right { max-width: 256px; } } @media (min-width: 768px) { .p-top__management-content .management-content-right .management_group_list-item { margin: 0 auto; } } .p-top__management-content .management_group_head_image { width: 88px; height: 80px; } @media (min-width: 768px) { .p-top__management-content .management_group_head_image { width: 99px; height: 90px; } } .p-top__management-content .management_group_head { border-bottom: 1px solid #303030; display: flex; justify-content: center; align-items: center; gap: 15px; } .p-top__management-content .management_group_list-item { display: flex; flex-direction: row; align-items: center; justify-content: space-between; background-image: url(../img/management-bg_sm.png); background-repeat: no-repeat; background-size: contain; text-align: center; background-position: top center; min-height: 156px; } @media (min-width: 768px) { .p-top__management-content .management_group_list-item { flex-direction: column; min-height: 340px; width: 192px; background-image: url(../img/management-bg_md.png); } } @media (min-width: 1280px) { .p-top__management-content .management_group_list-item { min-height: 454px; width: 256px; } } .p-top__management-content .management_group_list-item .management_top_text { font-size: 12px; font-weight: 700; line-height: 1.6; letter-spacing: 0.02em; color: #303030; width: calc(46% - 4px); margin-left: 4px; } @media (min-width: 768px) { .p-top__management-content .management_group_list-item .management_top_text { width: 100%; margin-top: 33.75px; margin-left: 0; } } @media (min-width: 1280px) { .p-top__management-content .management_group_list-item .management_top_text { font-size: 16px; margin-top: 45px; } } .p-top__management-content .management_group_list-item .management_bottom_text { font-size: 12px; font-weight: 700; line-height: 1.6; letter-spacing: 0.02em; margin: 40px 0 0 0; width: 50%; } @media (min-width: 768px) { .p-top__management-content .management_group_list-item .management_bottom_text { width: 100%; line-height: 1.8; font-size: 13.5px; margin: 0 0 40.5px 0; } } @media (min-width: 1280px) { .p-top__management-content .management_group_list-item .management_bottom_text { font-size: 18px; margin: 0 0 54px 0; } } .p-top__case { display: grid; gap: 40px; } @media (min-width: 768px) { .p-top__case { gap: 72px; } } .p-top__case .p-top__section-title { width: 100%; } @media (min-width: 768px) { .p-top__case .p-top__section-title { padding-left: 40px; max-width: 760px; margin: 0 auto; } } @media (min-width: 1280px) { .p-top__case .p-top__section-title { max-width: 1080px; padding: 0; } } .p-top__case .p-top__case_bottom { margin-top: 24px; } @media (min-width: 768px) { .p-top__case .p-top__case_bottom { margin-top: 32px; } } /* slide */ .swiper .swiper-slide { height: auto; } .swiper .p-case__item { height: 100%; } #case-slide { margin: 0 auto; position: relative; padding: 0; } @media (min-width: 845px) { #case-slide { padding: 0 70px; } } @media (min-width: 1280px) { #case-slide { padding: 0 80px; } } #case-slide .slide-content { width: 330px; margin: 0 auto; } @media (min-width: 768px) { #case-slide .slide-content { width: 680px; } } @media (min-width: 1280px) { #case-slide .slide-content { width: 1030px; } } #case-slide .swiper-slide { width: 330px !important; flex-shrink: 0; display: flex; justify-content: center; align-items: center; } .swiper-pagination { display: flex; justify-content: center; align-items: center; margin-top: 40px; gap: 16px; } .swiper-pagination-bullet { width: 10px; height: 10px; border-radius: 5px; background: #E8E8E8; cursor: pointer; } .swiper-pagination-bullet.swiper-pagination-bullet-active { background: #787878; } .swiper-button-prev, .swiper-button-next { position: absolute; background-repeat: no-repeat; background-size: cover; cursor: pointer; width: 17px; height: 34px; bottom: -12px; } @media (min-width: 845px) { .swiper-button-prev, .swiper-button-next { top: calc(50% - 50px); transform: translateY(-50%); width: 20px; height: 40px; } } .swiper-button-prev { left: 42px; background-image: url(../img/slide-left.svg); } @media (min-width: 768px) { .swiper-button-prev { left: 0; } } .swiper-button-next { right: 42px; background-image: url(../img/slide-right.svg); } @media (min-width: 768px) { .swiper-button-next { right: 0; } } .p-link__group_list { display: grid; gap: 16px; } @media (min-width: 768px) { .p-link__group_list { grid-template-columns: repeat(3, 1fr); padding-top: 32px; } } .p-link__group_list .c-anchor-link { font-size: 14px; font-weight: 700; letter-spacing: 0.02em; line-height: 1.4; width: 100%; max-width: 100%; max-height: 66px; background: #FFFFFF; } @media (min-width: 1280px) { .p-link__group_list .c-anchor-link { font-size: 16px; } } @media (min-width: 1280px) { .p-link__group_list .c-anchor-link { padding: 8px 52px 8px 16px; } } @media (hover: hover) { .p-link__group_list .c-anchor-link:hover { background: #64DCD9; } } .p-about-contents-head { display: grid; gap: 40px; } @media (min-width: 768px) { .p-about-contents-head { gap: 56px; } } .p-about-contents-security .p-about-contents-head { gap: 24px; } .p-about-contents-head__text { display: grid; gap: 24px; } @media (min-width: 768px) { .p-about-contents-head__text { gap: 40px; } } .p-about-contents-head__text .p-about-sub-page__link { padding: 0; } @media (min-width: 768px) { .p-about-contents-head__text .p-about-sub-page__link { padding: 0 24px; } } @media (min-width: 1280px) { .p-about-contents-head__text .p-about-sub-page__link { padding: 0 230px; } } .p-about-contents-head__image { display: flex; align-items: center; margin: 0 auto; } @media (min-width: 768px) { .p-about-contents-head__image { padding: 0 20px; } } @media (min-width: 821px) { .p-about-contents-head__image { max-width: 864px; padding: 0; } } @media (min-width: 1280px) { .p-about-contents-head__image { max-width: 904px; } } .ld-section__title { font-size: 28px; font-weight: 700; letter-spacing: 0.02em; line-height: 1.6; text-align: center; } @media (min-width: 768px) { .ld-section__title { font-size: 32px; } } @media (min-width: 1280px) { .ld-section__title { font-size: 40px; } } .p-about-main__text { font-size: 16px; font-weight: 500; letter-spacing: 0.02em; line-height: 2; } @media (min-width: 1280px) { .p-about-main__text { font-size: 18px; } } .twocolumn-content_detail-text { font-size: 12px; font-weight: 700; line-height: 1.6; letter-spacing: 0.02em; } @media (min-width: 768px) { .twocolumn-content_detail-text { font-size: 16px; } } @media (min-width: 1280px) { .twocolumn-content_detail-text { font-size: 18px; } } .twocolumn-content_arrow .twocolumn-content_detail-text { font-size: 10px; } @media (min-width: 768px) { .twocolumn-content_arrow .twocolumn-content_detail-text { font-size: 16px; } } @media (min-width: 1280px) { .twocolumn-content_arrow .twocolumn-content_detail-text { font-size: 18px; } } .p-about-main__sub-text { font-size: 14px; font-weight: 500; letter-spacing: 0.02em; line-height: 1.8; } @media (min-width: 1280px) { .p-about-main__sub-text { font-size: 16px; } } .p-about-point_child--wrapper .p-about-main__sub-text { padding: 0 24px; } @media (min-width: 768px) { .p-about-point_child--wrapper .p-about-main__sub-text { padding: 0; } } .ld-main__contents_gap_144 { display: grid; gap: 64px; } @media (min-width: 768px) { .ld-main__contents_gap_144 { gap: 120px; } } @media (min-width: 1280px) { .ld-main__contents_gap_144 { gap: 144px; } } .ld-main__contents_gap_120 { display: grid; gap: 64px; } @media (min-width: 768px) { .ld-main__contents_gap_120 { gap: 80px; } } @media (min-width: 1280px) { .ld-main__contents_gap_120 { gap: 120px; } } .p-about-security_gap_88 { display: grid; gap: 88px; } @media (min-width: 768px) { .p-about-security_gap_88 { gap: 80px; } } @media (min-width: 1280px) { .p-about-security_gap_88 { gap: 104px; } } .p-about-contents-point { max-width: 100%; } @media (min-width: 768px) { .p-about-contents-point { max-width: 720px; margin: 0 auto; } } @media (min-width: 1280px) { .p-about-contents-point { max-width: 920px; } } .p-about-contents-point_child { padding: 72px 0 40px; border-radius: 8px; margin-top: 8px; background: #FFFFFF; position: relative; } @media (min-width: 768px) { .p-about-contents-point_child { width: 100%; max-width: 720px; background: #FFFFFF; padding: 79.77px 56px 48px; } } @media (min-width: 1280px) { .p-about-contents-point_child { max-width: 920px; background: #FFFFFF; padding: 72px 80px 48px; } } .p-about-contents-point_child .p-about-point_child--wrapper { display: flex; justify-content: center; gap: 24px; flex-direction: column; align-items: center; } @media (min-width: 768px) { .p-about-contents-point_child .p-about-point_child--wrapper { flex-direction: row; } } @media (min-width: 1280px) { .p-about-contents-point_child .p-about-point_child--wrapper { gap: 40px; } } .p-about-contents-point_child .p-about-point_child__text { display: grid; gap: 16px; } @media (min-width: 768px) { .p-about-contents-point_child .p-about-point_child__text { min-width: 276px; } } .p-about-contents-point_child img { width: 100%; max-width: 279px; } @media (min-width: 768px) { .p-about-contents-point_child img { max-width: 276px; } } @media (min-width: 821px) { .p-about-contents-point_child img { max-width: 292px; } } @media (min-width: 1280px) { .p-about-contents-point_child img { max-width: 340px; } } .p-about-contents-point_child .p-about-point_child__image { max-width: 100%; } .p-about-contents-point_child .p-about-point_child__title { font-size: 20px; font-weight: 700; line-height: 1.8; letter-spacing: 0.02em; text-align: center; } @media (min-width: 1280px) { .p-about-contents-point_child .p-about-point_child__title { font-size: 24px; } } .p-about-contents-point_child .p-about-point_child__sub-title { font-size: 16px; font-weight: 700; line-height: 1.5; letter-spacing: 0.02em; text-align: center; } @media (min-width: 1280px) { .p-about-contents-point_child .p-about-point_child__sub-title { font-size: 20px; } } .point-num { position: absolute; display: flex; justify-content: center; align-items: baseline; gap: 0 8px; width: 180px; height: 52px; background: #99E6E4; border-radius: 4px 4px 16px 16px; font-size: 20px; font-weight: 700; letter-spacing: 0.02em; line-height: 1.8; top: -8px; left: 50%; transform: translateX(-50%); } .point-num span { font-size: 28px; } .child__sub-title_line { position: relative; z-index: 1; } .child__sub-title_line::after { background: #FCF27B; bottom: 0; content: ""; height: 100%; background: linear-gradient(180deg, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0) 70%, #FCF27B 70%, #FCF27B 100%); left: 50%; min-width: calc(100% + 16px); position: absolute; transform: translateX(-50%); z-index: -1; } .p-about_link_group_list { width: 100%; max-width: 327px; margin: 0 auto; display: grid; gap: 16px; grid-template-columns: repeat(1, 1fr); } @media (min-width: 768px) { .p-about_link_group_list { max-width: 700px; grid-template-columns: repeat(2, 1fr); } } .sub-page-link__bhe { background: #99E6E4; } @media (hover: hover) { .sub-page-link__bhe:hover { background: #64DCD9; } } .sub-page-link__valux { background: #FFD470; } @media (hover: hover) { .sub-page-link__valux:hover { background: #FFBE4A; } } .p-about-contents-service { display: grid; gap: 72px; } @media (min-width: 768px) { .p-about-contents-service { gap: 80px; } } @media (min-width: 1280px) { .p-about-contents-service { gap: 88px; padding: 0 40px; } } .p-about-contents-service .p-about-contents-service-head { display: grid; gap: 72px; } @media (min-width: 768px) { .p-about-contents-service .p-about-contents-service-head { gap: 120px; } } @media (min-width: 768px) { .p-about-contents-service-child { margin: auto; width: 100%; } } .p-about-contents-service-child.content-valux { display: grid; gap: 0; } @media (min-width: 1280px) { .p-about-contents-service-child.content-valux { gap: 88px; } } .p-about-service-child-content { background: #FFFFFF; border-radius: 8px; display: grid; } .p-about-service-child-content .p-about-service-child-head { padding: 24px 0; border-radius: 8px 8px 0 0; } @media (min-width: 768px) { .p-about-service-child-content .p-about-service-child-head { padding: 32px 0; } } .content-bhe .p-about-service-child-content .p-about-service-child-head { background: #99E6E4; } .content-valux .p-about-service-child-content .p-about-service-child-head { background: #FFD470; } .child-content_twocolumn_head { display: flex; justify-content: space-between; width: 100%; gap: 32px; } @media (min-width: 768px) { .child-content_twocolumn_head { justify-content: flex-start; gap: 20px; } } @media (min-width: 1280px) { .child-content_twocolumn_head { gap: 32px; } } .child-content_twocolumn_head div { display: flex; justify-content: center; align-items: center; flex-direction: column; text-align: center; gap: 16px; width: 100%; } @media (min-width: 768px) { .child-content_twocolumn_head div { gap: 20px; } } @media (min-width: 1280px) { .child-content_twocolumn_head div { gap: 32px; } } .child-content_twocolumn_head div img { max-width: 120px; } @media (min-width: 768px) { .child-content_twocolumn_head div img { max-width: 240px; } } @media (min-width: 1280px) { .child-content_twocolumn_head div img { max-width: 280px; } } .child-content_twocolumn_head div span { font-size: 20px; font-weight: 700; letter-spacing: 0.02em; line-height: 1.6; font-size: 18px; } @media (min-width: 1280px) { .child-content_twocolumn_head div span { font-size: 24px; } } @media (min-width: 768px) { .child-content_twocolumn_head div span { font-size: 20px; } } @media (min-width: 1280px) { .child-content_twocolumn_head div span { font-size: 24px; } } .child-content_twocolumn_head .twocolumn-content-fix { flex-basis: 120px; } @media (min-width: 768px) { .child-content_twocolumn_head .twocolumn-content-fix { padding: 0; width: 240px; } } @media (min-width: 1280px) { .child-content_twocolumn_head .twocolumn-content-fix { padding: 0 40px; width: 360px; } } .child-content_twocolumn_head .twocolumn-content { flex-grow: 1; } .child-content_twocolumn_wrapper { display: grid; gap: 32px; } .ld-section__child-sub-title { font-size: 20px; font-weight: 700; letter-spacing: 0.02em; line-height: 1.6; text-align: center; } @media (min-width: 1280px) { .ld-section__child-sub-title { font-size: 24px; } } .ld-section__child-title { font-size: 20px; font-weight: 700; letter-spacing: 0.02em; line-height: 1.6; display: flex; justify-content: center; align-items: center; gap: 8px; flex-direction: column; } @media (min-width: 1280px) { .ld-section__child-title { font-size: 28px; } } @media (min-width: 768px) { .ld-section__child-title { flex-direction: row; } } .ld-section__child-title .child__title_line { position: relative; z-index: 1; } .ld-section__child-title .child__title_line::after { bottom: 0; content: ""; height: 100%; background: linear-gradient(180deg, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0) 70%, #FFFFFF 70%, #FFFFFF 100%); left: 50%; min-width: 100%; position: absolute; transform: translateX(-50%); z-index: -1; } .p-about-contents-service_inner { display: grid; gap: 48px; padding: 48px 17.75px 56px; } @media (min-width: 768px) { .p-about-contents-service_inner { gap: 64px; padding: 48px 64px 64px; } } @media (min-width: 1280px) { .p-about-contents-service_inner { gap: 88px; padding: 48px 100px 104px; } } .child-content_twocolumn { display: flex; justify-content: flex-start; gap: 10px; } @media (min-width: 768px) { .child-content_twocolumn { gap: 20px; } } .p-about .child-content_twocolumn { min-height: 227px; } @media (min-width: 768px) { .p-about .child-content_twocolumn { min-height: 135px; } } @media (min-width: 1280px) { .p-about .child-content_twocolumn { min-height: 128px; } } @media (min-width: 1280px) { .p-about .content-valux .child-content_twocolumn { min-height: 140px; } } .child-content_twocolumn .twocolumn-content_arrow { min-width: 139px; display: flex; justify-content: center; align-items: center; text-align: center; position: relative; border-width: 4px 20px 4px 10px; border-style: solid; border-image-slice: 4 27 4 27 fill; border-image-source: url(../img/service-left_bg.svg); border-image-repeat: stretch; box-sizing: border-box; } @media (min-width: 768px) { .child-content_twocolumn .twocolumn-content_arrow { width: 240px; min-width: 240px; border-width: 4px 27px 4px 27px; border-image-slice: 4 27 4 27 fill; } } @media (min-width: 1280px) { .child-content_twocolumn .twocolumn-content_arrow { border-width: 4px 40px 4px 40px; width: 360px; min-height: 120px; } } .child-content_twocolumn .twocolumn-content_detail { display: flex; flex-direction: column; flex-grow: 1; justify-content: center; align-items: center; gap: 4px; } @media (min-width: 768px) { .child-content_twocolumn .twocolumn-content_detail { flex-direction: row; padding: 16px 20px 16px 24px; gap: 16px; } } @media (min-width: 845px) { .child-content_twocolumn .twocolumn-content_detail { padding: 16px 24px; } } .child-content_twocolumn .twocolumn-content_detail .size-88 { width: 72px; } @media (min-width: 768px) { .child-content_twocolumn .twocolumn-content_detail .size-88 { width: 88px; } } .child-content_twocolumn .twocolumn-content_detail .size-100 { width: 72px; } @media (min-width: 768px) { .child-content_twocolumn .twocolumn-content_detail .size-100 { width: 88px; } } @media (min-width: 1280px) { .child-content_twocolumn .twocolumn-content_detail .size-100 { width: 100px; } } .content-bhe .child-content_twocolumn .twocolumn-content_detail { background: #E5F9F9; border: 1px solid #B9EAE9; border-radius: 8px; } .content-valux .child-content_twocolumn .twocolumn-content_detail { background: #FFF5C3; border: 1px solid #FEE673; border-radius: 8px; } @media (min-width: 1280px) { .content-valux .child-content_twocolumn .twocolumn-content_detail { margin-right: 29px; } } .child-content_twocolumn .twocolumn-content_detail .twocolumn-content_detail_child { display: flex; justify-content: flex-start; flex-direction: column; gap: 8px; } @media (min-width: 768px) { .child-content_twocolumn .twocolumn-content_detail .twocolumn-content_detail_child { flex-grow: 1; justify-content: space-between; } } @media (min-width: 1280px) { .child-content_twocolumn .twocolumn-content_detail .twocolumn-content_detail_child { align-items: center; flex-direction: row; } } .child-content_twocolumn .twocolumn-content_detail .twocolumn-content_detail_child .twocolumn-content_detail-text { text-align: center; } @media (min-width: 768px) { .child-content_twocolumn .twocolumn-content_detail .twocolumn-content_detail_child .twocolumn-content_detail-text { text-align: left; flex-basis: 100%; } } @media (min-width: 1280px) { .child-content_twocolumn .twocolumn-content_detail .twocolumn-content_detail_child .twocolumn-content_detail-text { flex-basis: 296px; } } @media (min-width: 768px) { .p-about .child-content_twocolumn .twocolumn-content_detail .twocolumn-content_detail_child { gap: 8px; } } .twocolumn-content_detail-baloon { font-size: 10px; font-weight: 700; letter-spacing: 0.02em; line-height: 1.4; display: flex; justify-content: center; } @media (min-width: 768px) { .twocolumn-content_detail-baloon { font-size: 12px; } } @media (min-width: 1280px) { .twocolumn-content_detail-baloon { font-size: 16px; } } @media (min-width: 768px) { .twocolumn-content_detail-baloon { justify-content: flex-start; } } @media (min-width: 1280px) { .twocolumn-content_detail-baloon { padding: 0; justify-content: flex-end; } } .twocolumn-content_detail-baloon span { display: block; width: 88px; border-radius: 4px; text-align: center; margin-top: 8px; padding: 8px 0; position: relative; } @media (min-width: 1280px) { .twocolumn-content_detail-baloon span { width: 114px; margin-top: 0; padding: 16px 0; } } .twocolumn-content_detail-baloon span::before { content: ""; position: absolute; width: 9px; height: 10px; clip-path: polygon(50% 0, 100% 100%, 0 100%); left: 50%; top: -9px; transform: translate(-50%, 0); } @media (min-width: 1280px) { .twocolumn-content_detail-baloon span::before { width: 18px; height: 15px; clip-path: polygon(0 50%, 100% 0, 100% 100%); left: -16px; top: 50%; transform: translate(0, -50%); } } .content-bhe .twocolumn-content_detail-baloon span { background: #99E6E4; } .content-bhe .twocolumn-content_detail-baloon span::before { background: #99E6E4; } .content-valux .twocolumn-content_detail-baloon span { background: #FFD470; } .content-valux .twocolumn-content_detail-baloon span::before { background: #FFD470; } .p-about-service_child-content__bottom_wrapper { display: grid; gap: 40px; } @media (min-width: 768px) { .p-about-service_child-content__bottom_wrapper { gap: 64px; } } @media (min-width: 1280px) { .p-about-service_child-content__bottom_wrapper { gap: 72px; } } .p-about-service_child-content__bottom { display: grid; gap: 24px; } @media (min-width: 1280px) { .p-about-service_child-content__bottom { gap: 32px; } } .child-content__bottom_list { padding: 32px 16px; border-radius: 8px; } @media (min-width: 768px) { .child-content__bottom_list { padding: 48px 40px; } } .content-bhe .child-content__bottom_list { background: #B3ECEB; } .content-valux .child-content__bottom_list { background: #FFDF93; } .child-content__bottom_list ul { display: grid; grid-template-columns: repeat(1, 1fr); gap: 24px; font-size: 16px; font-weight: bold; line-height: 1.6; letter-spacing: 0.02em; } @media (min-width: 768px) { .child-content__bottom_list ul { font-size: 20px; } } @media (min-width: 1280px) { .child-content__bottom_list ul { grid-template-columns: repeat(2, 1fr); gap: 40px 8px; } } .child-content__bottom_list ul li { padding-left: 46px; position: relative; } .child-content__bottom_list ul li::before { content: ""; display: block; position: absolute; width: 40px; height: 40px; background-size: 40px; left: 0; top: 50%; transform: translate(0, -50%); background-image: url(../img/list-icon.svg); background-repeat: no-repeat; } @media (min-width: 768px) { .child-content__bottom_list ul li::before { width: 46px; height: 46px; background-size: 46px; } } .child-content__bottom_list ul li span { display: block; padding-left: 16px; } .p-about-service_child-content__bottom_link { display: flex; justify-content: center; flex-direction: column; align-items: center; gap: 24px; } .p-about-service_child-content__bottom_link div { display: grid; gap: 16px; text-align: center; } .p-about-service_child-content__bottom_link h5 { font-size: 18px; font-weight: 700; letter-spacing: 0.02em; line-height: 1.4; } @media (min-width: 1280px) { .p-about-service_child-content__bottom_link h5 { font-size: 22px; } } .p-about-service_child-content__bottom_link .p-about-main__text { line-height: 1.6; } .p-about-contents-function_link { margin-top: 48px; } @media (min-width: 768px) { .p-about-contents-function_link { margin-top: 72px; } } .p-about-contents-security { display: grid; gap: 56px; padding-bottom: 88px; } @media (min-width: 768px) { .p-about-contents-security { gap: 64px; padding-bottom: 80px; } } @media (min-width: 1280px) { .p-about-contents-security { padding-bottom: 104px; } } .p-about-contents-security .p-about-security-child-content_wrapper { display: grid; gap: 56px; } @media (min-width: 768px) { .p-about-contents-security .p-about-security-child-content_wrapper { gap: 80px; } } @media (min-width: 1280px) { .p-about-contents-security .p-about-security-child-content_wrapper { gap: 104px; padding: 0 40px; } } .p-about-contents-security .p-about-security-child-content_wrapper .p-about-security-child-content { display: grid; gap: 32px; grid-template-columns: repeat(1, 1fr); max-width: 920px; margin: auto; } @media (min-width: 768px) { .p-about-contents-security .p-about-security-child-content_wrapper .p-about-security-child-content { grid-template-columns: repeat(2, 1fr); } } .p-about-contents-security .p-about-security-child-content_wrapper .p-about-security-child-content .p-about-security-child-content-item { display: flex; align-items: center; flex-direction: column; gap: 24px; padding: 32px 0 28px; background: #FFFFFF; } @media (min-width: 768px) { .p-about-contents-security .p-about-security-child-content_wrapper .p-about-security-child-content .p-about-security-child-content-item { padding: 40px; } } @media (min-width: 1280px) { .p-about-contents-security .p-about-security-child-content_wrapper .p-about-security-child-content .p-about-security-child-content-item { gap: 32px; } } .p-about-contents-security .p-about-security-child-content_wrapper .p-about-security-child-content .p-about-security-child-content-item img { width: 120px; } @media (min-width: 768px) { .p-about-contents-security .p-about-security-child-content_wrapper .p-about-security-child-content .p-about-security-child-content-item.whithout-inner-button { padding: 40px 0; } } @media (min-width: 768px) { .p-about-contents-security .p-about-security-child-content_wrapper .p-about-security-child-content .p-about-security-child-content-item.whithout-inner-button .security-child-content-item_text div { padding: 0 40px; } } .p-about-contents-security .p-about-security-child-content_wrapper .p-about-security-child-content .p-about-security-child-content-item .security-child-content-item_text { display: grid; gap: 14px; } .p-about-contents-security .p-about-security-child-content_wrapper .p-about-security-child-content .p-about-security-child-content-item .security-child-content-item_text h3 { font-size: 20px; font-weight: 700; letter-spacing: 0.02em; line-height: 1.6; text-align: center; } @media (min-width: 1280px) { .p-about-contents-security .p-about-security-child-content_wrapper .p-about-security-child-content .p-about-security-child-content-item .security-child-content-item_text h3 { font-size: 24px; } } .p-about-contents-security .p-about-security-child-content_wrapper .p-about-security-child-content .p-about-security-child-content-item .security-child-content-item_text p { font-size: 14px; font-weight: 500; letter-spacing: 0.02em; line-height: 1.6; padding: 0 32px; } @media (min-width: 1280px) { .p-about-contents-security .p-about-security-child-content_wrapper .p-about-security-child-content .p-about-security-child-content-item .security-child-content-item_text p { font-size: 16px; } } @media (min-width: 768px) { .p-about-contents-security .p-about-security-child-content_wrapper .p-about-security-child-content .p-about-security-child-content-item .security-child-content-item_text p { padding: 0; } } .p-about-contents-security .p-about-security-child-content_wrapper .p-about-security-child-content .p-about-security-child-content-item .security-child-content-item_text p.q-title-annotation { font-size: 12px; } .p-about-contents-security .p-about-security-child-content_wrapper .p-about-security-ex_auth-content { width: 100%; max-width: 260px; margin: auto; display: grid; gap: 56px; } @media (min-width: 768px) { .p-about-contents-security .p-about-security-child-content_wrapper .p-about-security-ex_auth-content { max-width: 920px; gap: 24px; } } @media (min-width: 1280px) { .p-about-contents-security .p-about-security-child-content_wrapper .p-about-security-ex_auth-content { gap: 40px; } } .p-about-contents-security .p-about-security-child-content_wrapper .p-about-security-ex_auth-content h3 { font-size: 28px; font-weight: 700; line-height: 1.8; letter-spacing: 0.02em; text-align: center; } .p-about-contents-security .p-about-security-child-content_wrapper .p-about-security-ex_auth-content .p-about-security-ex_auth-content-item_wrapper { display: grid; gap: 16px; grid-template-columns: repeat(1, 1fr); } @media (min-width: 768px) { .p-about-contents-security .p-about-security-child-content_wrapper .p-about-security-ex_auth-content .p-about-security-ex_auth-content-item_wrapper { grid-template-columns: repeat(3, 1fr); } } .p-about-contents-security .p-about-security-child-content_wrapper .p-about-security-ex_auth-content .p-about-security-ex_auth-content-item_wrapper .p-about-security-ex_auth-content-item { display: flex; flex-direction: column; align-items: center; justify-content: flex-start; background: #FFFFFF; padding: 28px 0; gap: 16px; } .p-about-contents-security .p-about-security-child-content_wrapper .p-about-security-ex_auth-content .p-about-security-ex_auth-content-item_wrapper .p-about-security-ex_auth-content-item .ex_auth-child-content-item_image { display: flex; flex-direction: column; justify-content: center; align-items: center; gap: 4px; text-align: center; } @media (min-width: 768px) { .p-about-contents-security .p-about-security-child-content_wrapper .p-about-security-ex_auth-content .p-about-security-ex_auth-content-item_wrapper .p-about-security-ex_auth-content-item .ex_auth-child-content-item_image { min-height: 180px; } } .p-about-contents-security .p-about-security-child-content_wrapper .p-about-security-ex_auth-content .p-about-security-ex_auth-content-item_wrapper .p-about-security-ex_auth-content-item .ex_auth-child-content-item_image span { font-size: 12px; font-weight: 500; letter-spacing: 0.02em; line-height: 1.4; } @media (min-width: 1280px) { .p-about-contents-security .p-about-security-child-content_wrapper .p-about-security-ex_auth-content .p-about-security-ex_auth-content-item_wrapper .p-about-security-ex_auth-content-item .ex_auth-child-content-item_image span { font-size: 14px; } } .p-about-contents-security .p-about-security-child-content_wrapper .p-about-security-ex_auth-content .p-about-security-ex_auth-content-item_wrapper .p-about-security-ex_auth-content-item .ex_auth-child-content-item_image .privacy-logo { max-width: 120px; } @media (min-width: 768px) { .p-about-contents-security .p-about-security-child-content_wrapper .p-about-security-ex_auth-content .p-about-security-ex_auth-content-item_wrapper .p-about-security-ex_auth-content-item .ex_auth-child-content-item_image .privacy-logo { max-width: 180px; } } .p-about-contents-security .p-about-security-child-content_wrapper .p-about-security-ex_auth-content .p-about-security-ex_auth-content-item_wrapper .p-about-security-ex_auth-content-item .ex_auth-child-content-item_image .isms-logo { max-width: 150px; } @media (min-width: 768px) { .p-about-contents-security .p-about-security-child-content_wrapper .p-about-security-ex_auth-content .p-about-security-ex_auth-content-item_wrapper .p-about-security-ex_auth-content-item .ex_auth-child-content-item_image .isms-logo { max-width: 200px; } } .p-about-contents-security .p-about-security-child-content_wrapper .p-about-security-ex_auth-content .p-about-security-ex_auth-content-item_wrapper .p-about-security-ex_auth-content-item .ex_auth-child-content-item_text { text-align: center; } .p-about-contents-security .p-about-security-child-content_wrapper .p-about-security-ex_auth-content .p-about-security-ex_auth-content-item_wrapper .p-about-security-ex_auth-content-item .ex_auth-child-content-item_text p { font-size: 14px; font-weight: 500; letter-spacing: 0.02em; line-height: 1.6; } @media (min-width: 1280px) { .p-about-contents-security .p-about-security-child-content_wrapper .p-about-security-ex_auth-content .p-about-security-ex_auth-content-item_wrapper .p-about-security-ex_auth-content-item .ex_auth-child-content-item_text p { font-size: 16px; } } .p-about-contents-security .p-about-security-child-content_wrapper .p-about-security-ex_auth-content .p-about-security-ex_auth-content-item_wrapper .p-about-security-ex_auth-content-item.no-logo_image { justify-content: center; } .p-link__group_list.p-function_list { grid-template-columns: repeat(1, 1fr); } @media (min-width: 768px) { .p-link__group_list.p-function_list { grid-template-columns: repeat(2, 1fr); padding: 0; } } @media (min-width: 1280px) { .p-link__group_list.p-function_list { grid-template-columns: repeat(3, 1fr); } } .p-function-content { background: #FFFFFF; border-radius: 8px; padding: 0 23.5px 40px; } @media (min-width: 768px) { .p-function-content { padding: 0 60px 64px; } } @media (min-width: 1280px) { .p-function-content .ld-section__title { text-align: right; } } .p-function-sub_text { flex-grow: 1; line-height: 1.8; letter-spacing: 0.02em; font-size: 14px; font-weight: 500; letter-spacing: 0.02em; line-height: 1.6; } @media (min-width: 1280px) { .p-function-sub_text { font-size: 16px; } } .p-function-content_main { display: grid; gap: 40px; } @media (min-width: 768px) { .p-function-content_main { gap: 40px; } } .p-fuction-sub-content { border-top: 2px solid #E8E8E8; display: flex; flex-direction: column; gap: 24px; } @media (min-width: 768px) { .p-fuction-sub-content { gap: 0; padding-top: 24px; flex-direction: row; align-items: center; justify-content: space-between; } } .p-function-sub-content_title { font-size: 18px; font-weight: 700; letter-spacing: 0.02em; line-height: 1.6; } .p-function-sub-content-item { display: grid; gap: 16px; flex-grow: 1; padding: 24px 0 0 0; } @media (min-width: 768px) { .p-function-sub-content-item { padding: 0 24px 0 16px; } } @media (min-width: 1280px) { .p-function-sub-content-item { padding: 0 66px 0 16px; } } .p-function-sub-content-list { display: grid; gap: 8px; grid-template-columns: repeat(2, 1fr); } @media (min-width: 768px) { .p-function-sub-content-list { gap: 12px; } } @media (min-width: 1280px) { .p-function-sub-content-list { grid-template-columns: repeat(3, 1fr); } } .p-function-sub-content-list div { font-size: 14px; display: flex; justify-content: center; align-items: center; height: 56px; font-weight: 700; line-height: 1.4; text-align: center; background: #99E6E4; border-radius: 4px; padding: 8px; } @media (min-width: 768px) { .p-function-sub-content-list div { font-size: 20px; } } @media (min-width: 768px) { .p-function-sub-content-list div { height: 72px; padding: 0; } } .p-function-sub-content-list div .list-schedule_icon { padding-right: 32px; position: relative; } @media (min-width: 768px) { .p-function-sub-content-list div .list-schedule_icon { padding-right: 45px; } } .p-function-sub-content-list div .list-schedule_icon::after { content: ""; display: block; position: absolute; top: 50%; right: 0; transform: translateY(-50%); width: 27px; height: 26px; background-size: 27px 26px; background-repeat: no-repeat; background-image: url(../img/icon_schedule.png); } @media (min-width: 768px) { .p-function-sub-content-list div .list-schedule_icon::after { width: 31px; height: 30.5px; background-size: 31px 30.5px; } } .p-function-sub-content-plan { display: flex; flex-direction: column; } @media (min-width: 768px) { .p-function-sub-content-plan { padding: 0 19px 0 27px; height: 100%; justify-content: center; border-left: 2px solid #E8E8E8; } } .p-function-sub-content-plan_inner { display: grid; gap: 8px; } @media (min-width: 768px) { .p-function-sub-content-plan_inner { width: 115px; } } .p-function-plan-wrapper { display: flex; flex-direction: row; gap: 6px; padding: 0; } @media (min-width: 768px) { .p-function-plan-wrapper { flex-direction: column; align-items: center; padding: 0 3px; } } .p-function-plan { display: flex; align-items: center; width: 108px; height: 37px; background-repeat: no-repeat; background-size: 108px 37px; } .p-function-plan.plan-color_blue { background-image: url(../img/planTag-blue.svg); } .p-function-plan.plan-color_blue_active { background-image: url(../img/planTag-blue_a.svg); } .p-function-plan.plan-color_green { background-image: url(../img/planTag-green.svg); } .p-function-plan.plan-color_green_active { background-image: url(../img/planTag-green_a.svg); } .p-function-plan span { opacity: 0.33; font-size: 14px; font-weight: 700; line-height: 1.5; letter-spacing: 0; padding: 8.5px 0 8.5px 37px; } .p-function-plan span.active-text { opacity: 1; } .p-function-plan_title { font-size: 14px; font-weight: 700; letter-spacing: 0.02em; line-height: 1.6; } .p-function-content_head { display: flex; flex-direction: column; padding: 32px 0; gap: 16px; } @media (min-width: 768px) { .p-function-content_head { flex-direction: row; justify-content: flex-start; align-items: center; gap: 40px; } } .inc_schedule-info .p-function-content_head { padding: 32px 0 0; } .p-function-content_head .p-function-sub_text { font-size: 16px; line-height: 1.8; } @media (min-width: 768px) { .p-function-content_head .p-function-sub_text { font-size: 14px; line-height: 1.6; } } @media (min-width: 1280px) { .p-function-content_head .p-function-sub_text { font-size: 16px; } } .inc_schedule-info { display: grid; gap: 16px; } @media (min-width: 768px) { .inc_schedule-info { gap: 8px; } } .p-function-content_head_schedule-info { display: flex; justify-content: flex-end; align-items: center; min-height: 29px; margin: 0 0 40px 0; font-size: 12px; font-weight: 500; line-height: 1.5; } @media (min-width: 768px) { .p-function-content_head_schedule-info { margin: 0 60px 24px 0; min-height: 30px; } } @media (min-width: 1280px) { .p-function-content_head_schedule-info { margin: 0 0 24px 0; } } .p-function-content_head_schedule-info div { padding-left: 33px; position: relative; } @media (min-width: 768px) { .p-function-content_head_schedule-info div { padding-left: 35px; } } .p-function-content_head_schedule-info div::before { content: ""; display: block; position: absolute; top: 50%; left: 0; transform: translateY(-50%); width: 29px; height: 29px; background-size: 29px 29px; background-repeat: no-repeat; background-image: url(../img/icon_schedule.png); } @media (min-width: 768px) { .p-function-content_head_schedule-info div::before { width: 31px; height: 30.5px; background-size: 31px 30.5px; } } .p-function-title-wrapper { display: flex; flex-direction: column; align-items: center; } @media (min-width: 768px) { .p-function-title-wrapper { max-width: fit-content; width: 150%; flex-direction: row; gap: 8px; } } .p-function-title-wrapper img { width: 120px; } @media (min-width: 768px) { .p-function-title-wrapper img { width: 100px; } } @media (min-width: 768px) { .p-function-title-wrapper.function-title_long { min-width: 338px; } } @media (min-width: 768px) { .p-function-title-wrapper.function-title_exlong { min-width: 370px; } } .p-function-content_main-wrapper { display: grid; gap: 48px; } @media (min-width: 768px) { .p-function-content_main-wrapper { gap: 72px; } } .p-function-content_main_schedule-content { padding: 0; } @media (min-width: 1280px) { .p-function-content_main_schedule-content { padding: 0 16px; } } .p-function-content_main_schedule-content h4 { font-size: 16px; font-weight: 700; line-height: 1.6; letter-spacing: 0.02em; padding: 15px 0 15px 69.5px; } @media (min-width: 768px) { .p-function-content_main_schedule-content h4 { font-size: 20px; padding: 0; } } @media (min-width: 1280px) { .p-function-content_main_schedule-content h4 { font-size: 22px; } } .p-function-schedule_inner { display: grid; gap: 8px; position: relative; } @media (min-width: 768px) { .p-function-schedule_inner { gap: 4px; padding-left: 124px; } } .p-function-schedule_inner::before { content: ""; display: block; position: absolute; top: 0; left: 0; width: 56px; height: 56px; background-size: 56px; background-repeat: no-repeat; background-image: url(../img/schedule-title.png); } @media (min-width: 768px) { .p-function-schedule_inner::before { width: 100px; height: 100px; background-size: 100px; top: 50%; transform: translateY(-50%); } } .p-flow_list { display: grid; gap: 16px; grid-template-columns: repeat(1, 1fr); } @media (min-width: 768px) { .p-flow_list { grid-template-columns: repeat(2, 1fr); } } .p-flow_list .c-anchor-link { font-size: 14px; font-weight: 700; letter-spacing: 0.02em; line-height: 1.4; width: 100%; max-width: 100%; min-height: 50px; padding: 8px 52px 8px 16px; } @media (min-width: 1280px) { .p-flow_list .c-anchor-link { font-size: 16px; } } @media (min-width: 768px) { .p-flow_list .c-anchor-link { padding: 10px 52px 10px 16px; } } @media (min-width: 1280px) { .p-flow_list .c-anchor-link { padding: 14px 52px 14px 16px; } } .ld-main__contents_head_bottom { display: flex; align-items: center; flex-direction: column; gap: 16px; } .ld-main__contents_head_bottom .c-button-secondary { background: #FFFFFF; } @media (hover: hover) { .ld-main__contents_head_bottom .c-button-secondary:hover { background: #99E6E4; } } @media (min-width: 768px) { .p-flow-contents .p-about-service-child-head { padding: 32px 0; } } .p-flow-contents .ld-section__child-title { gap: 8px; } .p-flow-contents-service_inner { padding: 56px 16px 56px; display: grid; gap: 56px; } @media (min-width: 768px) { .p-flow-contents-service_inner { padding: 56px 62px 80px; } } @media (min-width: 1280px) { .p-flow-contents-service_inner { padding: 56px 180px 80px; } } .p-flow-content-title { font-size: 20px; font-weight: 700; letter-spacing: 0.02em; line-height: 1.6; } @media (min-width: 1280px) { .p-flow-content-title { font-size: 24px; } } .p-flow-main_text { font-size: 14px; font-weight: 500; letter-spacing: 0.02em; line-height: 2; } @media (min-width: 1280px) { .p-flow-main_text { font-size: 16px; } } .p-flow-content-service_support .p-flow-main_text, .ld-main__contents_head_bottom .p-flow-main_text { line-height: 1.6; } .p-flow-main_text-sub { font-size: 14px; font-weight: 500; letter-spacing: 0.02em; line-height: 1.6; } @media (min-width: 1280px) { .p-flow-main_text-sub { font-size: 16px; } } .p-flow-content-service { display: grid; gap: 24px; } .p-flow-content-service_main_child { display: grid; gap: 16px; } .p-flow-content-service.p-flow-content_point { display: grid; gap: 24px; } .p-flow-content-service_head { display: flex; justify-content: flex-start; flex-direction: column; gap: 16px; } @media (min-width: 768px) { .p-flow-content-service_head { align-items: center; flex-direction: row; } } .p-flow-content-service_head span { font-size: 16px; font-weight: 500; letter-spacing: 0.02em; line-height: 2; font-weight: 700; display: flex; align-items: center; justify-content: center; width: 96px; height: 48.8px; background-size: cover; padding-right: 12px; background-repeat: no-repeat; } @media (min-width: 1280px) { .p-flow-content-service_head span { font-size: 18px; } } @media (min-width: 768px) { .p-flow-content-service_head span { min-width: 120px; height: 61px; padding-right: 8px; } } #flow-01 .p-flow-content-service_head span { background-image: url(../img/step-bg_blue.png); } #flow-02 .p-flow-content-service_head span { background-image: url(../img/step-bg_yellow.png); } .p-flow-content_service_link { display: flex; justify-content: center; text-align: center; flex-direction: column; gap: 8px; } .p-flow-content-service_main_link { display: grid; gap: 32px; } .p-flow-content-service_main_child_link { display: grid; gap: 8px; } .p-flow-main_link-button { display: flex; justify-content: center; } .p-flow-main_link-button .c-buttun-flow-secondary { padding: 8px 72px 8px 56px; width: 295px; } @media (min-width: 768px) { .p-flow-main_link-button .c-buttun-flow-secondary { width: fit-content; padding: 13px 72px 13px 56px; } } .p-flow-content-service_support { display: grid; text-align: center; gap: 16px; padding: 24px 24px 40px; background: #E5F6F6; } .p-flow-content-service_support .p-flow-content-service_support-button { display: flex; justify-content: center; } .p-flow-content-service_support .c-button-secondary { background: #FFFFFF; } @media (hover: hover) { .p-flow-content-service_support .c-button-secondary:hover { background: #99E6E4; } } .p-link__group_list.p-support_list { display: grid; gap: 16px; grid-template-columns: repeat(1, 1fr); padding-top: 0; } @media (min-width: 768px) { .p-link__group_list.p-support_list { grid-template-columns: repeat(2, 1fr); gap: 32px 16px; } } @media (min-width: 1280px) { .p-link__group_list.p-support_list { grid-template-columns: repeat(4, 1fr); gap: 16px; } } .p-link__group_list.p-support_list .c-anchor-link { font-size: 14px; font-weight: 700; letter-spacing: 0.02em; line-height: 1.4; background: #E5F6F6; width: 100%; max-width: 100%; min-height: 50px; padding: 14px 52px 14px 16px; margin: 8px 0 16px; } @media (min-width: 1280px) { .p-link__group_list.p-support_list .c-anchor-link { font-size: 16px; } } @media (hover: hover) { .p-link__group_list.p-support_list .c-anchor-link:hover { background: #99E6E4; } } .p-link__group_list.p-support_list ul { font-size: 14px; font-weight: 500; letter-spacing: 0.02em; line-height: 1.6; } @media (min-width: 1280px) { .p-link__group_list.p-support_list ul { font-size: 16px; } } .p-link__group_list.p-support_list ul li { padding-left: 1.5em; position: relative; } .p-link__group_list.p-support_list ul li::before { content: "・"; position: absolute; left: 0; } .p-support-contents-head { background: #FFFFFF; padding: 56px 24px; display: grid; gap: 24px; } @media (min-width: 768px) { .p-support-contents-head { padding: 56px 48px; } } @media (min-width: 1280px) { .p-support-contents-head { padding: 80px 90px; } } body.p-support .ld-main__contents { gap: 64px; } @media (min-width: 768px) { body.p-support .ld-main__contents { gap: 80px; } } @media (min-width: 1280px) { body.p-support .ld-main__contents { gap: 104px; } } .ld-main__contents_head-text { padding: 0 24px; } .p-support_list-num { font-size: 14px; font-weight: 500; letter-spacing: 0.02em; line-height: 1.6; font-weight: 700; } @media (min-width: 1280px) { .p-support_list-num { font-size: 16px; } } .p-support-main-title { font-size: 20px; font-weight: 700; letter-spacing: 0.02em; line-height: 1.6; text-align: center; } @media (min-width: 1280px) { .p-support-main-title { font-size: 28px; } } .p-support-main_text { font-size: 16px; font-weight: 500; letter-spacing: 0.02em; line-height: 2; } @media (min-width: 1280px) { .p-support-main_text { font-size: 18px; } } .p-support-main_text-sub { font-size: 14px; font-weight: 500; letter-spacing: 0.02em; line-height: 1.6; } @media (min-width: 1280px) { .p-support-main_text-sub { font-size: 16px; } } .p-support-contents .ld-section__child-title { gap: 24px; flex-direction: row; } .p-support-contents .p-about-service-child-head { padding: 32px 0; } .p-supoort-contents_inner { display: grid; gap: 80px; padding: 56px 24px 80px; width: 100%; } @media (min-width: 768px) { .p-supoort-contents_inner { padding: 56px 40px 80px; max-width: 780px; margin: 0 auto; } } @media (min-width: 1280px) { .p-supoort-contents_inner { max-width: 960px; padding: 80px 0; } } .p-support .child-content_twocolumn_wrapper { gap: 24px; } .p-support .child-content_twocolumn .twocolumn-content_detail-wrapper { flex-grow: 1; display: grid; gap: 24px; min-height: 144px; } .p-support .child-content_twocolumn .twocolumn-content_detail-wrapper .twocolumn-content_detail { padding: 0 0 12px 0; gap: 0; } @media (min-width: 768px) { .p-support .child-content_twocolumn .twocolumn-content_detail-wrapper .twocolumn-content_detail { padding: 22px 0 22px 32px; gap: 10px; } } .p-support .child-content_twocolumn .twocolumn-content_detail-wrapper .twocolumn-content_detail.support_07 { padding: 0; } @media (min-width: 768px) { .p-support .child-content_twocolumn .twocolumn-content_detail-wrapper .twocolumn-content_detail.support_07 { padding: 22px 0 22px 42px; } } .p-support .child-content_twocolumn .twocolumn-content_detail-wrapper .twocolumn-content_detail_child { min-height: fit-content; padding-top: 0; } @media (min-width: 768px) { .p-support .child-content_twocolumn .twocolumn-content_detail-wrapper .twocolumn-content_detail_child { min-height: 88px; justify-content: center; } } @media (min-width: 1280px) { .p-support .child-content_twocolumn .twocolumn-content_detail-wrapper .twocolumn-content_detail_child { justify-content: flex-start; } } .p-support .child-content_twocolumn .twocolumn-content_detail-wrapper img { max-width: 100px; } .p-support .child-content_twocolumn .twocolumn-content_detail_child .twocolumn-content_detail-text { font-size: 20px; font-weight: 700; letter-spacing: 0.02em; line-height: 1.6; font-size: 12px; line-height: 1.6; } @media (min-width: 1280px) { .p-support .child-content_twocolumn .twocolumn-content_detail_child .twocolumn-content_detail-text { font-size: 24px; } } @media (min-width: 768px) { .p-support .child-content_twocolumn .twocolumn-content_detail_child .twocolumn-content_detail-text { font-size: 20px; } } @media (min-width: 1280px) { .p-support .child-content_twocolumn .twocolumn-content_detail_child .twocolumn-content_detail-text { font-size: 24px; } } .p-support .child-content_twocolumn .support_07 { display: flex; align-items: center; justify-content: center; } @media (min-width: 768px) { .p-support .child-content_twocolumn .support_07 { justify-content: flex-start; } } .p-support .child-content_twocolumn .support_07::before { display: none; } @media (min-width: 768px) { .p-support .child-content_twocolumn .twocolumn-content_arrow { min-height: 142px; border-width: 4px 20px 4px 20px; border-image-slice: 4 20 4 20 fill; } } @media (min-width: 1280px) { .p-support .child-content_twocolumn .twocolumn-content_arrow { border-width: 4px 40px 4px 40px; border-image-slice: 4 27 4 27 fill; } } .child-content_twocolumn_bottom { display: grid; gap: 24px; } @media (min-width: 768px) { .child-content_twocolumn_bottom { margin-left: 250px; padding-left: 20px; } } @media (min-width: 1280px) { .child-content_twocolumn_bottom { margin-left: 360px; } } .child-content_twocolumn_bottom .child-content_twocolumn_bottom_gap_16 { display: grid; gap: 16px; } .child-content-border { display: grid; gap: 24px; padding: 24px; border: 1px solid #99E6E4; border-radius: 8px; } .child-content-border_group div { display: flex; gap: 8px; } .child-content-border_group div span { font-size: 14px; font-weight: 500; letter-spacing: 0.02em; line-height: 1.6; } @media (min-width: 1280px) { .child-content-border_group div span { font-size: 16px; } } .child-content-border_group div span.border_group-h { font-weight: 700; min-width: 120px; } .child-content-border_group ul { font-size: 14px; font-weight: 500; letter-spacing: 0.02em; line-height: 1.6; } @media (min-width: 1280px) { .child-content-border_group ul { font-size: 16px; } } .child-content-border_group ul li { padding-left: 1.5em; position: relative; } .child-content-border_group ul li::before { content: "・"; position: absolute; left: 0; } .child-content-border_group .twocolumn-content_detail-baloon { justify-content: flex-start; margin-bottom: 13px; } .child-content-border_group .twocolumn-content_detail-baloon span { width: fit-content; padding: 8px 16px; background: #B9EAE9; margin-top: 0; margin-bottom: 8px; font-weight: 700; } .child-content-border_group .twocolumn-content_detail-baloon span::before { width: 15px; height: 13px; top: auto; left: 50%; transform: translate(-50%, 0); bottom: -12px; clip-path: polygon(0 0, 100% 0, 50% 100%); background: #B9EAE9; } .p-supoort-contents-button { display: flex; justify-content: center; align-items: center; gap: 24px; flex-direction: column; } @media (min-width: 768px) { .p-supoort-contents-button { flex-direction: row; } } .p-supoort-contents-button .c-buttun-support-secondary { width: 100%; max-width: 279px; } @media (min-width: 768px) { .p-supoort-contents-button .c-buttun-support-secondary { width: 100%; max-width: 357px; } } .p-support-contents-contact { display: flex; align-items: center; flex-direction: column; } .p-support-contents-contact .p-support-contents-contact_bottom { display: flex; align-items: center; flex-direction: column; gap: 24px; } .contact_bottom-tel { display: flex; gap: 16px; align-items: center; font-size: 32px; font-weight: 700; line-height: 1.6; letter-spacing: 0.02em; margin: 54px 0 46px; } @media (min-width: 768px) { .contact_bottom-tel { font-size: 40px; } } .contact_bottom-tel img { max-width: 80px; } .p-in-section { padding: 0 24px; } @media (min-width: 768px) { .p-in-section { padding: 0; } } .p-agency-content-wrapper { display: grid; gap: 120px; } .p-agency .ld-main__contents_head { width: 100%; background: #FFFFFF; } .p-agency-text_line { margin: 0 8px; position: relative; z-index: 1; } .p-agency-text_line::after { background: #FCF27B; bottom: 0; content: ""; height: 13px; left: 50%; min-width: calc(100% + 8px); position: absolute; transform: translateX(-50%); z-index: -1; } .p-agency-head { padding: 40px 24px 48px; } @media (min-width: 768px) { .p-agency-head { padding: 40px 62px 48px; } } @media (min-width: 1280px) { .p-agency-head { padding: 40px 180px 48px; } } .p-agency-head .c-button-primary-big { max-width: 327px; } @media (min-width: 768px) { .p-agency-head .c-button-primary-big { max-width: fit-content; } } .p-agency-head_text { text-align: center; } .p-agency-head_text span { font-size: 20px; font-weight: 700; letter-spacing: 0.02em; line-height: 1.6; } @media (min-width: 1280px) { .p-agency-head_text span { font-size: 28px; } } .p-agency-head_text span.p-agency-text_line { line-height: 1.4; } .achivement-conetnt { display: flex; justify-content: center; flex-direction: column; align-items: center; gap: 57px; margin: 40px 0; } @media (min-width: 768px) { .achivement-conetnt { flex-direction: row; gap: 48px; } } .achivement-item { max-width: fit-content; padding: 0 47px 0 39.6px; position: relative; } .achivement-item::before { position: absolute; top: 0; left: 0; width: 35.6px; height: 120px; content: ""; display: block; background-size: cover; background-repeat: no-repeat; background-image: url(../img/total-left.svg); } .achivement-item::after { position: absolute; top: 0; right: 0; width: 43px; height: 120px; content: ""; display: block; background-size: cover; background-repeat: no-repeat; background-image: url(../img/total-right.svg); } .achivement-item .total-num { margin-left: 12px; } .achivement-item .achivement-inner { margin: 9px 0; } .achivement-item .total-title { font-size: 16px; letter-spacing: 0.02em; font-weight: 500; line-height: 1.6; text-align: center; } .achivement-item .total-num { font-size: 56px; letter-spacing: 0.02em; font-weight: 700; line-height: 1; } .achivement-item .total-num span { font-size: 23px; font-weight: 500; line-height: 1.4; } .achivement-item .total-wrapper { margin-top: 4px; } .achivement-item .total-wrapper span { padding-left: 4px; } .achivement-long { min-width: 276px; height: 120px; } .achivement-long .total-title { margin-left: 13px; } .achivement-short { min-width: 212.6px; height: 120px; } .achivement-short .total-title { margin-left: 6px; } .p-agency-contents-title { font-size: 28px; font-weight: 700; letter-spacing: 0.02em; line-height: 1.6; } @media (min-width: 768px) { .p-agency-contents-title { font-size: 32px; } } @media (min-width: 1280px) { .p-agency-contents-title { font-size: 40px; } } .p-agency-contents { display: grid; gap: 48px; } .p-agency-contents-head { display: grid; gap: 24px; text-align: center; } .p-agency-main_text { font-size: 16px; font-weight: 500; letter-spacing: 0.02em; line-height: 2; } @media (min-width: 1280px) { .p-agency-main_text { font-size: 18px; } } .p-agency-sub_text { font-size: 14px; font-weight: 500; letter-spacing: 0.02em; line-height: 1.8; } @media (min-width: 1280px) { .p-agency-sub_text { font-size: 16px; } } .p-agency-survice { display: grid; gap: 48px; grid-template-columns: repeat(1, 1fr); } @media (min-width: 768px) { .p-agency-survice { padding: 0 80px; grid-template-columns: repeat(2, 1fr); } } @media (min-width: 1280px) { .p-agency-survice { padding: 0 215px; } } .p-agency-survice-group { display: flex; flex-direction: column; padding: 40px 48px; background: #FFFFFF; border-radius: 8px; gap: 32px; } .p-agency-survice-group img { margin: 0 auto; } .p-agency-point { display: grid; gap: 64px; grid-template-columns: repeat(1, 1fr); } @media (min-width: 768px) { .p-agency-point { gap: 48px; grid-template-columns: repeat(2, 1fr); } } .p-agency-point-group { position: relative; margin-top: 8px; background: #FFFFFF; border-radius: 8px; padding: 64px 32px 32px; } @media (min-width: 768px) { .p-agency-point-group { padding: 72px 32px 32px; } } @media (min-width: 1280px) { .p-agency-point-group { padding: 80px 48px 40px; } } .p-agency-point-group .point-num { width: 160px; height: 60px; } .p-agency-point-group .point-num span { font-size: 32px; } .p-agency-point-group-content { display: grid; gap: 16px; } @media (min-width: 1280px) { .p-agency-point-group-content { gap: 24px; } } .point-group-content_title { font-size: 20px; font-weight: 700; letter-spacing: 0.02em; line-height: 1.8; line-height: 1.6; text-align: center; display: grid; } @media (min-width: 1280px) { .point-group-content_title { font-size: 28px; } } .point-group-content_title span.point-title_line { position: relative; z-index: 1; } .point-group-content_title span.point-title_line::after { display: inline-block; background: #FCF27B; bottom: 0; content: ""; height: 13px; left: 50%; min-width: calc(100% + 8px); position: absolute; transform: translateX(-50%); z-index: -1; } .point-group-content_title.first_line { gap: 4px; } .point-group-content_title.first_line span::after { bottom: -1px; } .p-agency-service-plan { display: grid; gap: 48px; grid-template-columns: repeat(1, 1fr); } @media (min-width: 768px) { .p-agency-service-plan { grid-template-columns: repeat(2, 1fr); } } .p-agency-service-plan .p-about-contents-service-child { margin: 0; display: flex; } .p-agency-service-plan .p-agency-plan-content-inner { display: grid; gap: 48px; padding: 32px; } @media (min-width: 1280px) { .p-agency-service-plan .p-agency-plan-content-inner { padding: 48px; } } .p-agency-service-plan .p-about-service-child-content { grid-template-rows: 96px 1fr; } @media (min-width: 1280px) { .p-agency-service-plan .p-about-service-child-content { grid-template-rows: 106px 1fr; } } .p-agency-service-plan .p-about-service-child-head { padding: 32px 0; } .p-agency-service-plan .p-agency-plan-title { font-size: 20px; font-weight: 700; letter-spacing: 0.02em; line-height: 1.6; } @media (min-width: 1280px) { .p-agency-service-plan .p-agency-plan-title { font-size: 26px; text-align: center; } } .p-agency-service-plan .content-bhe .child-content__bottom_list { border: 1px solid #BFEFEE; background: #E5F9F9; } .p-agency-service-plan .content-valux .child-content__bottom_list { border: 1px solid #FFE970; background: #FFF6C6; } .p-agency-service-plan .p-agency-plan-content-bottom { display: grid; gap: 24px; } .p-agency-service-plan .p-agency-main_text { font-weight: 700; text-align: center; } .p-agency-service-plan .ld-section__child-title { flex-direction: row; } .p-agency-service-plan .child-content__bottom_list { padding: 24px; } @media (min-width: 1280px) { .p-agency-service-plan .child-content__bottom_list { padding: 40px 48px; } } .p-agency-service-plan .child-content__bottom_list ul { font-size: 14px; grid-template-columns: repeat(1, 1fr); } @media (min-width: 1280px) { .p-agency-service-plan .child-content__bottom_list ul { font-size: 20px; } } .p-agency-service-plan .child-content__bottom_list ul li::before { width: 40px; height: 40px; background-size: 40px; } @media (min-width: 1280px) { .p-agency-service-plan .child-content__bottom_list ul li::before { width: 46px; height: 46px; background-size: 46px; } } .p-agency-service-plan .child-content__bottom_list ul li span { padding-left: 8px; } @media (min-width: 1280px) { .p-agency-service-plan .child-content__bottom_list ul li span { padding-left: 24px; } } .p-agency-service-faq { background: #FFFFFF; padding: 80px 24px; } @media (min-width: 768px) { .p-agency-service-faq { border-radius: 8px; padding: 80px 64px; } } @media (min-width: 1280px) { .p-agency-service-faq { padding: 80px 90px; } } .p-agency-service-faq .p-faq__qa_list { padding: 0; } .p-agency-contact-content { background: #FFFFFF; padding: 72px 24px; } @media (min-width: 768px) { .p-agency-contact-content { border-radius: 8px; padding: 80px 64px; } } @media (min-width: 1280px) { .p-agency-contact-content { padding: 80px 180px; } } .p-specification-link__group_list { display: grid; gap: 16px; grid-template-columns: repeat(1, 1fr); } @media (min-width: 768px) { .p-specification-link__group_list { grid-template-columns: repeat(2, 1fr); } } @media (min-width: 1280px) { .p-specification-link__group_list { grid-template-columns: repeat(3, 1fr); } } .p-specification-link__group_list .c-anchor-link { width: 100%; max-width: 100%; min-height: 50px; padding: 14px 52px 14px 16px; font-size: 14px; font-weight: 700; letter-spacing: 0.02em; line-height: 1.8; line-height: 1.4; } @media (min-width: 1280px) { .p-specification-link__group_list .c-anchor-link { font-size: 16px; } } .p-contents-wrapper { display: grid; gap: 72px; } @media (min-width: 768px) { .p-contents-wrapper { gap: 80px; } } .p-contents { display: grid; gap: 24px; } .p-contents dl { display: flex; flex-direction: column; align-items: flex-start; } @media (min-width: 768px) { .p-contents dl { flex-direction: row; align-items: center; } } .p-contents dl dt { font-size: 16px; font-weight: 700; letter-spacing: 0.02em; line-height: 1.6; width: 151px; } @media (min-width: 1280px) { .p-contents dl dt { font-size: 18px; } } .p-contents dl dd { font-size: 16px; font-weight: 500; letter-spacing: 0.02em; line-height: 2; } @media (min-width: 1280px) { .p-contents dl dd { font-size: 18px; } } .p-contents dl dd span { position: relative; padding-right: 0.8em; } .p-contents dl dd span sup { font-size: 50%; position: absolute; top: 0.2em; right: 0; } .p-contents dl dd span.sup-double { padding: 0; } @media (min-width: 768px) { .p-contents dl dd span.sup-double { padding-right: 1.8em; } } .p-contents dl dd span.sup-double sup { right: -28px; } @media (min-width: 768px) { .p-contents dl dd span.sup-double sup { right: 0; } } .p-contents .color_blue_bg { background: #E5F6F6; padding: 16px 24px; } .p-contents .color_blue_bg.p-sub-contents_bottom { gap: 16px; padding: 24px 24px 40px; justify-content: center; flex-direction: column; } .p-contents-main_text { font-size: 16px; font-weight: 500; letter-spacing: 0.02em; line-height: 2; } @media (min-width: 1280px) { .p-contents-main_text { font-size: 18px; } } .p-contents-sub_text { font-size: 14px; font-weight: 500; letter-spacing: 0.02em; line-height: 1.6; } @media (min-width: 1280px) { .p-contents-sub_text { font-size: 16px; } } .p-sub-contents { display: grid; gap: 8px; } .p-sub-contents ul { font-size: 16px; font-weight: 500; letter-spacing: 0.02em; line-height: 2; } @media (min-width: 1280px) { .p-sub-contents ul { font-size: 18px; } } .p-sub-contents ul.p-sub-list { font-size: 14px; font-weight: 500; letter-spacing: 0.02em; line-height: 1.6; } @media (min-width: 1280px) { .p-sub-contents ul.p-sub-list { font-size: 16px; } } .p-sub-contents.p-sub-inc_list { gap: 24px; } .p-sub-contents li { padding-left: 1.5em; position: relative; } .p-sub-contents li::before { content: "・"; left: 0; position: absolute; } .p-subcontent_gap_32 { display: grid; gap: 32px; } .p-contens-title { font-size: 20px; font-weight: 700; letter-spacing: 0.02em; line-height: 1.6; text-align: center; } @media (min-width: 1280px) { .p-contens-title { font-size: 28px; } } .p-sub-contents-title { font-size: 16px; font-weight: 500; letter-spacing: 0.02em; line-height: 2; font-weight: 700; line-height: 1.6; } @media (min-width: 1280px) { .p-sub-contents-title { font-size: 18px; } } .p-annotation_set { display: grid; gap: 8px; } .p-annotation_set .c-text-annotation-with-mark { padding-left: 2em; } .p-annotation_set .c-text-annotation-with-mark:nth-child(1)::before { content: "＊1"; position: absolute; left: 0; } .p-annotation_set .c-text-annotation-with-mark:nth-child(2)::before { content: "＊2"; position: absolute; left: 0; } .p-annotation_set .c-text-annotation-with-mark:nth-child(3)::before { content: "＊3"; position: absolute; left: 0; } .p-annotation_set .c-text-annotation-with-mark:nth-child(4)::before { content: "＊4"; position: absolute; left: 0; } .p-annotation_set .c-text-annotation-with-mark:nth-child(5)::before { content: "＊5"; position: absolute; left: 0; } .p-annotation_set .c-text-annotation-with-mark:nth-child(6)::before { content: "＊6"; position: absolute; left: 0; } .p-annotation_set .c-text-annotation-with-mark:nth-child(7)::before { content: "＊7"; position: absolute; left: 0; } .p-annotation_set .c-text-annotation-with-mark:nth-child(8)::before { content: "＊8"; position: absolute; left: 0; } .p-annotation_set .c-text-annotation-with-mark:nth-child(9)::before { content: "＊9"; position: absolute; left: 0; } .p-annotation_set .c-text-annotation-with-mark:nth-child(10)::before { content: "＊10"; position: absolute; left: 0; } .p-contents_56 { display: grid; gap: 56px; } .p-contents_32 { display: grid; gap: 32px; } .p-sub-contents_child16 { display: grid; gap: 16px; } .p-sub-contents_child8, .p-contents-button { display: grid; gap: 8px; } .p-sub-contents_48 { display: grid; gap: 48px; } .c-button_white { background: #FFFFFF; } .p-information__section_gap_16 { display: grid; gap: 16px; } .p-information__section_gap_24 { display: grid; gap: 24px; } .p-information__text { font-size: 14px; font-weight: 500; letter-spacing: 0.02em; line-height: 1.6; word-break: break-all; } @media (min-width: 1280px) { .p-information__text { font-size: 16px; } } .p-privacy-section { display: grid; gap: 72px; } @media (min-width: 768px) { .p-privacy-section { gap: 80px; } } .p-privacy .p-sub-contents li { font-size: 14px; font-weight: 500; letter-spacing: 0.02em; line-height: 1.6; } @media (min-width: 1280px) { .p-privacy .p-sub-contents li { font-size: 16px; } } .p-infromation__bottom_annotation { margin-top: 8px; } .privacy-bottom { text-align: right; padding-top: 32px; } .p-copyright_image { margin: 0 8px 8px 8px; } /* wp fix start */ .p-news-single__body strong, .p-case-single__body strong { font-weight: 700; } .p-news-single__body .has-text-align-center, .p-case-single__body .has-text-align-center { text-align: center; } .p-news-single__body hr, .p-case-single__body hr { border-top: 1px solid #99E6E4; margin-top: 40px; padding-top: 16px; } .p-news-single__body figure, .p-case-single__body figure { margin: 0 auto; max-width: 560px; } .p-news-single__body figcaption, .p-case-single__body figcaption { font-size: 12px; font-weight: 500; letter-spacing: 0; line-height: 1.5; } .p-news-single__body li, .p-case-single__body li { margin-left: 1.25em; } .p-news-single__body ul > li, .p-case-single__body ul > li { list-style: disc; list-style-position: outside; } .p-news-single__body ol > li, .p-case-single__body ol > li { list-style: decimal; list-style-position: outside; } .p-news-single__body p, .p-case-single__body p { overflow-wrap: anywhere; } .p-news-single__body h2, .p-news-single__body h3 { font-size: 16px; font-weight: 700; letter-spacing: 0.02em; line-height: 1.8; margin-bottom: -24px; } @media (min-width: 1280px) { .p-news-single__body h2, .p-news-single__body h3 { font-size: 18px; } } .p-news-single__body li { font-size: 16px; font-weight: 500; letter-spacing: 0.02em; line-height: 2; } @media (min-width: 1280px) { .p-news-single__body li { font-size: 18px; } } .p-news .p-news__date { width: 80px; } .p-faq .c-text-link-with-icon { font-weight: 500; } .p-faq p:has(> a.c-text-link-with-icon) { margin-top: 8px; } .p-faq .p-faq__answer_contents_group p.has-small-font-size { font-size: 12px; margin-top: 4px; } .p-faq .p-faq__answer_contents_group td { position: relative; } .p-faq .p-faq__answer_contents_group td:first-child { min-width: 86px; } .p-faq .p-faq__answer_contents_group td:last-child { font-size: 14px; font-weight: 700; letter-spacing: 0.02em; line-height: 1.8; padding-left: 1em; } @media (min-width: 1280px) { .p-faq .p-faq__answer_contents_group td:last-child { font-size: 16px; } } .p-faq .p-faq__answer_contents_group td:last-child::after { content: "："; left: 0; position: absolute; top: 0; } p.has-small-font-size { font-size: 12px; } .p-estimate:not(.p-result) h2, .p-thanks_g h2, .p-form_g h2 { font-size: 20px; font-weight: 700; letter-spacing: 0.02em; line-height: 1.6; } @media (min-width: 1280px) { .p-estimate:not(.p-result) h2, .p-thanks_g h2, .p-form_g h2 { font-size: 28px; } } .p-estimate:not(.p-result) h3, .p-thanks_g h3, .p-form_g h3 { font-size: 16px; font-weight: 700; letter-spacing: 0.02em; line-height: 1.6; } @media (min-width: 1280px) { .p-estimate:not(.p-result) h3, .p-thanks_g h3, .p-form_g h3 { font-size: 18px; } } .p-estimate:not(.p-result) .has-text-align-center, .p-thanks_g .has-text-align-center, .p-form_g .has-text-align-center { font-size: 16px; font-weight: 500; letter-spacing: 0.02em; line-height: 2; text-align: left; } @media (min-width: 1280px) { .p-estimate:not(.p-result) .has-text-align-center, .p-thanks_g .has-text-align-center, .p-form_g .has-text-align-center { font-size: 18px; } } @media (min-width: 768px) { .p-estimate:not(.p-result) .has-text-align-center, .p-thanks_g .has-text-align-center, .p-form_g .has-text-align-center { text-align: center; } } .p-estimate:not(.p-result) .has-text-align-center br, .p-thanks_g .has-text-align-center br, .p-form_g .has-text-align-center br { display: none; } @media (min-width: 768px) { .p-estimate:not(.p-result) .has-text-align-center br, .p-thanks_g .has-text-align-center br, .p-form_g .has-text-align-center br { display: block; } } /* wp fix end */ html { scroll-behavior: smooth; scrollbar-gutter: stable; } html.no-smooth { scroll-behavior: auto !important; } body { background: #E5F6F6; color: #303030; font-family: "Zen Kaku Gothic New", sans-serif; font-weight: 500; letter-spacing: 0.04em; scroll-behavior: smooth; } img { height: auto; max-width: 100%; } /*!**********************************************************************************!*\ !*** css ./node_modules/css-loader/dist/cjs.js!./node_modules/swiper/swiper.css ***! \**********************************************************************************/ /** * Swiper 11.2.10 * Most modern mobile touch slider and framework with hardware accelerated transitions * https://swiperjs.com * * Copyright 2014-2025 Vladimir Kharlampidi * * Released under the MIT License * * Released on: June 28, 2025 */ /* FONT_START */ @font-face { font-family: 'swiper-icons'; src: url("data:application/font-woff;charset=utf-8;base64, d09GRgABAAAAAAZgABAAAAAADAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAABGRlRNAAAGRAAAABoAAAAci6qHkUdERUYAAAWgAAAAIwAAACQAYABXR1BPUwAABhQAAAAuAAAANuAY7+xHU1VCAAAFxAAAAFAAAABm2fPczU9TLzIAAAHcAAAASgAAAGBP9V5RY21hcAAAAkQAAACIAAABYt6F0cBjdnQgAAACzAAAAAQAAAAEABEBRGdhc3AAAAWYAAAACAAAAAj//wADZ2x5ZgAAAywAAADMAAAD2MHtryVoZWFkAAABbAAAADAAAAA2E2+eoWhoZWEAAAGcAAAAHwAAACQC9gDzaG10eAAAAigAAAAZAAAArgJkABFsb2NhAAAC0AAAAFoAAABaFQAUGG1heHAAAAG8AAAAHwAAACAAcABAbmFtZQAAA/gAAAE5AAACXvFdBwlwb3N0AAAFNAAAAGIAAACE5s74hXjaY2BkYGAAYpf5Hu/j+W2+MnAzMYDAzaX6QjD6/4//Bxj5GA8AuRwMYGkAPywL13jaY2BkYGA88P8Agx4j+/8fQDYfA1AEBWgDAIB2BOoAeNpjYGRgYNBh4GdgYgABEMnIABJzYNADCQAACWgAsQB42mNgYfzCOIGBlYGB0YcxjYGBwR1Kf2WQZGhhYGBiYGVmgAFGBiQQkOaawtDAoMBQxXjg/wEGPcYDDA4wNUA2CCgwsAAAO4EL6gAAeNpj2M0gyAACqxgGNWBkZ2D4/wMA+xkDdgAAAHjaY2BgYGaAYBkGRgYQiAHyGMF8FgYHIM3DwMHABGQrMOgyWDLEM1T9/w8UBfEMgLzE////P/5//f/V/xv+r4eaAAeMbAxwIUYmIMHEgKYAYjUcsDAwsLKxc3BycfPw8jEQA/gZBASFhEVExcQlJKWkZWTl5BUUlZRVVNXUNTQZBgMAAMR+E+gAEQFEAAAAKgAqACoANAA+AEgAUgBcAGYAcAB6AIQAjgCYAKIArAC2AMAAygDUAN4A6ADyAPwBBgEQARoBJAEuATgBQgFMAVYBYAFqAXQBfgGIAZIBnAGmAbIBzgHsAAB42u2NMQ6CUAyGW568x9AneYYgm4MJbhKFaExIOAVX8ApewSt4Bic4AfeAid3VOBixDxfPYEza5O+Xfi04YADggiUIULCuEJK8VhO4bSvpdnktHI5QCYtdi2sl8ZnXaHlqUrNKzdKcT8cjlq+rwZSvIVczNiezsfnP/uznmfPFBNODM2K7MTQ45YEAZqGP81AmGGcF3iPqOop0r1SPTaTbVkfUe4HXj97wYE+yNwWYxwWu4v1ugWHgo3S1XdZEVqWM7ET0cfnLGxWfkgR42o2PvWrDMBSFj/IHLaF0zKjRgdiVMwScNRAoWUoH78Y2icB/yIY09An6AH2Bdu/UB+yxopYshQiEvnvu0dURgDt8QeC8PDw7Fpji3fEA4z/PEJ6YOB5hKh4dj3EvXhxPqH/SKUY3rJ7srZ4FZnh1PMAtPhwP6fl2PMJMPDgeQ4rY8YT6Gzao0eAEA409DuggmTnFnOcSCiEiLMgxCiTI6Cq5DZUd3Qmp10vO0LaLTd2cjN4fOumlc7lUYbSQcZFkutRG7g6JKZKy0RmdLY680CDnEJ+UMkpFFe1RN7nxdVpXrC4aTtnaurOnYercZg2YVmLN/d/gczfEimrE/fs/bOuq29Zmn8tloORaXgZgGa78yO9/cnXm2BpaGvq25Dv9S4E9+5SIc9PqupJKhYFSSl47+Qcr1mYNAAAAeNptw0cKwkAAAMDZJA8Q7OUJvkLsPfZ6zFVERPy8qHh2YER+3i/BP83vIBLLySsoKimrqKqpa2hp6+jq6RsYGhmbmJqZSy0sraxtbO3sHRydnEMU4uR6yx7JJXveP7WrDycAAAAAAAH//wACeNpjYGRgYOABYhkgZgJCZgZNBkYGLQZtIJsFLMYAAAw3ALgAeNolizEKgDAQBCchRbC2sFER0YD6qVQiBCv/H9ezGI6Z5XBAw8CBK/m5iQQVauVbXLnOrMZv2oLdKFa8Pjuru2hJzGabmOSLzNMzvutpB3N42mNgZGBg4GKQYzBhYMxJLMlj4GBgAYow/P/PAJJhLM6sSoWKfWCAAwDAjgbRAAB42mNgYGBkAIIbCZo5IPrmUn0hGA0AO8EFTQAA"); font-weight: 400; font-style: normal; } /* FONT_END */ :root { --swiper-theme-color: #007aff; /* --swiper-preloader-color: var(--swiper-theme-color); --swiper-wrapper-transition-timing-function: initial; */ } :host { position: relative; display: block; margin-left: auto; margin-right: auto; z-index: 1; } .swiper { margin-left: auto; margin-right: auto; position: relative; overflow: hidden; list-style: none; padding: 0; /* Fix of Webkit flickering */ z-index: 1; display: block; } .swiper-vertical > .swiper-wrapper { flex-direction: column; } .swiper-wrapper { position: relative; width: 100%; height: 100%; z-index: 1; display: flex; transition-property: transform; transition-timing-function: var(--swiper-wrapper-transition-timing-function, initial); box-sizing: content-box; } .swiper-android .swiper-slide, .swiper-ios .swiper-slide, .swiper-wrapper { transform: translate3d(0px, 0, 0); } .swiper-horizontal { touch-action: pan-y; } .swiper-vertical { touch-action: pan-x; } .swiper-slide { flex-shrink: 0; width: 100%; height: 100%; position: relative; transition-property: transform; display: block; } .swiper-slide-invisible-blank { visibility: hidden; } /* Auto Height */ .swiper-autoheight, .swiper-autoheight .swiper-slide { height: auto; } .swiper-autoheight .swiper-wrapper { align-items: flex-start; transition-property: transform, height; } .swiper-backface-hidden .swiper-slide { transform: translateZ(0); -webkit-backface-visibility: hidden; backface-visibility: hidden; } /* 3D Effects */ .swiper-3d.swiper-css-mode .swiper-wrapper { perspective: 1200px; } .swiper-3d .swiper-wrapper { transform-style: preserve-3d; } .swiper-3d { perspective: 1200px; } .swiper-3d .swiper-slide, .swiper-3d .swiper-cube-shadow { transform-style: preserve-3d; } /* CSS Mode */ .swiper-css-mode > .swiper-wrapper { overflow: auto; scrollbar-width: none; /* For Firefox */ -ms-overflow-style: none; /* For Internet Explorer and Edge */ } .swiper-css-mode > .swiper-wrapper::-webkit-scrollbar { display: none; } .swiper-css-mode > .swiper-wrapper > .swiper-slide { scroll-snap-align: start start; } .swiper-css-mode.swiper-horizontal > .swiper-wrapper { scroll-snap-type: x mandatory; } .swiper-css-mode.swiper-vertical > .swiper-wrapper { scroll-snap-type: y mandatory; } .swiper-css-mode.swiper-free-mode > .swiper-wrapper { scroll-snap-type: none; } .swiper-css-mode.swiper-free-mode > .swiper-wrapper > .swiper-slide { scroll-snap-align: none; } .swiper-css-mode.swiper-centered > .swiper-wrapper::before { content: ''; flex-shrink: 0; order: 9999; } .swiper-css-mode.swiper-centered > .swiper-wrapper > .swiper-slide { scroll-snap-align: center center; scroll-snap-stop: always; } .swiper-css-mode.swiper-centered.swiper-horizontal > .swiper-wrapper > .swiper-slide:first-child { margin-inline-start: var(--swiper-centered-offset-before); } .swiper-css-mode.swiper-centered.swiper-horizontal > .swiper-wrapper::before { height: 100%; min-height: 1px; width: var(--swiper-centered-offset-after); } .swiper-css-mode.swiper-centered.swiper-vertical > .swiper-wrapper > .swiper-slide:first-child { margin-block-start: var(--swiper-centered-offset-before); } .swiper-css-mode.swiper-centered.swiper-vertical > .swiper-wrapper::before { width: 100%; min-width: 1px; height: var(--swiper-centered-offset-after); } /* Slide styles start */ /* 3D Shadows */ .swiper-3d .swiper-slide-shadow, .swiper-3d .swiper-slide-shadow-left, .swiper-3d .swiper-slide-shadow-right, .swiper-3d .swiper-slide-shadow-top, .swiper-3d .swiper-slide-shadow-bottom, .swiper-3d .swiper-slide-shadow, .swiper-3d .swiper-slide-shadow-left, .swiper-3d .swiper-slide-shadow-right, .swiper-3d .swiper-slide-shadow-top, .swiper-3d .swiper-slide-shadow-bottom { position: absolute; left: 0; top: 0; width: 100%; height: 100%; pointer-events: none; z-index: 10; } .swiper-3d .swiper-slide-shadow { background: rgba(0, 0, 0, 0.15); } .swiper-3d .swiper-slide-shadow-left { background-image: linear-gradient(to left, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0)); } .swiper-3d .swiper-slide-shadow-right { background-image: linear-gradient(to right, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0)); } .swiper-3d .swiper-slide-shadow-top { background-image: linear-gradient(to top, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0)); } .swiper-3d .swiper-slide-shadow-bottom { background-image: linear-gradient(to bottom, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0)); } .swiper-lazy-preloader { width: 42px; height: 42px; position: absolute; left: 50%; top: 50%; margin-left: -21px; margin-top: -21px; z-index: 10; transform-origin: 50%; box-sizing: border-box; border: 4px solid var(--swiper-preloader-color, var(--swiper-theme-color)); border-radius: 50%; border-top-color: transparent; } .swiper:not(.swiper-watch-progress) .swiper-lazy-preloader, .swiper-watch-progress .swiper-slide-visible .swiper-lazy-preloader { animation: swiper-preloader-spin 1s infinite linear; } .swiper-lazy-preloader-white { --swiper-preloader-color: #fff; } .swiper-lazy-preloader-black { --swiper-preloader-color: #000; } @keyframes swiper-preloader-spin { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } } /* Slide styles end */