/* !********************************************************************************************************************************************************************************************************************************************!*\ !*** css ./node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[1].use[1]!./node_modules/postcss-loader/dist/cjs.js??ruleSet[1].rules[1].use[2]!./node_modules/sass-loader/dist/cjs.js??ruleSet[1].rules[1].use[3]!./src/scss/style.scss ***! \ ********************************************************************************************************************************************************************************************************************************************/ @charset "UTF-8"; /* -------------------------------------------------- reset -------------------------------------------------- */ /*** The new CSS reset - version 1.11.3 (last updated 25.08.2024) 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, 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 { text-size-adjust: none; 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; } /* Firefox: solve issue where nested ordered lists continue numbering from parent (https://bugzilla.mozilla.org/show_bug.cgi?id=1881517) */ ol { counter-reset: revert; } /* 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 { 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 { appearance: revert; 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; } ::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; 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; } /* -------------------------------------------------- Foundation -------------------------------------------------- */ /* -------------------------------------------------- 01_Primary Color Palette -------------------------------------------------- */ /* * media base mixin */ /* * media */ *, *::before, *::after { box-sizing: border-box; font-family: "Noto Sans JP", sans-serif; letter-spacing: 0.1em; } html { height: 100%; font-size: 62.5%; } body { font-family: "Noto Sans JP", sans-serif; font-size: 1.6rem; letter-spacing: 0.1em; font-weight: 300; color: var(--color-text-black); } img { max-width: 100%; height: auto; vertical-align: middle; } strong, b { font-weight: bold; } :root { --color-white: #fff; --color-black: #000; --color-text-black: #1d1d1d; --color-text-gray: #d8d8d8; --color-green: #5cb74f; --color-bg-blue: #5e7aa6; --color-border-gray: #b2b2b2; --color-bg-gray: #fafafa; } .grecaptcha-badge { display: none !important; } /* -------------------------------------------------- Layout -------------------------------------------------- */ .l-main { max-width: 1160px; padding: 0 40px; margin: 96px auto 0; } @media screen and (width <= 1024px) { .l-main { padding: 0 20px; margin-top: 60px; } } .l-main.l-main--small { max-width: 908px; } /* -------------------------------------------------- Components -------------------------------------------------- */ .wp-block-lazyblock-business-flow + .wp-block-lazyblock-business-flow { margin-top: 80px; } .c-business_flow_card { max-width: 1160px; margin: 0 auto; padding: 0 40px; } @media screen and (width <= 1024px) { .c-business_flow_card { padding: 0 20px; } } .c-business_flow_card__title { font-weight: bold; text-align: center; color: var(--color-white); font-size: 32px; line-height: 1.5; font-family: "Noto Serif JP", serif; } @media screen and (width <= 1024px) { .c-business_flow_card__title { font-size: 24px; } } .c-business_flow_card__list { margin-top: 64px; counter-reset: list; } @media screen and (width <= 1024px) { .c-business_flow_card__list { margin-top: 40px; } } .c-business_flow_card__item { background: var(--color-white); display: grid; grid-template-columns: 120px 1fr; padding: 42px; gap: 20px 32px; counter-increment: list; } @media screen and (width <= 1024px) { .c-business_flow_card__item { display: block; padding: 20px; } } .c-business_flow_card__item.c-business_flow_card__item--number { padding-left: 108px; } @media screen and (width <= 1024px) { .c-business_flow_card__item.c-business_flow_card__item--number { padding-left: 20px; } } .c-business_flow_card__item.c-business_flow_card__item--photo { padding: 24px 24px 24px 42px; grid-template-columns: 1fr 516px; } @media screen and (width <= 1024px) { .c-business_flow_card__item.c-business_flow_card__item--photo { padding: 20px; } } .c-business_flow_card__item + .c-business_flow_card__item { margin-top: 24px; } .c-business_flow_card__item_title { font-weight: bold; font-size: 24px; line-height: 1.5; color: var(--color-bg-blue); grid-column: 1/3; grid-row: 1/2; } @media screen and (width <= 1024px) { .c-business_flow_card__item_title { font-size: 18px; padding-left: 0; } } .c-business_flow_card__item_title.c-business_flow_card__item_title--number { position: relative; } @media screen and (width <= 1024px) { .c-business_flow_card__item_title.c-business_flow_card__item_title--number { padding-left: 44px; } } .c-business_flow_card__item_title.c-business_flow_card__item_title--number::before { content: counter(list); font-size: 28px; line-height: 46px; font-weight: bold; color: var(--color-white); position: absolute; left: -72px; top: -5px; width: 48px; height: 48px; display: block; background: var(--color-bg-blue); border-radius: 24px; text-align: center; padding-left: 1px; } @media screen and (width <= 1024px) { .c-business_flow_card__item_title.c-business_flow_card__item_title--number::before { left: 0; top: -2px; font-size: 18px; line-height: 31px; width: 32px; height: 32px; } } .c-business_flow_card__item_title.c-business_flow_card__item_title--photo { grid-column: 1/2; grid-row: 1/2; } .c-business_flow_card__item_image { width: 120px; height: 120px; grid-column: 1/2; grid-row: 2/3; display: block; } @media screen and (width <= 1024px) { .c-business_flow_card__item_image { margin: 16px auto 0; width: 80px; height: 80px; } } .c-business_flow_card__item_image.c-business_flow_card__item_image--photo { width: 100%; max-width: 516px; height: auto; grid-column: 2/3; grid-row: 1/3; } .c-business_flow_card__item_body { grid-column: 2/3; grid-row: 2/3; } @media screen and (width <= 1024px) { .c-business_flow_card__item_body { margin-top: 16px; } } .c-business_flow_card__item_body.c-business_flow_card__item_body--photo { grid-column: 1/2; grid-row: 2/3; } .c-button_large, .wp-block-button__link { max-width: 710px; margin: 0 auto; display: flex; height: 124px; align-items: center; justify-content: center; color: var(--color-white); font-size: 32px; border-radius: 999px; background: url("data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iNjMiIGhlaWdodD0iNjQiIHZpZXdCb3g9IjAgMCA2MyA2NCIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj48cGF0aCBkPSJNMzEuMTU1OCAyNy43OTU5TDM2IDMyLjI5NTlNMzYgMzIuMjk1OUwzMS4xNTU4IDM2Ljc5NTlNMzYgMzIuMjk1OUgyNi43NTIiIHN0cm9rZT0id2hpdGUiIHN0cm9rZS13aWR0aD0iMiIgc3Ryb2tlLWxpbmVjYXA9InJvdW5kIiBzdHJva2UtbGluZWpvaW49InJvdW5kIi8+PGNpcmNsZSBjeD0iMzEuNSIgY3k9IjMyLjI5NTkiIHI9IjMwLjUiIHN0cm9rZT0iI0Q0Q0RDRCIgc3Ryb2tlLXdpZHRoPSIyIi8+PC9zdmc+") center right 26px/63px 63px no-repeat; background-color: var(--color-green); text-align: center; transition: 0.3s; } @media screen and (width <= 1024px) { .c-button_large, .wp-block-button__link { height: 64px; font-size: 22px; background-size: 36px 36px; } } .c-button_large:hover, .wp-block-button__link:hover { opacity: 0.5; } .wp-block-buttons { margin-top: 80px; } .wp-block-button { width: 100%; max-width: 710px; } .c-link_button { padding-right: 79px; position: relative; height: 63px; line-height: 63px; transition: 0.3s; } .c-link_button::after { content: ""; position: absolute; top: 50%; transform: translateY(-50%); right: 0; width: 63px; height: 63px; background: url("data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iNjMiIGhlaWdodD0iNjQiIHZpZXdCb3g9IjAgMCA2MyA2NCIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj48cGF0aCBkPSJNMzEuMTU1OCAyNy43OTU5TDM2IDMyLjI5NTlNMzYgMzIuMjk1OUwzMS4xNTU4IDM2Ljc5NTlNMzYgMzIuMjk1OUgyNi43NTIiIHN0cm9rZT0iIzVDQjc0RiIgc3Ryb2tlLXdpZHRoPSIyIiBzdHJva2UtbGluZWNhcD0icm91bmQiIHN0cm9rZS1saW5lam9pbj0icm91bmQiLz48Y2lyY2xlIGN4PSIzMS41IiBjeT0iMzIuMjk1OSIgcj0iMzAuNSIgc3Ryb2tlPSIjRDRDRENEIiBzdHJva2Utd2lkdGg9IjIiLz48L3N2Zz4=") center center/100% no-repeat; } .c-link_button:hover { opacity: 0.5; } .c-link_button.c-link_button--white { color: var(--color-white); } .c-link_button.c-link_button--white::after { background-image: url("data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iNjMiIGhlaWdodD0iNjQiIHZpZXdCb3g9IjAgMCA2MyA2NCIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj48cGF0aCBkPSJNMzEuMTU1OCAyNy43OTU5TDM2IDMyLjI5NTlNMzYgMzIuMjk1OUwzMS4xNTU4IDM2Ljc5NTlNMzYgMzIuMjk1OUgyNi43NTIiIHN0cm9rZT0id2hpdGUiIHN0cm9rZS13aWR0aD0iMiIgc3Ryb2tlLWxpbmVjYXA9InJvdW5kIiBzdHJva2UtbGluZWpvaW49InJvdW5kIi8+PGNpcmNsZSBjeD0iMzEuNSIgY3k9IjMyLjI5NTkiIHI9IjMwLjUiIHN0cm9rZT0iI0Q0Q0RDRCIgc3Ryb2tlLXdpZHRoPSIyIi8+PC9zdmc+"); } .c-link_button.c-link_button--small { padding-right: 50px; height: 47px; line-height: 47px; } .c-link_button.c-link_button--small::after { width: 47px; height: 47px; background-image: url("data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iNDciIGhlaWdodD0iNDgiIHZpZXdCb3g9IjAgMCA0NyA0OCIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj48Y2lyY2xlIGN4PSIyMy41IiBjeT0iMjQuNDcxMiIgcj0iMTYuNSIgc3Ryb2tlPSIjRTREREREIiBzdHJva2Utd2lkdGg9IjIiLz48cGF0aCBkPSJNMjMuNDU3NCAyMC40NzEyTDI3LjEyNCAyMy45NzEyTTI3LjEyNCAyMy45NzEyTDIzLjQ1NzQgMjcuNDcxMk0yNy4xMjQgMjMuOTcxMkgyMC4xMjQiIHN0cm9rZT0iIzVDQjc0RiIgc3Ryb2tlLXdpZHRoPSIxLjUiIHN0cm9rZS1saW5lY2FwPSJyb3VuZCIgc3Ryb2tlLWxpbmVqb2luPSJyb3VuZCIvPjwvc3ZnPg=="); } .c-link_button.c-link_button--down::after { transform: translateY(-50%) rotate(90deg); transform-origin: center center; } .c-link_button.c-link_button--left { padding-right: 0; padding-left: 79px; } .c-link_button.c-link_button--left::after { right: auto; left: 0; transform: translateY(-50%) rotate(180deg); } .c-list_card { display: flex; flex-direction: column; background: var(--color-white); border: 1px solid var(--color-border-gray); padding: 4px; height: 100%; } @media screen and (width <= 1024px) { .c-list_card { flex-direction: row; position: relative; } } .c-list_card__thumbnail { width: 100%; display: block; } @media screen and (width <= 1024px) { .c-list_card__thumbnail { width: 120px; height: 120px; flex-shrink: 0; } } .c-list_card__body { padding: 16px 12px 12px; } @media screen and (width <= 1024px) { .c-list_card__body { padding: 12px 8px 8px 16px; } } .c-list_card__title { font-weight: 700; font-size: 24px; line-height: 1.6667; text-align: center; } @media screen and (width <= 1024px) { .c-list_card__title { font-size: 18px; text-align: left; } } .c-list_card__description { margin-top: 16px; } @media screen and (width <= 1024px) { .c-list_card__description { margin-top: 8px; font-size: 14px; } } .c-list_card__button { text-align: right; } @media screen and (width <= 1024px) { .c-list_card__button { display: none; } } .c-section_definition_list { margin: 120px auto 0; background: var(--color-bg-gray); max-width: 1080px; padding: 40px; } .c-section_definition_list__item { display: flex; padding-bottom: 24px; border-bottom: 1px solid var(--color-border-gray); } .c-section_definition_list__item + .c-section_definition_list__item { padding-top: 24px; } .c-section_definition_list__item:last-of-type { border-bottom: none; padding-bottom: 0; } .c-section_definition_list__term { flex-shrink: 0; width: 200px; } .c-section_definition_list__description { padding-left: 32px; border-left: 1px solid var(--color-border-gray); } .c-section_definition_list__description p + p { margin-top: 16px; } .c-section_heading { color: var(--color-black); } .c-section_heading.c-section_heading--center { text-align: center; } .c-section_heading__main { font-size: 48px; font-family: "Noto Serif JP", serif; font-weight: 200; line-height: 1.2; } @media screen and (width <= 1024px) { .c-section_heading__main { font-size: 32px; } } .c-section_heading__main.c-section_heading__main--white { color: var(--color-white); } .c-section_heading__sub { font-size: 16px; padding-left: 48px; position: relative; } @media screen and (width <= 1024px) { .c-section_heading__sub { font-size: 14px; padding-left: 40px; white-space: nowrap; } } .c-section_heading__sub::before { content: ""; display: block; position: absolute; bottom: 4px; left: 4px; width: 40px; height: 1px; background-color: var(--color-black); } @media screen and (width <= 1024px) { .c-section_heading__sub::before { width: 32px; left: 0; } } .c-section_heading__sub.c-section_heading__sub--white { color: var(--color-white); } .c-section_heading__sub.c-section_heading__sub--white::before { background-color: var(--color-white); } .c-section_list { margin: 80px auto 0; max-width: 1160px; padding: 0 40px; } .c-section_list__title { font-size: 24px; text-align: center; } .c-section_list__content { border: 1px solid var(--color-border-gray); padding: 48px 60px; margin-top: 40px; } .c-section_list__item { line-height: 1.7; } .c-section_list__item + .c-section_list__item { padding-top: 24px; margin-top: 24px; border-top: 1px solid var(--color-border-gray); } .c-section_media_text { display: flex; align-items: center; margin-top: 80px; gap: 80px; } @media screen and (width <= 1024px) { .c-section_media_text { display: block; margin-top: 60px; } } .c-section_media_text.c-section_media_text--top_border { margin-top: 80px; padding-top: 80px; border-top: 1px solid var(--color-border-gray); } @media screen and (width <= 1024px) { .c-section_media_text.c-section_media_text--top_border { margin-top: 40px; padding-top: 40px; } } .c-section_media_text.c-section_media_text--image_right { flex-direction: row-reverse; } .c-section_media_text.c-section_media_text--position_top { align-items: flex-start; } .c-section_media_text__image { width: 420px; } .c-section_media_text__image.c-section_media_text__image--large { width: 540px; } .c-section_media_text__title { font-size: 24px; } @media screen and (width <= 1024px) { .c-section_media_text__title { font-size: 20px; font-weight: 400; margin-top: 24px; } } .c-section_media_text__body { margin-top: 24px; line-height: 1.7; } @media screen and (width <= 1024px) { .c-section_media_text__body { margin-top: 16px; } } .c-section_order_list { max-width: 908px; margin: 80px auto 0; padding: 0 40px; } .c-section_order_list__title { text-align: center; font-size: 24px; } .c-section_order_list__content { margin-top: 40px; counter-reset: list; } .c-section_order_list__item { display: grid; grid-template-columns: 120px 1fr; gap: 16px 32px; counter-increment: list; } .c-section_order_list__item + .c-section_order_list__item { margin-top: 40px; } .c-section_order_list__image { grid-column: 1/2; grid-row: 1/3; } .c-section_order_list__item_title { color: var(--color-bg-blue); font-weight: bold; font-size: 20px; grid-column: 2/3; grid-row: 1/2; align-self: flex-end; position: relative; padding-left: 48px; } .c-section_order_list__item_title::before { content: counter(list); font-size: 20px; line-height: 36px; font-weight: bold; color: var(--color-white); position: absolute; left: 0; top: 50%; width: 36px; height: 36px; display: block; background: var(--color-bg-blue); border-radius: 18px; text-align: center; padding-left: 1px; transform: translateY(-50%); } .c-section_order_list__body { grid-column: 2/3; grid-row: 2/3; align-self: flex-start; } .c-section_paragraph { margin-top: 96px; } @media screen and (width <= 1024px) { .c-section_paragraph { margin-top: 64px; } } .c-section_paragraph.c-section_paragraph--top_border { padding-top: 80px; margin-top: 80px; border-top: 1px solid var(--color-border-gray); } @media screen and (width <= 1024px) { .c-section_paragraph.c-section_paragraph--top_border { margin-top: 40px; padding-top: 40px; } } .c-section_paragraph__title { font-weight: bold; text-align: center; position: relative; display: flex; font-size: 32px; font-family: "Noto Serif JP", serif; justify-content: center; line-height: 1.5; padding-bottom: 24px; } @media screen and (width <= 1024px) { .c-section_paragraph__title { font-size: 24px; font-weight: 400; } } .c-section_paragraph__title.c-section_paragraph__title--small { font-family: "Noto Sans JP", sans-serif; font-weight: 300; font-size: 24px; padding-bottom: 0; } @media screen and (width <= 1024px) { .c-section_paragraph__title.c-section_paragraph__title--small { font-size: 20px; font-weight: 400; } } .c-section_paragraph__title.c-section_paragraph__title--small::after { display: none; } .c-section_paragraph__title::after { content: ""; display: block; width: 70px; height: 4px; background-color: #88a6b8; margin: auto; position: absolute; left: 50%; bottom: 0; transform: translateX(-50%); } .c-section_paragraph__body { line-height: 1.7; margin: 64px auto 0; padding: 0 40px; max-width: 908px; } @media screen and (width <= 1024px) { .c-section_paragraph__body { margin-top: 40px; padding: 0; } } .c-section_paragraph__title.c-section_paragraph__title--small + .c-section_paragraph__body { margin-top: 24px; } @media screen and (width <= 1024px) { .c-section_paragraph__title.c-section_paragraph__title--small + .c-section_paragraph__body { margin-top: 16px; } } .c-wrap_blue { background: var(--color-bg-blue); margin-left: calc(-50vw + 50%); margin-top: 96px; padding: 96px 0 120px; width: 100vw; } @media screen and (width <= 1024px) { .c-wrap_blue { margin-top: 60px; padding: 60px 0; } } /* -------------------------------------------------- Project -------------------------------------------------- */ .p-achievements { margin: 96px auto 0; max-width: 1160px; padding: 0 40px; } @media screen and (width <= 1024px) { .p-achievements { padding: 0 20px; } } .p-achievements__filter { align-items: center; display: flex; padding: 32px 72px; border: 1px solid var(--color-border-gray); } @media screen and (width <= 1024px) { .p-achievements__filter { display: block; padding: 16px 20px; } } .p-achievements__label { font-size: 24px; padding-right: 48px; } @media screen and (width <= 1024px) { .p-achievements__label { font-size: 16px; padding: 0; } } .p-achievements__filter_list { display: flex; } @media screen and (width <= 1024px) { .p-achievements__filter_list { margin-top: 8px; padding-top: 8px; border-top: 1px solid var(--color-border-gray); } } .p-achievements__filter_item { position: relative; border-left: 1px solid var(--color-border-gray); } @media screen and (width <= 1024px) { .p-achievements__filter_item { border: none; } } .p-achievements__filter_button { padding: 0 72px 0 48px; position: relative; transition: 0.3s; } @media screen and (width <= 1024px) { .p-achievements__filter_button { font-size: 14px; padding: 0 24px 0 0; } } .p-achievements__filter_button::after, .p-achievements__filter_button::before { content: ""; display: block; position: absolute; background-color: var(--color-black); top: 50%; transform: translateY(-50%); } .p-achievements__filter_button::before { height: 15px; width: 1px; right: 55px; } @media screen and (width <= 1024px) { .p-achievements__filter_button::before { height: 9px; right: 16px; } } .p-achievements__filter_button::after { height: 1px; width: 15px; right: 48px; } @media screen and (width <= 1024px) { .p-achievements__filter_button::after { width: 9px; right: 12px; } } .p-achievements__filter_button:hover { cursor: pointer; opacity: 0.5s; } .p-achievements__filter_dropdown { opacity: 0; visibility: hidden; position: absolute; top: calc(100% + 8px); left: 0; width: 100%; transition: opacity 0.3s ease, visibility 0.3s ease; z-index: -1; background-color: rgb(255 255 255 / 90%); height: 200px; overflow-y: scroll; box-shadow: 2px 2px 8px rgb(0 0 0 / 10%); } .p-achievements__filter_dropdown.is-open { opacity: 1; visibility: visible; z-index: 10; } .p-achievements__filter_dropdown_list { padding: 0 16px; } .p-achievements__filter_dropdown_item + .p-achievements__filter_dropdown_item { border-top: 1px solid var(--color-border-gray); } .p-achievements__filter_dropdown_link { padding: 12px 0; display: block; } .p-achievements__result { margin-top: 60px; } @media screen and (width <= 1024px) { .p-achievements__result { width: calc(100vw - 20px); margin: 40px -20px 0 0; overflow-x: auto; -webkit-overflow-scrolling: touch; } } .p-achievements__table { margin-top: 24px; width: 100%; } @media screen and (width <= 1024px) { .p-achievements__table { width: auto; min-width: 750px; } } .p-achievements__head { background-color: var(--color-bg-blue); color: var(--color-white); font-weight: bold; padding: 12px; font-size: 14px; text-align: center; } .p-achievements__head + .p-achievements__head { border-left: 4px solid var(--color-white); } .p-achievements__cell { padding: 12px; font-size: 14px; } .p-achievements__cell.p-achievements__cell--even { background-color: var(--color-bg-gray); } .p-achievements__cell + .p-achievements__cell { border-left: 4px solid var(--color-white); } .p-achievements__load_more { margin-top: 40px; text-align: center; } .p-achievements__load_more:hover { cursor: pointer; } .p-aside_contact { background: url("../images/bg-aside_contact.png") center center/cover no-repeat; padding: 88px; margin-top: 180px; } @media screen and (width <= 1024px) { .p-aside_contact { padding: 60px 20px; margin-top: 96px; } } .p-aside_contact__content { padding: 80px; background-color: var(--color-white); max-width: 1080px; margin: 0 auto; } @media screen and (width <= 1024px) { .p-aside_contact__content { padding: 40px 20px; } } .p-aside_contact__content.p-aside_contact__content--top { position: relative; z-index: 1000; } .p-aside_contact__lead { margin-top: 32px; text-align: center; } .p-aside_contact__button { margin-top: 40px; } .p-breadcrumb { padding: 24px 40px; max-width: 1160px; margin: 0 auto; } @media screen and (width <= 1024px) { .p-breadcrumb { padding: 16px 20px; } } .p-breadcrumb__list { display: flex; gap: 0 24px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } @media screen and (width <= 1024px) { .p-breadcrumb__list { gap: 0 16px; } } .p-breadcrumb__item { align-items: center; position: relative; margin-right: 24px; } @media screen and (width <= 1024px) { .p-breadcrumb__item { margin-right: 16px; } } .p-breadcrumb__item::after { content: ""; display: block; background: url("data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iOSIgaGVpZ2h0PSIxNCIgdmlld0JveD0iMCAwIDkgMTQiIGZpbGw9Im5vbmUiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PHBhdGggZD0iTTEgMC41TDcuNSA3TDEgMTMuNSIgc3Ryb2tlPSIjQjJCMkIyIi8+PC9zdmc+") center center/100% no-repeat; width: 7px; height: 13px; position: absolute; top: 6px; right: -24px; } @media screen and (width <= 1024px) { .p-breadcrumb__item::after { right: -16px; } } .p-breadcrumb__item:last-of-type { margin-right: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .p-breadcrumb__item:last-of-type::after { display: none; } .p-breadcrumb__link { color: var(--color-bg-blue); transition: 0.3s; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } @media screen and (width <= 1024px) { .p-breadcrumb__link { font-size: 14px; } } .p-breadcrumb__link:hover { opacity: 0.5; } .wp-block-lazyblock-business-link + .wp-block-lazyblock-business-link { margin-top: 40px; } .p-business_link_card { display: flex; border: 1px solid var(--color-border-gray); transition: 0.3s; } @media screen and (width <= 1024px) { .p-business_link_card { display: block; } } .p-business_link_card:hover { opacity: 0.5; } .p-business_link_card__image { display: block; width: 520px; } @media screen and (width <= 1024px) { .p-business_link_card__image { width: 100%; } } .p-business_link_card__content { padding: 40px 32px 40px 48px; } @media screen and (width <= 1024px) { .p-business_link_card__content { padding: 16px 24px; } } .p-business_link_card__title { font-size: 24px; font-weight: 700; } @media screen and (width <= 1024px) { .p-business_link_card__title { font-size: 18px; } } .p-business_link_card__description { margin-top: 32px; } @media screen and (width <= 1024px) { .p-business_link_card__description { margin-top: 16px; } } .p-business_link_card__arrow { margin-top: 24px; text-align: right; } @media screen and (width <= 1024px) { .p-business_link_card__arrow { margin-top: 8px; } } .p-company_definition { margin-top: 120px; } @media screen and (width <= 1024px) { .p-company_definition { margin-top: 80px; } } .p-company_definition__lead { margin: 60px auto 0; max-width: 908px; padding: 0 40px; } @media screen and (width <= 1024px) { .p-company_definition__lead { margin-top: 40px; padding: 0 20px; } } .p-company_definition__body { margin-top: 60px; padding: 40px; background-color: var(--color-bg-gray); } @media screen and (width <= 1024px) { .p-company_definition__body { margin-top: 36px; padding: 20px; } } .p-company_definition__item { display: flex; padding-bottom: 24px; border-bottom: 1px solid var(--color-border-gray); } @media screen and (width <= 1024px) { .p-company_definition__item { display: block; padding-bottom: 16px; } } .p-company_definition__item + .p-company_definition__item { padding-top: 24px; } @media screen and (width <= 1024px) { .p-company_definition__item + .p-company_definition__item { padding-top: 16px; } } .p-company_definition__item:last-of-type { border-bottom: none; padding-bottom: 0; } .p-company_definition__term { flex-shrink: 0; width: 200px; } @media screen and (width <= 1024px) { .p-company_definition__term { width: 100%; font-weight: 400; } } .p-company_definition__description { padding-left: 32px; border-left: 1px solid var(--color-border-gray); } @media screen and (width <= 1024px) { .p-company_definition__description { border: none; padding: 0; margin-top: 4px; font-size: 14px; } } .p-company_definition__description p + p { margin-top: 16px; } .p-company_message { align-items: flex-start; display: flex; gap: 48px; } @media screen and (width <= 1024px) { .p-company_message { display: block; } } .p-company_message__image { width: 480px; display: block; } @media screen and (width <= 1024px) { .p-company_message__image { width: 100%; max-width: 480px; margin: 0 auto; } } @media screen and (width <= 1024px) { .p-company_message__content { margin-top: 36px; } } .p-company_message__body { margin-top: 60px; } @media screen and (width <= 1024px) { .p-company_message__body { margin-top: 24px; } } .p-company_message__body p + p { margin-top: 24px; } @media screen and (width <= 1024px) { .p-company_message__body p + p { margin-top: 16px; } } .p-company_message__president { text-align: right; font-weight: bold; font-size: 24px; font-family: "Noto Serif JP", serif; } @media screen and (width <= 1024px) { .p-company_message__president { font-size: 18px; } } .p-company_mission { margin-top: 120px; } @media screen and (width <= 1024px) { .p-company_mission { margin-top: 80px; } } .p-company_mission__body { margin: 60px auto 0; text-align: center; font-family: "Noto Serif JP", serif; font-size: 32px; line-height: 2; } @media screen and (width <= 1024px) { .p-company_mission__body { margin-top: 36px; font-size: 22px; } } @media screen and (width <= 1024px) { .p-company_office { padding: 0 20px; } } .p-company_office__list { margin-top: 60px; } @media screen and (width <= 1024px) { .p-company_office__list { margin-top: 40px; } } .p-company_office__item { background: var(--color-white); display: flex; gap: 16px; max-width: 1080px; margin: 0 auto; justify-content: space-between; } @media screen and (width <= 1024px) { .p-company_office__item { display: block; } } .p-company_office__item + .p-company_office__item { margin-top: 24px; } @media screen and (width <= 1024px) { .p-company_office__item + .p-company_office__item { margin-top: 20px; } } .p-company_office__item_content { padding: 40px; width: 100%; } @media screen and (width <= 1024px) { .p-company_office__item_content { padding: 20px; } } .p-company_office__item_header { display: flex; align-items: center; justify-content: space-between; gap: 16px; width: 100%; } .p-company_office__item_title { font-size: 24px; font-weight: bold; } @media screen and (width <= 1024px) { .p-company_office__item_title { font-size: 18px; } } .p-company_office__item_body { margin-top: 24px; } @media screen and (width <= 1024px) { .p-company_office__item_body { margin-top: 8px; font-size: 14px; line-height: 1.7; } } .p-company_office__item_map { position: relative; width: 100%; max-width: 520px; aspect-ratio: 520/310; overflow: hidden; } .p-company_office__item_map iframe { position: absolute; top: 0; left: 0; width: 100%; height: 100%; border: 0; } .p-contact_telephone__title { text-align: center; } .p-contact_telephone__content { display: flex; flex-direction: column; margin: 40px auto; background: var(--color-bg-gray); max-width: 828px; font-size: 24px; padding: 40px; } @media screen and (width <= 1024px) { .p-contact_telephone__content { font-size: 18px; padding: 20px; } } .p-contact_telephone__list { display: flex; justify-content: center; } @media screen and (width <= 1024px) { .p-contact_telephone__list { display: block; text-align: center; } } .p-contact_telephone__list + .p-contact_telephone__list { margin-top: 32px; } @media screen and (width <= 1024px) { .p-contact_telephone__list + .p-contact_telephone__list { margin-top: 16px; } } .p-contact_telephone__place { padding-right: 24px; margin-right: 24px; border-right: 1px solid var(--color-border-gray); } @media screen and (width <= 1024px) { .p-contact_telephone__place { margin: 0; padding: 0; border: none; } } .p-contact_telephone__number { color: var(--color-bg-blue); font-weight: bold; } .p-document > *:first-child { margin-top: 0; } .p-document h5 { margin-top: 16px; } .p-document h5 + p { margin-top: 12px; } .p-document p, .p-document ul, .p-document ol { margin-top: 24px; } .p-document p + h5, .p-document ul + h5, .p-document ol + h5 { margin-top: 24px; } .p-document li { position: relative; padding-left: 20px; } .p-document li::before { content: "・"; display: block; position: absolute; top: 0; left: 0; } .p-document li + li { margin-top: 16px; } .p-document ol { counter-reset: list; } .p-document ol > li { counter-increment: list; padding-left: 24px; } .p-document ol > li::before { content: counter(list) "."; position: absolute; top: 0; left: 0; } .p-document h3 { margin-top: 80px; font-size: 24px; font-weight: bold; } .p-document h4 { font-weight: bold; margin-top: 24px; } .p-document h4 + p, .p-document h4 + ul, .p-document h4 + ol { margin-top: 16px; } .p-document h5 { margin-top: 16px; } .p-document h5 + p { margin-top: 12px; } .p-document a { color: var(--color-bg-blue); text-decoration: underline; transition: all 0.3s; } .p-document a:hover { opacity: 0.5; } .p-document__title { font-size: 32px; font-weight: bold; margin-top: 8px; } .p-document__body { margin-top: 48px; } .p-document__body > *:first-child { margin-top: 0; } .p-document__back { margin-top: 80px; text-align: center; } .p-footer { background: url("../images/bg-footer.png") center bottom/cover no-repeat; padding: 96px 0 156px; } @media screen and (width <= 1024px) { .p-footer { padding: 120px 0 48px; background-size: contain; } } .p-footer__inner { max-width: 1082px; margin: 0 auto; } @media screen and (width <= 1024px) { .p-footer__inner { padding: 0 20px; } } .p-footer__company_name { display: grid; grid-auto-flow: column; grid-auto-columns: max-content; justify-content: center; align-items: center; gap: 0 16px; } .p-footer__company_logo { grid-column: 1/2; grid-row: 1/3; } .p-footer__company_sub_heading { grid-column: 2/3; grid-row: 1/2; font-size: 14px; line-height: 1.5; } @media screen and (width <= 1024px) { .p-footer__company_sub_heading { font-size: 10px; } } .p-footer__company_heading { grid-column: 2/3; grid-row: 2/3; font-size: 30px; font-weight: 700; } @media screen and (width <= 1024px) { .p-footer__company_heading { font-size: 20px; } } .p-footer__navigation { margin-top: 64px; display: grid; } @media screen and (width <= 1024px) { .p-footer__navigation { display: block; } } .p-footer__navigation_block { display: flex; grid-column: 1/2; } @media screen and (width <= 1024px) { .p-footer__navigation_block { display: block; } } .p-footer__navigation_block + .p-footer__navigation_block { margin-top: 24px; } .p-footer__navigation_block.p-footer__navigation_block--aside { grid-column: 2/3; grid-row: 1/3; margin-top: 0; } @media screen and (width <= 1024px) { .p-footer__navigation_block.p-footer__navigation_block--aside { margin-top: 16px; padding-top: 8px; border-top: 0.5px solid var(--color-border-gray); } } .p-footer__navigation_heading { font-weight: 700; padding-right: 16px; margin-right: 16px; border-right: var(--color-border-gray) 1px solid; } @media screen and (width <= 1024px) { .p-footer__navigation_heading { border: none; } } .p-footer__navigation_list { display: flex; gap: 0 24px; } @media screen and (width <= 1024px) { .p-footer__navigation_list { margin-top: 8px; gap: 0 12px; } } @media screen and (width <= 1024px) { .p-footer__navigation_link { font-size: 14px; } } .p-footer__office_list { display: flex; gap: 0 80px; margin-top: 76px; } @media screen and (width <= 1024px) { .p-footer__office_list { display: block; } } .p-footer__office_item { font-size: 14px; line-height: 1.714; } @media screen and (width <= 1024px) { .p-footer__office_item + .p-footer__office_item { margin-top: 24px; } } .p-footer__office_name { font-weight: 700; font-size: 15px; } .p-footer__copyright { font-size: 12px; text-align: center; margin-top: 84px; } @media screen and (width <= 1024px) { .p-footer__copyright { margin-top: 48px; } } .p-form h3 { font-size: 32px; font-weight: 700; font-family: "Noto Serif JP", sans-serif; } @media screen and (width <= 1024px) { .p-form h3 { font-size: 24px; } } .wpcf7-form { background: var(--color-bg-gray); padding: 40px; margin-top: 40px; } @media screen and (width <= 1024px) { .wpcf7-form { padding: 24px 20px; } } .wpcf7-form dl { display: flex; padding-bottom: 24px; border-bottom: 1px solid var(--color-border-gray); } @media screen and (width <= 1024px) { .wpcf7-form dl { display: block; border: none; } } .wpcf7-form dl + dl { padding-top: 24px; } @media screen and (width <= 1024px) { .wpcf7-form dl + dl { border-top: 1px solid var(--color-border-gray); } } .wpcf7-form dl:last-of-type { border-bottom: none; padding-bottom: 0; } .wpcf7-form dl dt { flex-shrink: 0; width: 200px; font-weight: bold; } @media screen and (width <= 1024px) { .wpcf7-form dl dt { width: 100%; font-weight: 400; margin-bottom: 8px; } } .wpcf7-form dl dd { padding-inline: 32px; border-left: 1px solid var(--color-border-gray); width: 100%; } @media screen and (width <= 1024px) { .wpcf7-form dl dd { padding: 0; border: none; } } @media screen and (width <= 1024px) { .wpcf7-form dl dd + dd { margin-top: 8px; } } .wpcf7-form dl dd p { display: flex; align-items: center; font-weight: bold; gap: 8px; white-space: nowrap; width: 100%; } @media screen and (width <= 1024px) { .wpcf7-form dl dd p { font-weight: 400; } } .wpcf7-form dl dd p span { width: 100%; } .wpcf7-form dl dd p + p { margin-top: 16px; } .wpcf7-form input[type="text"], .wpcf7-form input[type="email"], .wpcf7-form input[type="tel"], .wpcf7-form textarea { background-color: var(--color-white); width: 100%; border: 1px solid var(--color-border-gray); border-radius: 4px; padding: 7px 16px; font-weight: normal; } .wpcf7-form input[type="text"]::placeholder, .wpcf7-form input[type="email"]::placeholder, .wpcf7-form input[type="tel"]::placeholder, .wpcf7-form textarea::placeholder { color: var(--color-text-gray); } .wpcf7-form input[type="text"]::placeholder, .wpcf7-form input[type="email"]::placeholder, .wpcf7-form input[type="tel"]::placeholder, .wpcf7-form textarea::placeholder { color: var(--color-text-gray); } .wpcf7-form input[type="submit"] { max-width: 710px; margin: 0 auto; display: flex; height: 124px; align-items: center; justify-content: center; color: var(--color-white); font-size: 32px; border-radius: 999px; background: url("data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iNjMiIGhlaWdodD0iNjQiIHZpZXdCb3g9IjAgMCA2MyA2NCIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj48cGF0aCBkPSJNMzEuMTU1OCAyNy43OTU5TDM2IDMyLjI5NTlNMzYgMzIuMjk1OUwzMS4xNTU4IDM2Ljc5NTlNMzYgMzIuMjk1OUgyNi43NTIiIHN0cm9rZT0id2hpdGUiIHN0cm9rZS13aWR0aD0iMiIgc3Ryb2tlLWxpbmVjYXA9InJvdW5kIiBzdHJva2UtbGluZWpvaW49InJvdW5kIi8+PGNpcmNsZSBjeD0iMzEuNSIgY3k9IjMyLjI5NTkiIHI9IjMwLjUiIHN0cm9rZT0iI0Q0Q0RDRCIgc3Ryb2tlLXdpZHRoPSIyIi8+PC9zdmc+") center right 26px/63px 63px no-repeat; background-color: var(--color-green); text-align: center; transition: 0.3s; margin-top: 80px; width: 100%; } @media screen and (width <= 1024px) { .wpcf7-form input[type="submit"] { height: 64px; font-size: 22px; background-size: 36px 36px; } } .wpcf7-form input[type="submit"]:hover { opacity: 0.5; cursor: pointer; } .wpcf7-form select { background-color: var(--color-white); width: 100%; border: 1px solid var(--color-border-gray); border-radius: 4px; padding: 7px 16px; font-weight: normal; line-height: 1.5; } .wpcf7-form select::placeholder { color: var(--color-text-gray); } .wpcf7-form select::placeholder { color: var(--color-text-gray); } .wpcf7-form-control-wrap:has(select) { display: block; position: relative; } .wpcf7-form-control-wrap:has(select)::after { content: ""; position: absolute; top: 50%; right: 16px; width: 12px; height: 12px; border-bottom: 1px solid var(--color-border-gray); border-right: 1px solid var(--color-border-gray); transform: translateY(-50%) rotate(45deg); } .p-form__aside { margin-top: 120px; } .wpcf7-response-output { border: none !important; text-align: center; } .p-gallery { margin: 96px auto 0; width: 1108px; padding: 0 40px; } @media screen and (width <= 1024px) { .p-gallery { margin-top: 60px; width: calc(100% - 40px); padding: 0; } } .p-gallery__list { display: flex; flex-wrap: wrap; gap: 64px; } @media screen and (width <= 1024px) { .p-gallery__list { gap: 24px; } } .p-gallery__item { width: 300px; } @media screen and (width <= 1024px) { .p-gallery__item { width: calc(50% - 12px); } } .p-gallery__link { display: block; transition: 0.3s; } .p-gallery__link:hover { opacity: 0.8; } .p-gallery__image { display: block; width: 300px; height: 300px; object-fit: cover; object-fit: cover; } @media screen and (width <= 1024px) { .p-gallery__image { width: calc(50vw - 32px); height: calc(50vw - 32px); } } .p-gallery__title { margin-top: 12px; } @media screen and (width <= 1024px) { .p-gallery__title { font-size: 14px; margin-top: 8px; } } .p-gallery_detail { margin: 96px auto 0; width: 1160px; padding: 0 40px; } @media screen and (width <= 1024px) { .p-gallery_detail { margin-top: 60px; width: calc(100% - 40px); padding: 0; } } .p-gallery_detail__item { width: 100%; max-height: 634px; background-color: var(--color-black); display: flex; align-items: center; justify-content: center; } @media screen and (width <= 1024px) { .p-gallery_detail__item { max-height: 260px; } } .p-gallery_detail__image { max-height: 634px; width: 100%; display: block; object-fit: contain; object-fit: contain; margin: 0 auto; } @media screen and (width <= 1024px) { .p-gallery_detail__image { max-height: 260px; } } .p-gallery_detail__main_slider { max-height: 634px; } @media screen and (width <= 1024px) { .p-gallery_detail__main_slider { max-height: 260px; } } .p-gallery_detail__sub_slider { background-color: var(--color-bg-gray); margin-top: 4px; } .p-gallery_detail__sub_item { width: 120px !important; height: 120px; } @media screen and (width <= 1024px) { .p-gallery_detail__sub_item { width: 40px !important; height: 40px; } } .p-gallery_detail__sub_image { display: block; width: 100%; height: 100%; object-fit: cover; object-fit: cover; } .p-gallery_detail__content { margin-top: 60px; } @media screen and (width <= 1024px) { .p-gallery_detail__content { margin-top: 40px; } } .p-gallery_detail__title { font-size: 32px; font-weight: 700; } @media screen and (width <= 1024px) { .p-gallery_detail__title { font-size: 24px; } } .p-gallery_detail__body { margin-top: 32px; } @media screen and (width <= 1024px) { .p-gallery_detail__body { margin-top: 24px; } } .p-gallery_detail__list_wrap { display: flex; flex-wrap: wrap; margin-top: 32px; gap: 4px; } @media screen and (width <= 1024px) { .p-gallery_detail__list_wrap { margin-top: 24px; } } .p-gallery_detail__list { width: calc(50% - 2px); display: flex; } @media screen and (width <= 1024px) { .p-gallery_detail__list { width: 100%; } } .p-gallery_detail__term { width: 29.3%; background-color: var(--color-bg-blue); color: var(--color-white); padding: 12px 16px; text-align: center; } .p-gallery_detail__description { width: 70.7%; padding: 12px 16px; font-size: 14px; line-height: 1.5; } .p-gallery_detail__description.p-gallery_detail__description--pc_even { background-color: var(--color-bg-gray); } @media screen and (width <= 1024px) { .p-gallery_detail__description.p-gallery_detail__description--pc_even { background-color: transparent; } } @media screen and (width <= 1024px) { .p-gallery_detail__description.p-gallery_detail__description--sp_even { background-color: var(--color-bg-gray); } } .p-header { color: var(--color-white); position: fixed; display: block; width: 100%; height: 108px; z-index: 9999; } @media screen and (width <= 1024px) { .p-header { height: 72px; } } .p-header.p-header--page { background-color: rgb(255 255 255 / 80%); color: var(--color-black); } .p-header.is-scrolled { background-color: rgb(255 255 255 / 80%); color: var(--color-black); } .p-header__inner { display: flex; justify-content: space-between; align-items: center; max-width: 1512px; margin: 0 auto; padding: 0 0 0 40px; height: 108px; } @media screen and (width <= 1024px) { .p-header__inner { height: 72px; padding: 0 20px; } } @media screen and (width <= 1024px) { .p-header__inner.is-open { background: var(--color-white); color: var(--color-black); } } .p-header__company_name { display: block; } .p-header__company_sub_heading { font-size: 1.2rem; letter-spacing: 0; } @media screen and (width <= 1024px) { .p-header__company_sub_heading { font-size: 1rem; } } .p-header__company_heading { font-size: 2.6rem; font-weight: bold; letter-spacing: 0.1em; } @media screen and (width <= 1024px) { .p-header__company_heading { font-size: 2rem; } } @media screen and (width <= 1024px) { .p-header__navigation { display: none; } } @media screen and (width <= 1024px) { .p-header__navigation.is-open { display: block; position: absolute; top: 72px; left: 0; width: 100%; height: calc(100vh - 72px); background-color: var(--color-white); z-index: 200; } } .p-header__menu-button { display: none; } @media screen and (width <= 1024px) { .p-header__menu-button { display: block; width: 32px; height: 32px; background-color: currentcolor; mask: url("data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iNDYiIGhlaWdodD0iNDYiIHZpZXdCb3g9IjAgMCA0NiA0NiIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj48cmVjdCB5PSI3IiB3aWR0aD0iNDYiIGhlaWdodD0iNCIgZmlsbD0id2hpdGUiLz48cmVjdCB5PSIyMSIgd2lkdGg9IjQ2IiBoZWlnaHQ9IjQiIGZpbGw9IndoaXRlIi8+PHJlY3QgeT0iMzUiIHdpZHRoPSI0NiIgaGVpZ2h0PSI0IiBmaWxsPSJ3aGl0ZSIvPjwvc3ZnPg==") center center/contain no-repeat; mask: url("data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iNDYiIGhlaWdodD0iNDYiIHZpZXdCb3g9IjAgMCA0NiA0NiIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj48cmVjdCB5PSI3IiB3aWR0aD0iNDYiIGhlaWdodD0iNCIgZmlsbD0id2hpdGUiLz48cmVjdCB5PSIyMSIgd2lkdGg9IjQ2IiBoZWlnaHQ9IjQiIGZpbGw9IndoaXRlIi8+PHJlY3QgeT0iMzUiIHdpZHRoPSI0NiIgaGVpZ2h0PSI0IiBmaWxsPSJ3aGl0ZSIvPjwvc3ZnPg==") center center/contain no-repeat; cursor: pointer; } } @media screen and (width <= 1024px) { .p-header__menu-button.is-open { background-color: var(--color-black); mask-image: url("data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iNDYiIGhlaWdodD0iNDYiIHZpZXdCb3g9IjAgMCA0NiA0NiIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj48cmVjdCB4PSI4LjE1MDUxIiB5PSI1IiB3aWR0aD0iNDYiIGhlaWdodD0iNCIgdHJhbnNmb3JtPSJyb3RhdGUoNDUgOC4xNTA1MSA1KSIgZmlsbD0id2hpdGUiLz48cmVjdCB4PSI1LjMyMjM5IiB5PSIzOS41MjY5IiB3aWR0aD0iNDYiIGhlaWdodD0iNCIgdHJhbnNmb3JtPSJyb3RhdGUoLTQ1IDUuMzIyMzkgMzkuNTI2OSkiIGZpbGw9IndoaXRlIi8+PC9zdmc+"); mask-image: url("data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iNDYiIGhlaWdodD0iNDYiIHZpZXdCb3g9IjAgMCA0NiA0NiIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj48cmVjdCB4PSI4LjE1MDUxIiB5PSI1IiB3aWR0aD0iNDYiIGhlaWdodD0iNCIgdHJhbnNmb3JtPSJyb3RhdGUoNDUgOC4xNTA1MSA1KSIgZmlsbD0id2hpdGUiLz48cmVjdCB4PSI1LjMyMjM5IiB5PSIzOS41MjY5IiB3aWR0aD0iNDYiIGhlaWdodD0iNCIgdHJhbnNmb3JtPSJyb3RhdGUoLTQ1IDUuMzIyMzkgMzkuNTI2OSkiIGZpbGw9IndoaXRlIi8+PC9zdmc+"); } } .p-header--page .p-header__menu-button { background-color: var(--color-black); } .p-navigation_header { align-items: center; display: flex; gap: 40px; } @media screen and (width <= 1024px) { .p-navigation_header { padding: 0 20px; display: block; } } .p-navigation_header__item { font-size: 1.6rem; position: relative; } @media screen and (width <= 1024px) { .p-navigation_header__item { padding-inline: 20px; } } @media screen and (width <= 1024px) { .p-navigation_header__item + .p-navigation_header__item { border-top: 1px solid var(--color-border-gray); margin-top: 16px; padding-top: 16px; } } .p-navigation_header__item.p-navigation_header__item--contact { font-size: 2.1rem; height: 108px; display: flex; padding: 0 36px; align-items: center; background-color: var(--color-green); color: var(--color-white); } @media screen and (width <= 1024px) { .p-navigation_header__item.p-navigation_header__item--contact { height: 48px; line-height: 48px; border-radius: 24px; font-size: 1.6rem; text-align: center; display: inline-block; margin-top: 36px; } } .p-navigation_header__link { cursor: pointer; display: block; padding: 42px 16px; transition: 0.3s; } @media screen and (width <= 1024px) { .p-navigation_header__link { padding: 0; } } .p-navigation_header__link.p-navigation_header__link--button { position: relative; padding-right: 16px; } .p-navigation_header__link.p-navigation_header__link--button::after { content: ""; position: absolute; top: 50%; right: 0; width: 8px; height: 8px; margin-top: -2px; border-right: 1px solid currentcolor; border-bottom: 1px solid currentcolor; transform: rotate(45deg) translateY(-50%); } .p-navigation_header__link:hover { opacity: 0.5; } .p-navigation_header__child { color: var(--color-black); background-color: rgb(255 255 255 / 80%); overflow: hidden; opacity: 0; visibility: hidden; transition: max-height 0.4s ease, opacity 0.3s ease, visibility 0.3s ease; position: absolute; top: calc(100% + 8px); left: 0; width: max-content; width: max-content; padding: 16px; z-index: 9999; box-shadow: 0 4px 16px rgb(0 0 0 / 10%); } @media screen and (width <= 1024px) { .p-navigation_header__child { display: block; position: static; visibility: visible; box-shadow: none; opacity: 1; max-height: none; padding: 0 0 0 20px; margin-top: 16px; } } .p-navigation_header__child.is-open { opacity: 1; visibility: visible; } .p-navigation_header__child_item + .p-navigation_header__child_item { margin-top: 16px; } .p-navigation_header__child_link { padding: 16px 0; } @media screen and (width <= 1024px) { .p-navigation_header__child_link { font-size: 1.4rem; } } .p-news_list { max-width: 1160px; padding: 40px 72px; margin: 0 auto; border: 1px solid #b2b2b2; } .p-news_list__item { border-bottom: 1px solid #b2b2b2; } .p-news_list__item:last-child { border-bottom: none; } .p-news_list__link { padding-block: 24px; position: relative; display: flex; transition: 0.3s; } .p-news_list__link::after { content: ""; display: block; position: absolute; width: 47px; height: 47px; top: 50%; right: 0; transform: translateY(-50%); background: url("data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iNDciIGhlaWdodD0iNDgiIHZpZXdCb3g9IjAgMCA0NyA0OCIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj48Y2lyY2xlIGN4PSIyMy41IiBjeT0iMjQuNDcxMiIgcj0iMTYuNSIgc3Ryb2tlPSIjRTREREREIiBzdHJva2Utd2lkdGg9IjIiLz48cGF0aCBkPSJNMjMuNDU3NCAyMC40NzEyTDI3LjEyNCAyMy45NzEyTTI3LjEyNCAyMy45NzEyTDIzLjQ1NzQgMjcuNDcxMk0yNy4xMjQgMjMuOTcxMkgyMC4xMjQiIHN0cm9rZT0iIzVDQjc0RiIgc3Ryb2tlLXdpZHRoPSIxLjUiIHN0cm9rZS1saW5lY2FwPSJyb3VuZCIgc3Ryb2tlLWxpbmVqb2luPSJyb3VuZCIvPjwvc3ZnPg==") center/100% no-repeat; } .p-news_list__link:hover { opacity: 0.5; } .p-news_list__date { display: block; padding-right: 24px; margin-right: 24px; border-right: 1px solid #b2b2b2; } .p-news_list__load_more { margin-top: 40px; text-align: center; } .p-news_list__load_more:hover { cursor: pointer; } .p-page_header { position: relative; padding-top: 108px; height: 508px; width: 100vw; } @media screen and (width <= 1024px) { .p-page_header { height: 272px; padding: 72px 20px 0; } } .p-page_header__inner { max-width: 1080px; margin: 0 auto; display: flex; align-items: center; height: 100%; } .p-page_header__content { background-color: rgb(255 255 255 / 70%); padding: 16px 24px; } @media screen and (width <= 1024px) { .p-page_header__content { padding: 8px 12px; } } .p-page_header__title_en { font-family: "Noto Serif JP", serif; font-weight: 700; } @media screen and (width <= 1024px) { .p-page_header__title_en { font-size: 14px; } } .p-page_header__title { font-size: 48px; font-family: "Noto Serif JP", serif; } @media screen and (width <= 1024px) { .p-page_header__title { font-size: 32px; } } .p-page_header__image { position: absolute; top: 0; left: 0; width: 100%; height: 100%; z-index: -1; } .p-page_header__image_body { width: 100%; height: 100%; z-index: -1; object-fit: cover; object-fit: cover; object-position: center; object-position: center; } .p-page_header__meta_item { display: flex; align-items: center; margin-top: 8px; } @media screen and (width <= 1024px) { .p-page_header__meta_item { font-size: 12px; margin-top: 2px; } } .p-page_header__meta_term { font-weight: bold; width: 75px; } @media screen and (width <= 1024px) { .p-page_header__meta_term { width: 58px; } } .p-page_header__meta_description::before { content: ": "; } .p-recruit_link { text-align: center; margin-top: 40px; } .p-top_business { position: relative; padding: 182px 0 0; margin-top: -36px; background: url("../images/bg-top_business.png") center center/auto 100% no-repeat; } @media screen and (width <= 1024px) { .p-top_business { padding: 60px 20px; margin-top: 0; background-size: cover; } } .p-top_business__inner { max-width: 1082px; margin: 0 auto; } .p-top_business__list { display: flex; gap: 24px; margin-top: 56px; } @media screen and (width <= 1024px) { .p-top_business__list { display: block; } } .p-top_business__item { width: 33.3333333333%; } @media screen and (width <= 1024px) { .p-top_business__item { width: 100%; } } @media screen and (width <= 1024px) { .p-top_business__item + .p-top_business__item { margin-top: 16px; } } .p-top_contact { background: url("../images/bg-top_contact.png") center center/cover no-repeat; background-color: var(--color-bg-blue); padding: 104px 0 318px; position: relative; } @media screen and (width <= 1024px) { .p-top_contact { padding: 60px 20px; } } .p-top_company { overflow: hidden; } .p-top_company__inner { position: relative; padding: 408px 0 200px; z-index: 1; width: 1080px; margin: 0 auto; } @media screen and (width <= 1024px) { .p-top_company__inner { padding: 60px 20px; width: 100%; } } .p-top_company__inner::after { content: ""; position: absolute; top: 0; left: 50%; transform: translateX(-50%); width: 2600px; height: 1497px; background: url("../images/bg-top_company.png") center center/100% 100% no-repeat; margin-top: -140px; } @media screen and (width <= 1024px) { .p-top_company__inner::after { width: 100%; height: 100%; margin-top: 0; background: url("../images/bg-top_company--sp.png") center center/cover no-repeat; } } .p-top_company__content { color: var(--color-white); position: relative; z-index: 1; background-color: var(--color-bg-blue); max-width: 540px; padding: 56px 38px 46px; } @media screen and (width <= 1024px) { .p-top_company__content { padding: 32px 20px; } } .p-top_company__lead { font-size: 24px; margin-top: 64px; line-height: 1.6666; } @media screen and (width <= 1024px) { .p-top_company__lead { margin-top: 32px; font-size: 20px; } } .p-top_company__description { margin-top: 32px; line-height: 2.1875; } @media screen and (width <= 1024px) { .p-top_company__description { margin-top: 24px; } } .p-top_company__button { margin-top: 52px; text-align: right; } @media screen and (width <= 1024px) { .p-top_company__button { margin-top: 32px; } } .p-top_keyvisual { background: url("../images/img-top_keyvisual.jpg") no-repeat center bottom/cover; height: 100vh; position: relative; } .p-top_keyvisual__title { display: inline-block; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); } @media screen and (width <= 1024px) { .p-top_keyvisual__title { width: 90vw; max-width: 600px; } } .p-top_keyvisual__news_container { position: absolute; bottom: 0; left: 50%; transform: translateX(-50%); display: flex; align-items: center; padding-bottom: 16px; max-width: 1020px; width: 100%; } @media screen and (width <= 1024px) { .p-top_keyvisual__news_container { padding: 0 20px; } } .p-top_keyvisual__news_list { display: flex; margin-left: 38px; } .p-top_keyvisual__news_item { border-left: 1px solid var(--color-white); width: 33.3333333333%; transition: 0.3s; } @media screen and (width <= 1024px) { .p-top_keyvisual__news_item { width: 100%; } } @media screen and (width <= 1024px) { .p-top_keyvisual__news_item:nth-of-type(n + 2) { display: none; } } .p-top_keyvisual__news_item:hover { opacity: 0.5; } .p-top_news_item { color: var(--color-white); position: relative; padding: 16px 100px 16px 24px; display: block; } .p-top_news_item::after { background: url("data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iNDciIGhlaWdodD0iNDciIHZpZXdCb3g9IjAgMCA0NyA0NyIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPGNpcmNsZSBjeD0iMjMuNSIgY3k9IjIzLjUiIHI9IjE2LjUiIHN0cm9rZT0iI0U0RERERCIgc3Ryb2tlLXdpZHRoPSIyIi8+CjxwYXRoIGQ9Ik0yMy40NTc0IDE5LjVMMjcuMTI0IDIzTTI3LjEyNCAyM0wyMy40NTc0IDI2LjVNMjcuMTI0IDIzSDIwLjEyNCIgc3Ryb2tlPSJ3aGl0ZSIgc3Ryb2tlLXdpZHRoPSIxLjUiIHN0cm9rZS1saW5lY2FwPSJyb3VuZCIgc3Ryb2tlLWxpbmVqb2luPSJyb3VuZCIvPgo8L3N2Zz4K") center center/100% no-repeat; content: ""; display: block; position: absolute; top: 50%; right: 24px; transform: translateY(-50%); width: 47px; height: 47px; } .p-top_news_item__title { margin-top: 6px; font-size: 1.4rem; } .p-top_recruit { overflow-x: hidden; position: relative; height: 1416px; z-index: 1; margin-top: -500px; } @media screen and (width <= 1024px) { .p-top_recruit { margin-top: 0; height: auto; background: url("../images/bg-top_recruit--sp.jpg") center center/cover no-repeat; } } .p-top_recruit::after { content: ""; position: absolute; top: 50%; left: 50%; transform: translateX(-50%) translateY(-50%); width: 2460px; height: 1416px; background: url("../images/bg-top_recruit.png") center center/100% no-repeat; } @media screen and (width <= 1024px) { .p-top_recruit::after { display: none; } } .p-top_recruit__inner { width: 1160px; margin: 0 auto; padding: 0 40px; } @media screen and (width <= 1024px) { .p-top_recruit__inner { width: 100%; padding: 60px 20px; } } .p-top_recruit__content { position: relative; z-index: 1; background-color: var(--color-white); max-width: 540px; padding: 56px 38px 46px; margin-left: auto; margin-top: 460px; } @media screen and (width <= 1024px) { .p-top_recruit__content { padding: 32px 20px; margin: 0; } } .p-top_recruit__lead { font-size: 24px; margin-top: 64px; line-height: 1.6666; } @media screen and (width <= 1024px) { .p-top_recruit__lead { font-size: 20px; margin-top: 32px; } } .p-top_recruit__description { margin-top: 32px; line-height: 2.1875; } .p-top_recruit__button { margin-top: 52px; text-align: right; } .p-top_works { background-color: var(--color-bg-blue); margin-top: 104px; padding-top: 104px; } @media screen and (width <= 1024px) { .p-top_works { margin-top: 0; padding-top: 60px; } } .p-top_works__list { display: flex; margin-top: 56px; position: relative; } @media screen and (width <= 1024px) { .p-top_works__list { margin-top: 40px; } } .p-top_works__item { width: 360px; height: 563px; } .p-top_works__link { width: 100%; height: 100%; } .p-top_works__image { width: 100%; height: 100%; object-fit: cover; object-fit: cover; } .p-top_works__arrow { position: absolute; top: 50%; right: 24px; transform: translateY(-50%); width: 63px; height: 64px; background-image: url("data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iNjMiIGhlaWdodD0iNjMiIHZpZXdCb3g9IjAgMCA2MyA2MyIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj48Y2lyY2xlIGN4PSIzMS41IiBjeT0iMzEuNSIgcj0iMzEuNSIgZmlsbD0iYmxhY2siIGZpbGwtb3BhY2l0eT0iMC44Ii8+PGNpcmNsZSBjeD0iMzEuNSIgY3k9IjMxLjUiIHI9IjMwLjUiIHN0cm9rZT0id2hpdGUiIHN0cm9rZS1vcGFjaXR5PSIwLjgiIHN0cm9rZS13aWR0aD0iMiIvPjxwYXRoIGQ9Ik0zMS40MDM4IDI3TDM2LjI0OCAzMS41TTM2LjI0OCAzMS41TDMxLjQwMzggMzZNMzYuMjQ4IDMxLjVIMjciIHN0cm9rZT0id2hpdGUiIHN0cm9rZS1vcGFjaXR5PSIwLjgiIHN0cm9rZS13aWR0aD0iMiIgc3Ryb2tlLWxpbmVjYXA9InJvdW5kIiBzdHJva2UtbGluZWpvaW49InJvdW5kIi8+PC9zdmc+"); background-repeat: no-repeat; background-size: contain; transition: 0.3s; } .p-top_works__arrow:hover { cursor: pointer; opacity: 0.5; } .p-top_works__arrow.p-top_works__arrow--prev { right: auto; left: 24px; transform: rotate(180deg) translateY(50%); } /* -------------------------------------------------- Utility -------------------------------------------------- */ .u-animate_fade_in--up { opacity: 0; transform: translateY(20px); transition: opacity 0.6s ease-out, transform 0.6s ease-out; } .u-animate_fade_in--up.is-view { opacity: 1; transform: translateY(0); } .u-animate_fade_in--down { opacity: 0; transform: translateY(-20px); transition: opacity 0.6s ease-out, transform 0.6s ease-out; } .u-animate_fade_in--down.is-view { opacity: 1; transform: translateY(0); } .u-animate_fade_in--left { opacity: 0; transform: translateX(20px); transition: opacity 0.6s ease-out, transform 0.6s ease-out; } .u-animate_fade_in--left.is-view { opacity: 1; transform: translateX(0); } .u-animate_fade_in--right { opacity: 0; transform: translateX(-20px); transition: opacity 0.6s ease-out, transform 0.6s ease-out; } .u-animate_fade_in--right.is-view { opacity: 1; transform: translateX(0); } .u-animate_fade_in--scale { opacity: 0; transform: scale(0.95); transition: opacity 0.6s ease-out, transform 0.6s ease-out; } .u-animate_fade_in--scale.is-view { opacity: 1; transform: scale(1); } .u-animate_fade_in--blur { opacity: 0; filter: blur(4px); transition: opacity 0.8s ease-out, filter 0.8s ease-out; } .u-animate_fade_in--blur.is-view { opacity: 1; filter: blur(0); } .u-hide { display: none; } @media screen and (width >= 1025px) { .u-hide_pc { display: none; } } @media screen and (width <= 1024px) { .u-hide_mobile { display: none; } } /* !*********************************************************************************************************************************************************************************************************************************************************************!*\ !*** css ./node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[1].use[1]!./node_modules/postcss-loader/dist/cjs.js??ruleSet[1].rules[1].use[2]!./node_modules/sass-loader/dist/cjs.js??ruleSet[1].rules[1].use[3]!./node_modules/keen-slider/keen-slider.min.css ***! \ *********************************************************************************************************************************************************************************************************************************************************************/ .keen-slider:not([data-keen-slider-disabled]) { -webkit-touch-callout: none; -webkit-tap-highlight-color: transparent; align-content: flex-start; display: flex; overflow: hidden; position: relative; touch-action: pan-y; user-select: none; user-select: none; user-select: none; user-select: none; width: 100%; } .keen-slider:not([data-keen-slider-disabled]) .keen-slider__slide { min-height: 100%; overflow: hidden; position: relative; width: 100%; } .keen-slider:not([data-keen-slider-disabled])[data-keen-slider-reverse] { flex-direction: row-reverse; } .keen-slider:not([data-keen-slider-disabled])[data-keen-slider-v] { flex-wrap: wrap; }