@charset "UTF-8"; /* *** Variables *** */ /* Font Size */ /* Font Family */ /* Breakpoint */ /* Header Height */ /* Container */ /* Section */ /* Spacing */ /* Transition */ /* Opacity */ /* Plugin Navigation */ /* Color */ /* *** Functions *** */ /* *** Mixins *** */ /* PC Layout */ /* SP Layout */ /* Hover Opacity */ /* Plugin Nav Chevron */ /* Columns */ /* Columns Ratio（$first / $second は % 指定。例: 24%, 76%） */ /* SP Columns */ /* *** Default Settings *** */ /* Setting */ :root { --pc-min-width: 768px; --sp-max-width: 767.98px; --container-sm: 800px; --container-md: 1130px; --container-lg: 1200px; --block-spacing: 64px; --content-spacing: 40px; --content-spacing-sm: 24px; --gap: 24px; --transition: 0.3s ease; --opacity: 0.7; --borderRadius: 24px; --fw-light: 300; --fw-regular: 400; --fw-medium: 500; --fw-semibold: 600; --fw-bold: 700; --color-black: #000000; --color-dark-gray: #333333; --color-white: #FFFFFF; --color-light-gray-01: #F7F7F7; --color-light-gray-02: #D9D9D9; --plugin-nav-color: var(--color-white); --color-accent: #0d81cf; --color-error: #E72A2B; --color-modal: #FE7D21; --color-primary: #0B8DEB; --color-secondary: #273142; --font-family: Hiragino Kaku Gothic ProN, Hiragino Sans, Helvetica Neue, Arial, Meiryo, sans-serif; } @media (min-width: 768px) { :root { --headerH: 80px; --spacing: 32px; --section-spacing: 124px; } } @media (max-width: 767.98px) { :root { --headerH: 54px; --spacing: 12px; --section-spacing: 80px; } } /* *** Careers Override Setting *** */ .p-careers-top, .p-careers { --color-primary: #6AA0F7; --color-secondary: #9BC0FB; --font-family: Zen Maru Gothic, sans-serif; } /*** 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):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; } /* 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 { -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 */ /* 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; } /* *** Base *** */ :where(html) { font-size: 100%; text-rendering: optimizeLegibility; font-synthesis: none; -webkit-text-size-adjust: 100%; text-size-adjust: 100%; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; scroll-behavior: smooth; } :where(body) { font-family: var(--font-family); font-size: 1rem; line-height: 1.6; color: var(--color-black); background-color: var(--color-white); } @media (prefers-reduced-motion: reduce) { :where(html) { scroll-behavior: auto !important; } } /* *** Elements *** */ /* 要素の初期設定 */ a { text-decoration: none; cursor: pointer; } button, input[type=submit] { cursor: pointer; } summary { display: block; } figure, picture, .l-image-wrap { display: block; } img { max-width: 100%; height: auto; vertical-align: bottom; } svg { vertical-align: bottom; } span { line-height: inherit; } /* *** Header *** */ body.is-header-nav-open { overflow: hidden; } .l-header { position: sticky; inset-block-start: 0; z-index: 100; border-bottom: 1px solid #EEEEEE; background-color: var(--color-white); height: var(--headerH); font-family: "Noto Sans JP", sans-serif; } @media (max-width: 767.98px) { .l-header { --header-nav-icon-size: 16px; --header-nav-icon-thickness: 1px; --header-nav-chevron-size: 12px; --header-nav-chevron-offset: var(--spacing); } } .l-header .l-header-inner { height: 100%; display: flex; flex-direction: column; justify-content: center; } .l-header .l-header-content { display: flex; align-items: center; justify-content: space-between; gap: var(--gap); } .l-header .l-header-logo svg { color: var(--color-dark-gray); --header-logo-primary: #103bb1; --header-logo-accent: #e72a2b; } @media (min-width: 768px) { .l-header .l-header-logo { flex-basis: 220px; } .l-header .l-header-logo a { transition: opacity var(--transition); } } @media (min-width: 768px) and (hover: hover) { .l-header .l-header-logo a:hover { opacity: var(--opacity); } } @media (max-width: 767.98px) { .l-header .l-header-logo { flex-basis: 190px; } } @media (min-width: 768px) { .l-header .l-header-hamburger { display: none; } } @media (max-width: 767.98px) { .l-header .l-header-hamburger { display: flex; flex-direction: column; justify-content: center; gap: 5px; inline-size: 24px; block-size: 24px; } } .l-header .l-header-hamburger .l-header-hamburger-line { block-size: 2px; background-color: var(--color-black); transition: transform var(--transition), opacity var(--transition); } @media (min-width: 768px) { .l-header .l-header-nav { flex: 1; } } @media (max-width: 767.98px) { .l-header .l-header-nav { position: fixed; inset-block-start: var(--headerH); inset-inline: 0; inset-block-end: 0; z-index: 100; background-color: var(--color-white); overflow-y: auto; visibility: hidden; opacity: 0; pointer-events: none; transition: opacity var(--transition), visibility var(--transition); } } .l-header .l-header-nav-list { display: flex; } @media (min-width: 768px) { .l-header .l-header-nav-list { align-items: center; flex-wrap: wrap; row-gap: 4px; width: fit-content; margin-inline-start: auto; } } @media (max-width: 767.98px) { .l-header .l-header-nav-list { flex-direction: column; } } @media (min-width: 768px) { .l-header .l-header-nav-item { position: relative; } .l-header .l-header-nav-item:hover > .l-header-nav-dropdown, .l-header .l-header-nav-item:focus-within > .l-header-nav-dropdown { display: block; } } @media (max-width: 767.98px) { .l-header .l-header-nav-item.is-open .l-header-nav-dropdown { display: block; } .l-header .l-header-nav-item.is-open .l-header-nav-link:has(+ .l-header-nav-dropdown)::after { opacity: 0; } } .l-header .l-header-nav-link { display: block; } @media (min-width: 768px) { .l-header .l-header-nav-link { font-size: 0.75rem; padding: 4px 16px; } .l-header .l-header-nav-link:hover { text-decoration: underline; } } @media (max-width: 767.98px) { .l-header .l-header-nav-link { font-weight: var(--fw-semibold); font-size: 0.875rem; border-bottom: 1px solid #EEEEEE; padding: 12px var(--header-nav-chevron-offset); position: relative; } .l-header .l-header-nav-link:has(+ .l-header-nav-dropdown)::before, .l-header .l-header-nav-link:has(+ .l-header-nav-dropdown)::after { content: ""; position: absolute; inset-inline-end: var(--header-nav-chevron-offset); inset-block-start: 50%; background-color: var(--color-black); transform: translateY(-50%); transition: opacity var(--transition); } .l-header .l-header-nav-link:has(+ .l-header-nav-dropdown)::before { inline-size: var(--header-nav-icon-size); block-size: var(--header-nav-icon-thickness); } .l-header .l-header-nav-link:has(+ .l-header-nav-dropdown)::after { inline-size: var(--header-nav-icon-thickness); block-size: var(--header-nav-icon-size); inset-inline-end: calc(var(--header-nav-chevron-offset) + (var(--header-nav-icon-size) - var(--header-nav-icon-thickness)) / 2); } } .l-header .l-header-nav-contact { background-color: #F3F3F3; border-radius: 6px; } @media (min-width: 768px) { .l-header .l-header-nav-contact { margin-inline-start: 16px; } } .l-header .l-header-nav-dropdown { display: none; } @media (min-width: 768px) { .l-header .l-header-nav-dropdown { position: absolute; inset-block-start: 100%; inset-inline-start: 0; z-index: 100; min-inline-size: 14em; background-color: var(--color-white); border: 1px solid #EEEEEE; box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08); padding: 10px; } } @media (max-width: 767.98px) { .l-header .l-header-nav-dropdown { margin-inline-start: 1em; } } @media (min-width: 768px) { .l-header .l-header-nav-dropdown > li:not(:last-child) { margin-block-end: 4px; } } .l-header .l-header-nav-dropdown-link { font-size: 0.75rem; display: block; } @media (min-width: 768px) { .l-header .l-header-nav-dropdown-link { padding: 4px 16px; } .l-header .l-header-nav-dropdown-link:hover { text-decoration: underline; } } @media (max-width: 767.98px) { .l-header .l-header-nav-dropdown-link { border-bottom: 1px solid #EEEEEE; padding: 12px var(--header-nav-chevron-offset); } } .l-header { /* SP：ハンバーガーメニューを開いたときのスタイル */ } .l-header.is-open .l-header-hamburger-line:nth-child(1) { transform: translateY(7px) rotate(45deg); } .l-header.is-open .l-header-hamburger-line:nth-child(2) { opacity: 0; transform: scaleX(0); } .l-header.is-open .l-header-hamburger-line:nth-child(3) { transform: translateY(-7px) rotate(-45deg); } @media (max-width: 767.98px) { .l-header.is-open .l-header-nav { visibility: visible; opacity: 1; pointer-events: auto; } } .l-header { /* SP：下層なしの第一階層リンクと下層リンクのくの字矢印（共通） */ } @media (max-width: 767.98px) { .l-header .l-header-nav-link:not(:has(+ .l-header-nav-dropdown)), .l-header .l-header-nav-dropdown-link { position: relative; } .l-header .l-header-nav-link:not(:has(+ .l-header-nav-dropdown))::after, .l-header .l-header-nav-dropdown-link::after { content: ""; position: absolute; inset-inline-end: calc(var(--header-nav-chevron-offset) + 4px); inset-block-start: 50%; inline-size: var(--header-nav-chevron-size); block-size: var(--header-nav-chevron-size); border-block-end: var(--header-nav-icon-thickness) solid currentColor; border-inline-end: var(--header-nav-icon-thickness) solid currentColor; transform: translateY(-50%) rotate(-45deg); } } /* *** Footer *** */ /* 企業サイトのみの設定 */ body:not(.p-careers-top, .p-careers) .l-footer { background-image: url("/assets/images/common/background/corp/img_bg_footer.webp"); background-size: cover; background-repeat: no-repeat; color: var(--color-white); } body:not(.p-careers-top, .p-careers) .l-footer .l-footer-logo svg { color: var(--color-white); } /* 採用サイトのみの設定 */ .p-careers-top .l-footer, .p-careers .l-footer { border-block-start: 1px solid #D4D4D4; } .p-careers-top .l-footer .l-footer-logo svg, .p-careers .l-footer .l-footer-logo svg { color: var(--color-dark-gray); } .l-footer { --nav-link-padding: 4px; font-family: "Noto Sans JP", sans-serif; padding-block: 48px 20px; } @media (min-width: 768px) { .l-footer { background-position: center; } } @media (max-width: 767.98px) { .l-footer { background-position: left; } } .l-footer .l-footer-header { display: flex; align-items: flex-end; column-gap: 1em; margin-block-end: 16px; } .l-footer .l-footer-header .l-footer-logo { flex-basis: 130px; } .l-footer .l-footer-header .l-footer-header-text { flex-basis: auto; font-size: 0.875rem; line-height: 1; } .l-footer .l-footer-content { display: flex; gap: var(--gap); } @media (min-width: 768px) { .l-footer .l-footer-content { justify-content: space-between; margin-block-end: var(--block-spacing); } } @media (max-width: 767.98px) { .l-footer .l-footer-content { flex-direction: column; margin-block-end: calc(var(--content-spacing-sm) + var(--nav-link-padding)); } } .l-footer .l-footer-corp { line-height: 1.8; } @media (min-width: 768px) { .l-footer .l-footer-corp { flex-basis: auto; } } @media (min-width: 768px) { .l-footer .l-footer-corp .l-footer-corp-name { font-size: 1rem; } } @media (max-width: 767.98px) { .l-footer .l-footer-corp .l-footer-corp-name { font-size: 0.875rem; } } .l-footer .l-footer-corp .l-footer-corp-info { font-size: 0.875rem; } .l-footer .l-footer-nav { display: grid; gap: inherit; } @media (min-width: 768px) { .l-footer .l-footer-nav { flex-basis: auto; grid-template-areas: "nav01 nav02 nav03"; } } @media (max-width: 767.98px) { .l-footer .l-footer-nav { grid-template-areas: "nav03 nav03" "nav01 nav02"; } } .l-footer .l-footer-nav-list:nth-of-type(1) { grid-area: nav01; } .l-footer .l-footer-nav-list:nth-of-type(2) { grid-area: nav02; } .l-footer .l-footer-nav-list:nth-of-type(3) { grid-area: nav03; } @media (max-width: 767.98px) { .l-footer .l-footer-nav-list:nth-of-type(3) { display: flex; flex-wrap: wrap; column-gap: calc(1em - var(--nav-link-padding) * 2); } } .l-footer .l-footer-nav-link { font-size: 0.75rem; padding: var(--nav-link-padding); display: block; } @media (min-width: 768px) { .l-footer .l-footer-nav-link:hover { text-decoration: underline; } } .l-footer .l-footer-copyright { font-size: 0.75rem; } /* *** Contact *** */ .l-contact { --icon-width: 60px; --nav-title-gap: 12px; font-family: "Noto Sans JP", sans-serif; background-color: var(--color-light-gray-01); margin-block-start: var(--section-spacing); } @media (min-width: 768px) { .l-contact { padding-block: var(--block-spacing); } } @media (max-width: 767.98px) { .l-contact { padding-block: 48px; } } .l-contact .l-contact-title { font-size: 1rem; font-weight: var(--fw-medium); letter-spacing: 0.14em; display: flex; align-items: center; column-gap: 12px; margin-block-end: 8px; } .l-contact .l-contact-title::after { content: ""; display: block; width: 53px; height: 1px; background-color: currentColor; } .l-contact .l-contact-content { display: flex; justify-content: space-between; flex-wrap: wrap; } @media (min-width: 768px) { .l-contact .l-contact-content { gap: var(--gap) 80px; } } @media (max-width: 767.98px) { .l-contact .l-contact-content { flex-direction: column; gap: 32px; } } .l-contact .l-contact-text { flex-basis: auto; } .l-contact .l-contact-text .l-contact-text-title { font-weight: var(--fw-bold); } @media (min-width: 768px) { .l-contact .l-contact-text .l-contact-text-title { font-size: 2rem; } } @media (max-width: 767.98px) { .l-contact .l-contact-text .l-contact-text-title { font-size: 1.5rem; } } .l-contact .l-contact-text .l-contact-text-description { letter-spacing: 0.14em; line-height: 1.5; margin-block-start: 10px; } @media (min-width: 768px) { .l-contact .l-contact-text .l-contact-text-description { font-size: 1rem; } } @media (max-width: 767.98px) { .l-contact .l-contact-text .l-contact-text-description { font-size: 0.875rem; } } .l-contact .l-contact-nav { flex-basis: auto; display: flex; gap: inherit; } @media (max-width: 767.98px) { .l-contact .l-contact-nav { flex-direction: column; align-items: center; } } .l-contact .l-contact-nav > li { flex-basis: auto; } .l-contact .l-contact-nav-title { display: flex; align-items: center; column-gap: var(--nav-title-gap); margin-block-end: 12px; } .l-contact .l-contact-nav-title .l-contact-nav-title-icon { width: var(--icon-width); height: var(--icon-width); } .l-contact .l-contact-nav-title .l-contact-nav-title-text { font-weight: var(--fw-medium); font-size: 1rem; } .l-contact .l-contact-nav-title .l-contact-nav-title-text .l-contact-nav-title-text-time { font-size: 87.5%; font-weight: var(--fw-regular); display: block; } .l-contact .l-contact-nav-tel, .l-contact .l-contact-nav-tel-thailand { font-size: 2.5rem; font-weight: var(--fw-bold); line-height: 1; } .l-contact { /* タイ語verは以下 */ } .l-contact .l-contact-nav-title-text-thailand { font-weight: var(--fw-medium); font-size: 1rem; margin-inline-start: calc(var(--icon-width) + var(--nav-title-gap)); } @media (min-width: 768px) { html[lang=th] .l-contact .l-contact-text { width: 40%; } html[lang=th] .l-contact .l-contact-text .l-contact-text-title, html[lang=th] .l-contact .l-contact-text .l-contact-text-description { word-break: break-all; } } /* *** Footer Recruit *** */ .l-recruit { border-block-start: 1px solid #D4D4D4; margin-block-start: var(--section-spacing); } @media (min-width: 768px) { .l-recruit { padding-block: var(--block-spacing); } } @media (max-width: 767.98px) { .l-recruit { padding-block: 48px; } } .l-recruit .l-recruit-title { font-weight: var(--fw-bold); text-align: center; } @media (min-width: 768px) { .l-recruit .l-recruit-title { font-size: 2rem; } } @media (max-width: 767.98px) { .l-recruit .l-recruit-title { font-size: 1.5rem; } } .l-recruit .l-recruit-text { text-align: center; } @media (min-width: 768px) { .l-recruit .l-recruit-text { font-size: 1.5rem; margin-block-start: 20px; } } @media (max-width: 767.98px) { .l-recruit .l-recruit-text { font-size: 1rem; margin-block-start: 16px; } } .l-recruit .l-recruit-list { display: flex; flex-wrap: wrap; justify-content: center; gap: 40px min(6.67%, 80px); } @media (min-width: 768px) { .l-recruit .l-recruit-list { margin-block-start: var(--block-spacing); } } @media (max-width: 767.98px) { .l-recruit .l-recruit-list { flex-direction: column; margin-block-start: 48px; } } .l-recruit .l-recruit-list li { text-align: center; display: flex; justify-content: center; flex-direction: column; } .l-recruit .l-recruit-list .l-recruit-list-title { font-weight: var(--fw-bold); font-size: 1.125rem; } @media (min-width: 768px) { .l-recruit .l-recruit-list .l-recruit-list-text { font-size: 1rem; margin-block: 20px 4px; } } @media (max-width: 767.98px) { .l-recruit .l-recruit-list .l-recruit-list-text { font-size: 0.875rem; margin-block: 12px; } } /* *** Layout *** */ /* Container */ .l-container-sm { max-width: min(100% - var(--spacing) * 2, var(--container-sm)); margin-inline: auto; } .l-container-md { max-width: min(100% - var(--spacing) * 2, var(--container-md)); margin-inline: auto; } .l-container-lg { max-width: min(100% - var(--spacing) * 2, var(--container-lg)); margin-inline: auto; } /* Section */ .l-section { margin-block-start: var(--section-spacing); } .l-block { margin-block-start: var(--block-spacing); } .l-content { margin-block-start: var(--content-spacing); } .l-content-sm { margin-block-start: var(--content-spacing-sm); } /* Page Intro Text */ .l-page-intro { font-size: 1.25rem; } /* Paragraph Group */ .l-paragraph-groupe p:not(:first-of-type) { margin-block-start: 1.5em; } /* Note */ .l-note-wrap { margin-block-start: var(--content-spacing-sm); } .l-note { font-size: 0.875rem; } /* Link */ .l-link { color: var(--color-accent); text-decoration: underline; } .l-link:hover { text-decoration: none; text-underline-offset: 4px; text-decoration-thickness: 1px; } /* Careers Image Radius */ .l-image-radius { overflow: hidden; border-radius: var(--borderRadius); } /* Map */ .l-map { position: relative; } @media (min-width: 768px) { .l-map { aspect-ratio: 1200/320; } } @media (max-width: 767.98px) { .l-map { aspect-ratio: 345/320; } } .l-map { /* Complianz同意前後どちらでも.l-mapのaspect-ratioに合わせて高さを追従させるため絶対配置にする */ } .l-map iframe { position: absolute; inset: 0; width: 100%; height: 100%; } /* Text & Image（PC：2列 / SP：1列 / reverse：逆順） */ .l-media { display: flex; align-items: flex-start; gap: var(--gap); } @media (min-width: 768px) { .l-media > * { flex-basis: calc((100% - var(--gap) * (2 - 1)) / 2); } } @media (max-width: 767.98px) { .l-media { flex-direction: column; } .l-media > * { width: 100%; } .l-media.sp-l-media-reverse { flex-direction: column-reverse; } .l-media.sp-l-media-reverse > * { width: 100%; } } .l-media-reverse { display: flex; align-items: flex-start; gap: var(--gap); flex-direction: row-reverse; } @media (min-width: 768px) { .l-media-reverse > * { flex-basis: calc((100% - var(--gap) * (2 - 1)) / 2); } } @media (max-width: 767.98px) { .l-media-reverse { flex-direction: column; } .l-media-reverse > * { width: 100%; } .l-media-reverse.sp-l-media-reverse { flex-direction: column-reverse; } .l-media-reverse.sp-l-media-reverse > * { width: 100%; } } .l-media-center { display: flex; align-items: flex-start; gap: var(--gap); } @media (min-width: 768px) { .l-media-center > * { flex-basis: calc((100% - var(--gap) * (2 - 1)) / 2); } } .l-media-center { align-items: center; } @media (max-width: 767.98px) { .l-media-center { flex-direction: column; } .l-media-center > * { width: 100%; } .l-media-center.sp-l-media-reverse { flex-direction: column-reverse; } .l-media-center.sp-l-media-reverse > * { width: 100%; } } /* YouTube等のiframe埋め込みをレスポンシブ対応（aspect-ratioで16:9を維持） */ .l-youtube-wrap iframe { display: block; width: 100%; height: auto; aspect-ratio: 16/9; border: 0; } /* Text & Image（PCデフォルト：24%, 76% / SP：1列 / reverse：逆順） */ .l-media-ratio { display: flex; align-items: flex-start; gap: var(--ratio-gap); } @media (min-width: 768px) { .l-media-ratio { --ratio-gap: 60px; } } @media (max-width: 767.98px) { .l-media-ratio { --ratio-gap: 32px; } } .l-media-ratio > *:nth-child(1) { flex-basis: calc((100% - var(--ratio-gap)) * 0.24); } .l-media-ratio > *:nth-child(2) { flex-basis: calc((100% - var(--ratio-gap)) * 0.76); } @media (max-width: 767.98px) { .l-media-ratio { flex-direction: column; } .l-media-ratio > * { width: 100%; } } .l-media-ratio-reverse { display: flex; align-items: flex-start; gap: var(--ratio-gap); } @media (min-width: 768px) { .l-media-ratio-reverse { --ratio-gap: 60px; } } @media (max-width: 767.98px) { .l-media-ratio-reverse { --ratio-gap: 32px; } } .l-media-ratio-reverse { flex-direction: row-reverse; } .l-media-ratio-reverse > *:nth-child(1) { flex-basis: calc((100% - var(--ratio-gap)) * 0.24); } .l-media-ratio-reverse > *:nth-child(2) { flex-basis: calc((100% - var(--ratio-gap)) * 0.76); } @media (max-width: 767.98px) { .l-media-ratio-reverse { flex-direction: column; } .l-media-ratio-reverse > * { width: 100%; } } /* Gallery */ /* 1カラム */ .l-gallery-01 { display: flex; align-items: flex-start; gap: var(--gap); flex-wrap: wrap; } @media (min-width: 768px) { .l-gallery-01 > * { flex-basis: calc((100% - var(--gap) * (1 - 1)) / 1); } } @media (max-width: 767.98px) { .l-gallery-01 { gap: 16px; flex-direction: column; } .l-gallery-01 > * { width: 100%; } } /* 2カラム SP：1カラム */ .l-gallery-02 { display: flex; align-items: flex-start; gap: var(--gap); flex-wrap: wrap; } @media (min-width: 768px) { .l-gallery-02 > * { flex-basis: calc((100% - var(--gap) * (2 - 1)) / 2); } } @media (max-width: 767.98px) { .l-gallery-02 { gap: 16px; flex-direction: column; } .l-gallery-02 > * { width: 100%; } } /* 3カラム SP：1カラム */ .l-gallery-03 { display: flex; align-items: flex-start; gap: var(--gap); flex-wrap: wrap; } @media (min-width: 768px) { .l-gallery-03 > * { flex-basis: calc((100% - var(--gap) * (3 - 1)) / 3); } } @media (max-width: 767.98px) { .l-gallery-03 { gap: 16px; flex-direction: column; } .l-gallery-03 > * { width: 100%; } } /* 4カラム SP：2カラム */ .l-gallery-04 { display: flex; align-items: flex-start; gap: var(--gap); flex-wrap: wrap; } @media (min-width: 768px) { .l-gallery-04 > * { flex-basis: calc((100% - var(--gap) * (4 - 1)) / 4); } } @media (max-width: 767.98px) { .l-gallery-04 { gap: 16px; } .l-gallery-04 > * { flex-basis: calc((100% - 16px * (2 - 1)) / 2); } } /* キャプションがある場合、カラム間の縦スペースを40pxにする */ [class*=l-gallery-].has-caption { row-gap: var(--content-spacing); } /* Image Caption */ .l-image-caption { font-size: 1rem; line-height: 1.4; text-align: center; text-wrap: balance; margin-block-start: 12px; } /* Card */ /* 2~3カラム SP：1カラム */ .l-card-2 { display: flex; align-items: flex-start; gap: var(--gap); flex-wrap: wrap; } @media (min-width: 768px) { .l-card-2 > * { flex-basis: calc((100% - var(--gap) * (2 - 1)) / 2); } } .l-card-3 { display: flex; align-items: flex-start; gap: var(--gap); flex-wrap: wrap; } @media (min-width: 768px) { .l-card-3 > * { flex-basis: calc((100% - var(--gap) * (3 - 1)) / 3); } } .l-card-2, .l-card-3 { row-gap: var(--content-spacing); } @media (max-width: 767.98px) { .l-card-2, .l-card-3 { flex-direction: column; } .l-card-2 > *, .l-card-3 > * { width: 100%; } } .l-card-2 .l-image-wrap, .l-card-3 .l-image-wrap { margin-block-end: var(--content-spacing-sm); } /* Image Zoom */ .l-image-zoom { display: block; overflow: hidden; position: relative; } .l-image-zoom img { display: block; transition: transform var(--transition); } .l-image-zoom[data-type=image]::after { content: ""; position: absolute; inset-block-start: 8px; inset-inline-end: 10px; width: 1.125rem; height: 0.8125rem; background: url("/assets/images/common/icon/icon_modalwindow.svg") no-repeat top/contain; pointer-events: none; } @media (hover: hover) { .l-image-zoom:hover img { transform: scale(1.05); } } /* WordPress Pagination */ .navigation.pagination { display: flex; justify-content: center; margin-block-start: var(--block-spacing); } .navigation.pagination .nav-links { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; } .navigation.pagination .page-numbers { font-family: "Noto Sans JP", sans-serif; font-weight: var(--fw-medium); font-size: 0.875rem; line-height: 1; display: flex; align-items: center; justify-content: center; width: 40px; height: 40px; } .navigation.pagination .page-numbers:not(.current) { border: 1px solid var(--color-light-gray-02); background-color: var(--color-white); } .navigation.pagination .page-numbers.current { color: var(--color-white); border: 1px solid var(--color-primary); background-color: var(--color-primary); } .navigation.pagination .page-numbers.prev, .navigation.pagination .page-numbers.next { font-size: 0; } .navigation.pagination .page-numbers.prev::before, .navigation.pagination .page-numbers.next::before { content: ""; width: 12px; height: 14px; background-color: var(--color-dark-gray); } .navigation.pagination .page-numbers.prev::before { clip-path: polygon(100% 0, 100% 100%, 0 50%); } .navigation.pagination .page-numbers.next::before { clip-path: polygon(0 0, 100% 50%, 0 100%); } /* Entry List */ .l-entry-list { --entry-list-gap: 32px; border: 1px solid #E5E7EB; border-radius: 16px; display: flex; flex-wrap: wrap; align-items: flex-start; margin-block-start: 2.5rem; gap: var(--entry-list-gap); } @media (min-width: 768px) { .l-entry-list { justify-content: space-around; padding: 32px; } } @media (max-width: 767.98px) { .l-entry-list { padding: 24px; max-width: 400px; margin-inline: auto; } } .l-entry-list li { display: flex; flex-direction: column; justify-content: center; align-items: center; position: relative; } @media (min-width: 768px) { .l-entry-list li { flex: 1; } } @media (max-width: 767.98px) { .l-entry-list li { flex: 0 0 calc(50% - 16px); max-width: calc(50% - 16px); } } .l-entry-list li .num { display: flex; flex-direction: column; justify-content: center; align-items: center; text-align: center; background: #ADCDFF; color: var(--color-white); font-size: 2rem; font-weight: var(--fw-bold); line-height: 1; border-radius: 50%; width: 68px; height: 68px; padding-bottom: 0.1em; } .l-entry-list li .txt { font-weight: var(--fw-bold); } @media (min-width: 768px) { .l-entry-list li .txt { font-size: clamp(1.125rem, 0.458rem + 1.39vw, 1.5rem); } } @media (max-width: 767.98px) { .l-entry-list li .txt { font-size: 1.25rem; } } .l-entry-list li:not(:last-child)::after { content: ""; position: absolute; top: 50%; right: calc(var(--entry-list-gap) / -2); width: 14px; height: 14px; background-image: url("data:image/svg+xml,%3Csvg width='14' height='14' viewBox='0 0 14 14' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M1 7H13M8 2L13 7L8 12' stroke='%23D1D5DB' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: center; background-size: contain; transform: translate(50%, -50%); } @media (max-width: 767.98px) { .l-entry-list li:nth-child(even)::after { display: none; } } /* *** Slider *** */ .swiper-button-prev, .swiper-button-next { --swiper-navigation-color: var(--plugin-nav-color); } /* ページネーション共通 */ .swiper-pagination { position: static; margin-block-start: 12px; } .swiper-pagination-bullet { background: #D9D9D9; width: 24px; height: 24px; margin-inline: 12px !important; } @media (max-width: 767.98px) { .swiper-pagination-bullet { width: 14px; height: 14px; margin-inline: 8px !important; } } .swiper-pagination-bullet-active { background: rgba(204, 204, 204, 0.8667); } /* SP のみスライダー */ @media (min-width: 768px) { .sp-c-slider .swiper { overflow: visible; } .sp-c-slider .swiper-wrapper { transform: none !important; } .sp-c-slider .swiper-button-prev, .sp-c-slider .swiper-button-next, .sp-c-slider .swiper-pagination { display: none; } } .sp-c-slider { /* PCで2カラム */ } @media (min-width: 768px) { .sp-c-slider.sp-c-slider--pc-2 .swiper-wrapper { flex-wrap: wrap; display: flex; align-items: flex-start; gap: var(--gap); } } @media (min-width: 768px) and (min-width: 768px) { .sp-c-slider.sp-c-slider--pc-2 .swiper-wrapper > * { flex-basis: calc((100% - var(--gap) * (2 - 1)) / 2); } } @media (min-width: 768px) { .sp-c-slider.sp-c-slider--pc-2 .swiper-slide { width: auto !important; margin-inline-end: 0 !important; flex-basis: calc((100% - var(--gap)) / 2); } } .sp-c-slider { /* PCで3カラム */ } @media (min-width: 768px) { .sp-c-slider.sp-c-slider--pc-3 .swiper-wrapper { flex-wrap: wrap; display: flex; align-items: flex-start; gap: var(--gap); } } @media (min-width: 768px) and (min-width: 768px) { .sp-c-slider.sp-c-slider--pc-3 .swiper-wrapper > * { flex-basis: calc((100% - var(--gap) * (3 - 1)) / 3); } } @media (min-width: 768px) { .sp-c-slider.sp-c-slider--pc-3 .swiper-slide { width: auto !important; margin-inline-end: 0 !important; flex-basis: calc((100% - var(--gap) * 2) / 3); } } .sp-c-slider { /* PCで4カラム */ } @media (min-width: 768px) { .sp-c-slider.sp-c-slider--pc-4 .swiper-wrapper { flex-wrap: wrap; display: flex; align-items: flex-start; gap: var(--gap); } } @media (min-width: 768px) and (min-width: 768px) { .sp-c-slider.sp-c-slider--pc-4 .swiper-wrapper > * { flex-basis: calc((100% - var(--gap) * (4 - 1)) / 4); } } @media (min-width: 768px) { .sp-c-slider.sp-c-slider--pc-4 .swiper-slide { width: auto !important; margin-inline-end: 0 !important; flex-basis: calc((100% - var(--gap) * 3) / 4); } } /* *** Modal *** */ .glightbox-container.glightbox-c-modal-image .gprev, .glightbox-container.glightbox-c-modal-image .gnext { display: flex; align-items: center; justify-content: center; width: var(--swiper-navigation-size, 44px); height: var(--swiper-navigation-size, 44px); padding: 0; border: 0; background-color: transparent; cursor: pointer; } .glightbox-container.glightbox-c-modal-image .gprev svg, .glightbox-container.glightbox-c-modal-image .gnext svg { display: none; } .glightbox-container.glightbox-c-modal-image .gprev::after, .glightbox-container.glightbox-c-modal-image .gnext::after { content: ""; display: block; width: 100%; height: 100%; background-color: var(--plugin-nav-color); mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 11 20' fill='none'%3E%3Cpath d='M0.38296 20.0762C0.111788 19.805 0.111788 19.3654 0.38296 19.0942L9.19758 10.2796L0.38296 1.46497C0.111788 1.19379 0.111788 0.754138 0.38296 0.482966C0.654131 0.211794 1.09379 0.211794 1.36496 0.482966L10.4341 9.55214C10.8359 9.9539 10.8359 10.6053 10.4341 11.007L1.36496 20.0762C1.09379 20.3474 0.654131 20.3474 0.38296 20.0762Z' fill='%23000'/%3E%3C/svg%3E"); mask-size: contain; mask-repeat: no-repeat; mask-position: center; -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 11 20' fill='none'%3E%3Cpath d='M0.38296 20.0762C0.111788 19.805 0.111788 19.3654 0.38296 19.0942L9.19758 10.2796L0.38296 1.46497C0.111788 1.19379 0.111788 0.754138 0.38296 0.482966C0.654131 0.211794 1.09379 0.211794 1.36496 0.482966L10.4341 9.55214C10.8359 9.9539 10.8359 10.6053 10.4341 11.007L1.36496 20.0762C1.09379 20.3474 0.654131 20.3474 0.38296 20.0762Z' fill='%23000'/%3E%3C/svg%3E"); -webkit-mask-size: contain; -webkit-mask-repeat: no-repeat; -webkit-mask-position: center; } .glightbox-container.glightbox-c-modal-image .gprev, .glightbox-container.glightbox-c-modal-image .gnext { transition: opacity var(--transition); } @media (hover: hover) { .glightbox-container.glightbox-c-modal-image .gprev:hover, .glightbox-container.glightbox-c-modal-image .gnext:hover { opacity: var(--opacity); } } .glightbox-container.glightbox-c-modal-image .gprev, .glightbox-container.glightbox-c-modal-image .gnext { position: absolute; inset-block-start: 50%; z-index: 99999; transform: translateY(-50%); } .glightbox-container.glightbox-c-modal-image .gprev { inset-inline-start: 30px; } .glightbox-container.glightbox-c-modal-image .gprev::after { transform: rotate(180deg); } .glightbox-container.glightbox-c-modal-image .gnext { inset-inline-end: 30px; } .glightbox-container.glightbox-c-modal-image .gprev.disabled, .glightbox-container.glightbox-c-modal-image .gnext.disabled { display: none; } .glightbox-container.glightbox-c-modal-image .gclose { position: absolute; inset-block-start: 15px; inset-inline-end: 20px; z-index: 99999; display: flex; align-items: center; justify-content: center; width: 35px; height: 35px; padding: 0; border: 0; background-color: transparent; cursor: pointer; } .glightbox-container.glightbox-c-modal-image .gclose svg { display: block; width: 18px; height: auto; } .glightbox-container.glightbox-c-modal-image .gclose svg path { fill: var(--plugin-nav-color); } .glightbox-container.glightbox-c-modal-image .gclose { transition: opacity var(--transition); } @media (hover: hover) { .glightbox-container.glightbox-c-modal-image .gclose:hover { opacity: var(--opacity); } } /* *** Button *** */ /* Wrapper */ .c-button-wrap { display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 16px var(--gap); } .c-button-wrap .c-button-text { flex-basis: 100%; text-align: center; } .c-buttons-list { display: flex; align-items: flex-start; gap: var(--gap); flex-wrap: wrap; } @media (min-width: 768px) { .c-buttons-list > * { flex-basis: calc((100% - var(--gap) * (3 - 1)) / 3); } } @media (max-width: 767.98px) { .c-buttons-list .c-button { flex-basis: 100%; } } /* Normal Button */ .c-button { /* --- Color Settings --- */ --button-bg: var(--color-white); --button-border-color: #222222; --button-color: inherit; } @media (hover: hover) { .c-button:hover { --button-bg: var(--color-primary); --button-border-color: var(--color-primary); --button-color: var(--color-white); } } .c-button { /* --- End Color Settings --- */ width: fit-content; min-width: 280px; } @media (max-width: 767.98px) { .c-button { margin-inline: auto; } } .c-button a, .c-button:is(button, input) { --padding-x: 32px; padding: 12px calc(var(--padding-x) + 12px + 12px); line-height: 1.4; color: var(--button-color); background-color: var(--button-bg); border: 1px solid var(--button-border-color); border-radius: 50px; transition: color var(--transition), border-color var(--transition), background-color var(--transition); text-align: center; display: block; position: relative; } .c-button a .c-arrow, .c-button a .c-arrow-down, .c-button:is(button, input) .c-arrow, .c-button:is(button, input) .c-arrow-down { position: absolute; top: calc(50% - 5px); right: var(--padding-x); } /* Modal Button */ .c-button-modal { /* --- Color Settings --- */ --button-bg: var(--color-white); --button-border-color: var(--color-modal); --button-color: inherit; } .c-button-modal .c-enlarge::after { --icon-color: var(--color-modal); --icon-bg: var(--color-white); } @media (hover: hover) { .c-button-modal:hover { --button-bg: var(--color-modal); --button-border-color: var(--color-modal); --button-color: var(--color-white); } .c-button-modal:hover .c-enlarge::after { --icon-color: var(--color-white); --icon-bg: var(--color-modal); } } .c-button-modal { /* --- End Color Settings --- */ width: fit-content; min-width: 240px; } @media (max-width: 767.98px) { .c-button-modal { margin-inline: auto; } } .c-button-modal a { padding: 12px 24px; line-height: 1.4; font-size: 0.875rem; color: var(--button-color); background-color: var(--button-bg); border: 2px solid var(--button-border-color); border-radius: 8px; transition: color var(--transition), border-color var(--transition), background-color var(--transition); text-align: center; display: flex; align-items: center; justify-content: center; gap: 10px; } /* Translation Button */ .c-transl-wrap { display: flex; justify-content: space-between; gap: var(--gap); } @media (min-width: 768px) { .c-transl-wrap { align-items: center; } } @media (max-width: 767.98px) { .c-transl-wrap { flex-direction: column; } } .c-transl-wrap .l-container-lg { max-width: 100%; } .c-transl-wrap .c-breadcrumb { flex: 1; } @media (min-width: 768px) { .c-transl-wrap .c-transl { margin-block-start: var(--content-spacing-sm); } } .c-transl { display: flex; align-items: center; gap: 4px; background-color: var(--color-white); border-radius: 20px; border: solid 1px #CDCDCD; width: fit-content; padding: 4px; margin-inline-start: auto; } .c-transl .c-transl-button { font-size: 0.625rem; text-align: center; padding: 4px 16px; border-radius: inherit; transition: background-color var(--transition), color var(--transition); } .c-transl .c-transl-button.is-active { background-color: #AEADAD; color: var(--color-white); } .c-transl .c-transl-button:hover { background-color: var(--color-dark-gray); color: var(--color-white); } /* *** Form *** */ .p-form { --form-gray-color: #6B7280; margin-block-end: var(--section-spacing); } .p-form .c-mv-content .c-mv-title { margin-block-end: 0; } .p-form .p-entry-button-heading { font-size: 1rem; font-weight: var(--fw-bold); margin-block-end: 12px; } .p-form .p-form-heading .c-title-section { margin-block-end: 12px !important; } .p-form .p-form-container { padding-inline: var(--spacing); } .p-form { /* Form */ } .p-form .p-form-input { /* Checkbox & Radio */ } .p-form .p-form-input .wpcf7-list-item { margin-inline: 0; margin-block-end: 8px; display: block; } .p-form .p-form-input .wpcf7-list-item > label { display: flex; align-items: center; gap: 12px; cursor: pointer; } .p-form .p-form-input input[type=checkbox], .p-form .p-form-input input[type=radio] { -webkit-appearance: none; appearance: none; width: 20px; height: 20px; flex-shrink: 0; border: 2px solid var(--form-gray-color); background-color: var(--color-white); display: inline-block; position: relative; } .p-form .p-form-input input[type=checkbox]:focus-visible, .p-form .p-form-input input[type=radio]:focus-visible { outline: 2px solid var(--color-primary); outline-offset: 2px; } .p-form .p-form-input input[type=checkbox] { border-radius: 4px; } .p-form .p-form-input input[type=checkbox]:checked::after { content: ""; position: absolute; top: 3px; left: 6px; width: 5px; height: 9px; border: solid currentColor; border-width: 0 2px 2px 0; transform: rotate(45deg); } .p-form .p-form-input input[type=radio] { border-radius: 50%; } .p-form .p-form-input input[type=radio]:checked { border-color: var(--form-gray-color); } .p-form .p-form-input input[type=radio]:checked::after { content: ""; position: absolute; inset: 3px; border-radius: 50%; background-color: var(--form-gray-color); } .p-form .p-form-input { /* Text & Select */ } .p-form .p-form-input input[type=text], .p-form .p-form-input input[type=email], .p-form .p-form-input input[type=tel], .p-form .p-form-input input[type=number], .p-form .p-form-input input[type=date], .p-form .p-form-input input[type=time], .p-form .p-form-input input[type=datetime-local], .p-form .p-form-input input[type=month], .p-form .p-form-input input[type=week], .p-form .p-form-input input[type=search], .p-form .p-form-input input[type=url], .p-form .p-form-input input[type=password], .p-form .p-form-input input[type=color], .p-form .p-form-input input[type=file], .p-form .p-form-input input[type=range], .p-form .p-form-input input[type=datetime], .p-form .p-form-input .wpcf7-list-item > label, .p-form .p-form-input select, .p-form .p-form-input textarea { font-size: 0.875rem; border: 1px solid #D1D5DB; border-radius: 12px; width: 100%; padding: 14px 16px; } .p-form .p-form-input input[type=text]::placeholder, .p-form .p-form-input input[type=email]::placeholder, .p-form .p-form-input input[type=tel]::placeholder, .p-form .p-form-input input[type=number]::placeholder, .p-form .p-form-input input[type=date]::placeholder, .p-form .p-form-input input[type=time]::placeholder, .p-form .p-form-input input[type=datetime-local]::placeholder, .p-form .p-form-input input[type=month]::placeholder, .p-form .p-form-input input[type=week]::placeholder, .p-form .p-form-input input[type=search]::placeholder, .p-form .p-form-input input[type=url]::placeholder, .p-form .p-form-input input[type=password]::placeholder, .p-form .p-form-input input[type=color]::placeholder, .p-form .p-form-input input[type=file]::placeholder, .p-form .p-form-input input[type=range]::placeholder, .p-form .p-form-input input[type=datetime]::placeholder, .p-form .p-form-input .wpcf7-list-item > label::placeholder, .p-form .p-form-input select::placeholder, .p-form .p-form-input textarea::placeholder { color: #9CA3AF; } .p-form .p-form-input select { appearance: none; -webkit-appearance: none; background-image: url("data:image/svg+xml,%3Csvg width='16' height='16' viewBox='0 0 16 16' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M4 6L8 10L12 6' stroke='%236B7280' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 16px center; background-size: 16px; padding-right: 32px; cursor: pointer; } .p-form .p-form-input { /* Label */ } .p-form .p-form-input .p-form-label { font-size: 0.875rem; font-weight: var(--fw-bold); margin-block-end: 8px; display: inline-flex; align-items: center; gap: 8px; } .p-form .p-form-input .p-form-label + br { display: none !important; } .p-form .p-form-input .p-form-field-label { font-size: 0.75rem; color: var(--form-gray-color); margin-block-end: 8px; display: block; } .p-form .p-form-input .p-form-field-label + br { display: none !important; } .p-form .p-form-input { /* Field */ } .p-form .p-form-input .p-form-field { margin-block-end: var(--content-spacing-sm); } .p-form .p-form-input { /* Required & Optional */ } .p-form .p-form-input .p-form-required { background-color: #FEE2E2; color: #991B1B; border-radius: 2px; font-size: 0.625rem; padding: 2px 8px; } .p-form .p-form-input .p-form-optional { background-color: #F3F4F6; color: #4B5563; border-radius: 2px; font-size: 0.625rem; padding: 2px 8px; } .p-form .p-form-input { /* Privacy Consent */ } .p-form .p-form-input .p-privacy-consent > label, .p-form .p-form-input .wpcf7-form-control-wrap[data-name=privacy-consent] .wpcf7-list-item > label { border: none; padding: 0; } .p-form .p-form-input { /* Confirm Button */ } .p-form .p-form-input .js-form-confirm-button { width: 100%; margin-block-start: var(--block-spacing); } .p-form .p-form-input { /* Error*/ } .p-form .p-form-input .wpcf7-not-valid-tip, .p-form .p-form-input .js-form-client-error { font-size: 0.875rem; font-weight: var(--fw-bold); color: var(--color-error); } .p-form .wpcf7-form:is(.invalid, .failed, .spam, .aborted) .wpcf7-response-output { color: var(--color-error); } .p-form .wpcf7-spinner { display: none !important; } .p-form .wpcf7-form.sent .wpcf7-response-output { display: none; } .p-form { /* Confirm */ } .p-form .p-form-confirm .p-form-confirm-item { font-size: 1rem; margin-block-end: var(--content-spacing-sm); } .p-form .p-form-confirm .p-form-confirm-item dt { font-weight: var(--fw-bold); font-size: 1.125rem; margin-block-end: 8px; } .p-form .p-form-confirm .p-form-confirm-item dd { font-size: 1rem; } .p-form .p-form-confirm .p-form-confirm-buttons { display: flex; gap: var(--content-spacing-sm); margin-block-start: var(--block-spacing); } @media (max-width: 767.98px) { .p-form .p-form-confirm .p-form-confirm-buttons { flex-direction: column; } } .p-form .p-form-confirm .p-form-confirm-buttons .c-button { width: 100%; } /* *** Table *** */ /* Table */ .c-table table, .c-table-center table { width: 100%; border-collapse: collapse; border-spacing: 0; } .c-table table thead tr, .c-table-center table thead tr { border-block-end: 1px solid var(--color-light-gray-02); } .c-table table thead th, .c-table-center table thead th { font-weight: var(--fw-semibold); } .c-table table tbody tr, .c-table-center table tbody tr { border-block-end: 1px solid var(--color-light-gray-02); } @media (max-width: 767.98px) { .c-table table tbody th, .c-table-center table tbody th { width: 25%; } } .c-table table tr.border-top-1, .c-table-center table tr.border-top-1 { border-block-start: 1px solid var(--color-light-gray-02); } .c-table table th, .c-table table td, .c-table-center table th, .c-table-center table td { font-size: 0.875rem; border: 0; } @media (min-width: 768px) { .c-table table th, .c-table table td, .c-table-center table th, .c-table-center table td { padding: 16px 32px; } } @media (max-width: 767.98px) { .c-table table th, .c-table table td, .c-table-center table th, .c-table-center table td { padding: 12px 16px; } } .c-table-center thead th { text-align: center; } .c-table-center tbody td:nth-child(3), .c-table-center tbody td:nth-child(4), .c-table-center tbody td:nth-child(5) { text-align: center; } @media (max-width: 767.98px) { .c-table-scroll-text { font-size: 0.75rem; line-height: 1; background-color: #F2F2F2; padding: 0.5rem 0.625rem; margin-inline-start: auto; width: fit-content; } } @media (max-width: 767.98px) { .c-table-scroll { overflow: scroll; } .c-table-scroll table th, .c-table-scroll table td { white-space: nowrap; } } /* *** Breadcrumb *** */ .c-breadcrumb { padding-block-start: var(--content-spacing-sm); } .c-breadcrumb-list { --breadcrumb-gap: 5px; font-size: 0; } @media (max-width: 767.98px) { .c-breadcrumb-list { white-space: nowrap; overflow-x: scroll; } } .c-breadcrumb-list::before { content: ""; width: 10px; aspect-ratio: 1/1; border-radius: 50%; background-color: #cccccc; display: inline-block; vertical-align: middle; margin-inline-end: calc(var(--breadcrumb-gap) * 2); } .c-breadcrumb-list li { font-size: 0.75rem; display: inline; vertical-align: middle; margin-inline-start: calc(var(--breadcrumb-gap) * -1); } .c-breadcrumb-list li:not(:last-child) .c-breadcrumb-item-inner { display: inline-flex; align-items: center; } .c-breadcrumb-list li:not(:last-child) .c-breadcrumb-item-inner::after { content: ""; clip-path: polygon(0 7%, 7% 0, 57% 50%, 7% 100%, 0 93%, 43% 50%, 0 7%); height: 8px; aspect-ratio: 1; background-color: #999999; } .c-breadcrumb-list li a:hover { text-decoration: underline; } .c-breadcrumb-list li .c-breadcrumb-item-inner a, .c-breadcrumb-list li .c-breadcrumb-item-inner span { padding-inline: 2px var(--breadcrumb-gap); } /* *** Icon *** */ /* Arrow */ .c-arrow, .c-arrow-down { position: relative; display: inline-block; width: 10px; height: 1px; margin: 5px 0; border-radius: 9999px; background-color: currentColor; } .c-arrow::before, .c-arrow::after, .c-arrow-down::before, .c-arrow-down::after { content: ""; position: absolute; top: calc(50% - 0.5px); right: 0; width: 8px; height: 1px; border-radius: 9999px; background-color: currentColor; transform-origin: calc(100% - 0.5px) 50%; } .c-arrow::before, .c-arrow-down::before { transform: rotate(45deg); } .c-arrow::after, .c-arrow-down::after { transform: rotate(-45deg); } /* Arrow Down */ .c-arrow-down { transform: rotate(90deg); } /* Enlarge */ .c-enlarge { display: flex; } .c-enlarge::after { --border-width: 2px; --plus-size: 10px; --icon-color: var(--color-primary); --icon-bg: var(--color-white); content: ""; width: 24px; height: 24px; border: var(--border-width) solid var(--icon-color); border-radius: 50%; flex-shrink: 0; background: linear-gradient(var(--icon-color), var(--icon-color)) center/var(--plus-size) var(--border-width) no-repeat, linear-gradient(var(--icon-color), var(--icon-color)) center/var(--border-width) var(--plus-size) no-repeat, var(--icon-bg); } /* *** Tab *** */ .c-tab .c-tab-nav { display: flex; justify-content: center; gap: var(--gap); border-bottom: 1px solid #666666; } .c-tab .c-tab-nav li { flex-basis: 41.67%; border-top-right-radius: 16px; border-top-left-radius: 16px; border: 1px solid #666666; border-bottom: none; background-color: var(--color-white); } .c-tab .c-tab-nav li.is-active { position: relative; inset-block-start: 1px; z-index: 1; } .c-tab .c-tab-nav li a { font-weight: var(--fw-semibold); line-height: 1.4; text-align: center; display: flex; align-items: center; justify-content: center; height: 100%; } @media (min-width: 768px) { .c-tab .c-tab-nav li a { font-size: 1.25rem; padding: 4.8%; } } @media (max-width: 767.98px) { .c-tab .c-tab-nav li a { font-size: 1rem; padding: 16px; } } .c-tab .c-tab-content { display: none; } .c-tab .c-tab-content.is-active { display: block; } /* *** Corporate MainVisual *** */ /* Common */ .c-mv-primary, .c-mv-subpage { padding-block-end: 12px; } .c-mv-primary .c-mv-content, .c-mv-subpage .c-mv-content { display: grid; align-items: center; } @media (min-width: 768px) { .c-mv-primary .c-mv-content, .c-mv-subpage .c-mv-content { --mv-inner: min(100% - var(--spacing) * 2, var(--container-lg)); --mv-gap: calc(var(--mv-inner) * 0.06); } } @media (max-width: 767.98px) { .c-mv-primary .c-mv-content, .c-mv-subpage .c-mv-content { padding-block-start: 30px; padding-inline: var(--spacing); row-gap: var(--content-spacing); grid-template-areas: "title" "image" "text"; } } .c-mv-primary .c-mv-title, .c-mv-subpage .c-mv-title { grid-area: title; } .c-mv-primary .c-mv-image, .c-mv-subpage .c-mv-image { grid-area: image; } @media (max-width: 767.98px) { .c-mv-primary .c-mv-image, .c-mv-subpage .c-mv-image { width: calc(100% + var(--spacing) * 2); margin-inline: calc(var(--spacing) * -1); } } .c-mv-primary .c-mv-text, .c-mv-subpage .c-mv-text { grid-area: text; } .c-mv-primary .c-mv-text p, .c-mv-subpage .c-mv-text p { font-weight: var(--fw-semibold); letter-spacing: -0.03em; } @media (max-width: 767.98px) { .c-mv-primary .c-mv-text p, .c-mv-subpage .c-mv-text p { font-size: 1.5rem; } } /* MainVisual 01 */ @media (min-width: 768px) { .c-mv-primary { background: url("/assets/images/common/mainvisual/img_bg_mainvisual_01_pc.webp") bottom/cover no-repeat; } } @media (max-width: 767.98px) { .c-mv-primary { background: url("/assets/images/common/mainvisual/img_bg_mainvisual_01_sp.webp") bottom/cover no-repeat; } } @media (min-width: 768px) { .c-mv-primary .c-mv-content { --mv-image: calc(var(--mv-inner) * 0.6); --mv-text: calc(var(--mv-inner) - var(--mv-image) - var(--mv-gap)); margin-block-start: 30px; grid-template-columns: minmax(0, 1fr) var(--mv-image) var(--mv-gap) var(--mv-text) minmax(0, 1fr); grid-template-areas: ". title title title ." "image image . text ."; } } @media (min-width: 768px) { .c-mv-primary .c-mv-title { margin-block-end: min(4.2%, 60px); } } @media (min-width: 768px) { .c-mv-primary .c-mv-text p { font-size: clamp(1.25rem, -0.084rem + 2.78vw, 2rem); } } /* MainVisual 02（下層ページ） */ @media (min-width: 768px) { .c-mv-subpage { background: url("/assets/images/common/mainvisual/img_bg_mainvisual_02_pc.webp") center/cover no-repeat; } } @media (max-width: 767.98px) { .c-mv-subpage { background: url("/assets/images/common/mainvisual/img_bg_mainvisual_02_sp.webp") center/cover no-repeat; } } @media (min-width: 768px) { .c-mv-subpage .c-mv-content { --mv-image: calc(var(--mv-inner) * 0.525); --mv-text: calc(var(--mv-inner) - var(--mv-image) - var(--mv-gap)); padding-block: min(5%, 72px); grid-template-columns: minmax(0, 1fr) var(--mv-text) var(--mv-gap) var(--mv-image) minmax(0, 1fr); grid-template-rows: 1fr auto auto 1fr; grid-template-areas: ". . . image image" ". title . image image" ". text . image image" ". . . image image"; } } @media (min-width: 768px) { .c-mv-subpage .c-mv-title { margin-block-end: min(8.17%, 42px); } } @media (min-width: 768px) { .c-mv-subpage .c-mv-text p { font-size: clamp(1.25rem, 0.804rem + 0.93vw, 1.5rem); } } /* *** Careers MainVisual *** */ .c-mv-careers { padding-block: 48px; background-size: cover; background-position: center; background-repeat: no-repeat; } @media (min-width: 768px) { .c-mv-careers { background-image: url("/assets/images/common/background/careers/img_bg_mainvisual_pc.webp"); } } @media (max-width: 767.98px) { .c-mv-careers { background-image: url("/assets/images/common/background/careers/img_bg_mainvisual_sp.webp"); } } /* *** Corporate Title *** */ body:not(.p-careers-top, .p-careers) { /* Page Title */ } body:not(.p-careers-top, .p-careers) .c-title-page { font-weight: var(--fw-semibold); line-height: 1.4; } @media (min-width: 768px) { body:not(.p-careers-top, .p-careers) .c-title-page { font-size: clamp(2.5rem, -0.169rem + 5.56vw, 4rem); } } @media (max-width: 767.98px) { body:not(.p-careers-top, .p-careers) .c-title-page { font-size: 3rem; } } body:not(.p-careers-top, .p-careers) .c-title-page .c-title-page-sub { font-size: 37.5%; display: block; } body:not(.p-careers-top, .p-careers) { /* Section Title */ } body:not(.p-careers-top, .p-careers) .c-title-section { font-weight: var(--fw-semibold); line-height: 1.4; display: flex; align-items: center; gap: var(--gap); margin-block-end: var(--content-spacing); } @media (min-width: 768px) { body:not(.p-careers-top, .p-careers) .c-title-section { font-size: 2rem; } } @media (max-width: 767.98px) { body:not(.p-careers-top, .p-careers) .c-title-section { font-size: 1.75rem; } } body:not(.p-careers-top, .p-careers) .c-title-section::after { content: ""; flex: 1; height: 3px; background-color: var(--color-primary); } @media (min-width: 768px) { body:not(.p-careers-top, .p-careers) .c-title-section::after { min-width: 45.67%; } } @media (max-width: 767.98px) { body:not(.p-careers-top, .p-careers) .c-title-section::after { min-width: 12px; } } body:not(.p-careers-top, .p-careers) { /* Block Title */ } body:not(.p-careers-top, .p-careers) .c-title-block, body:not(.p-careers-top, .p-careers) .c-title-block-plain { font-weight: var(--fw-semibold); font-size: 1.5rem; line-height: 1.4; display: flex; align-items: center; gap: 10px; margin-block-end: var(--content-spacing); } body:not(.p-careers-top, .p-careers) .c-title-block::before { content: ""; width: 14px; aspect-ratio: 1/1; border-radius: 50%; background-color: var(--color-primary); } body:not(.p-careers-top, .p-careers) [class*=l-media] .c-title-block, body:not(.p-careers-top, .p-careers) [class*=l-media] .c-title-block-plain, body:not(.p-careers-top, .p-careers) [class*=l-card] .c-title-block, body:not(.p-careers-top, .p-careers) [class*=l-card] .c-title-block-plain { margin-block-end: var(--content-spacing-sm); } body:not(.p-careers-top, .p-careers) { /* Content Title */ } body:not(.p-careers-top, .p-careers) .c-title-content, body:not(.p-careers-top, .p-careers) .c-title-content-plain { font-weight: var(--fw-semibold); font-size: 1.25rem; line-height: 1.4; display: flex; align-items: center; gap: 8px; margin-block-end: var(--content-spacing-sm); } body:not(.p-careers-top, .p-careers) .c-title-content::before { --margin-x: 14px; content: ""; margin-inline-end: var(--margin-x); width: 10px; aspect-ratio: 1/1; border-radius: 50%; background-color: var(--color-primary); box-shadow: var(--margin-x) 0 0 0 var(--color-primary); /* 横に14px（width10px＋間隔4px）ずらした位置に複製 */ } body:not(.p-careers-top, .p-careers) [class*=l-media] .c-title-content, body:not(.p-careers-top, .p-careers) [class*=l-media] .c-title-content-plain, body:not(.p-careers-top, .p-careers) [class*=l-card] .c-title-content, body:not(.p-careers-top, .p-careers) [class*=l-card] .c-title-content-plain { margin-block-end: 16px; } /* *** Corporate Title *** */ .p-careers-top, .p-careers { /* Page Title */ } .p-careers-top .c-title-page, .p-careers .c-title-page { font-weight: var(--fw-bold); line-height: 1.4; display: flex; align-items: baseline; gap: 12px 32px; } @media (min-width: 768px) { .p-careers-top .c-title-page, .p-careers .c-title-page { font-size: clamp(2rem, 1.112rem + 1.85vw, 2.5rem); } } @media (max-width: 767.98px) { .p-careers-top .c-title-page, .p-careers .c-title-page { font-size: 2rem; flex-direction: column; } } @media (min-width: 768px) { .p-careers-top .c-title-page .c-title-page-sub, .p-careers .c-title-page .c-title-page-sub { font-size: 40%; } } @media (max-width: 767.98px) { .p-careers-top .c-title-page .c-title-page-sub, .p-careers .c-title-page .c-title-page-sub { font-size: 0.875rem; } } .p-careers-top, .p-careers { /* Lead Title */ } .p-careers-top .l-lead-title, .p-careers .l-lead-title { font-weight: var(--fw-bold); line-height: 1.5; margin-block-end: var(--content-spacing); } @media (min-width: 768px) { .p-careers-top .l-lead-title, .p-careers .l-lead-title { font-size: 1.75rem; } } @media (max-width: 767.98px) { .p-careers-top .l-lead-title, .p-careers .l-lead-title { font-size: 1.375rem; } } .p-careers-top, .p-careers { /* Section Title */ } .p-careers-top .c-title-section, .p-careers .c-title-section { font-weight: var(--fw-bold); line-height: 1.4; margin-block-end: var(--content-spacing); } @media (min-width: 768px) { .p-careers-top .c-title-section, .p-careers .c-title-section { font-size: 1.5rem; } } @media (max-width: 767.98px) { .p-careers-top .c-title-section, .p-careers .c-title-section { font-size: 1.375rem; } } .p-careers-top, .p-careers { /* Block Title */ } .p-careers-top .c-title-block, .p-careers .c-title-block { font-weight: var(--fw-bold); line-height: 1.4; margin-block-end: var(--content-spacing-sm); } @media (min-width: 768px) { .p-careers-top .c-title-block, .p-careers .c-title-block { font-size: 1.5rem; } } @media (max-width: 767.98px) { .p-careers-top .c-title-block, .p-careers .c-title-block { font-size: 1.375rem; } } .p-careers-top, .p-careers { /* Content Title */ } .p-careers-top .c-title-content, .p-careers .c-title-content { font-weight: var(--fw-medium); line-height: 1.4; margin-block-end: var(--content-spacing-sm); } @media (min-width: 768px) { .p-careers-top .c-title-content, .p-careers .c-title-content { font-size: 1.25rem; } } @media (max-width: 767.98px) { .p-careers-top .c-title-content, .p-careers .c-title-content { font-size: 1.125rem; } } /* *** Corp Top *** */ .p-corp-top { /* -------------------------------------------------- Color & Font Setting -------------------------------------------------- */ --color-primary: #1E93E7; --color-secondary: #0098D8; --font-family: Noto Sans JP, sans-serif; } .p-corp-top .l-header { transition: background-color 0.45s ease, border-color 0.45s ease, box-shadow 0.45s ease; } .p-corp-top .l-header::before { content: ""; position: absolute; inset: 0; z-index: 0; background: linear-gradient(135deg, rgba(0, 0, 0, 0.16) 0%, rgba(0, 0, 0, 0.12) 51%, transparent 100%); backdrop-filter: blur(1px); opacity: 0; transition: opacity 0.45s ease; pointer-events: none; } .p-corp-top .l-header .l-header-inner { position: relative; z-index: 1; } .p-corp-top .l-header .l-header-nav-link { transition: color 0.45s ease, background-color 0.45s ease; } .p-corp-top .l-header.is-over-visual { background-color: transparent; border-bottom-color: transparent; box-shadow: 0px 1px 0px 0px rgba(255, 255, 255, 0.2); } .p-corp-top .l-header.is-over-visual::before { opacity: 1; } .p-corp-top .l-header.is-over-visual .l-header-logo svg { color: var(--color-white); --header-logo-primary: currentColor; --header-logo-accent: currentColor; } .p-corp-top .l-header.is-over-visual .l-header-hamburger-line { background-color: var(--color-white); } @media (min-width: 768px) { .p-corp-top .l-header.is-over-visual .l-header-nav-contact { background-color: var(--color-primary); } } @media (min-width: 768px) { .p-corp-top .l-header.is-over-visual .l-header-nav-link { color: var(--color-white); } } .p-corp-top { /* -------------------------------------------------- アニメーション -------------------------------------------------- */ } @keyframes visual-scroll-line { 0% { transform: scaleY(0); transform-origin: top center; } 40% { transform: scaleY(1); transform-origin: top center; } 40.01% { transform: scaleY(1); transform-origin: bottom center; } 80% { transform: scaleY(0); transform-origin: bottom center; } 100% { transform: scaleY(0); transform-origin: bottom center; } } @keyframes process-label-pop { 0% { opacity: 0; transform: translateY(1.25rem); } 55% { opacity: 1; transform: translateY(-0.35rem); } 75% { transform: translateY(0.12rem); } 100% { opacity: 1; transform: translateY(0); } } .p-corp-top { /* メインビジュアル：拡大→縮小（表示中はずっと動かし、完了前に次へ） */ } @keyframes fadezoom { 0% { transform: scale(1.2); } 100% { transform: scale(1); } } .p-corp-top { /* -------------------------------------------------- Section Title & Description -------------------------------------------------- */ } .p-corp-top .p-section-title-main { font-size: 1rem; letter-spacing: 0.12em; color: var(--color-primary); display: flex; align-items: center; column-gap: 10px; margin-block-end: 8px; } .p-corp-top .p-section-title-main::after { content: ""; display: block; width: 53px; height: 1px; background-color: currentColor; } @media (min-width: 768px) { .p-corp-top .p-section-head { margin-block-end: var(--block-spacing); } } @media (max-width: 767.98px) { .p-corp-top .p-section-head { margin-block-end: var(--content-spacing); } } .p-corp-top .p-section-head .p-section-title-sub { font-weight: var(--fw-bold); letter-spacing: 0.14em; line-height: 1.2; display: block; margin-block-end: var(--content-spacing-sm); } @media (min-width: 768px) { .p-corp-top .p-section-head .p-section-title-sub { font-size: 3rem; } } @media (max-width: 767.98px) { .p-corp-top .p-section-head .p-section-title-sub { font-size: 2rem; } } .p-corp-top .p-section-head .p-section-description { font-size: 1.25rem; font-weight: var(--fw-medium); letter-spacing: 0.14em; } .p-corp-top .p-process h2 .p-section-title-sub, .p-corp-top .p-4basis h2 .p-section-title-sub { font-weight: var(--fw-bold); letter-spacing: 0.14em; line-height: 1.2; display: block; } @media (min-width: 768px) { .p-corp-top .p-process h2 .p-section-title-sub, .p-corp-top .p-4basis h2 .p-section-title-sub { font-size: clamp(2rem, 0.666rem + 2.78vw, 4rem); margin-block-end: 7.34%; } } @media (max-width: 767.98px) { .p-corp-top .p-process h2 .p-section-title-sub, .p-corp-top .p-4basis h2 .p-section-title-sub { font-size: 2.5rem; margin-block-end: 20px; } } .p-corp-top .p-process .p-section-description, .p-corp-top .p-4basis .p-section-description { font-weight: var(--fw-medium); letter-spacing: 0.14em; } @media (min-width: 768px) { .p-corp-top .p-process .p-section-description, .p-corp-top .p-4basis .p-section-description { font-size: clamp(1rem, 0.669rem + 0.69vw, 1.5rem); } } @media (max-width: 767.98px) { .p-corp-top .p-process .p-section-description, .p-corp-top .p-4basis .p-section-description { font-size: 1.5rem; } } .p-corp-top { /* -------------------------------------------------- Section Layout -------------------------------------------------- */ /* Main Visual */ } .p-corp-top .p-top-visual { font-family: "Noto Serif JP", serif; color: var(--color-white); display: grid; place-items: center; top: calc(-1 * var(--headerH)); position: relative; } .p-corp-top .p-top-visual > * { width: 100%; grid-area: 1/1; } .p-corp-top .p-top-visual .p-top-visual-image { position: relative; z-index: 0; overflow: hidden; } @media (min-width: 768px) { .p-corp-top .p-top-visual .p-top-visual-image { aspect-ratio: 2048/1166; } } @media (max-width: 767.98px) { .p-corp-top .p-top-visual .p-top-visual-image { aspect-ratio: 820/1400; } } .p-corp-top .p-top-visual .p-top-visual-image .p-top-visual-image-item { width: 100%; height: 100%; overflow: hidden; } .p-corp-top .p-top-visual .p-top-visual-image { /* zoomアニメーション */ } .p-corp-top .p-top-visual .p-top-visual-image .p-top-visual-image-scale { display: flex; width: 100%; height: 100%; } @media (max-width: 767.98px) { .p-corp-top .p-top-visual .p-top-visual-image .p-top-visual-image-scale { flex-direction: column; } } .p-corp-top .p-top-visual .p-top-visual-image .p-top-visual-image-scale picture { flex: 1 1 50%; overflow: hidden; } .p-corp-top .p-top-visual .p-top-visual-image .p-top-visual-image-scale img { width: 100%; height: 100%; object-fit: cover; transform-origin: center center; will-change: transform; } .p-corp-top .p-top-visual .p-top-visual-image { /* JS有効時：左右を個別に opacity 切り替え＋枠内ズーム */ } .p-corp-top .p-top-visual .p-top-visual-image.is-visual-ready .p-top-visual-image-item { position: absolute; inset: 0; pointer-events: none; } .p-corp-top .p-top-visual .p-top-visual-image.is-visual-ready .p-top-visual-image-item picture { position: relative; z-index: 0; opacity: 0; transition: opacity 1500ms; } .p-corp-top .p-top-visual .p-top-visual-image.is-visual-ready .p-top-visual-image-item picture.is-active { z-index: 1; opacity: 1; } .p-corp-top .p-top-visual .p-top-visual-image.is-visual-ready .p-top-visual-image-item picture.is-front { z-index: 2; } .p-corp-top .p-top-visual .p-top-visual-image.is-visual-ready .p-top-visual-image-item picture.is-zoom-waiting img { transform: scale(1.2); } .p-corp-top .p-top-visual .p-top-visual-image.is-visual-ready .p-top-visual-image-item picture.is-zoom img { animation: fadezoom 14s 0s forwards; } @media (prefers-reduced-motion: reduce) { .p-corp-top .p-top-visual .p-top-visual-image.is-visual-ready .p-top-visual-image-item picture.is-active { opacity: 1; transition: none; } .p-corp-top .p-top-visual .p-top-visual-image.is-visual-ready .p-top-visual-image-item picture img { animation: none; transform: none; } } .p-corp-top .p-top-visual .p-top-visual-content { position: relative; z-index: 1; background: linear-gradient(135deg, rgba(0, 0, 0, 0.16) 0%, rgba(0, 0, 0, 0.12) 51%, transparent 100%); backdrop-filter: blur(2px); -webkit-backdrop-filter: blur(1px); box-shadow: 0px 0px 3px 1px rgba(255, 255, 255, 0.1); display: flex; flex-direction: column; align-items: center; } @media (min-width: 768px) { .p-corp-top .p-top-visual .p-top-visual-content { width: 45.83%; padding-block: 4%; } } @media (max-width: 767.98px) { .p-corp-top .p-top-visual .p-top-visual-content { width: calc(100% - var(--spacing) * 2); padding: 8.36% 7.16%; } } .p-corp-top .p-top-visual .p-top-visual-subtitle { font-weight: var(--fw-semibold); } @media (min-width: 768px) { .p-corp-top .p-top-visual .p-top-visual-subtitle { font-size: clamp(0.875rem, 0.544rem + 0.69vw, 1.375rem); } } @media (max-width: 767.98px) { .p-corp-top .p-top-visual .p-top-visual-subtitle { font-size: clamp(0.875rem, 0.397rem + 2.04vw, 1.375rem); } } .p-corp-top .p-top-visual .p-top-visual-title { font-weight: var(--fw-semibold); line-height: 1.2; text-align: center; } @media (min-width: 768px) { .p-corp-top .p-top-visual .p-top-visual-title { font-size: clamp(2.25rem, 0.748rem + 3.13vw, 4.5rem); margin-block-start: 1.36%; } } @media (max-width: 767.98px) { .p-corp-top .p-top-visual .p-top-visual-title { font-size: clamp(2.25rem, 0.103rem + 9.16vw, 4.5rem); margin-block-start: 1.42%; } } .p-corp-top .p-top-visual .p-top-visual-description { font-weight: var(--fw-bold); line-height: 1.8; } @media (min-width: 768px) { .p-corp-top .p-top-visual .p-top-visual-description { font-size: clamp(0.75rem, 0.5rem + 0.52vw, 1.125rem); margin-block-start: 2.58%; } } @media (max-width: 767.98px) { .p-corp-top .p-top-visual .p-top-visual-description { font-size: clamp(0.75rem, 0.391rem + 1.53vw, 1.125rem); margin-block-start: 5.38%; } } @media (min-width: 768px) { .p-corp-top .p-top-visual .c-button { margin-block-start: 7.58%; } } @media (max-width: 767.98px) { .p-corp-top .p-top-visual .c-button { margin-block-start: 8.22%; } } .p-corp-top .p-top-visual .c-button a { background-color: transparent; border-color: currentColor; } @media (max-width: 767.98px) { .p-corp-top .p-top-visual .c-button a { font-size: clamp(0.75rem, 0.511rem + 1.02vw, 1rem); } } .p-corp-top .p-top-visual .p-top-visual-scroll { position: absolute; z-index: 1; writing-mode: vertical-rl; font-family: "Abel", sans-serif; font-size: 1.125rem; letter-spacing: 0.075em; } @media (min-width: 768px) { .p-corp-top .p-top-visual .p-top-visual-scroll { bottom: 7.07%; right: 3.75%; } } @media (max-width: 767.98px) { .p-corp-top .p-top-visual .p-top-visual-scroll { bottom: 2.81%; right: 2.13%; } } .p-corp-top .p-top-visual .p-top-visual-scroll:after { content: ""; display: inline-block; margin-inline-start: 8px; width: 1px; height: 48px; background-color: currentColor; animation: visual-scroll-line 1.6s ease-in-out infinite; } .p-corp-top { /* Process */ } .p-corp-top .p-process { margin-block-start: calc(var(--section-spacing) - var(--headerH)); } .p-corp-top .p-process .p-process-inner { display: grid; } @media (min-width: 768px) { .p-corp-top .p-process .p-process-inner { grid-template-columns: 41.14% 56.55%; justify-content: flex-start; align-items: flex-end; padding-inline-start: max(var(--spacing), (100% - var(--container-lg)) / 2); padding-inline-end: var(--spacing); } } @media (max-width: 767.98px) { .p-corp-top .p-process .p-process-inner { grid-template-areas: "title" "image" "text"; padding-inline: var(--spacing); } } @media (max-width: 767.98px) { .p-corp-top .p-process .p-process-content { display: contents; } } @media (max-width: 767.98px) { .p-corp-top .p-process h2 { grid-area: title; } } @media (max-width: 767.98px) { .p-corp-top .p-process .p-process-text-wrap { grid-area: text; } } @media (max-width: 767.98px) { .p-corp-top .p-process .p-section-description { padding-inline-start: 1em; text-indent: -1em; } } .p-corp-top .p-process .p-process-text { font-weight: var(--fw-medium); line-height: 1.75; } @media (min-width: 768px) { .p-corp-top .p-process .p-process-text { font-size: clamp(0.875rem, 0.793rem + 0.17vw, 1rem); margin-block: 5.87% 5.14%; } } @media (max-width: 767.98px) { .p-corp-top .p-process .p-process-text { font-size: 1rem; margin-block: 14px 24px; } } @media (min-width: 768px) { .p-corp-top .p-process .p-process-image { position: relative; } } @media (max-width: 767.98px) { .p-corp-top .p-process .p-process-image { grid-area: image; margin-block-end: var(--content-spacing); } } @media (min-width: 768px) { .p-corp-top .p-process .p-process-image .p-process-image-label { width: 29.84%; position: absolute; } .p-corp-top .p-process .p-process-image .p-process-image-label:nth-of-type(1) { top: -34%; left: 3%; } .p-corp-top .p-process .p-process-image .p-process-image-label:nth-of-type(2) { top: -51%; left: 37%; } .p-corp-top .p-process .p-process-image .p-process-image-label:nth-of-type(3) { top: -16%; right: -5%; } .p-corp-top .p-process .p-process-image .p-process-image-label:nth-of-type(4) { bottom: -22%; right: 13%; } .p-corp-top .p-process .p-process-image .p-process-image-label:nth-of-type(5) { bottom: -10%; left: 13%; } } @media (max-width: 767.98px) { .p-corp-top .p-process .p-process-image .p-process-image-label { margin-block-start: 18px; } .p-corp-top .p-process .p-process-image .p-process-image-label h3 { color: var(--color-secondary); font-size: 1.25rem; font-weight: var(--fw-bold); line-height: 1; margin-block-end: 10px; } .p-corp-top .p-process .p-process-image .p-process-image-label h3 .p-process-title-number { font-size: 2.25rem; vertical-align: text-bottom; margin-inline-end: 0.2em; } .p-corp-top .p-process .p-process-image .p-process-image-label p { font-size: 0.875rem; } } .p-corp-top .p-process .p-process-image { /* PCのみlabelのポップアップアニメーション */ } @media (min-width: 768px) { .p-corp-top .p-process .p-process-image.is-animate-ready .p-process-image-label { opacity: 0; transform: translateY(1.25rem); } } @media (max-width: 767.98px) { .p-corp-top .p-process .p-process-image:not(.is-labels-visible) .p-process-image-label.is-fade-visible { animation-play-state: paused; } } @media (min-width: 768px) { .p-corp-top .p-process .p-process-image.is-labels-visible .p-process-image-label { animation: process-label-pop 0.55s ease-out forwards; } .p-corp-top .p-process .p-process-image.is-labels-visible .p-process-image-label:nth-of-type(1) { animation-delay: 0s; } .p-corp-top .p-process .p-process-image.is-labels-visible .p-process-image-label:nth-of-type(2) { animation-delay: 0.12s; } .p-corp-top .p-process .p-process-image.is-labels-visible .p-process-image-label:nth-of-type(3) { animation-delay: 0.24s; } .p-corp-top .p-process .p-process-image.is-labels-visible .p-process-image-label:nth-of-type(4) { animation-delay: 0.36s; } .p-corp-top .p-process .p-process-image.is-labels-visible .p-process-image-label:nth-of-type(5) { animation-delay: 0.48s; } } .p-corp-top .p-process .p-process-note { font-weight: var(--fw-light); } @media (min-width: 768px) { .p-corp-top .p-process .p-process-note { font-size: clamp(0.75rem, 0.668rem + 0.17vw, 0.875rem); margin-block-start: 5.33%; } } @media (max-width: 767.98px) { .p-corp-top .p-process .p-process-note { font-size: 0.75rem; margin-block-start: 32px; } } .p-corp-top { /* 4 Basis */ } .p-corp-top .p-4basis { padding-block-end: var(--block-spacing); background-image: linear-gradient(180deg, rgb(255, 255, 255) 0%, rgb(255, 255, 255) 12%, rgba(255, 255, 255, 0) 28%, rgba(245, 248, 251, 0) 72%, rgb(245, 248, 251) 88%, rgb(245, 248, 251) 100%), linear-gradient(180deg, rgba(255, 255, 255, 0.3) 0%, rgba(240, 245, 255, 0.3) 35%, rgba(222, 230, 242, 0.3) 83%), var(--background-image); background-position: center, center, center top; background-size: 100% 100%, 100% 100%, cover; background-repeat: no-repeat; } @media (min-width: 768px) { .p-corp-top .p-4basis { --background-image: url("/assets/images/top/top_why_daido_bg_pc.webp"); } } @media (max-width: 767.98px) { .p-corp-top .p-4basis { --background-image: url("/assets/images/top/top_why_daido_bg_sp.webp"); } } .p-corp-top .p-4basis .p-4basis-inner { display: flex; gap: 42px var(--gap); } @media (min-width: 768px) { .p-corp-top .p-4basis .p-4basis-inner { align-items: flex-end; padding-inline-end: max(var(--spacing), (100% - var(--container-lg)) / 2); } } @media (max-width: 767.98px) { .p-corp-top .p-4basis .p-4basis-inner { flex-direction: column; padding-inline: max(var(--spacing), (100% - var(--container-lg)) / 2); } } .p-corp-top .p-4basis .p-4basis-image { position: relative; z-index: 1; margin-inline-end: var(--shadow-width); margin-block-end: calc(var(--shadow-height) * 2); } @media (min-width: 768px) { .p-corp-top .p-4basis .p-4basis-image { --shadow-width: 28px; --shadow-height: 32px; flex-basis: 60.7%; } } @media (max-width: 767.98px) { .p-corp-top .p-4basis .p-4basis-image { --shadow-width: 12px; --shadow-height: 12px; margin-inline-start: calc(var(--spacing) * -1); } } .p-corp-top .p-4basis .p-4basis-image::before { content: ""; position: absolute; z-index: -1; top: var(--shadow-height); left: 0; width: calc(100% + var(--shadow-width)); height: 100%; background: url("/assets/images/top/top_why_daido_shadow.webp") left top/100% 100% no-repeat; opacity: 0.24; } @media (min-width: 768px) { .p-corp-top .p-4basis .p-4basis-content { flex-basis: auto; } } .p-corp-top .p-4basis .p-4basis-list { counter-reset: basis; display: grid; gap: var(--gap); } @media (min-width: 768px) { .p-corp-top .p-4basis .p-4basis-list { grid-template-columns: repeat(4, 1fr); } } @media (min-width: 768px) and (max-width: 1024px) { .p-corp-top .p-4basis .p-4basis-list { grid-template-columns: repeat(2, 1fr); } } @media (max-width: 767.98px) { .p-corp-top .p-4basis .p-4basis-list { grid-template-columns: 1fr; } } .p-corp-top .p-4basis .p-4basis-list li { position: relative; z-index: 0; background-color: var(--color-white); border-top-right-radius: 32px; border-bottom-right-radius: 32px; border: 1px solid #375d78; } @media (min-width: 768px) { .p-corp-top .p-4basis .p-4basis-list li { padding: 10% 8%; } } @media (max-width: 767.98px) { .p-corp-top .p-4basis .p-4basis-list li { padding: 28px 18px; } } .p-corp-top .p-4basis .p-4basis-list li { /* &::before { content: ''; position: absolute; inset: 0; padding: 1px; border-radius: inherit; pointer-events: none; background: linear-gradient(180deg, #71A0C2, #104871); -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0); -webkit-mask-composite: xor; mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0); mask-composite: exclude; } */ } .p-corp-top .p-4basis .p-4basis-list li::after { counter-increment: basis; content: counter(basis, decimal-leading-zero); color: rgba(229, 229, 229, 0.59); font-size: 128px; font-weight: var(--fw-semibold); font-family: "Inter", sans-serif; font-style: italic; line-height: 1; position: absolute; bottom: 4px; right: 16px; z-index: -1; } .p-corp-top .p-4basis .p-4basis-list li h3 { font-weight: var(--fw-medium); font-size: 1.25rem; line-height: 1.5; margin-block-end: 14px; } .p-corp-top .p-4basis .p-4basis-icons { display: flex; flex-wrap: wrap; } @media (min-width: 768px) { .p-corp-top .p-4basis .p-4basis-icons { max-width: calc(800px + var(--gap) * 3); margin-inline: auto; justify-content: center; } } @media (min-width: 768px) { .p-corp-top .p-4basis .p-4basis-icons li { flex-basis: 200px; } } @media (max-width: 767.98px) { .p-corp-top .p-4basis .p-4basis-icons li { flex-basis: 33.3333333333%; } } .p-corp-top .p-4basis .p-4basis-youtube { position: relative; overflow: hidden; pointer-events: none; } @media (min-width: 768px) { .p-corp-top .p-4basis .p-4basis-youtube { aspect-ratio: 1440/480; } } @media (max-width: 767.98px) { .p-corp-top .p-4basis .p-4basis-youtube { aspect-ratio: 375/220; } } .p-corp-top .p-4basis .p-4basis-youtube .p-4basis-youtube-inner { position: absolute; top: 50%; left: 50%; width: 100%; height: 100%; transform: translate(-50%, -50%); } .p-corp-top .p-4basis .p-4basis-youtube .p-4basis-youtube-cover { position: absolute; inset: 0; z-index: 1; width: 100%; height: 100%; object-fit: cover; opacity: 1; visibility: visible; transition: opacity 0.45s ease, visibility 0s 0.45s; pointer-events: none; } .p-corp-top .p-4basis .p-4basis-youtube.is-playing .p-4basis-youtube-cover { opacity: 0; visibility: hidden; } .p-corp-top .p-4basis .p-4basis-youtube iframe { position: absolute; top: 50%; left: 50%; border: 0; transform: translate(-50%, -50%); width: 300%; } @media (min-width: 768px) { .p-corp-top .p-4basis .p-4basis-youtube iframe { height: 168.75%; } } @media (max-width: 767.98px) { .p-corp-top .p-4basis .p-4basis-youtube iframe { height: 100%; } } .p-corp-top .p-4basis .p-4basis-youtube-link { font-size: 0.875rem; text-align: right; margin-block-start: 4px; } .p-corp-top { /* Products */ } .p-corp-top .p-products .p-products-list { display: grid; gap: var(--gap); } @media (min-width: 768px) { .p-corp-top .p-products .p-products-list { grid-template-columns: repeat(3, 1fr); } } @media (min-width: 768px) and (max-width: 1024px) { .p-corp-top .p-products .p-products-list { grid-template-columns: repeat(2, 1fr); } } @media (max-width: 767.98px) { .p-corp-top .p-products .p-products-list { grid-template-columns: 1fr; } } .p-corp-top .p-products .p-products-list li { position: relative; z-index: 0; background-color: var(--color-white); border-top-left-radius: 52px; border-bottom-right-radius: 64px; border: 1px solid #375d78; overflow: hidden; /* &::before { content: ''; position: absolute; inset: 0; padding: 1px; border-radius: inherit; pointer-events: none; background: linear-gradient(180deg, #71A0C2, #104871); -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0); -webkit-mask-composite: xor; mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0); mask-composite: exclude; } */ } @media (min-width: 768px) { .p-corp-top .p-products .p-products-list li .p-products-list-content { padding: 20px; } } @media (max-width: 767.98px) { .p-corp-top .p-products .p-products-list li .p-products-list-content { padding: 18px; } } .p-corp-top .p-products .p-products-list li .p-products-list-title { font-weight: var(--fw-medium); font-size: 1rem; text-align: center; margin-block-end: 18px; } .p-corp-top { /* News */ } .p-corp-top .p-news { background: linear-gradient(90deg, rgb(255, 255, 255) 0%, rgb(238, 238, 238) 100%); } @media (min-width: 768px) { .p-corp-top .p-news { padding-block: 82px 72px; } } @media (max-width: 767.98px) { .p-corp-top .p-news { padding-block: 72px; } } .p-corp-top .p-news .p-news-content { background-color: var(--color-white); } @media (min-width: 768px) { .p-corp-top .p-news .p-news-content { padding: 54px; } } @media (max-width: 767.98px) { .p-corp-top .p-news .p-news-content { padding: 40px; } } .p-corp-top .p-news .c-button { margin-inline-start: auto; } .p-corp-top { /* Job */ } .p-corp-top .p-job { padding-block: var(--section-spacing); } @media (min-width: 768px) { .p-corp-top .p-job { background: url("/assets/images/top/top_job_bg_pc.webp") top/cover no-repeat; } } @media (max-width: 767.98px) { .p-corp-top .p-job { background: url("/assets/images/top/top_job_bg_sp.webp") bottom/cover no-repeat; } } .p-corp-top .p-job .c-button { margin-inline-start: auto; } .p-corp-top .l-contact { margin-block-start: 0; } /* company */ .p-company .l-media-avatar { display: flex; gap: 32px 52px; } @media (max-width: 767.98px) { .p-company .l-media-avatar { flex-direction: column-reverse; } } .p-company .l-media-avatar .l-text-wrap { flex: 1; } @media (min-width: 768px) { .p-company .l-media-avatar .l-image-wrap { flex-basis: 18.33%; } } @media (max-width: 767.98px) { .p-company .l-media-avatar .l-image-wrap { width: 57.97%; margin-inline: auto; } } .p-company .l-media-avatar .p-avatar-name { text-align: right; margin-block-start: var(--content-spacing); } /* めっき製品・めっき上塗装品 */ .c-tab.with-bdr-btm { margin-block-end: 3rem; padding-block-end: 4rem; border-bottom: 1px solid #666666; } .c-list-check-mark { list-style-type: disc; padding-inline-start: 1em; } .c-products-faq-list li { display: flex; flex-direction: column; margin-block-end: 1rem; } .c-products-faq-list li .c-products-faq-question { margin-block-end: 0.5rem; font-weight: 700; } .c-products-faq-list li .c-products-faq-answer { margin-block-end: 1rem; } /* 海外拠点 td幅調整 */ @media (min-width: 768px) { .ajust_all th { width: 25%; } } @media (max-width: 767.98px) { .ajust_all th { width: 40% !important; } } .ajust_all th td { width: auto; } @media (min-width: 768px) { .ajust_thai th { width: 28%; } } @media (max-width: 767.98px) { .ajust_thai th { width: 40%; } } .ajust_thai td { width: auto; } /* 印刷製品 */ .l-printing_flow { margin-inline: auto; } @media (min-width: 768px) { .l-printing_flow { width: 80%; max-width: 1000px; } } @media (max-width: 767.98px) { .l-printing_flow { width: 80%; max-width: 380px; } } /* 樹脂めっきの原理 */ @media (min-width: 768px) { body:not(.p-careers-top, .p-careers) .p-tech .c-title-page { font-size: clamp(1.5rem, -0.276rem + 3.7vw, 2.5rem); } } @media (max-width: 767.98px) { body:not(.p-careers-top, .p-careers) .p-tech .c-title-page { font-size: 2.125rem; } } @media (min-width: 768px) { .p-tech .material-wrap { max-width: 740px; } } @media (max-width: 767.98px) { .p-tech .material-wrap { width: 80%; } } .p-tech .wrap-abs { display: inline-flex; justify-content: space-between; align-items: center; background: #F7F7F7; border-radius: 0.5rem; font-weight: bold; } @media (min-width: 768px) { .p-tech .wrap-abs { gap: 40px; margin: 1rem auto 0; padding: 1.75rem 2rem; font-size: 1.5rem; } } @media (max-width: 767.98px) { .p-tech .wrap-abs { gap: 1rem; margin: 0 auto; padding: 0.75rem; font-size: 1rem; } } .p-tech .explanation-wrap { margin-block: 1.5rem; padding: 1rem; border-radius: 0.5rem; background: #F7F7F7; } .p-tech .l-text-p03 { font-weight: bold; } @media (min-width: 768px) { .p-tech .l-text-p03 { font-size: 1.25rem; } } @media (max-width: 767.98px) { .p-tech .l-text-p03 { font-size: 1rem; } } .p-tech .l-list-groupe-p04 li { margin-block-end: 1.75rem; } .p-tech .l-list-groupe-p04 li.anode-bag { max-width: 200px; text-align: center; font-size: 0.75rem; } .p-tech .l-list-groupe-p04 li.anode-bag img { margin-block-end: 0.25rem; } .p-tech .l-list-groupe-p04 li h4 { margin-block-end: 0.5rem; font-weight: bold; } /* サステナビリティ */ .l-president-name { margin-inline: auto 0; text-align: center; font-size: 0.875rem; } @media (min-width: 768px) { .l-president-name { padding-block-start: 0.75rem; width: 30%; } .l-president-name img { max-width: 200px; } } @media (max-width: 767.98px) { .l-president-name { padding-block-start: 0.5rem; width: 50%; max-width: 200px; } } /* 環境への取り組み */ .l-list-environment { list-style: none; padding: 0; margin: 0; } .l-list-environment li { display: flex; margin-bottom: 1rem; } @media (max-width: 767.98px) { .l-list-environment li { flex-direction: column; } } .l-list-environment li .c-title { font-weight: bold; flex-basis: 22%; } .l-list-environment li .c-text { flex-basis: 78%; } /* SDGs */ .sdgds-logo-wrap { display: flex; flex-direction: column; align-items: center; } @media (min-width: 768px) { .sdgds-logo-wrap .sdgs-logo { margin-block-end: 1rem; max-width: 640px; } } @media (max-width: 767.98px) { .sdgds-logo-wrap .sdgs-logo { margin-block-end: 1rem; max-width: 480px; } } @media (min-width: 768px) { .l-media.l-media-sdgs .l-text-wrap { flex-basis: 65%; } } @media (min-width: 768px) { .l-media.l-media-sdgs .l-image-wrap { flex-basis: 35%; } } .l-media .c-list-sdgs { list-style: none; padding: 0; margin: 0; display: flex; flex-wrap: wrap; } .l-media .c-list-sdgs li { padding-inline-end: 0.5rem; } @media (min-width: 768px) { .l-media .c-list-sdgs li { margin-block: 0.5rem 1rem; width: 80px; } } @media (max-width: 767.98px) { .l-media .c-list-sdgs li { margin-block: 0.5rem 0; width: 80px; } } /* ISO */ .l-list-iso li { line-height: 1.8; } .l-list-iso li strong { font-weight: bold; } /* *** News *** */ /* *** ニュース一覧 *** */ .p-news-list { font-family: "Noto Sans JP", sans-serif; } .p-news-list .p-news-list-item { border-block-end: 1px solid #D4D4D4; } .p-news-list .p-news-list-link { display: grid; align-items: center; } @media (min-width: 768px) { .p-news-list .p-news-list-link { grid-template-columns: auto 110px 1fr; grid-template-areas: "time categories title"; column-gap: 64px; padding-block: 28px; } } @media (max-width: 767.98px) { .p-news-list .p-news-list-link { grid-template-columns: auto 1fr; grid-template-rows: auto auto; grid-template-areas: "time categories" "title title"; gap: 8px; padding-block: 20px; } } .p-news-list .p-news-list-link:hover .p-news-list-title { text-decoration: underline; } .p-news-list time { grid-area: time; font-size: 1rem; } .p-news-list .p-news-list-categories { grid-area: categories; display: flex; flex-wrap: wrap; gap: 8px; } .p-news-list .p-news-list-categories .p-news-list-category { flex-basis: 110px; font-size: 0.75rem; line-height: 1; border: 1px solid var(--color-light-gray-02); text-align: center; padding: 6px 4px; } .p-news-list .p-news-list-title { grid-area: title; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 1rem; } /* *** ニュース詳細 *** */ .p-news-detail .p-news-detail-meta { font-family: "Noto Sans JP", sans-serif; display: flex; gap: 24px; margin-block-end: var(--content-spacing); } .p-news-detail .p-news-detail-categories { display: flex; flex-wrap: wrap; gap: 8px; } .p-news-detail .p-news-category { width: 110px; font-size: 0.75rem; line-height: 1; border: 1px solid var(--color-light-gray-02); text-align: center; padding: 6px 4px; } .p-news-detail .p-news-detail-content > * { margin-block-end: 24px; } .p-news-detail .p-news-detail-content ul { list-style: disc; padding-inline-start: 1em; } .p-news-detail .p-news-detail-content ol { list-style: decimal; padding-inline-start: 1.5em; } .p-news-detail .p-news-detail-content table { width: 100%; border-collapse: collapse; border: 1px solid var(--color-light-gray-02); } .p-news-detail .p-news-detail-content table th, .p-news-detail .p-news-detail-content table td { padding: 8px; border: 1px solid var(--color-light-gray-02); } .p-news-detail .p-news-detail-content img { width: 100%; height: auto; } @media (min-width: 768px) { .p-news-detail .p-news-detail-content .wp-block-image { max-width: 600px; } } .p-news-detail .p-news-detail-content .wp-block-file { margin-block-end: var(--block-spacing); } .p-news-detail .p-news-detail-content .wp-block-file__button { flex-shrink: 0; margin: 0; padding: 8px 20px; color: var(--color-white); background-color: var(--color-primary); border-radius: 50px; margin-inline-start: 24px; } @media (max-width: 767.98px) { .p-news-detail .p-news-detail-content .wp-block-file__button { display: table; margin-block-start: 12px; margin-inline-start: 0; } } .p-news-detail .c-title-block { margin-block-start: var(--block-spacing); } .p-news-detail .c-title-content { margin-block-start: var(--content-spacing); } .p-news-detail .c-button { margin-block-end: var(--block-spacing); } /* *** Legal *** */ /* 個人情報保護方針、サイトのご利用について、情報セキュリティ方針、Cookie等の利用について */ .p-legal .c-mv-subpage .c-mv-content { --mv-image: calc(var(--mv-inner) * 0.15); } .p-legal .c-mv-title { margin-block-end: 0; } @media (min-width: 768px) { .p-legal .c-title-section { font-size: 1.75rem; } } @media (max-width: 767.98px) { .p-legal .c-title-section { font-size: 1.5rem; } } @media (max-width: 767.98px) { body:not(.p-careers-top, .p-careers) .p-legal .c-title-page { font-size: 2.5rem; } } @media (min-width: 768px) { body:not(.p-careers-top, .p-careers) .p-legal .c-title-section { font-size: 1.75rem; } } @media (max-width: 767.98px) { body:not(.p-careers-top, .p-careers) .p-legal .c-title-section { font-size: 1.5rem; } } /* purpose */ body.is-purpose-scroll-lock { overflow: hidden; } .p-purpose { /* Main Visual */ } .p-purpose .p-top-visual { position: relative; } .p-purpose .p-top-visual .p-top-visual-image { position: sticky; inset-block-start: 0; z-index: 0; height: 100svh; } .p-purpose .p-top-visual .p-top-visual-image::after { content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none; opacity: 0; background: linear-gradient(to bottom, rgba(255, 255, 255, 0.8) 0%, rgba(255, 255, 255, 0.4) 70%, rgb(255, 255, 255) 100%); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); transition: opacity 1s ease; } .p-purpose .p-top-visual .p-top-visual-image picture { display: block; width: 100%; height: 100%; } .p-purpose .p-top-visual .p-top-visual-image img { display: block; width: 100%; height: 100%; object-fit: cover; } .p-purpose .p-top-visual .p-top-visual-content { position: relative; z-index: 1; margin-block-start: -100svh; padding-block-end: 50svh; } .p-purpose .p-top-visual h1 { display: grid; place-items: center; min-height: calc(100svh - var(--headerH)); font-family: "Noto Serif JP", serif; font-weight: var(--fw-bold); text-align: center; } @media (min-width: 768px) { .p-purpose .p-top-visual h1 { font-size: 3rem; } } @media (max-width: 767.98px) { .p-purpose .p-top-visual h1 { font-size: clamp(1.5rem, 0.428rem + 5.36vw, 3rem); } } .p-purpose .p-top-visual .p-top-visual-text { line-height: 3; text-align: center; } @media (min-width: 768px) { .p-purpose .p-top-visual .p-top-visual-text { font-size: 1.5rem; } } @media (max-width: 767.98px) { .p-purpose .p-top-visual .p-top-visual-text { font-size: clamp(1rem, 0.642rem + 1.79vw, 1.5rem); } } .p-purpose .p-top-visual { /* JS有効時：イントロ（ぼかし → h1） */ } .p-purpose .p-top-visual.is-visual-ready .p-top-visual-content { visibility: hidden; } .p-purpose .p-top-visual.is-visual-ready h1 { opacity: 0; transition: opacity 2.5s ease; } .p-purpose .p-top-visual.is-blur-ready .p-top-visual-image::after { opacity: 1; } .p-purpose .p-top-visual.is-visual-ready.is-intro-ready .p-top-visual-content { visibility: visible; } .p-purpose .p-top-visual.is-visual-ready.is-intro-ready h1 { opacity: 1; } .p-purpose .p-top-visual { /* Scroll Hint（h1表示完了＝スクロールロック解除と同時に表示。「大同工業株式会社は」の段落が画面に入ったら非表示。元に戻す場合はこのブロックを削除） */ } .p-purpose .p-top-visual .p-top-visual-scroll { position: absolute; z-index: 2; writing-mode: vertical-rl; font-family: "Abel", sans-serif; font-size: 1rem; color: var(--color-black); opacity: 0; pointer-events: none; transition: opacity 0.4s ease; } @media (min-width: 768px) { .p-purpose .p-top-visual .p-top-visual-scroll { bottom: 7.07%; right: 3.75%; } } @media (max-width: 767.98px) { .p-purpose .p-top-visual .p-top-visual-scroll { bottom: 2.81%; right: 2.13%; } } .p-purpose .p-top-visual .p-top-visual-scroll:after { content: ""; display: inline-block; margin-inline-start: 8px; width: 1px; height: 48px; background-color: currentColor; animation: visual-scroll-line 1.6s ease-in-out infinite; } .p-purpose .p-top-visual.is-visual-ready.is-intro-ready .p-top-visual-scroll { opacity: 1; } .p-purpose .p-top-visual.is-visual-ready.is-intro-ready.is-scroll-hint-hidden .p-top-visual-scroll { opacity: 0; } @media (prefers-reduced-motion: reduce) { .p-purpose .p-top-visual.is-visual-ready .p-top-visual-content { visibility: visible; } .p-purpose .p-top-visual.is-visual-ready h1 { opacity: 1; transition: none; } .p-purpose .p-top-visual.is-visual-ready .p-top-visual-scroll { opacity: 1; } .p-purpose .p-top-visual.is-visual-ready .p-top-visual-scroll:after { animation: none; } .p-purpose .p-top-visual.is-scroll-hint-hidden .p-top-visual-scroll { opacity: 0; } .p-purpose .p-top-visual.is-blur-ready .p-top-visual-image::after { transition: none; } } .p-purpose { /* Common Section */ } @media (min-width: 768px) { .p-purpose .p-feature-wrapper { display: grid; grid-template-rows: 1fr auto; } } @media (min-width: 768px) { .p-purpose .p-feature-wrapper .p-feature-image { grid-row: 1/-1; grid-column: 1; aspect-ratio: 1440/810; overflow: hidden; } .p-purpose .p-feature-wrapper .p-feature-image img { display: block; width: 100%; height: 100%; object-fit: cover; will-change: transform; transform: none; } } @media (max-width: 767.98px) { .p-purpose .p-feature-wrapper .p-feature-image { margin-block-end: 32px; } } @media (min-width: 768px) { .p-purpose .p-feature-wrapper .p-feature-title { grid-row: 1; grid-column: 1; z-index: 1; align-self: center; } .p-purpose .p-feature-wrapper .p-feature-title.dir-right { text-align: right; } .p-purpose .p-feature-wrapper .p-feature-title.color-white { color: var(--color-white); } } .p-purpose .p-feature-wrapper .p-feature-title h2 { font-weight: var(--fw-bold); } @media (min-width: 768px) { .p-purpose .p-feature-wrapper .p-feature-title h2 { font-size: clamp(1.5rem, 0.929rem + 1.19vw, 2rem); } } @media (max-width: 767.98px) { .p-purpose .p-feature-wrapper .p-feature-title h2 { font-size: 1.5rem; margin-block-end: 20px; } } .p-purpose .p-feature-wrapper .p-feature-title .p-feature-title-sub { font-size: 62.5%; display: block; } @media (min-width: 768px) { .p-purpose .p-feature-wrapper .p-feature-content { grid-row: 2; grid-column: 1; z-index: 1; /* background-color: rgb(255 255 255 / 80%); */ background: linear-gradient(to bottom, rgba(255, 255, 255, 0.7) 0%, rgb(255, 255, 255) 100%); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); padding-block: var(--spacing); } } .p-purpose .p-feature-wrapper .p-feature-content-text { line-height: 1.8; letter-spacing: -0.03em; } @media (min-width: 768px) { .p-purpose .p-feature-wrapper .p-feature-content-text { font-size: clamp(0.875rem, 0.448rem + 0.89vw, 1.25rem); } } @media (max-width: 767.98px) { .p-purpose .p-feature-wrapper .p-feature-content-text { font-size: 1rem; } } .p-purpose .p-feature-wrapper { /* PC: 画像移動 + タイトル／本文のスクロール連動 FadeInUp */ } @media (min-width: 768px) { .p-purpose .p-feature-wrapper.is-feature-anim .p-feature-image img { transform: translate3d(0, 48px, 0) scale(1.12); } .p-purpose .p-feature-wrapper.is-feature-anim .p-feature-title, .p-purpose .p-feature-wrapper.is-feature-anim .p-feature-content { opacity: 0; transform: translate3d(0, 7.5rem, 0); will-change: opacity, transform; } } @media (prefers-reduced-motion: reduce) { .p-purpose .p-feature-wrapper .p-feature-image img { transform: none; } .p-purpose .p-feature-wrapper.is-feature-anim .p-feature-title, .p-purpose .p-feature-wrapper.is-feature-anim .p-feature-content { opacity: 1; transform: none; } } .p-purpose { /* Section Title */ } .p-purpose .p-section-title { font-weight: var(--fw-bold); } @media (min-width: 768px) { .p-purpose .p-section-title { font-size: 2rem; margin-block-end: var(--content-spacing); } } @media (max-width: 767.98px) { .p-purpose .p-section-title { font-size: 1.5rem; margin-block-end: 20px; } } .p-purpose { /* 大同工業が大切にする姿勢 */ } .p-purpose .p-attitude-content h3 { font-family: "Noto Serif JP", serif; font-weight: var(--fw-bold); margin-block-end: 20px; } @media (min-width: 768px) { .p-purpose .p-attitude-content h3 { font-size: 2rem; } } @media (max-width: 767.98px) { .p-purpose .p-attitude-content h3 { font-size: 1.5rem; } } .p-purpose .p-attitude-content p { line-height: 1.8; } @media (min-width: 768px) { .p-purpose .p-attitude-content p { font-size: 1.25rem; } } @media (max-width: 767.98px) { .p-purpose .p-attitude-content p { font-size: 1rem; } } /* サステナビリティ */ .c-table-center.facilities-list-other-table tbody td:nth-child(4) { text-align: left !important; } .c-table-center.facilities-list-other-table tbody td.no-wrap { white-space: nowrap; } /* 品質・設備／設備一覧：設備テーブルの列幅・折り返し調整 */ .p-business .c-table-center.facilities-equipment-table.facilities-list-other-table th:nth-child(2), .p-business .c-table-center.facilities-equipment-table.facilities-list-other-table td:nth-child(2) { text-align: center; } @media (min-width: 768px) { .p-business .c-table-center.facilities-equipment-table.facilities-list-other-table th:nth-child(1), .p-business .c-table-center.facilities-equipment-table.facilities-list-other-table td:nth-child(1) { min-width: 220px; white-space: nowrap; } .p-business .c-table-center.facilities-equipment-table.facilities-list-other-table th:nth-child(2), .p-business .c-table-center.facilities-equipment-table.facilities-list-other-table td:nth-child(2) { white-space: nowrap; } .p-business .c-table-center.facilities-equipment-table.facilities-list-other-table th:nth-child(3), .p-business .c-table-center.facilities-equipment-table.facilities-list-other-table td:nth-child(3) { min-width: 220px; white-space: nowrap; } .p-business .c-table-center.facilities-equipment-table.facilities-list-other-table th:nth-child(4), .p-business .c-table-center.facilities-equipment-table.facilities-list-other-table td:nth-child(4) { min-width: 320px; } } .p-business .c-table-center.facilities-equipment-table:not(.facilities-list-other-table) th:nth-child(3), .p-business .c-table-center.facilities-equipment-table:not(.facilities-list-other-table) td:nth-child(3) { text-align: center; } /* *** Careers Top *** */ .p-careers-top { /* -------------------------------------------------- Color Setting -------------------------------------------------- */ } .p-careers-top .l-header { transition: background-color 0.45s ease, border-color 0.45s ease, box-shadow 0.45s ease; } .p-careers-top .l-header .l-header-inner { position: relative; z-index: 1; } .p-careers-top .l-header .l-header-nav-link { transition: color 0.45s ease, background-color 0.45s ease; } .p-careers-top .l-header.is-over-visual { background-color: transparent; border-bottom-color: transparent; } .p-careers-top .l-header.is-over-visual .l-header-logo svg { color: var(--color-white); --header-logo-primary: currentColor; --header-logo-accent: currentColor; } .p-careers-top .l-header.is-over-visual .l-header-hamburger-line { background-color: var(--color-white); } @media (min-width: 768px) { .p-careers-top .l-header.is-over-visual .l-header-nav-contact { background-color: var(--color-primary); } } @media (min-width: 768px) { .p-careers-top .l-header.is-over-visual .l-header-nav-link { color: var(--color-white); } } .p-careers-top { /* -------------------------------------------------- Animation -------------------------------------------------- */ /* Float Animation（段差=transform / 浮遊=translate） */ } @keyframes careers-float-6 { 0%, 100% { translate: 0 0; } 50% { translate: 0 -6px; } } @keyframes careers-float-7 { 0%, 100% { translate: 0 0; } 50% { translate: 0 -7px; } } @keyframes careers-float-8 { 0%, 100% { translate: 0 0; } 50% { translate: 0 -8px; } } @keyframes careers-float-9 { 0%, 100% { translate: 0 0; } 50% { translate: 0 -9px; } } @keyframes careers-float-10 { 0%, 100% { translate: 0 0; } 50% { translate: 0 -10px; } } @keyframes careers-float-11 { 0%, 100% { translate: 0 0; } 50% { translate: 0 -11px; } } @keyframes careers-float-12 { 0%, 100% { translate: 0 0; } 50% { translate: 0 -12px; } } @keyframes careers-float-13 { 0%, 100% { translate: 0 0; } 50% { translate: 0 -13px; } } @media (prefers-reduced-motion: reduce) { .p-careers-top .js-float.is-float-active { animation: none; } } .p-careers-top { /* Float Animation（.p-job-gallery のみ：左右の動きを追加） */ } @keyframes careers-float-gallery-6 { 0%, 100% { translate: 0 0; } 25% { translate: 1.2px -2.1px; } 50% { translate: 0 -0.9px; } 75% { translate: -1.2px -2.1px; } } @keyframes careers-float-gallery-7 { 0%, 100% { translate: 0 0; } 25% { translate: 1.4px -2.45px; } 50% { translate: 0 -1.05px; } 75% { translate: -1.4px -2.45px; } } @keyframes careers-float-gallery-8 { 0%, 100% { translate: 0 0; } 25% { translate: 1.6px -2.8px; } 50% { translate: 0 -1.2px; } 75% { translate: -1.6px -2.8px; } } @keyframes careers-float-gallery-9 { 0%, 100% { translate: 0 0; } 25% { translate: 1.8px -3.15px; } 50% { translate: 0 -1.35px; } 75% { translate: -1.8px -3.15px; } } @keyframes careers-float-gallery-10 { 0%, 100% { translate: 0 0; } 25% { translate: 2px -3.5px; } 50% { translate: 0 -1.5px; } 75% { translate: -2px -3.5px; } } @keyframes careers-float-gallery-11 { 0%, 100% { translate: 0 0; } 25% { translate: 2.2px -3.85px; } 50% { translate: 0 -1.65px; } 75% { translate: -2.2px -3.85px; } } @keyframes careers-float-gallery-12 { 0%, 100% { translate: 0 0; } 25% { translate: 2.4px -4.2px; } 50% { translate: 0 -1.8px; } 75% { translate: -2.4px -4.2px; } } @keyframes careers-float-gallery-13 { 0%, 100% { translate: 0 0; } 25% { translate: 2.6px -4.55px; } 50% { translate: 0 -1.95px; } 75% { translate: -2.6px -4.55px; } } .p-careers-top { /* Fade In（.p-job-image のみ：opacity + filterで実装。transform/translateは使わず、段違い配置(transform)や浮遊アニメーション(translate)と競合しないようにする。 drop-shadowは常時のfilter指定と同じ値をkeyframe内にも含める（filterはプロパティ単位で上書きされるため、blurと一緒に指定しないとアニメーション中に影が消えてしまう） */ } @keyframes p-job-image-fade-in { 0% { opacity: 0; filter: blur(4px) drop-shadow(0 16px 48px rgba(39, 49, 66, 0.22)); } 100% { opacity: 1; filter: blur(0) drop-shadow(0 16px 48px rgba(39, 49, 66, 0.22)); } } .p-careers-top { /* Fade In（.p-job-gallery のみ：透過度0のときは scale(1.1) から開始し、軽くぼかす。 drop-shadowは常時のfilter指定と同じ値をkeyframe内にも含める（filterはプロパティ単位で上書きされるため、blurと一緒に指定しないとアニメーション中に影が消えてしまう） */ } @keyframes p-job-gallery-fade-in { 0% { opacity: 0; transform: scale(1.1); filter: blur(4px) drop-shadow(0 16px 48px rgba(39, 49, 66, 0.22)); } 100% { opacity: 1; transform: scale(1); filter: blur(0) drop-shadow(0 16px 48px rgba(39, 49, 66, 0.22)); } } .p-careers-top { /* -------------------------------------------------- Section Title & Description -------------------------------------------------- */ } .p-careers-top .p-section-title-main { font-weight: var(--fw-bold); letter-spacing: 0.14em; color: var(--color-primary); display: block; } @media (min-width: 768px) { .p-careers-top .p-section-title-main { font-size: 1rem; margin-block-end: 8px; } } @media (max-width: 767.98px) { .p-careers-top .p-section-title-main { font-size: 0.875rem; margin-block-end: 12px; } } .p-careers-top .p-section-description { font-weight: var(--fw-medium); line-height: 1.8; letter-spacing: 0.14em; } @media (min-width: 768px) { .p-careers-top .p-section-description { font-size: 1.25rem; } } @media (max-width: 767.98px) { .p-careers-top .p-section-description { font-size: 1rem; } } .p-careers-top .p-section-head { margin-block-end: var(--content-spacing); } .p-careers-top .p-section-head .p-section-title-sub { font-weight: var(--fw-bold); line-height: 1.25; display: block; } @media (min-width: 768px) { .p-careers-top .p-section-head .p-section-title-sub { font-size: 3rem; margin-block-end: 16px; } } @media (max-width: 767.98px) { .p-careers-top .p-section-head .p-section-title-sub { font-size: 2rem; margin-block-end: 28px; } } .p-careers-top .p-section-head .p-section-title-sub .p-section-title-third { font-size: 50%; display: block; } .p-careers-top .p-section-head .p-section-title-sub .p-section-title-small { font-size: 66.67%; } .p-careers-top .p-job .p-section-title-sub { font-weight: var(--fw-bold); line-height: 1.25; display: block; } @media (min-width: 768px) { .p-careers-top .p-job .p-section-title-sub { font-size: clamp(2rem, 0.939rem + 2.21vw, 2.5rem); margin-block-end: 32px; } } @media (max-width: 767.98px) { .p-careers-top .p-job .p-section-title-sub { font-size: 2rem; margin-block-end: var(--content-spacing-sm); } } .p-careers-top .p-job .p-section-title-sub .p-section-title-third { font-size: 60%; margin-block-end: 20px; display: block; } .p-careers-top { /* -------------------------------------------------- Section Layout -------------------------------------------------- */ --curve-radius: 18.06vw; } @media (min-width: 768px) { .p-careers-top { --curve-space-end: 180px; } } @media (max-width: 767.98px) { .p-careers-top { --curve-space-end: 72px; } } .p-careers-top { /* Background Area */ } .p-careers-top .p-section-group-01 { padding-block-end: var(--curve-space-end); background: linear-gradient(180deg, rgb(106, 160, 247) 0%, rgb(247, 249, 252) 51%); top: calc(-1 * var(--headerH)); position: relative; z-index: 1; isolation: isolate; overflow: hidden; } @media (min-width: 768px) { .p-careers-top .p-section-group-01 { border-bottom-left-radius: var(--curve-radius); } } .p-careers-top .p-section-group-01::before { content: ""; position: absolute; inset: 0; z-index: -1; background: url("/assets/images/job/job_top_bg_wave.webp") center bottom 27%/100% no-repeat; opacity: 0.4; pointer-events: none; } @media (max-width: 767.98px) { .p-careers-top .p-section-group-01::before { background-position: center bottom 12%; } } .p-careers-top { /* Image Word */ } .p-careers-top .p-image-word { position: absolute; z-index: 1; pointer-events: none; } @media (min-width: 768px) { .p-careers-top .p-image-word { top: var(--section-spacing); right: 8.92%; } } @media (max-width: 767.98px) { .p-careers-top .p-image-word { top: var(--spacing); right: var(--spacing); } } @media (min-width: 768px) { .p-careers-top .p-about .p-image-word { top: 0; width: min(23.33%, 280px); } } @media (max-width: 767.98px) { .p-careers-top .p-about .p-image-word { top: -50px; width: clamp(7.5rem, 4.822rem + 13.39vw, 11.25rem); } } @media (min-width: 768px) { .p-careers-top .p-occupation .p-image-word { width: min(23%, 276px); } } @media (max-width: 767.98px) { .p-careers-top .p-occupation .p-image-word { width: clamp(7.5rem, 5.938rem + 7.81vw, 9.688rem); } } @media (min-width: 768px) { .p-careers-top .p-interview .p-image-word { width: min(20.5%, 246px); } } @media (max-width: 767.98px) { .p-careers-top .p-interview .p-image-word { width: clamp(7.5rem, 5.268rem + 11.16vw, 10.625rem); } } .p-careers-top { /* Main Visual */ } .p-careers-top .p-top-visual { margin-block-start: var(--headerH); } @media (min-width: 768px) { .p-careers-top .p-top-visual { padding-inline-start: min(3.6%, 52px); padding-inline-end: max(var(--spacing), (100% - var(--container-md)) / 2); } } .p-careers-top .p-top-visual { /* 幅広画面のみ：左が52pxで頭打ちのまま右だけ広がり続け、全体が左に寄って見えるため、右と同じ中央寄せ計算に切り替えて中央に来るようにする（狭い画面には影響しない）。元に戻す場合はこのブロックを削除 */ } @media (min-width: 1440px) { .p-careers-top .p-top-visual { padding-inline-start: max(var(--spacing), (100% - var(--container-md)) / 2); } } @media (max-width: 767.98px) { .p-careers-top .p-top-visual { padding-inline: var(--spacing); } } .p-careers-top .p-top-visual .p-top-visual-inner { display: grid; align-items: center; } @media (min-width: 768px) { .p-careers-top .p-top-visual .p-top-visual-inner { grid-template-columns: 51.68% 1fr; column-gap: 1.92%; } } @media (max-width: 767.98px) { .p-careers-top .p-top-visual .p-top-visual-inner { grid-template-columns: 1fr 40%; grid-template-areas: "title image" "text text"; row-gap: 32px; } } @media (max-width: 767.98px) { .p-careers-top .p-top-visual .p-top-visual-image { margin-inline-end: calc(var(--spacing) * -1); grid-area: image; transform: scale(1.3); position: relative; z-index: -1; } } @media (max-width: 767.98px) { .p-careers-top .p-top-visual .p-top-visual-content { display: contents; } } .p-careers-top .p-top-visual h1 { font-weight: var(--fw-bold); line-height: 1.4; letter-spacing: -0.03em; } @media (min-width: 768px) { .p-careers-top .p-top-visual h1 { font-size: clamp(2rem, -1.187rem + 6.64vw, 4rem); } } @media (max-width: 767.98px) { .p-careers-top .p-top-visual h1 { font-size: clamp(1.5rem, 0.068rem + 6.11vw, 3rem); grid-area: title; } } .p-careers-top .p-top-visual .p-top-visual-content-text { font-weight: var(--fw-medium); } @media (min-width: 768px) { .p-careers-top .p-top-visual .p-top-visual-content-text { font-size: clamp(1.125rem, 0.53rem + 1.24vw, 1.5rem); margin-block-start: 4.6%; } } @media (max-width: 767.98px) { .p-careers-top .p-top-visual .p-top-visual-content-text { font-size: 1.125rem; grid-area: text; } } .p-careers-top { /* Our Job */ } .p-careers-top .p-job .p-job-inner { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--gap); } @media (max-width: 767.98px) { .p-careers-top .p-job .p-job-inner { flex-direction: column; } } .p-careers-top .p-job .p-job-image { display: flex; gap: var(--job-image-gap); } @media (min-width: 768px) { .p-careers-top .p-job .p-job-image { --job-image-gap: 20px; flex-basis: 53.98%; } } @media (max-width: 767.98px) { .p-careers-top .p-job .p-job-image { --job-image-gap: 14px; margin-block-end: 20%; } } .p-careers-top .p-job .p-job-image-item { flex-basis: calc(33.3333333333% - var(--job-image-gap) * 2 / 3); /* Drop Shadow（薄いダークブルー・広がり多め。p-job-gallery と同じ値） */ filter: drop-shadow(0 16px 48px rgba(39, 49, 66, 0.22)); /* Float Animation：少しゆっくりに＋ Fade In：左→中央→右の順（共通の.js-float基本ルールと詳細度が同点だとanimationごと上書きされるため、 is-float-dist-Nまで含めて詳細度で確実に勝つようにし、浮遊とフェードインの2つのanimationを1つのプロパティにまとめて指定する。元に戻す場合はこのブロックを削除） */ } .p-careers-top .p-job .p-job-image-item.js-float.is-float-active.is-float-dist-6 { animation-duration: calc(var(--float-duration, 3.5s) * 2); } .p-careers-top .p-job .p-job-image-item.js-float.is-float-active.is-float-dist-6.js-fade-up.is-fade-visible { animation: careers-float-6 calc(var(--float-duration, 3.5s) * 2) ease-in-out var(--float-delay, 0s) infinite, p-job-image-fade-in 1s ease-out var(--fade-up-delay, 0s) forwards; } .p-careers-top .p-job .p-job-image-item.js-float.is-float-active.is-float-dist-7 { animation-duration: calc(var(--float-duration, 3.5s) * 2); } .p-careers-top .p-job .p-job-image-item.js-float.is-float-active.is-float-dist-7.js-fade-up.is-fade-visible { animation: careers-float-7 calc(var(--float-duration, 3.5s) * 2) ease-in-out var(--float-delay, 0s) infinite, p-job-image-fade-in 1s ease-out var(--fade-up-delay, 0s) forwards; } .p-careers-top .p-job .p-job-image-item.js-float.is-float-active.is-float-dist-8 { animation-duration: calc(var(--float-duration, 3.5s) * 2); } .p-careers-top .p-job .p-job-image-item.js-float.is-float-active.is-float-dist-8.js-fade-up.is-fade-visible { animation: careers-float-8 calc(var(--float-duration, 3.5s) * 2) ease-in-out var(--float-delay, 0s) infinite, p-job-image-fade-in 1s ease-out var(--fade-up-delay, 0s) forwards; } .p-careers-top .p-job .p-job-image-item.js-float.is-float-active.is-float-dist-9 { animation-duration: calc(var(--float-duration, 3.5s) * 2); } .p-careers-top .p-job .p-job-image-item.js-float.is-float-active.is-float-dist-9.js-fade-up.is-fade-visible { animation: careers-float-9 calc(var(--float-duration, 3.5s) * 2) ease-in-out var(--float-delay, 0s) infinite, p-job-image-fade-in 1s ease-out var(--fade-up-delay, 0s) forwards; } .p-careers-top .p-job .p-job-image-item.js-float.is-float-active.is-float-dist-10 { animation-duration: calc(var(--float-duration, 3.5s) * 2); } .p-careers-top .p-job .p-job-image-item.js-float.is-float-active.is-float-dist-10.js-fade-up.is-fade-visible { animation: careers-float-10 calc(var(--float-duration, 3.5s) * 2) ease-in-out var(--float-delay, 0s) infinite, p-job-image-fade-in 1s ease-out var(--fade-up-delay, 0s) forwards; } .p-careers-top .p-job .p-job-image-item.js-float.is-float-active.is-float-dist-11 { animation-duration: calc(var(--float-duration, 3.5s) * 2); } .p-careers-top .p-job .p-job-image-item.js-float.is-float-active.is-float-dist-11.js-fade-up.is-fade-visible { animation: careers-float-11 calc(var(--float-duration, 3.5s) * 2) ease-in-out var(--float-delay, 0s) infinite, p-job-image-fade-in 1s ease-out var(--fade-up-delay, 0s) forwards; } .p-careers-top .p-job .p-job-image-item.js-float.is-float-active.is-float-dist-12 { animation-duration: calc(var(--float-duration, 3.5s) * 2); } .p-careers-top .p-job .p-job-image-item.js-float.is-float-active.is-float-dist-12.js-fade-up.is-fade-visible { animation: careers-float-12 calc(var(--float-duration, 3.5s) * 2) ease-in-out var(--float-delay, 0s) infinite, p-job-image-fade-in 1s ease-out var(--fade-up-delay, 0s) forwards; } .p-careers-top .p-job .p-job-image-item.js-float.is-float-active.is-float-dist-13 { animation-duration: calc(var(--float-duration, 3.5s) * 2); } .p-careers-top .p-job .p-job-image-item.js-float.is-float-active.is-float-dist-13.js-fade-up.is-fade-visible { animation: careers-float-13 calc(var(--float-duration, 3.5s) * 2) ease-in-out var(--float-delay, 0s) infinite, p-job-image-fade-in 1s ease-out var(--fade-up-delay, 0s) forwards; } @media (min-width: 768px) { .p-careers-top .p-job .p-job-image-item:nth-child(1) { transform: translateY(6.96%); } } @media (max-width: 767.98px) { .p-careers-top .p-job .p-job-image-item:nth-child(1) { transform: translateY(8.63%); } } @media (min-width: 768px) { .p-careers-top .p-job .p-job-image-item:nth-child(2) { transform: translateY(19.13%); } } @media (max-width: 767.98px) { .p-careers-top .p-job .p-job-image-item:nth-child(2) { transform: translateY(26.49%); } } @media (min-width: 768px) { .p-careers-top .p-job .p-job-image-item:nth-child(3) { transform: translateY(-5.65%); } } .p-careers-top .p-job { /* Float Animation */ } .p-careers-top .p-job .js-float.is-float-active.is-float-dist-6 { animation: careers-float-6 var(--float-duration, 3.5s) ease-in-out infinite; animation-delay: var(--float-delay, 0s); } .p-careers-top .p-job .js-float.is-float-active.is-float-dist-7 { animation: careers-float-7 var(--float-duration, 3.5s) ease-in-out infinite; animation-delay: var(--float-delay, 0s); } .p-careers-top .p-job .js-float.is-float-active.is-float-dist-8 { animation: careers-float-8 var(--float-duration, 3.5s) ease-in-out infinite; animation-delay: var(--float-delay, 0s); } .p-careers-top .p-job .js-float.is-float-active.is-float-dist-9 { animation: careers-float-9 var(--float-duration, 3.5s) ease-in-out infinite; animation-delay: var(--float-delay, 0s); } .p-careers-top .p-job .js-float.is-float-active.is-float-dist-10 { animation: careers-float-10 var(--float-duration, 3.5s) ease-in-out infinite; animation-delay: var(--float-delay, 0s); } .p-careers-top .p-job .js-float.is-float-active.is-float-dist-11 { animation: careers-float-11 var(--float-duration, 3.5s) ease-in-out infinite; animation-delay: var(--float-delay, 0s); } .p-careers-top .p-job .js-float.is-float-active.is-float-dist-12 { animation: careers-float-12 var(--float-duration, 3.5s) ease-in-out infinite; animation-delay: var(--float-delay, 0s); } .p-careers-top .p-job .js-float.is-float-active.is-float-dist-13 { animation: careers-float-13 var(--float-duration, 3.5s) ease-in-out infinite; animation-delay: var(--float-delay, 0s); } .p-careers-top .p-job { /* Float Animation（.p-job-gallery のみ：左右の動きを追加。元に戻す場合はこのブロックを削除） */ } .p-careers-top .p-job .p-job-gallery.is-fade-visible .js-float.is-float-active.is-float-dist-6 { animation: careers-float-gallery-6 calc(var(--float-duration, 3.5s) * 1.8) ease-in-out calc(1.56s + var(--float-delay, 0s)) infinite, p-job-gallery-fade-in 1s ease-out var(--fade-up-delay, 0s) forwards; } .p-careers-top .p-job .p-job-gallery.is-fade-visible .js-float.is-float-active.is-float-dist-7 { animation: careers-float-gallery-7 calc(var(--float-duration, 3.5s) * 1.8) ease-in-out calc(1.56s + var(--float-delay, 0s)) infinite, p-job-gallery-fade-in 1s ease-out var(--fade-up-delay, 0s) forwards; } .p-careers-top .p-job .p-job-gallery.is-fade-visible .js-float.is-float-active.is-float-dist-8 { animation: careers-float-gallery-8 calc(var(--float-duration, 3.5s) * 1.8) ease-in-out calc(1.56s + var(--float-delay, 0s)) infinite, p-job-gallery-fade-in 1s ease-out var(--fade-up-delay, 0s) forwards; } .p-careers-top .p-job .p-job-gallery.is-fade-visible .js-float.is-float-active.is-float-dist-9 { animation: careers-float-gallery-9 calc(var(--float-duration, 3.5s) * 1.8) ease-in-out calc(1.56s + var(--float-delay, 0s)) infinite, p-job-gallery-fade-in 1s ease-out var(--fade-up-delay, 0s) forwards; } .p-careers-top .p-job .p-job-gallery.is-fade-visible .js-float.is-float-active.is-float-dist-10 { animation: careers-float-gallery-10 calc(var(--float-duration, 3.5s) * 1.8) ease-in-out calc(1.56s + var(--float-delay, 0s)) infinite, p-job-gallery-fade-in 1s ease-out var(--fade-up-delay, 0s) forwards; } .p-careers-top .p-job .p-job-gallery.is-fade-visible .js-float.is-float-active.is-float-dist-11 { animation: careers-float-gallery-11 calc(var(--float-duration, 3.5s) * 1.8) ease-in-out calc(1.56s + var(--float-delay, 0s)) infinite, p-job-gallery-fade-in 1s ease-out var(--fade-up-delay, 0s) forwards; } .p-careers-top .p-job .p-job-gallery.is-fade-visible .js-float.is-float-active.is-float-dist-12 { animation: careers-float-gallery-12 calc(var(--float-duration, 3.5s) * 1.8) ease-in-out calc(1.56s + var(--float-delay, 0s)) infinite, p-job-gallery-fade-in 1s ease-out var(--fade-up-delay, 0s) forwards; } .p-careers-top .p-job .p-job-gallery.is-fade-visible .js-float.is-float-active.is-float-dist-13 { animation: careers-float-gallery-13 calc(var(--float-duration, 3.5s) * 1.8) ease-in-out calc(1.56s + var(--float-delay, 0s)) infinite, p-job-gallery-fade-in 1s ease-out var(--fade-up-delay, 0s) forwards; } @media (min-width: 768px) { .p-careers-top .p-job .p-job-content { flex-basis: auto; } } .p-careers-top .p-job .p-job-text { font-weight: var(--fw-medium); } @media (min-width: 768px) { .p-careers-top .p-job .p-job-text { font-size: clamp(0.875rem, 0.611rem + 0.55vw, 1rem); } } @media (max-width: 767.98px) { .p-careers-top .p-job .p-job-text { font-size: 1rem; } } .p-careers-top .p-job .p-job-gallery { /* SPで角丸（特に下側）が正しくクリップされない場合があるための保険。 img自体にもborder-radiusを持たせる（元に戻す場合はこの1行を削除） */ } .p-careers-top .p-job .p-job-gallery .p-job-gallery-item img { border-radius: inherit; } @media (min-width: 768px) { .p-careers-top .p-job .p-job-gallery { margin-block-start: var(--content-spacing-sm); aspect-ratio: 1440/757; position: relative; overflow: hidden; /* Drop Shadow（薄いダークブルー・広がり多め。PCのみ） */ } .p-careers-top .p-job .p-job-gallery .p-job-gallery-item { filter: drop-shadow(0 16px 48px rgba(39, 49, 66, 0.22)); } .p-careers-top .p-job .p-job-gallery .swiper, .p-careers-top .p-job .p-job-gallery .swiper-wrapper { height: 100%; } .p-careers-top .p-job .p-job-gallery .swiper-slide { height: auto !important; margin-inline-end: 0 !important; } .p-careers-top .p-job .p-job-gallery .p-job-gallery-item { position: absolute; } .p-careers-top .p-job .p-job-gallery .p-job-gallery-item:nth-child(1) { width: 25.76% !important; top: 8.59%; right: 19.31%; } .p-careers-top .p-job .p-job-gallery .p-job-gallery-item:nth-child(2) { width: 14.31% !important; top: 19.82%; left: 7.92%; } .p-careers-top .p-job .p-job-gallery .p-job-gallery-item:nth-child(4) { width: 19.44% !important; top: 28.8%; right: -1.67%; } .p-careers-top .p-job .p-job-gallery .p-job-gallery-item:nth-child(4) img { clip-path: inset(0 0 0 calc(100% - 10.63vw) round var(--borderRadius)); } .p-careers-top .p-job .p-job-gallery .p-job-gallery-item:nth-child(5) { width: 15% !important; bottom: 14.8%; left: 22.22%; } .p-careers-top .p-job .p-job-gallery .p-job-gallery-item:nth-child(6) { width: 17.57% !important; top: 28.8%; left: 28.61%; } .p-careers-top .p-job .p-job-gallery .p-job-gallery-item:nth-child(7) { width: 15% !important; bottom: 10.17%; right: 10.21%; } .p-careers-top .p-job .p-job-gallery .p-job-gallery-item:nth-child(8) { width: 16.88% !important; bottom: 20.34%; right: 34.1%; } .p-careers-top .p-job .p-job-gallery .p-job-gallery-item:nth-child(9) { width: 16.67% !important; bottom: 29.33%; left: -1.67%; } .p-careers-top .p-job .p-job-gallery.is-fade-ready .p-job-gallery-item { opacity: 0; transform: scale(1.1); } } @media (max-width: 767.98px) { .p-careers-top .p-job .p-job-gallery { padding-inline: var(--spacing); margin-block-start: var(--content-spacing); } } @media (prefers-reduced-motion: reduce) { .p-careers-top .p-job .p-job-gallery.is-fade-ready .p-job-gallery-item, .p-careers-top .p-job .p-job-gallery.is-fade-visible .p-job-gallery-item { opacity: 1; transform: none; animation: none; } } @media (min-width: 768px) { .p-careers-top .p-job .p-youtube { width: min(100%, 726px); margin-inline: auto; } } .p-careers-top .p-job .p-youtube iframe { display: block; width: 100%; height: auto; aspect-ratio: 16/9; border: 0; } .p-careers-top .p-job .p-youtube figcaption { text-align: center; margin-block-start: 16px; } @media (min-width: 768px) { .p-careers-top .p-job .p-youtube figcaption { font-size: 1rem; } } @media (max-width: 767.98px) { .p-careers-top .p-job .p-youtube figcaption { font-size: 0.875rem; } } .p-careers-top { /* About Daido */ } .p-careers-top .p-about { padding-block-start: calc(var(--section-spacing) - var(--headerH)); padding-block-end: var(--curve-space-end); position: relative; z-index: 0; isolation: isolate; } .p-careers-top .p-about::before, .p-careers-top .p-about::after { content: ""; position: absolute; z-index: -1; opacity: 0.2; pointer-events: none; background: url("/assets/images/job/job_top_occupation00.webp") center/cover no-repeat; } @media (min-width: 768px) { .p-careers-top .p-about::before, .p-careers-top .p-about::after { inset: -35% 0; } } @media (max-width: 767.98px) { .p-careers-top .p-about::before, .p-careers-top .p-about::after { inset: -10% 0 0; } } @media (min-width: 768px) { .p-careers-top .p-about::before { clip-path: inset(0 0 20.5882352941% 0 round 0 0 0 var(--curve-radius)); } } @media (min-width: 768px) { .p-careers-top .p-about::after { clip-path: inset(79.4117647059% 0 0 0); } } @media (max-width: 767.98px) { .p-careers-top .p-about::after { content: none; } } .p-careers-top .p-about .p-about-list { display: grid; grid-template-columns: repeat(auto-fit, minmax(var(--grid-item-width), 1fr)); } @media (min-width: 768px) { .p-careers-top .p-about .p-about-list { --grid-item-width: 230px; gap: var(--gap); } } @media (max-width: 767.98px) { .p-careers-top .p-about .p-about-list { --grid-item-width: 160px; gap: 16px 12px; } } @media (min-width: 768px) { .p-careers-top .p-about .p-about-inner { max-width: 1030px; margin-inline: auto; } } .p-careers-top .p-about .p-about-head { font-weight: var(--fw-medium); line-height: 1.5; letter-spacing: 0.05em; background-color: var(--color-secondary); text-align: center; padding: 10px; } @media (min-width: 768px) { .p-careers-top .p-about .p-about-head { font-size: 1.25rem; } } @media (max-width: 767.98px) { .p-careers-top .p-about .p-about-head { font-size: 0.875rem; } } .p-careers-top .p-about .p-about-value-wrap { background-color: rgba(255, 255, 255, 0.6); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px; padding: 10px; } .p-careers-top .p-about .p-about-value { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px; font-weight: var(--fw-medium); line-height: 1; text-align: center; } @media (min-width: 768px) { .p-careers-top .p-about .p-about-value { font-size: 3rem; } } @media (max-width: 767.98px) { .p-careers-top .p-about .p-about-value { font-size: 2rem; } } .p-careers-top .p-about .p-about-value .p-about-value-unit { font-size: 50%; } @media (min-width: 768px) { .p-careers-top .p-about .p-about-value.adjust01 { font-size: 1.25rem; } } @media (max-width: 767.98px) { .p-careers-top .p-about .p-about-value.adjust01 { font-size: 1rem; } } @media (min-width: 768px) { .p-careers-top .p-about .p-about-value.adjust02 { font-size: 1.5rem; } } @media (max-width: 767.98px) { .p-careers-top .p-about .p-about-value.adjust02 { font-size: 1.125rem; } } @media (min-width: 768px) { .p-careers-top .p-about .p-about-value.adjust03 { font-size: 2.25rem; } } @media (max-width: 767.98px) { .p-careers-top .p-about .p-about-value.adjust03 { font-size: 2rem; } } @media (min-width: 768px) { .p-careers-top .p-about .p-about-value.adjust04 { font-size: 1.125rem; } } @media (max-width: 767.98px) { .p-careers-top .p-about .p-about-value.adjust04 { font-size: 0.875rem; } } .p-careers-top { /* Occupation */ } .p-careers-top .p-occupation { padding-block-start: var(--section-spacing); padding-block-end: var(--curve-space-end); position: relative; z-index: 1; background-color: var(--color-white); } @media (min-width: 768px) { .p-careers-top .p-occupation { border-top-right-radius: var(--curve-radius); } } .p-careers-top .p-occupation .p-occupation-list { display: grid; gap: 40px 6.67%; } @media (min-width: 768px) { .p-careers-top .p-occupation .p-occupation-list { grid-template-columns: repeat(2, 1fr); } } @media (max-width: 767.98px) { .p-careers-top .p-occupation .p-occupation-list { grid-template-columns: 1fr; } } .p-careers-top .p-occupation .p-occupation-item { position: relative; padding-block-start: 8%; } .p-careers-top .p-occupation .p-occupation-item-number { font-weight: var(--fw-medium); color: var(--color-primary); line-height: 1; text-box: trim-both cap alphabetic; position: absolute; top: 0; left: 0; } @media (min-width: 768px) { .p-careers-top .p-occupation .p-occupation-item-number { font-size: clamp(4.5rem, 1.831rem + 5.56vw, 6rem); } } @media (max-width: 767.98px) { .p-careers-top .p-occupation .p-occupation-item-number { font-size: clamp(4.25rem, 2.579rem + 7.13vw, 6rem); } } .p-careers-top .p-occupation .p-occupation-item-title { font-weight: var(--fw-medium); font-size: 1.25rem; margin-block: 16px 8px; } .p-careers-top { /* Interview */ } .p-careers-top .p-interview { padding-block-start: var(--section-spacing); padding-block-end: var(--curve-space-end); position: relative; z-index: 1; background: linear-gradient(180deg, rgba(226, 237, 255, 0.4) 0%, rgba(123, 168, 236, 0.4) 51%); } @media (min-width: 768px) { .p-careers-top .p-interview { border-top-right-radius: var(--curve-radius); border-bottom-left-radius: var(--curve-radius); } } @media (min-width: 768px) { .p-careers-top .p-interview .p-interview-slider { padding-inline-start: max(var(--spacing), (100% - var(--container-lg)) / 2); } } @media (max-width: 767.98px) { .p-careers-top .p-interview .p-interview-slider { padding-inline: var(--spacing); } } @media (min-width: 768px) { .p-careers-top .p-interview .p-interview-slider .swiper-pagination { display: none; } } @media (max-width: 767.98px) { .p-careers-top .p-interview .p-interview-slider .swiper-pagination .swiper-pagination-bullet { background: #888888; } .p-careers-top .p-interview .p-interview-slider .swiper-pagination .swiper-pagination-bullet-active { background: var(--color-primary); } } .p-careers-top .p-interview .p-interview-slider-item p { font-weight: var(--fw-medium); } .p-careers-top .p-interview .p-interview-slider-item-link { display: block; } .p-careers-top .p-interview .p-interview-slider-item-image { margin-block-end: var(--content-spacing-sm); } .p-careers-top .p-interview .p-interview-slider-item-title { font-weight: var(--fw-medium); font-size: 1.25rem; margin-block-end: 8px; } .p-careers-top .p-interview .p-interview-slider-item-sub { margin-block-end: 8px; } .p-careers-top .p-interview .c-button a:not(:hover) { background-color: transparent; } .p-careers-top { /* Work environment */ } .p-careers-top .p-work .l-gallery-02 { gap: var(--gap); } .p-careers-top .p-work .p-work-title { font-weight: var(--fw-bold); margin-block-end: 10px; } .p-careers-top { /* Message */ } .p-careers-top .p-message .p-message-subtitle { font-weight: var(--fw-bold); font-size: 1rem; margin-block-end: 14px; } .p-careers-top .p-message .p-message-signature { text-align: right; } .p-careers-top { /* Company tourより下 */ } .p-careers-top .p-section-group-02 { background: linear-gradient(180deg, rgb(255, 255, 255) 0%, rgb(233, 241, 255) 100%); padding-block-end: var(--section-spacing); } .p-careers-top .p-section-group-02 .c-button a:not(:hover) { background-color: transparent; } .p-careers-top .p-section-columns { display: grid; } @media (min-width: 768px) { .p-careers-top .p-section-columns { column-gap: 52px; grid-template-columns: repeat(2, 1fr); } } @media (max-width: 767.98px) { .p-careers-top .p-section-columns { grid-template-columns: 1fr; } } .p-careers-top { /* Company tour */ } @media (max-width: 767.98px) { .p-careers-top .p-tour .l-gallery-02 { gap: 8px; flex-direction: row; } .p-careers-top .p-tour .l-gallery-02 > * { flex-basis: calc(50% - 4px); } } .p-careers-top { /* Schedule */ } .p-careers-top .p-schedule .p-schedule-tab-nav { display: flex; align-items: center; } @media (min-width: 768px) { .p-careers-top .p-schedule .p-schedule-tab-nav { gap: 32px; } } @media (max-width: 767.98px) { .p-careers-top .p-schedule .p-schedule-tab-nav { gap: var(--gap); } } .p-careers-top .p-schedule .p-schedule-tab-nav li { flex-basis: calc(50% - var(--gap) / 2); } @media (max-width: 767.98px) { .p-careers-top .p-schedule .p-schedule-tab-nav li:not(.is-active) button { background-color: #F5F5F5; } } .p-careers-top .p-schedule .p-schedule-tab-nav li button { width: 100%; font-weight: var(--fw-medium); font-size: 1.25rem; letter-spacing: 0.14em; background-color: #EAEAEA; border-radius: 16px; padding: 4px; text-align: center; } @media (min-width: 768px) { .p-careers-top .p-schedule .p-schedule-tab-nav li button { cursor: default; } } .p-careers-top .p-schedule .p-schedule-tab-contents { margin-block-start: var(--content-spacing); } @media (min-width: 768px) { .p-careers-top .p-schedule .p-schedule-tab-contents { display: flex; gap: 32px; } } .p-careers-top .p-schedule .p-schedule-tab-content { position: relative; padding-block: 28px; } .p-careers-top .p-schedule .p-schedule-tab-content::before { content: ""; width: 2px; height: 100%; background-color: var(--color-light-gray-02); position: absolute; top: 0; left: calc(var(--icon-size) / 2 - 1px); } @media (min-width: 768px) { .p-careers-top .p-schedule .p-schedule-tab-content { --icon-size: 48px; flex-basis: calc(50% - var(--gap) / 2); } } @media (max-width: 767.98px) { .p-careers-top .p-schedule .p-schedule-tab-content { --icon-size: 60px; display: none; } .p-careers-top .p-schedule .p-schedule-tab-content.is-active { display: block; } } .p-careers-top .p-schedule .p-schedule-stage { display: flex; align-items: center; } @media (min-width: 768px) { .p-careers-top .p-schedule .p-schedule-stage { gap: 16px; } } @media (max-width: 767.98px) { .p-careers-top .p-schedule .p-schedule-stage { gap: var(--gap); } } .p-careers-top .p-schedule .p-schedule-stage:not(:first-child) { margin-block-start: var(--content-spacing); } .p-careers-top .p-schedule .p-schedule-stage .p-schedule-icon { display: flex; align-items: center; justify-content: center; width: var(--icon-size); height: var(--icon-size); background-color: rgba(217, 217, 217, 0.24); border-radius: 50%; } .p-careers-top .p-schedule .p-schedule-stage .p-schedule-icon::before { content: ""; display: block; width: 54%; height: 54%; background-color: var(--color-light-gray-02); border-radius: inherit; } .p-careers-top .p-schedule .p-schedule-stage p { flex: 1; font-weight: var(--fw-medium); letter-spacing: 0.14em; } @media (min-width: 768px) { .p-careers-top .p-schedule .p-schedule-stage p { font-size: 1rem; } } @media (max-width: 767.98px) { .p-careers-top .p-schedule .p-schedule-stage p { font-size: 1.125rem; } } .p-careers-top .l-recruit { margin-block-start: 0; } .l-job-content-list { list-style: none; padding: 0; } .l-job-content-list li { position: relative; padding-inline-start: 1em; } .l-job-content-list li::before { content: "-"; position: absolute; inset-inline-start: 0; } /* 募集要項ページ：各テーブルの項目列（1列目）はできるだけ改行させない */ .page-template-careers-requirements .c-table td:first-child { white-space: nowrap; } @media (min-width: 768px) { .page-template-careers-requirements .c-table td:first-child { min-width: 12em; } } @media (max-width: 767.98px) { .page-template-careers-requirements .c-table td:first-child { min-width: 8em; } } /* よくある質問ページ */ .c-faq-list { display: flex; flex-direction: column; gap: 24px; list-style: none; padding: 0; } .c-faq-item { border-radius: 16px; overflow: hidden; background-color: var(--color-white); box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06); } .c-faq-question { display: flex; align-items: center; gap: 16px; cursor: pointer; background: linear-gradient(90deg, #EAF1FF 0%, var(--color-primary) 100%); font-weight: var(--fw-bold); } @media (min-width: 768px) { .c-faq-question { padding: 20px 32px; } } @media (max-width: 767.98px) { .c-faq-question { padding: 16px 20px; } } .c-faq-question::-webkit-details-marker { display: none; } .c-faq-question::marker { content: ""; } .c-faq-question .c-arrow-down { margin-inline-start: auto; flex-shrink: 0; transition: transform 0.2s; } .c-faq-item[open] .c-faq-question .c-arrow-down { transform: rotate(-90deg); } .c-faq-no { flex-shrink: 0; font-weight: var(--fw-bold); } @media (min-width: 768px) { .c-faq-no { font-size: 1.25rem; } } .c-faq-text { line-height: 1.4; } @media (min-width: 768px) { .c-faq-answer { padding: 24px 32px; } } @media (max-width: 767.98px) { .c-faq-answer { padding: 16px 20px; } } .c-faq-answer p:not(:first-child) { margin-block-start: 1em; } /* CTA section */ .c-faq-cta { text-align: center; } .c-faq-cta-buttons { display: flex; justify-content: center; gap: 48px var(--gap); margin-block-start: var(--content-spacing); flex-wrap: wrap; } @media (max-width: 767.98px) { .c-faq-cta-buttons { flex-direction: column; align-items: center; gap: 32px; } } .c-faq-cta-button-title { font-weight: var(--fw-bold); margin-block-end: 8px; } .c-faq-cta-button-sub { font-size: 0.875rem; margin-block-end: 12px; } /* 社員インタビュー詳細ページ */ .interview-q-a-list { list-style: none; padding: 0; display: flex; flex-direction: column; } @media (min-width: 768px) { .interview-q-a-list { gap: 56px; } } @media (max-width: 767.98px) { .interview-q-a-list { gap: 40px; } } .interview-q-a-list .question { font-weight: var(--fw-bold); line-height: 1.6; margin-block-end: 16px; } @media (min-width: 768px) { .interview-q-a-list .question { font-size: 1.375rem; } } @media (max-width: 767.98px) { .interview-q-a-list .question { font-size: 1.125rem; } } /* 「社員の声から仕事を知る」section 上のボーダー（コンテンツ幅） */ .p-interview-related .l-container-lg { border-block-start: 1px solid #D4D4D4; padding-block-start: var(--content-spacing); } /* *** Error *** */ .p-error .p-title { font-weight: var(--fw-bold); line-height: 1.4; text-align: center; } @media (min-width: 768px) { .p-error .p-title { font-size: 4rem; } } @media (max-width: 767.98px) { .p-error .p-title { font-size: 3rem; } } .p-error .p-title .p-title-sub { font-size: 37.5%; display: block; } .p-error .p-text { line-height: 1.8; text-align: center; } @media (min-width: 768px) { .p-error .p-text { font-size: 1.25rem; } } @media (max-width: 767.98px) { .p-error .p-text { font-size: 1rem; } } /* *** Helper class *** */ /* Break Point */ @media (max-width: 767.98px) { .pc-only { display: none; } } @media (min-width: 768px) { .sp-only { display: none; } } /* Image Max */ .u-image-max { width: 100%; height: auto; } /* Hover */ .u-hover { transition: opacity var(--transition); } @media (hover: hover) { .u-hover:hover { opacity: var(--opacity); } } /* No Break */ .u-nobreak { display: inline-block; } /* Width */ .u-max { width: 100%; } .u-stretch { width: stretch; } .u-fit { width: fit-content; } /* Display */ .u-block { display: block; } .u-inline { display: inline; } .u-inline-block { display: inline-block; } .u-nowrap { white-space: nowrap; } .u-none { display: none; } .u-flex { display: flex; } .u-grid { display: grid; } /* Flex */ .u-flex-row { flex-direction: row; } .u-flex-column { flex-direction: column; } .u-flex-wrap { flex-wrap: wrap; } .u-flex-nowrap { flex-wrap: nowrap; } .u-flex-wrap-reverse { flex-wrap: wrap-reverse; } .u-flex-justify-start { justify-content: flex-start; } .u-flex-justify-center { justify-content: center; } .u-flex-justify-end { justify-content: flex-end; } .u-flex-justify-between { justify-content: space-between; } .u-flex-justify-around { justify-content: space-around; } .u-flex-justify-evenly { justify-content: space-evenly; } .u-flex-align-start { align-items: flex-start; } .u-flex-align-center { align-items: center; } .u-flex-align-end { align-items: flex-end; } .u-flex-align-stretch { align-items: stretch; } .u-flex-align-baseline { align-items: baseline; } /* Align */ .u-text-start { text-align: left; } .u-text-center { text-align: center; } .u-text-end { text-align: right; } /* Weight */ .u-light { font-weight: var(--fw-light); } .u-regular { font-weight: var(--fw-regular); } .u-medium { font-weight: var(--fw-medium); } .u-semibold { font-weight: var(--fw-semibold); } .u-bold { font-weight: var(--fw-bold); } /* Position */ .u-relative { position: relative; } .u-absolute { position: absolute; } .u-fixed { position: fixed; } .u-sticky { position: sticky; } .u-static { position: static; } /* Header */ .js-anchor-target { scroll-margin-top: var(--headerH); } /* *** Animations class *** */ /* Fade Up */ .js-fade-up.is-fade-ready { opacity: 0; transform: translateY(1.25rem); } .js-fade-up.is-fade-visible { animation: fade-up 0.8s ease-out forwards; animation-delay: var(--fade-up-delay, 0s); } @keyframes fade-up { 0% { opacity: 0; transform: translateY(1.25rem); } 100% { opacity: 1; transform: translateY(0); } }/*# sourceMappingURL=style.css.map */