/*=================================================================== recruitPage ===================================================================*/ @import url('https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@100..900&display=swap'); html:has(.recruitPage) #wrapper { --color-text: #1a202c; --color-base: #f2f0e9; --color-accent: var(--color-green--500); --color-sub-accent: var(--color-red--500); --color-white: #ffffff; --color-gray--50: #fefefe; --color-gray--100: #fafafa; --color-gray--200: #f7f7f7; --color-gray--300: #f4f4f4; --color-gray--400: #f1f1f1; --color-gray--500: #eeeeee; --color-gray--600: #bebebe; --color-gray--700: #8e8e8e; --color-gray--800: #5f5f5f; --color-gray--900: #2f2f2f; --color-red--50: #fef6f8; --color-red--100: #fcd6e1; --color-red--200: #fbb6ca; --color-red--300: #f996b2; --color-red--400: #f7769b; --color-red--500: #f65784; --color-red--600: #c44569; --color-red--700: #93344f; --color-red--800: #622234; --color-red--900: #31111a; --color-green--50: #f3fbfa; --color-green--100: #c5efea; --color-green--200: #98e3da; --color-green--300: #6bd7ca; --color-green--400: #3ecbba; --color-green--500: #11c0aa; --color-green--600: #0d9988; --color-green--700: #0a7366; --color-green--800: #064c44; --color-green--900: #032621; --color-purple--50: #f6f5f8; --color-purple--100: #d4d2df; --color-purple--200: #b2afc6; --color-purple--300: #918cad; --color-purple--400: #6f6994; --color-purple--500: #4e467c; --color-purple--600: #3e3863; --color-purple--700: #2e2a4a; --color-purple--800: #1f1c31; --color-purple--900: #0f0d18; --color-yellow--50: #fffdf8; --color-yellow--100: #fff7dd; --color-yellow--200: #fff1c3; --color-yellow--300: #ffeba9; --color-yellow--400: #ffe58f; --color-yellow--500: #ffe075; --color-yellow--600: #ccb35d; --color-yellow--700: #998646; --color-yellow--800: #66592e; --color-yellow--900: #322c17; --font-family--notoSansJP: 'Noto Sans JP', serif; --font-size--xs: 0.75rem; --font-size--sm: 0.875rem; --font-size--base: 1rem; --font-size--lg: 1.125rem; --font-size--xl: 1.25rem; --font-size--2xl: 1.5rem; --font-size--3xl: 1.875rem; --font-size--4xl: 2.25rem; --font-size--5xl: 3rem; --font-size--6xl: 4rem; } /* オーバーライド */ html:has(.recruitPage) { --header-height: 55px; scroll-padding-top: calc(var(--header-height) + 1rem); } @media (min-width: 640px) { html:has(.recruitPage) { --header-height: 80px; } } html:has(.recruitPage) body, html:has(.recruitPage) #wrapper { overflow: clip; } html:has(.recruitPage) .fixed-header { display: none; } html:has(.recruitPage) #headline, html:has(.recruitPage) #headline--text { display: none; } html:has(.recruitPage) main .l-inner { overflow: visible !important; } html:has(.recruitPage) #fixBottomSp { display: none; } html:has(.recruitPage--registrationForm) #gNav, html:has(.recruitPage--registrationForm) .nav-social, html:has(.recruitPage--registrationForm) #bottom, html:has(.recruitPage--registrationForm) .group-3kka, html:has(.recruitPage--registrationForm) .footer__body { display: none !important; } html:has(.recruitPage--registrationForm) #siteTitle a { pointer-events: none; } /* キーフレーム */ @keyframes animation-heartbeat { 0% { transform: scale(1.25); } 50% { transform: scale(1.5); } 100% { transform: scale(1.25); } } .recruitPage { color: var(--color-text); font-weight: 400; margin-inline: -4%; } .recruitPage img { vertical-align: bottom; } /* 幅 */ .recruitPage--fluid { width: 100vw; margin: 0 calc(50% - 50vw); } .recruitPage--width-fitContent { width: fit-content !important; } .recruitPage--width-full { width: 100% !important; } /* コンテナ */ .recruitPage--container { padding-left: 0.75rem; padding-right: 0.75rem; width: auto; } @media (min-width: 640px) { .recruitPage--container { margin-inline: auto; max-width: 1040px; width: 80%; } } /* ディスプレイ */ .recruitPage--display-block { display: block !important; } .recruitPage--display-inlineBlock { display: inline-block !important; } .recruitPage--display-inline { display: inline !important; } .recruitPage--display-none { display: none !important; } @media (min-width: 640px) { .md\:recruitPage--display-block { display: block !important; } .md\:recruitPage--display-inlineBlock { display: inline-block !important; } .md\:recruitPage--display-inline { display: inline !important; } .md\:recruitPage--display-none { display: none !important; } } /* フォントファミリー */ .recruitPage--fontFamily-notoSansJP { font-family: var(--font-family--notoSansJP); } /* 背景色 */ .recruitPage--backgroundColor-white { --section-background-color: var(--color-base) !important; background-color: #ffffff; } /* 揃え */ .recruitPage--ml-auto { margin-left: auto; } .recruitPage--mr-auto { margin-right: auto; } .recruitPage--mx-auto { margin-left: auto; margin-right: auto; } /* 強調 */ .recruitPage--fontWeight-semibold { font-weight: 600 !important; } .recruitPage--fontWeight-extrabold { font-weight: 800 !important; } /* フォントサイズ */ .recruitPage--fontSize-xs { font-size: var(--font-size--xs) !important; } .recruitPage--fontSize-sm { font-size: var(--font-size--sm) !important; } .recruitPage--fontSize-base { font-size: var(--font-size--base) !important; } .recruitPage--fontSize-lg { font-size: var(--font-size--lg) !important; } .recruitPage--fontSize-xl { font-size: var(--font-size--xl) !important; } .recruitPage--fontSize-2xl { font-size: var(--font-size--2xl) !important; } .recruitPage--fontSize-3xl { font-size: var(--font-size--3xl) !important; } .recruitPage--fontSize-4xl { font-size: var(--font-size--4xl) !important; } .recruitPage--fontSize-5xl { font-size: var(--font-size--5xl) !important; } .recruitPage--fontSize-6xl { font-size: var(--font-size--6xl) !important; } /* 文字揃え */ .recruitPage--textAlign-center { text-align: center !important; } /* 文字色 */ .recruitPage--color-text { color: var(--color-text) !important; } .recruitPage--color-gray-50 { color: var(--color-gray--50) !important; } .recruitPage--color-gray-100 { color: var(--color-gray--100) !important; } .recruitPage--color-gray-200 { color: var(--color-gray--200) !important; } .recruitPage--color-gray-300 { color: var(--color-gray--300) !important; } .recruitPage--color-gray-400 { color: var(--color-gray--400) !important; } .recruitPage--color-gray-500 { color: var(--color-gray--500) !important; } .recruitPage--color-gray-600 { color: var(--color-gray--600) !important; } .recruitPage--color-gray-700 { color: var(--color-gray--700) !important; } .recruitPage--color-gray-800 { color: var(--color-gray--800) !important; } .recruitPage--color-gray-900 { color: var(--color-gray--900) !important; } .recruitPage--color-red-50 { color: var(--color-red--50) !important; } .recruitPage--color-red-100 { color: var(--color-red--100) !important; } .recruitPage--color-red-200 { color: var(--color-red--200) !important; } .recruitPage--color-red-300 { color: var(--color-red--300) !important; } .recruitPage--color-red-400 { color: var(--color-red--400) !important; } .recruitPage--color-red-500 { color: var(--color-red--500) !important; } .recruitPage--color-red-600 { color: var(--color-red--600) !important; } .recruitPage--color-red-700 { color: var(--color-red--700) !important; } .recruitPage--color-red-800 { color: var(--color-red--800) !important; } .recruitPage--color-red-900 { color: var(--color-red--900) !important; } .recruitPage--color-green-50 { color: var(--color-green--50) !important; } .recruitPage--color-green-100 { color: var(--color-green--100) !important; } .recruitPage--color-green-200 { color: var(--color-green--200) !important; } .recruitPage--color-green-300 { color: var(--color-green--300) !important; } .recruitPage--color-green-400 { color: var(--color-green--400) !important; } .recruitPage--color-green-500 { color: var(--color-green--500) !important; } .recruitPage--color-green-600 { color: var(--color-green--600) !important; } .recruitPage--color-green-700 { color: var(--color-green--700) !important; } .recruitPage--color-green-800 { color: var(--color-green--800) !important; } .recruitPage--color-green-900 { color: var(--color-green--900) !important; } .recruitPage--color-purple-50 { color: var(--color-purple--50) !important; } .recruitPage--color-purple-100 { color: var(--color-purple--100) !important; } .recruitPage--color-purple-200 { color: var(--color-purple--200) !important; } .recruitPage--color-purple-300 { color: var(--color-purple--300) !important; } .recruitPage--color-purple-400 { color: var(--color-purple--400) !important; } .recruitPage--color-purple-500 { color: var(--color-purple--500) !important; } .recruitPage--color-purple-600 { color: var(--color-purple--600) !important; } .recruitPage--color-purple-700 { color: var(--color-purple--700) !important; } .recruitPage--color-purple-800 { color: var(--color-purple--800) !important; } .recruitPage--color-purple-900 { color: var(--color-purple--900) !important; } .recruitPage--color-yellow-50 { color: var(--color-yellow--50) !important; } .recruitPage--color-yellow-100 { color: var(--color-yellow--100) !important; } .recruitPage--color-yellow-200 { color: var(--color-yellow--200) !important; } .recruitPage--color-yellow-300 { color: var(--color-yellow--300) !important; } .recruitPage--color-yellow-400 { color: var(--color-yellow--400) !important; } .recruitPage--color-yellow-500 { color: var(--color-yellow--500) !important; } .recruitPage--color-yellow-600 { color: var(--color-yellow--600) !important; } .recruitPage--color-yellow-700 { color: var(--color-yellow--700) !important; } .recruitPage--color-yellow-800 { color: var(--color-yellow--800) !important; } .recruitPage--color-yellow-900 { color: var(--color-yellow--900) !important; } /* バックグラウンドカラー */ .recruitPage--backgroundColor-text { --background-color: var(--color-text) !important; background-color: var(--color-text); } .recruitPage--backgroundColor-gray-50 { --background-color: var(--color-gray--50) !important; background-color: var(--color-gray--50); } .recruitPage--backgroundColor-gray-100 { --background-color: var(--color-gray--100) !important; background-color: var(--color-gray--100); } .recruitPage--backgroundColor-gray-200 { --background-color: var(--color-gray--200) !important; background-color: var(--color-gray--200); } .recruitPage--backgroundColor-gray-300 { --background-color: var(--color-gray--300) !important; background-color: var(--color-gray--300); } .recruitPage--backgroundColor-gray-400 { --background-color: var(--color-gray--400) !important; background-color: var(--color-gray--400); } .recruitPage--backgroundColor-gray-500 { --background-color: var(--color-gray--500) !important; background-color: var(--color-gray--500); } .recruitPage--backgroundColor-gray-600 { --background-color: var(--color-gray--600) !important; background-color: var(--color-gray--600); } .recruitPage--backgroundColor-gray-700 { --background-color: var(--color-gray--700) !important; background-color: var(--color-gray--700); } .recruitPage--backgroundColor-gray-800 { --background-color: var(--color-gray--800) !important; background-color: var(--color-gray--800); } .recruitPage--backgroundColor-gray-900 { --background-color: var(--color-gray--900) !important; background-color: var(--color-gray--900); } .recruitPage--backgroundColor-red-50 { --background-color: var(--color-red--50) !important; background-color: var(--color-red--50); } .recruitPage--backgroundColor-red-100 { --background-color: var(--color-red--100) !important; background-color: var(--color-red--100); } .recruitPage--backgroundColor-red-200 { --background-color: var(--color-red--200) !important; background-color: var(--color-red--200); } .recruitPage--backgroundColor-red-300 { --background-color: var(--color-red--300) !important; background-color: var(--color-red--300); } .recruitPage--backgroundColor-red-400 { --background-color: var(--color-red--400) !important; background-color: var(--color-red--400); } .recruitPage--backgroundColor-red-500 { --background-color: var(--color-red--500) !important; background-color: var(--color-red--500); } .recruitPage--backgroundColor-red-600 { --background-color: var(--color-red--600) !important; background-color: var(--color-red--600); } .recruitPage--backgroundColor-red-700 { --background-color: var(--color-red--700) !important; background-color: var(--color-red--700); } .recruitPage--backgroundColor-red-800 { --background-color: var(--color-red--800) !important; background-color: var(--color-red--800); } .recruitPage--backgroundColor-red-900 { --background-color: var(--color-red--900) !important; background-color: var(--color-red--900); } .recruitPage--backgroundColor-green-50 { --background-color: var(--color-green--50) !important; background-color: var(--color-green--50); } .recruitPage--backgroundColor-green-100 { --background-color: var(--color-green--100) !important; background-color: var(--color-green--100); } .recruitPage--backgroundColor-green-200 { --background-color: var(--color-green--200) !important; background-color: var(--color-green--200); } .recruitPage--backgroundColor-green-300 { --background-color: var(--color-green--300) !important; background-color: var(--color-green--300); } .recruitPage--backgroundColor-green-400 { --background-color: var(--color-green--400) !important; background-color: var(--color-green--400); } .recruitPage--backgroundColor-green-500 { --background-color: var(--color-green--500) !important; background-color: var(--color-green--500); } .recruitPage--backgroundColor-green-600 { --background-color: var(--color-green--600) !important; background-color: var(--color-green--600); } .recruitPage--backgroundColor-green-700 { --background-color: var(--color-green--700) !important; background-color: var(--color-green--700); } .recruitPage--backgroundColor-green-800 { --background-color: var(--color-green--800) !important; background-color: var(--color-green--800); } .recruitPage--backgroundColor-green-900 { --background-color: var(--color-green--900) !important; background-color: var(--color-green--900); } .recruitPage--backgroundColor-purple-50 { --background-color: var(--color-purple--50) !important; background-color: var(--color-purple--50); } .recruitPage--backgroundColor-purple-100 { --background-color: var(--color-purple--100) !important; background-color: var(--color-purple--100); } .recruitPage--backgroundColor-purple-200 { --background-color: var(--color-purple--200) !important; background-color: var(--color-purple--200); } .recruitPage--backgroundColor-purple-300 { --background-color: var(--color-purple--300) !important; background-color: var(--color-purple--300); } .recruitPage--backgroundColor-purple-400 { --background-color: var(--color-purple--400) !important; background-color: var(--color-purple--400); } .recruitPage--backgroundColor-purple-500 { --background-color: var(--color-purple--500) !important; background-color: var(--color-purple--500); } .recruitPage--backgroundColor-purple-600 { --background-color: var(--color-purple--600) !important; background-color: var(--color-purple--600); } .recruitPage--backgroundColor-purple-700 { --background-color: var(--color-purple--700) !important; background-color: var(--color-purple--700); } .recruitPage--backgroundColor-purple-800 { --background-color: var(--color-purple--800) !important; background-color: var(--color-purple--800); } .recruitPage--backgroundColor-purple-900 { --background-color: var(--color-purple--900) !important; background-color: var(--color-purple--900); } .recruitPage--backgroundColor-yellow-50 { --background-color: var(--color-yellow--50) !important; background-color: var(--color-yellow--50); } .recruitPage--backgroundColor-yellow-100 { --background-color: var(--color-yellow--100) !important; background-color: var(--color-yellow--100); } .recruitPage--backgroundColor-yellow-200 { --background-color: var(--color-yellow--200) !important; background-color: var(--color-yellow--200); } .recruitPage--backgroundColor-yellow-300 { --background-color: var(--color-yellow--300) !important; background-color: var(--color-yellow--300); } .recruitPage--backgroundColor-yellow-400 { --background-color: var(--color-yellow--400) !important; background-color: var(--color-yellow--400); } .recruitPage--backgroundColor-yellow-500 { --background-color: var(--color-yellow--500) !important; background-color: var(--color-yellow--500); } .recruitPage--backgroundColor-yellow-600 { --background-color: var(--color-yellow--600) !important; background-color: var(--color-yellow--600); } .recruitPage--backgroundColor-yellow-700 { --background-color: var(--color-yellow--700) !important; background-color: var(--color-yellow--700); } .recruitPage--backgroundColor-yellow-800 { --background-color: var(--color-yellow--800) !important; background-color: var(--color-yellow--800); } .recruitPage--backgroundColor-yellow-900 { --background-color: var(--color-yellow--900) !important; background-color: var(--color-yellow--900); } /* パディング */ .recruitPage--padding-0 { padding: 0; } .recruitPage--padding-1 { padding: 0.25rem; } .recruitPage--padding-2 { padding: 0.5rem; } .recruitPage--padding-3 { padding: 0.75rem; } .recruitPage--padding-4 { padding: 1rem; } .recruitPage--padding-5 { padding: 1.25rem; } .recruitPage--padding-6 { padding: 1.5rem; } .recruitPage--padding-8 { padding: 2rem; } .recruitPage--padding-10 { padding: 2.5rem; } .recruitPage--padding-12 { padding: 3rem; } .recruitPage--padding-16 { padding: 4rem; } .recruitPage--padding-20 { padding: 5rem; } .recruitPage--paddingTop-0 { padding-top: 0; } .recruitPage--paddingTop-1 { padding-top: 0.25rem; } .recruitPage--paddingTop-2 { padding-top: 0.5rem; } .recruitPage--paddingTop-3 { padding-top: 0.75rem; } .recruitPage--paddingTop-4 { padding-top: 1rem; } .recruitPage--paddingTop-5 { padding-top: 1.25rem; } .recruitPage--paddingTop-6 { padding-top: 1.5rem; } .recruitPage--paddingTop-8 { padding-top: 2rem; } .recruitPage--paddingTop-10 { padding-top: 2.5rem; } .recruitPage--paddingTop-12 { padding-top: 3rem; } .recruitPage--paddingTop-16 { padding-top: 4rem; } .recruitPage--paddingTop-20 { padding-top: 5rem; } .recruitPage--paddingRight-0 { padding-right: 0; } .recruitPage--paddingRight-1 { padding-right: 0.25rem; } .recruitPage--paddingRight-2 { padding-right: 0.5rem; } .recruitPage--paddingRight-3 { padding-right: 0.75rem; } .recruitPage--paddingRight-4 { padding-right: 1rem; } .recruitPage--paddingRight-5 { padding-right: 1.25rem; } .recruitPage--paddingRight-6 { padding-right: 1.5rem; } .recruitPage--paddingRight-8 { padding-right: 2rem; } .recruitPage--paddingRight-10 { padding-right: 2.5rem; } .recruitPage--paddingRight-12 { padding-right: 3rem; } .recruitPage--paddingRight-16 { padding-right: 4rem; } .recruitPage--paddingRight-20 { padding-right: 5rem; } .recruitPage--paddingBottom-0 { padding-bottom: 0; } .recruitPage--paddingBottom-1 { padding-bottom: 0.25rem; } .recruitPage--paddingBottom-2 { padding-bottom: 0.5rem; } .recruitPage--paddingBottom-3 { padding-bottom: 0.75rem; } .recruitPage--paddingBottom-4 { padding-bottom: 1rem; } .recruitPage--paddingBottom-5 { padding-bottom: 1.25rem; } .recruitPage--paddingBottom-6 { padding-bottom: 1.5rem; } .recruitPage--paddingBottom-8 { padding-bottom: 2rem; } .recruitPage--paddingBottom-10 { padding-bottom: 2.5rem; } .recruitPage--paddingBottom-12 { padding-bottom: 3rem; } .recruitPage--paddingBottom-16 { padding-bottom: 4rem; } .recruitPage--paddingBottom-20 { padding-bottom: 5rem; } .recruitPage--paddingLeft-0 { padding-left: 0; } .recruitPage--paddingLeft-1 { padding-left: 0.25rem; } .recruitPage--paddingLeft-2 { padding-left: 0.5rem; } .recruitPage--paddingLeft-3 { padding-left: 0.75rem; } .recruitPage--paddingLeft-4 { padding-left: 1rem; } .recruitPage--paddingLeft-5 { padding-left: 1.25rem; } .recruitPage--paddingLeft-6 { padding-left: 1.5rem; } .recruitPage--paddingLeft-8 { padding-left: 2rem; } .recruitPage--paddingLeft-10 { padding-left: 2.5rem; } .recruitPage--paddingLeft-12 { padding-left: 3rem; } .recruitPage--paddingLeft-16 { padding-left: 4rem; } .recruitPage--paddingLeft-20 { padding-left: 5rem; } /* マージン */ .recruitPage--margin-0 { margin: 0; } .recruitPage--margin-1 { margin: 0.25rem; } .recruitPage--margin-2 { margin: 0.5rem; } .recruitPage--margin-3 { margin: 0.75rem; } .recruitPage--margin-4 { margin: 1rem; } .recruitPage--margin-5 { margin: 1.25rem; } .recruitPage--margin-6 { margin: 1.5rem; } .recruitPage--margin-8 { margin: 2rem; } .recruitPage--margin-10 { margin: 2.5rem; } .recruitPage--margin-12 { margin: 3rem; } .recruitPage--margin-16 { margin: 4rem; } .recruitPage--margin-20 { margin: 5rem; } .recruitPage--marginTop-0 { margin-top: 0; } .recruitPage--marginTop-1 { margin-top: 0.25rem; } .recruitPage--marginTop-2 { margin-top: 0.5rem; } .recruitPage--marginTop-3 { margin-top: 0.75rem; } .recruitPage--marginTop-4 { margin-top: 1rem; } .recruitPage--marginTop-5 { margin-top: 1.25rem; } .recruitPage--marginTop-6 { margin-top: 1.5rem; } .recruitPage--marginTop-8 { margin-top: 2rem; } .recruitPage--marginTop-10 { margin-top: 2.5rem; } .recruitPage--marginTop-12 { margin-top: 3rem; } .recruitPage--marginTop-16 { margin-top: 4rem; } .recruitPage--marginTop-20 { margin-top: 5rem; } .recruitPage--marginRight-auto { margin-right: auto; } .recruitPage--marginRight-0 { margin-right: 0; } .recruitPage--marginRight-1 { margin-right: 0.25rem; } .recruitPage--marginRight-2 { margin-right: 0.5rem; } .recruitPage--marginRight-3 { margin-right: 0.75rem; } .recruitPage--marginRight-4 { margin-right: 1rem; } .recruitPage--marginRight-5 { margin-right: 1.25rem; } .recruitPage--marginRight-6 { margin-right: 1.5rem; } .recruitPage--marginRight-8 { margin-right: 2rem; } .recruitPage--marginRight-10 { margin-right: 2.5rem; } .recruitPage--marginRight-12 { margin-right: 3rem; } .recruitPage--marginRight-16 { margin-right: 4rem; } .recruitPage--marginRight-20 { margin-right: 5rem; } .recruitPage--marginBottom-0 { margin-bottom: 0; } .recruitPage--marginBottom-1 { margin-bottom: 0.25rem; } .recruitPage--marginBottom-2 { margin-bottom: 0.5rem; } .recruitPage--marginBottom-3 { margin-bottom: 0.75rem; } .recruitPage--marginBottom-4 { margin-bottom: 1rem; } .recruitPage--marginBottom-5 { margin-bottom: 1.25rem; } .recruitPage--marginBottom-6 { margin-bottom: 1.5rem; } .recruitPage--marginBottom-8 { margin-bottom: 2rem; } .recruitPage--marginBottom-10 { margin-bottom: 2.5rem; } .recruitPage--marginBottom-12 { margin-bottom: 3rem; } .recruitPage--marginBottom-16 { margin-bottom: 4rem; } .recruitPage--marginBottom-20 { margin-bottom: 5rem; } .recruitPage--marginLeft-auto { margin-left: auto; } .recruitPage--marginLeft-0 { margin-left: 0; } .recruitPage--marginLeft-1 { margin-left: 0.25rem; } .recruitPage--marginLeft-2 { margin-left: 0.5rem; } .recruitPage--marginLeft-3 { margin-left: 0.75rem; } .recruitPage--marginLeft-4 { margin-left: 1rem; } .recruitPage--marginLeft-5 { margin-left: 1.25rem; } .recruitPage--marginLeft-6 { margin-left: 1.5rem; } .recruitPage--marginLeft-8 { margin-left: 2rem; } .recruitPage--marginLeft-10 { margin-left: 2.5rem; } .recruitPage--marginLeft-12 { margin-left: 3rem; } .recruitPage--marginLeft-16 { margin-left: 4rem; } .recruitPage--marginLeft-20 { margin-left: 5rem; } /* 下線 */ .recruitPage--underline { text-decoration: underline; text-decoration-thickness: 0.5em; text-decoration-color: color-mix(in srgb, var(--color-yellow--500) 75%, transparent); text-underline-offset: -0.2em; text-decoration-skip-ink: none; } .recruitPage--underline-red { text-decoration-color: color-mix(in srgb, var(--color-red--500) 75%, transparent); } /* ボタン */ .recruitPage--button:any-link { --background-color: var(--color-sub-accent); --padding-x: 1.25rem; align-items: center; background-color: var(--background-color); border: 1px solid var(--background-color) !important; border-radius: 100vmax; color: #ffffff; display: grid; font-weight: 600; gap: 0.5rem; grid-template-columns: 1fr; line-height: 1.25; min-height: 50px; padding: 0.5rem 1rem; text-align: center; transition: background-color 0.3s ease-in-out, color 0.3s ease-in-out; width: 100%; } @media (min-width: 640px) { .recruitPage--button:any-link { --padding-x: 2.5rem; gap: 2.5rem; padding: 0.875rem 2.5rem; width: fit-content; } } .recruitPage--button:any-link:hover { background-color: #ffffff; color: var(--background-color) !important; } .recruitPage--button-arrow:any-link { grid-template-columns: 1fr auto; padding-right: 0.5rem; } @media (min-width: 640px) { .recruitPage--button-arrow:any-link { grid-template-columns: 1fr auto; } } .recruitPage--button-arrow:any-link::after { aspect-ratio: 1 / 1; background-color: currentColor; content: ''; display: block; mask-image: url('data:image/svg+xml;charset=utf8, '); mask-position: center center; mask-repeat: no-repeat; mask-size: contain; width: 2rem; } @media (min-width: 640px) { .recruitPage--button-arrow:any-link::after { margin: -0.5rem 0; } } .recruitPage--button__hasIcon { align-items: center; display: grid; gap: 0.75rem; grid-template-columns: auto 1fr; } .recruitPage--button__hasIcon svg { fill: currentColor; width: 1em; transform: scale(1.25); } .recruitPage--button__hasIcon-animation svg { animation-delay: 0s; animation-duration: 1.5s; animation-iteration-count: infinite; animation-name: animation-heartbeat; animation-timing-function: ease-out; } /* 見出し */ .recruitPage--heading-1 { color: var(--color-accent); font-family: var(--font-family--notoSansJP); font-size: 1.75rem; font-weight: 800; line-height: 1.25; margin-bottom: 1.5rem; text-align: center; } @media (min-width: 640px) { .recruitPage--heading-1 { font-size: 2.5rem; } } .recruitPage--heading-2 { color: var(--color-sub-accent); font-family: var(--font-family--notoSansJP); font-size: 1.25rem; font-weight: 800; line-height: 1.25; margin-bottom: 1.5rem; text-align: center; } @media (min-width: 640px) { .recruitPage--heading-2 { font-size: 2rem; } } .recruitPage--heading-3 { border-bottom: 1px solid var(--color-accent); color: var(--color-accent); font-family: var(--font-family--notoSansJP); font-size: 1.5rem; font-weight: 800; line-height: 1.25; margin-bottom: 1.5rem; padding-bottom: 0.75rem; text-align: center; } @media (min-width: 640px) { .recruitPage--heading-2 { font-size: 1.25rem; } } /* ボックス */ .recruitPage--box { background-color: var(--color-white); border-radius: 2rem; padding: 1rem; } @media (min-width: 640px) { .recruitPage--box { padding: 1.75rem 2rem; } } .recruitPage--box-border { border: 0.5rem solid var(--color-gray--500); } .recruitPage--box-shadow { box-shadow: rgba(0, 0, 0, 0.05) 0px 0px 16px; } .recruitPage--box + .recruitPage--box { margin-top: 3rem; } /* グリッド */ .recruitPage--grid { --columns: 1; display: grid; gap: 2rem; grid-template-columns: repeat(var(--columns), 1fr); } @media (min-width: 640px) { .recruitPage--grid { --columns: 2; } } .recruitPage--grid-arrow { gap: 1rem; grid-template-columns: 1fr auto 1fr; } .recruitPage--grid-arrow::after { align-self: center; aspect-ratio: 1 / 1; background-color: var(--color-gray--700); content: ''; mask-image: url('data:image/svg+xml;charset=utf8, '); mask-position: center; mask-repeat: no-repeat; mask-size: contain; order: -1; width: 3rem; } .recruitPage--grid-arrow > *:first-child{ order: -2; } /* 図 */ .recruitPage--figure { border: 1px solid var(--color-gray--700); border-radius: 0.5rem; overflow: hidden; } .recruitPage--figure__heading { background-color: var(--color-gray--700); color: var(--color-white); font-weight: 600; padding: 0.25rem; text-align: center; } .recruitPage--figure__body { padding: 2rem; } /* コンテンツヘッダー */ .recruitPage--contentsHeader { font-family: var(--font-family--notoSansJP); font-size: 2.5rem; font-weight: 800; margin: 0 calc(50% - 50vw); margin-bottom: 3rem; text-align: center; padding-top: 5rem; padding-bottom: 5rem; position: relative; width: 100vw; } .recruitPage--contentsHeader__text { position: relative; z-index: 1; } .recruitPage--contentsHeader__background { --rect-red: var(--color-red--500); --rect-green: var(--color-green--500); --rect-yellow: var(--color-yellow--500); height: 100%; left: 0; overflow: hidden; position: absolute; top: 0; width: 100%; z-index: 0; } .recruitPage--contentsHeader__background span { border-radius: 33%; display: block; height: 20px; list-style: none; position: absolute; width: 20px; } .recruitPage--contentsHeader__background span:nth-child(1) { background: var(--color-red--500); bottom: 60%; height: 20px; left: 33%; opacity: 0.15; transform: translateY(0) rotate(200deg); width: 20px; } .recruitPage--contentsHeader__background span:nth-child(2) { background: var(--color-green--500); bottom: 55%; height: 40px; left: 70%; opacity: 0.2; transform: translateY(0) rotate(128deg); width: 40px; } .recruitPage--contentsHeader__background span:nth-child(3) { background: var(--color-yellow--500); bottom: 20%; height: 80px; left: 60%; opacity: 0.25; transform: translateY(0) rotate(350deg); width: 80px; } /* セクション */ .recruitPage--section { --section-background-color: var(--color-white); --section-padding-top: 3rem; margin: 0 calc(50% - 50vw); padding-bottom: 3rem; padding-top: var(--section-padding-top); width: 100vw; } .recruitPage--section:last-child { padding-bottom: 6rem; } @media (min-width: 640px) { .recruitPage--section:last-child { padding-bottom: 9rem; } } .recruitPage--section-divide::before { content:''; display: block; } .recruitPage--section__heading { font-family: var(--font-family--notoSansJP); font-size: 1.5rem; font-weight: 800; margin-bottom: 2rem; text-align: center; } @media (min-width: 640px) { .recruitPage--section__heading { font-size: 2.125rem; } } .recruitPage--section__heading__en { color: var(--color-green--500); font-size: 0.875rem; margin-bottom: 0.75rem; } /* セクション区切り */ .recruitPage--contentDivider, .recruitPage--section-divide::before { background-color: var(--section-background-color); height: 40px; mask-image: url('data:image/svg+xml;charset=utf8, '); mask-position: center center; mask-repeat: no-repeat; mask-size: contain; overflow: hidden; position: relative; top: calc(var(--section-padding-top) * -1); } @media (min-width: 640px) { .recruitPage--contentDivider, .recruitPage--section-divide::before { height: 80px; } } /* ヘッダー */ html:has(.recruitPage) #gHeader { align-items: center; background-color: var(--color-green--500); color: var(--color-white); display: grid; gap: 2rem; grid-template-columns: auto 1fr auto; height: var(--header-height); padding: 0.75rem; position: sticky; top: 0; z-index: 100; } @media (min-width: 640px) { html:has(.recruitPage) #gHeader { height: auto; min-height: var(--header-height); padding: 0.75rem 3rem; } } html:has(.recruitPage) #siteTitle { left: 0; position: relative; top: 0; transform: none; } html:has(.recruitPage) #siteTitle::after { background-image: url(/3kwp/wp-content/themes/3kka_pharmacist/img/recruit/txt_recruit_with_logo_invert.svg); bottom: auto; left: auto; right: -82px; top: -9px; } @media (min-width: 640px) { html:has(.recruitPage) #siteTitle::after { right: -97px; top: -6px; } } html:has(.recruitPage) #siteTitle a { width: auto; } html:has(.recruitPage) #siteTitle a::before { aspect-ratio: 107 / 20; background-color: var(--color-white); content: ''; display: block; height: 30px; mask-image: url('data:image/svg+xml;charset=utf8, '); mask-position: center center; mask-repeat: no-repeat; mask-size: contain; } @media (min-width: 640px) { html:has(.recruitPage) #siteTitle a::before { height: 40px; } } html:has(.recruitPage) #siteTitle a img { display: none; } html:has(.recruitPage) #gNav { margin: 0; left: 0; overflow: visible; position: absolute; top: var(--header-height); } @media (min-width: 640px) { html:has(.recruitPage) #gNav { align-self: end; position: static; width: 100%; } } html:has(.recruitPage) #gNav ul { background-color: var(--color-accent); bottom: auto; height: calc(100dvh - var(--header-height)); margin: 0; left: 0; opacity: 0; overflow: auto; padding: 0.75rem; pointer-events: none; position: absolute; right: 0; text-align: left; top: 0; transition: opacity 0.2s; width: auto; } @media (min-width: 640px) { html:has(.recruitPage) #gNav ul { background-color: transparent; height: auto; opacity: 1; overflow: visible; padding: 0; pointer-events: auto; position: static; } } html:has(.recruitPage) .recruitPage--humburgerCheck { display: none; } html:has(.recruitPage) #gNav:has(.recruitPage--humburgerCheck:checked) ul { opacity: 1; pointer-events: auto; } html:has(.recruitPage) #gNav .nav-g__item { border-bottom: 1px solid #ffffff80; font-size: 0.875rem; } @media (min-width: 640px) { html:has(.recruitPage) #gNav .nav-g__item { border-bottom: none; font-size: 0.75rem; } } html:has(.recruitPage) #gNav .nav-g__item:not(.nav-g__item--home) { display: block; margin: 0; } @media (min-width: 640px) { html:has(.recruitPage) #gNav .nav-g__item:not(.nav-g__item--home) { display: inline-block; } } html:has(.recruitPage) #gNav .nav-g__item:after { background-color: var(--color-white); background-image: none; bottom: -0.25rem; display: block; height: 1px; left: 0.75rem; right: 0.75rem; width: auto; } html:has(.recruitPage) #gNav .nav-g__item a { color: var(--color-white); display: block; padding: 1rem 0.75rem; } @media (min-width: 640px) { html:has(.recruitPage) #gNav .nav-g__item a { padding: 0.25rem 0.75rem; } } html:has(.recruitPage) #gNav .nav-g__item a:after, html:has(.recruitPage) #gNav .nav-g__item:nth-child(2) a:before { display: none; } @media (min-width: 640px) { html:has(.recruitPage) #gNav .nav-g__item a:after, html:has(.recruitPage) #gNav .nav-g__item:nth-child(2) a:before { border-color: var(--color-white); display: block; } } html:has(.recruitPage) .nav-social { display: none; position: static; } @media (min-width: 640px) { html:has(.recruitPage) .nav-social { display: block; } } html:has(.recruitPage) .nav-social dl { align-items: center; display: grid; gap: 0.25rem 0.5rem; grid-template-columns: 1fr 1fr; } html:has(.recruitPage) .nav-social dt { display: block; grid-column: 1 / -1; margin-right: 0; padding: 0; text-align: center; } html:has(.recruitPage) .nav-social .clearfix::after { display: none; } html:has(.recruitPage) .nav-social .nav-social__item { line-height: 0; } html:has(.recruitPage) .nav-social .nav-social__item a { padding: 0; } /* ハンバーガーボタン */ .recruitPage--humburgerButton { --header-height: 55px; --width: calc(var(--header-height) - (0.75rem * 2)); --bar-height: 4px; aspect-ratio: 1 / 1; cursor: pointer; height: var(--header-height); position: absolute; right: 0; top: calc(var(--header-height) * -1); } @media (min-width: 640px) { .recruitPage--humburgerButton { display: none; } } .recruitPage--humburgerButton span { background-color: var(--color-white); border-radius: 100vmax; height: var(--bar-height); margin-left: calc((var(--width) / 2) * -1); position: absolute; transition: transform 0.5s, opacity 0.5s; width: var(--width); } .recruitPage--humburgerButton span:nth-child(1) { top: calc(50% - (var(--width) / 2) + var(--bar-height)); } .recruitPage--humburgerButton span:nth-child(2) { top: calc(50% - (var(--bar-height) / 2)); } .recruitPage--humburgerButton span:nth-child(3) { bottom: calc(50% - (var(--width) / 2) + var(--bar-height)); } html:has(.recruitPage) #gNav:has(.recruitPage--humburgerCheck:checked) .recruitPage--humburgerButton span:nth-child(1) { transform: translateY(calc((var(--width) / 2) - var(--bar-height) - (var(--bar-height) / 2))) rotate(-45deg); } html:has(.recruitPage) #gNav:has(.recruitPage--humburgerCheck:checked) .recruitPage--humburgerButton span:nth-child(2) { opacity: 0; } html:has(.recruitPage) #gNav:has(.recruitPage--humburgerCheck:checked) .recruitPage--humburgerButton span:nth-child(3) { transform: translateY(calc(((var(--width) / 2) - var(--bar-height) - (var(--bar-height) / 2)) * -1)) rotate(45deg); } /* フッター */ .recruitPage--footer { background-color: var(--color-purple--300); color: var(--color-white); margin: 0 calc(50% - 50vw); margin-bottom: -6em; padding-bottom: 2rem; padding-top: 2rem; width: 100vw; } html:has(.recruitPage--registrationForm) .recruitPage--footer { display: none; } .recruitPage--footerLinks__heading { display: block; font-size: var(--font-size--base); margin-bottom: 0.5rem; margin-inline: auto; width: fit-content; } .recruitPage--footerLinks__list { display: flex; justify-content: center; flex-wrap: wrap; font-size: var(--font-size--xs); margin: 0; padding: 0; } @media (min-width: 640px) { .recruitPage--footerLinks__list { margin: 0 10rem; } } .recruitPage--footerLinks__list li { list-style-type: none; margin: 0; padding: 0.25rem 0.5rem; text-align: center; } @media (min-width: 640px) { .recruitPage--footerLinks__list li { width: 33.333333%; } } .recruitPage--footerLinks a:any-link { color: var(--color-white); } /* 固定フッター */ .recruitPage--fixedFooter { backdrop-filter: blur(8px); background-color: color-mix(in srgb, var(--color-white) 75%, transparent); bottom: 0; box-shadow: rgba(0, 0, 0, 0.05) 0px 0px 16px; left: 0; opacity: 0; padding-bottom: 0.75rem; padding-top: 0.75rem; pointer-events: none; position: fixed; transition: opacity 0.2s; width: 100vw; z-index: 50; } @media (min-width: 640px) { .recruitPage--fixedFooter { padding-bottom: 1rem; padding-top: 1rem; } } html:has(.recruitPage--registrationForm) .recruitPage--fixedFooter { opacity: 0 !important; pointer-events: none !important; } .recruitPage--fixedFooter-show { opacity: 1 !important; pointer-events: auto !important; } .recruitPage--fixedFooterButtons { display: grid; font-size: var(--font-size--sm); gap: 0.75rem; grid-template-columns: 1fr 1fr; justify-content: center; } @media (min-width: 640px) { .recruitPage--fixedFooterButtons { font-size: var(--font-size--base); gap: 1rem; grid-template-columns: auto auto; } } /* メインビジュアル */ .recruitPage--mainVisual { background-color: #f9fffe; position: relative; } .recruitPage--mainVisual__inner { margin-bottom: -3rem; padding-top: 1.5rem; position: relative; z-index: 1; } @media (min-width: 640px) { .recruitPage--mainVisual__inner { padding-bottom: 6rem; padding-top: 3rem; } .recruitPage--mainVisual__inner:not(:has(.recruitPage--mainVisual__location)) { padding-top: 6rem; } } .recruitPage--mainVisual__title { background-color: var(--color-green--500); border-radius: 0.25rem; color: #ffffff; font-size: 0.875rem; margin-bottom: 0.5rem; width: fit-content; padding: 0.125rem 0.5rem; } .recruitPage--mainVisual__tags { display: flex; flex-wrap: wrap; gap: 0.5rem; margin-bottom: 1rem; } .recruitPage--mainVisual__tags span { --delay-base: 0.5s; align-items: center; color: var(--color-accent); display: flex; gap: 0.5rem; font-weight: 600; opacity: 0; transform: translateY(1.5em); animation-name: animation-recruitPage--mainVisual__tags; animation-duration: 0.5s; animation-timing-function: ease-out; animation-fill-mode: forwards; } .recruitPage--mainVisual__tags span:not(:last-child):after { content: ' / '; font-size: 150%; font-weight: 400; } .recruitPage--mainVisual__tags span:nth-child(1) { animation-delay: var(--delay-base); } .recruitPage--mainVisual__tags span:nth-child(2) { animation-delay: calc(var(--delay-base) + 0.2s); } .recruitPage--mainVisual__tags span:nth-child(3) { animation-delay: calc(var(--delay-base) + 0.4s); } @keyframes animation-recruitPage--mainVisual__tags { from { opacity: 0; transform: translateY(1.5em); } to { opacity: 1; transform: translateY(0); } } .recruitPage--mainVisual__text { color: var(--color-text); font-size: 2rem; font-weight: 800; line-height: 1.25; margin-bottom: 2rem; } @media (min-width: 640px) { .recruitPage--mainVisual__text { font-size: 2.25rem; margin-bottom: 3rem; } } .recruitPage--mainVisual__text span { font-size: 125%; } .recruitPage--mainVisual__text__1 { font-size: 1.25rem; position: relative; width: fit-content; z-index: 0; } @media (min-width: 640px) { .recruitPage--mainVisual__text__1 { font-size: 1.5rem; } } .recruitPage--mainVisual__location { font-size: 175% !important; position: relative; } .recruitPage--mainVisual__location::before { animation-delay: 1.5s; animation-duration: 0.5s; animation-fill-mode: forwards; animation-name: animation-recruitPage--mainVisual__location; animation-timing-function: ease-out; background-color: var(--color-yellow--500); bottom: 0; content: ''; height: 33%; left: 0; opacity: 0.75; position: absolute; width: 0; z-index: -1; } @keyframes animation-recruitPage--mainVisual__location { from { width: 0; } to { width: 100%; } } .recruitPage--mainVisual__link:any-link { align-items: center; background-color: var(--color-sub-accent); border: 1px solid var(--color-sub-accent) !important; border-radius: 100vmax; color: #ffffff; display: flex; font-size: 1.125rem; font-weight: 600; gap: 1rem; margin-inline: auto; padding: 0.75rem 2.5rem; position: relative; transition: background-color 0.3s ease-in-out, color 0.3s ease-in-out; width: fit-content; } @media (min-width: 640px) { .recruitPage--mainVisual__link:any-link { font-size: 1.25rem; margin-inline: 0; padding: 0.75rem 3.5rem; } } .recruitPage--mainVisual__link:any-link::before { animation-delay: 0s; animation-duration: 1.5s; animation-iteration-count: infinite; animation-name: animation-recruitPage--mainVisual__link; animation-timing-function: ease-out; border: 0.5rem solid var(--color-sub-accent) !important; border-radius: 100vmax; content: ''; inset: -1px; pointer-events: none; position: absolute; z-index: -1; } @keyframes animation-recruitPage--mainVisual__link { 0% { opacity: 1; } 90% { opacity: .1; } to { transform: scale(1.05, 1.2); opacity: 0; } } .recruitPage--mainVisual__link:any-link:hover { background-color: #ffffff; color: var(--color-sub-accent) !important; } .recruitPage--mainVisual__link svg { animation-delay: 0s; animation-duration: 1.5s; animation-iteration-count: infinite; animation-name: animation-heartbeat; animation-timing-function: ease-out; fill: currentColor; transform: scale(1.25); width: 1em; } .recruitPage--mainVisual__image { margin-inline: auto; padding-top: 1rem; width: 66%; } @media (min-width: 640px) { .recruitPage--mainVisual__image { bottom: 0; position: absolute; right: 0; width: 47.5%; z-index: -1; } } .recruitPage--mainVisual__background { --rect-red: var(--color-red--500); --rect-green: var(--color-green--500); --rect-yellow: var(--color-yellow--500); height: 100%; left: 0; overflow: hidden; position: absolute; top: 0; width: 100%; z-index: 0; } .recruitPage--mainVisual__background span { animation-duration: 25s; animation-iteration-count: infinite; animation-name: animation-recruitPage--mainVisual__background; animation-timing-function: linear; background: var(--rect-green); bottom: -150px; display: block; height: 20px; list-style: none; position: absolute; width: 20px; } .recruitPage--mainVisual__background span:nth-child(even){ background: var(--rect-yellow); } .recruitPage--mainVisual__background span:nth-child(1){ left: 25%; width: 80px; height: 80px; animation-delay: 0s; } .recruitPage--mainVisual__background span:nth-child(2){ left: 10%; width: 20px; height: 20px; animation-delay: 2s; animation-duration: 12s; } .recruitPage--mainVisual__background span:nth-child(3){ left: 70%; width: 20px; height: 20px; animation-delay: 4s; } .recruitPage--mainVisual__background span:nth-child(4){ left: 40%; width: 60px; height: 60px; animation-delay: 0s; animation-duration: 18s; } .recruitPage--mainVisual__background span:nth-child(5){ left: 65%; width: 20px; height: 20px; animation-delay: 0s; } .recruitPage--mainVisual__background span:nth-child(6){ left: 75%; width: 110px; height: 110px; animation-delay: 3s; } .recruitPage--mainVisual__background span:nth-child(7){ left: 35%; width: 150px; height: 150px; animation-delay: 7s; } .recruitPage--mainVisual__background span:nth-child(8){ left: 50%; width: 25px; height: 25px; animation-delay: 15s; animation-duration: 45s; } .recruitPage--mainVisual__background span:nth-child(9){ left: 20%; width: 15px; height: 15px; animation-delay: 2s; animation-duration: 35s; } .recruitPage--mainVisual__background span:nth-child(10){ left: 85%; width: 150px; height: 150px; animation-delay: 0s; animation-duration: 11s; } @keyframes animation-recruitPage--mainVisual__background { 0%{ transform: translateY(0) rotate(0deg); opacity: 0.25; border-radius: 25%; } 100%{ transform: translateY(-1000px) rotate(720deg); opacity: 0; border-radius: 50%; } } /* カルーセル */ .recruitPage--carousel { align-items: center; display: flex; overflow: hidden; padding-top: 1rem; padding-bottom: 1rem; position: relative; z-index: 1; } .recruitPage--carousel__group { --item-count: 4; animation-delay: 1s; animation-duration: calc(5s * var(--item-count)); animation-fill-mode: both; animation-iteration-count: infinite; animation-name: animation-recruitPage--carousel; animation-timing-function: linear; display: flex; } @keyframes animation-recruitPage--carousel { from { transform: translateX(0); } to { transform: translateX(-100%); } } .recruitPage--carousel__item { padding-inline: 0.5rem; width: 270px; } .recruitPage--voice { background-color: #ffffff; border-radius: 0.75rem; box-shadow: rgba(0, 0, 0, 0.05) 0px 0px 16px; color: var(--color-text); height: 100%; padding: 1rem; position: relative; z-index: 0; } .recruitPage--voice__title { -webkit-text-stroke: 4px #ffffff; color: var(--color-accent); font-size: 1.125rem; font-weight: 600; line-height: 1.3; margin-bottom: 0.5rem; paint-order: stroke; text-stroke: 4px #ffffff; } @media (min-width: 640px) { .recruitPage--voice__title { font-size: 1.25rem; } } .recruitPage--voice::before { background-color: var(--color-red--200); content: ''; display: block; inset: 1.5rem 1rem; mask-image: var(--prefecture-image); mask-position: right center; mask-repeat: no-repeat; mask-size: contain; position: absolute; z-index: -1; } .recruitPage--voice-hokkaido::before { --prefecture-image: url(/3kwp/wp-content/themes/3kka_pharmacist/img/recruit-page/prefecture/hokkaido.svg); } .recruitPage--voice-aomori::before { --prefecture-image: url(/3kwp/wp-content/themes/3kka_pharmacist/img/recruit-page/prefecture/aomori.svg); } .recruitPage--voice-iwate::before { --prefecture-image: url(/3kwp/wp-content/themes/3kka_pharmacist/img/recruit-page/prefecture/iwate.svg); } .recruitPage--voice-miyagi::before { --prefecture-image: url(/3kwp/wp-content/themes/3kka_pharmacist/img/recruit-page/prefecture/miyagi.svg); } .recruitPage--voice-akita::before { --prefecture-image: url(/3kwp/wp-content/themes/3kka_pharmacist/img/recruit-page/prefecture/akita.svg); } .recruitPage--voice-yamagata::before { --prefecture-image: url(/3kwp/wp-content/themes/3kka_pharmacist/img/recruit-page/prefecture/yamagata.svg); } .recruitPage--voice-fukushima::before { --prefecture-image: url(/3kwp/wp-content/themes/3kka_pharmacist/img/recruit-page/prefecture/fukushima.svg); } .recruitPage--voice-ibaraki::before { --prefecture-image: url(/3kwp/wp-content/themes/3kka_pharmacist/img/recruit-page/prefecture/ibaraki.svg); } .recruitPage--voice-tochigi::before { --prefecture-image: url(/3kwp/wp-content/themes/3kka_pharmacist/img/recruit-page/prefecture/tochigi.svg); } .recruitPage--voice-gunma::before { --prefecture-image: url(/3kwp/wp-content/themes/3kka_pharmacist/img/recruit-page/prefecture/gunma.svg); } .recruitPage--voice-saitama::before { --prefecture-image: url(/3kwp/wp-content/themes/3kka_pharmacist/img/recruit-page/prefecture/saitama.svg); } .recruitPage--voice-chiba::before { --prefecture-image: url(/3kwp/wp-content/themes/3kka_pharmacist/img/recruit-page/prefecture/chiba.svg); } .recruitPage--voice-tokyo::before { --prefecture-image: url(/3kwp/wp-content/themes/3kka_pharmacist/img/recruit-page/prefecture/tokyo.svg); } .recruitPage--voice-kanagawa::before { --prefecture-image: url(/3kwp/wp-content/themes/3kka_pharmacist/img/recruit-page/prefecture/kanagawa.svg); } .recruitPage--voice-niigata::before { --prefecture-image: url(/3kwp/wp-content/themes/3kka_pharmacist/img/recruit-page/prefecture/niigata.svg); } .recruitPage--voice-toyama::before { --prefecture-image: url(/3kwp/wp-content/themes/3kka_pharmacist/img/recruit-page/prefecture/toyama.svg); } .recruitPage--voice-ishikawa::before { --prefecture-image: url(/3kwp/wp-content/themes/3kka_pharmacist/img/recruit-page/prefecture/ishikawa.svg); } .recruitPage--voice-fukui::before { --prefecture-image: url(/3kwp/wp-content/themes/3kka_pharmacist/img/recruit-page/prefecture/fukui.svg); } .recruitPage--voice-yamanashi::before { --prefecture-image: url(/3kwp/wp-content/themes/3kka_pharmacist/img/recruit-page/prefecture/yamanashi.svg); } .recruitPage--voice-nagano::before { --prefecture-image: url(/3kwp/wp-content/themes/3kka_pharmacist/img/recruit-page/prefecture/nagano.svg); } .recruitPage--voice-gifu::before { --prefecture-image: url(/3kwp/wp-content/themes/3kka_pharmacist/img/recruit-page/prefecture/gifu.svg); } .recruitPage--voice-shizuoka::before { --prefecture-image: url(/3kwp/wp-content/themes/3kka_pharmacist/img/recruit-page/prefecture/shizuoka.svg); } .recruitPage--voice-aichi::before { --prefecture-image: url(/3kwp/wp-content/themes/3kka_pharmacist/img/recruit-page/prefecture/aichi.svg); } .recruitPage--voice-mie::before { --prefecture-image: url(/3kwp/wp-content/themes/3kka_pharmacist/img/recruit-page/prefecture/mie.svg); } .recruitPage--voice-shiga::before { --prefecture-image: url(/3kwp/wp-content/themes/3kka_pharmacist/img/recruit-page/prefecture/shiga.svg); } .recruitPage--voice-kyoto::before { --prefecture-image: url(/3kwp/wp-content/themes/3kka_pharmacist/img/recruit-page/prefecture/kyoto.svg); } .recruitPage--voice-osaka::before { --prefecture-image: url(/3kwp/wp-content/themes/3kka_pharmacist/img/recruit-page/prefecture/osaka.svg); } .recruitPage--voice-hyogo::before { --prefecture-image: url(/3kwp/wp-content/themes/3kka_pharmacist/img/recruit-page/prefecture/hyogo.svg); } .recruitPage--voice-nara::before { --prefecture-image: url(/3kwp/wp-content/themes/3kka_pharmacist/img/recruit-page/prefecture/nara.svg); } .recruitPage--voice-wakayama::before { --prefecture-image: url(/3kwp/wp-content/themes/3kka_pharmacist/img/recruit-page/prefecture/wakayama.svg); } .recruitPage--voice-tottori::before { --prefecture-image: url(/3kwp/wp-content/themes/3kka_pharmacist/img/recruit-page/prefecture/tottori.svg); } .recruitPage--voice-shimane::before { --prefecture-image: url(/3kwp/wp-content/themes/3kka_pharmacist/img/recruit-page/prefecture/shimane.svg); } .recruitPage--voice-okayama::before { --prefecture-image: url(/3kwp/wp-content/themes/3kka_pharmacist/img/recruit-page/prefecture/okayama.svg); } .recruitPage--voice-hiroshima::before { --prefecture-image: url(/3kwp/wp-content/themes/3kka_pharmacist/img/recruit-page/prefecture/hiroshima.svg); } .recruitPage--voice-yamaguchi::before { --prefecture-image: url(/3kwp/wp-content/themes/3kka_pharmacist/img/recruit-page/prefecture/yamaguchi.svg); } .recruitPage--voice-tokushima::before { --prefecture-image: url(/3kwp/wp-content/themes/3kka_pharmacist/img/recruit-page/prefecture/tokushima.svg); } .recruitPage--voice-kagawa::before { --prefecture-image: url(/3kwp/wp-content/themes/3kka_pharmacist/img/recruit-page/prefecture/kagawa.svg); } .recruitPage--voice-ehime::before { --prefecture-image: url(/3kwp/wp-content/themes/3kka_pharmacist/img/recruit-page/prefecture/ehime.svg); } .recruitPage--voice-kochi::before { --prefecture-image: url(/3kwp/wp-content/themes/3kka_pharmacist/img/recruit-page/prefecture/kochi.svg); } .recruitPage--voice-fukuoka::before { --prefecture-image: url(/3kwp/wp-content/themes/3kka_pharmacist/img/recruit-page/prefecture/fukuoka.svg); } .recruitPage--voice-saga::before { --prefecture-image: url(/3kwp/wp-content/themes/3kka_pharmacist/img/recruit-page/prefecture/saga.svg); } .recruitPage--voice-nagasaki::before { --prefecture-image: url(/3kwp/wp-content/themes/3kka_pharmacist/img/recruit-page/prefecture/nagasaki.svg); } .recruitPage--voice-kumamoto::before { --prefecture-image: url(/3kwp/wp-content/themes/3kka_pharmacist/img/recruit-page/prefecture/kumamoto.svg); } .recruitPage--voice-oita::before { --prefecture-image: url(/3kwp/wp-content/themes/3kka_pharmacist/img/recruit-page/prefecture/oita.svg); } .recruitPage--voice-miyazaki::before { --prefecture-image: url(/3kwp/wp-content/themes/3kka_pharmacist/img/recruit-page/prefecture/miyazaki.svg); } .recruitPage--voice-kagoshima::before { --prefecture-image: url(/3kwp/wp-content/themes/3kka_pharmacist/img/recruit-page/prefecture/kagoshima.svg); } .recruitPage--voice-okinawa::before { --prefecture-image: url(/3kwp/wp-content/themes/3kka_pharmacist/img/recruit-page/prefecture/okinawa.svg); } .recruitPage--voice__name { -webkit-text-stroke: 4px #ffffff; font-size: 0.75rem; margin-bottom: 0.25rem; paint-order: stroke; text-stroke: 4px #ffffff; } .recruitPage--voice__employmentStatus { background-color: #f5f5f5; font-size: 0.75rem; padding: 0.125rem 0.5rem; width: fit-content; } /* 若い薬剤師が採用できない */ .recruitPage--worry { align-items: center; display: grid; gap: 1rem; grid-template-columns: auto 1fr; margin-inline: auto; width: fit-content; } .recruitPage--worry__image img { gap: 1.5rem; width: 5rem; } @media (min-width: 640px) { .recruitPage--worry__image img { width: 8rem; } } .recruitPage--worry__text { color: var(--color-sub-accent); font-family: var(--font-family--notoSansJP); font-size: var(--font-size--2xl); font-weight: 800; } @media (min-width: 640px) { .recruitPage--worry__text { font-size: var(--font-size--4xl); } } /* ご存知ですか？ */ .recruitPage--know { background-color: var(--color-white); border: 0.5rem solid var(--color-green--300); border-radius: 2rem; box-shadow: rgba(0, 0, 0, 0.05) 0px 0px 16px; display: flex; flex-direction: column; gap: 0.75rem; padding: 1rem; } @media (min-width: 640px) { .recruitPage--know { display: grid; gap: 1.5rem; grid-template-columns: 50% 1fr; margin-inline: 2.5rem; padding: 2rem; } } .recruitPage--know__heading { color: var(--color-accent); font-family: var(--font-family--notoSansJP); font-size: 1.75rem; font-weight: 800; line-height: 1.25; margin-bottom: 1rem; text-align: center; } @media (min-width: 640px) { .recruitPage--know__heading { font-size: 2.5rem; margin-bottom: 1.5rem; text-align: left; } } .recruitPage--know__body { font-family: var(--font-family--notoSansJP); font-size: 1.25rem; line-height: 1.375; text-align: center; } @media (min-width: 640px) { .recruitPage--know__body { font-size: 1.5rem; text-align: left; } } .recruitPage--know__body span { color: var(--color-sub-accent); display: inline-block; font-size: 125%; font-weight: 800; margin-inline: 0.25rem; } /* グラフ */ .recruitPage--chart { display: flex; flex-direction: column; gap: 1rem; } .recruitPage--chart__legend { background-color: var(--color-gray--300); border-radius: 0.25rem; display: flex; flex-wrap: wrap; gap: 0.25rem 0.75rem; justify-content: center; list-style-type: none; margin: 0 auto; padding: 0.5rem; width: fit-content; } .recruitPage--chart__legend li { align-items: center; display: grid; gap: 0.25rem; grid-template-columns: auto 1fr; margin: 0; } .recruitPage--chart__legend li:nth-child(n+3) { font-size: var(--font-size--xs); } .recruitPage--chart__legend li::before { aspect-ratio: 1 / 1; background-color: var(--legend-color); border: 1px solid #ffffff; border-radius: 0.25rem; content: ''; width: 1em; } .recruitPage--chart__body { height: 9.5rem; position: relative; width: auto; } @media (min-width: 640px) { .recruitPage--chart__body { height: 15rem; } } /* イントロダクション */ .recruitPage--introduction__lead { background-color: var(--color-yellow--500); border-radius: 0.25rem;; font-size: 0.875rem; font-weight: 600; margin-inline: auto; padding: 0.125rem 1rem; width: fit-content; } @media (min-width: 640px) { .recruitPage--introduction__lead { font-size: 1.125rem; } } .recruitPage--introduction__heading { font-size: 2rem; font-weight: 800; line-height: 1.25; margin-bottom: 3rem; text-align: center; } @media (min-width: 640px) { .recruitPage--introduction__heading { font-size: 3rem; } } .recruitPage--introduction__heading span { font-size: 80%; } .recruitPage--introduction__image { margin-inline: auto; max-width: 100%; width: 840px; } .recruitPage--introduction__body__heading { color: var(--color-accent); font-family: var(--font-family--notoSansJP); font-size: 1.75rem; font-weight: 800; margin-bottom: 1rem; text-align: center; } .recruitPage--introduction__body ul { display: grid; gap: 0.75rem; grid-template-columns: 1fr; list-style-type: none; margin: 0; padding: 0; } @media (min-width: 640px) { .recruitPage--introduction__body ul { grid-template-columns: repeat(3, 1fr); margin: 0 10rem; } } .recruitPage--introduction__body ul li { align-items: center; background-color: var(--color-white); border-radius: 1.25rem; box-shadow: rgba(0, 0, 0, 0.05) 0px 0px 16px; display: flex; font-weight: 600; justify-content: center; margin: 0; padding: 0.75rem; text-align: center; } @media (min-width: 640px) { .recruitPage--introduction__body ul li { padding: 1.5rem; } } /* あいさつ */ .recruitPage--greeting { align-items: center; display: grid; justify-items: center; margin-bottom: 3rem; } @media (min-width: 640px) { .recruitPage--greeting { gap: 2.5rem; grid-template-columns: auto 1fr; margin-inline: 10rem; } } .recruitPage--greeting__image { aspect-ratio: 1 / 1; background-color: #fff; border: 4px solid var(--color-yellow--400); border-radius: 100vmax; margin-bottom: -42.5px; overflow: hidden; padding-top: 0.5rem; position: relative; width: 85px; z-index: 1; } @media (min-width: 640px) { .recruitPage--greeting__image { border-width: 6px; margin-bottom: 0; padding-top: 1rem; width: 125px; } } .recruitPage--greeting__text { background-color: var(--color-white); border-radius: 2rem; box-shadow: rgba(0, 0, 0, 0.05) 0px 0px 16px; padding: calc(42.5px + 0.5rem) 1.5rem 1.5rem 1.5rem; position: relative; } @media (min-width: 640px) { .recruitPage--greeting__text { padding: 1.5rem; } .recruitPage--greeting__text::before { aspect-ratio: 2 / 1; background-color: var(--color-white); clip-path: polygon(0 100%, 100% 0, 100% 100%); content: ''; display: block; left: -2rem; position: absolute; top: calc(50% - 1.5rem); width: 2rem; } } .recruitPage--greeting__name { margin-top: 0.5rem; text-align: right; } /* メリット */ .recruitPage--merit { background-color: var(--color-white); border: 0.5rem solid var(--color-gray--500); border-radius: 2rem; display: grid; gap: 1rem 2rem; grid-template-columns: 1fr; padding: 1rem; } @media (min-width: 640px) { .recruitPage--merit { grid-template-columns: 62.5% 1fr; padding: 1.75rem 2rem; } } .recruitPage--merit + .recruitPage--merit { margin-top: 3rem; } .recruitPage--merit__number { align-items: baseline; color: var(--color-accent); display: flex; font-family: var(--font-family--notoSansJP); font-size: 0.875rem; font-weight: 800; gap: 0.25rem; margin-bottom: 0.75rem; } @media (min-width: 640px) { .recruitPage--merit__number { font-size: 1.125rem; gap: 0.5rem; margin-bottom: 1.25rem; } } .recruitPage--merit__number::after { background-color: currentColor; content: ''; display: block; flex-grow: 1; height: 1px; } .recruitPage--merit__number span { font-size: 175%; } .recruitPage--merit__heading { color: var(--color-text); font-family: var(--font-family--notoSansJP); font-size: 1.5rem; font-weight: 800; line-height: 1.5; margin-bottom: 1rem; position: relative; } @media (min-width: 640px) { .recruitPage--merit__heading { font-size: 2.25rem; margin-bottom: 1.5rem; } } .recruitPage--merit__heading__bubble { background-color: var(--color-yellow--500); border-radius: 100vmax; color: var(--color-yellow--900); display: block; font-size: 1rem; margin-top: 0.25rem; padding: 0.25rem 1rem; width: fit-content; } .recruitPage--merit__others { grid-column: 1 / -1; padding-top: 1rem; } .recruitPage--merit__others__heading { color: var(--color-accent); font-family: var(--font-family--notoSansJP); font-size: 1.5rem; font-weight: 800; margin-bottom: 1rem; } .recruitPage--merit__others__article { --gap: 1.5rem; display: grid; gap: var(--gap); } @media (min-width: 640px) { .recruitPage--merit__others__article { --gap: 3rem; grid-auto-flow: column; } } .recruitPage--merit__others__article__item { padding-top: 0.5rem; padding-bottom: 0.5rem; position: relative; } .recruitPage--merit__others__article__item:not(:last-child)::after { background-color: var(--color-gray--500); bottom: calc((var(--gap) / 2) * -1); content: ''; height: 1px; left: 0; position: absolute; right: 0; } @media (min-width: 640px) { .recruitPage--merit__others__article__item:not(:last-child)::after { bottom: 0; height: auto; right: calc((var(--gap) / 2) * -1); top: 0; width: 1px; } } .recruitPage--merit__others__article__item__heading { color: var(--color-sub-accent); font-family: var(--font-family--notoSansJP); font-weight: 800; margin-bottom: 0.75rem; } .recruitPage--merit__others__image { text-align: center; } /* 使用が良い理由 */ .recruitPage--reasonWrapper { display: grid; gap: 3rem; margin-bottom: 3rem; } .recruitPage--reason { background-color: var(--color-white); border-radius: 2rem; box-shadow: rgba(0, 0, 0, 0.05) 0px 0px 16px; padding: 1rem; } @media (min-width: 640px) { .recruitPage--reason { padding: 1.75rem 2rem; } } .recruitPage--reason__heading { color: var(--color-accent); font-family: var(--font-family--notoSansJP); font-size: 1.25rem; font-weight: 800; line-height: 1.25; margin-bottom: 1.5rem; text-align: center; } @media (min-width: 640px) { .recruitPage--reason__heading { font-size: 2rem; } } .recruitPage--reason__caption { color: var(--color-white); background-color: var(--color-gray--700); border-radius: 0.5rem 0.5rem 0 0; padding: 0.125rem 1rem; width: fit-content; } .recruitPage--reason__table { border: 1px solid var(--color-gray--700); border-radius: 0 0.5rem 0.5rem 0.5rem; margin-bottom: 1.5rem; margin-top: 0; overflow: hidden; } @media (min-width: 640px) { .recruitPage--reason__table { align-items: stretch; display: grid; grid-template-columns: auto 1fr; } } .recruitPage--reason__table dt, .recruitPage--reason__table dd { align-items: center; border-bottom: 1px solid var(--color-gray--700); display: flex; padding: 0.5rem; } @media (min-width: 640px) { .recruitPage--reason__table dt, .recruitPage--reason__table dd { padding: 1rem; } } .recruitPage--reason__table dd { padding-left: calc(0.5rem + 1em); } @media (min-width: 640px) { .recruitPage--reason__table dd { padding-left: 1rem; } } .recruitPage--reason__table dd:last-of-type { border-bottom: none; } @media (min-width: 640px) { .recruitPage--reason__table dt:last-of-type { border-bottom: none; } } .recruitPage--reason__table dt { background-color: var(--color-gray--200); font-weight: 600; } .recruitPage--reason__textImage { margin-inline: auto; } @media (min-width: 640px) { .recruitPage--reason__textImage { width: 75%; } } .recruitPage--reason__figure { align-items: center; display: grid; gap: 0.5rem; justify-items: center; margin-bottom: 2rem; } @media (min-width: 640px) { .recruitPage--reason__figure { gap: 1rem; grid-template-columns: 1fr auto 1fr; } } .recruitPage--reason__figure__item { border: 1px solid var(--color-gray--700); border-radius: 0.5rem; overflow: hidden; } .recruitPage--reason__figure__item__heading { background-color: var(--color-gray--700); color: var(--color-white); font-weight: 600; padding: 0.25rem; text-align: center; } .recruitPage--reason__figure__item__image { padding: 2rem; } .recruitPage--reason__figure__arrow { transform: rotate(90deg); width: 3rem; } @media (min-width: 640px) { .recruitPage--reason__figure__arrow { transform: none; } } .recruitPage--reason__figure__arrow svg { fill: var(--color-gray--700); } .reactPage--reason__note { background-color: var(--color-gray--200); border-radius: 0.5rem; margin-inline: auto; padding: 1rem; width: fit-content; } /* 会社情報 */ .recruitPage--company__image { text-align: center; } .recruitPage--company__image img { aspect-ratio: 21 / 9; border-radius: 2rem; object-fit: cover; object-position: top; width: 100%; } .recruitPage--company__text { background-color: var(--color-white); border-radius: 2rem; box-shadow: rgba(0, 0, 0, 0.05) 0px 0px 16px; color: var(--color-text); font-family: var(--font-family--notoSansJP); line-height: 1.75; margin-bottom: 3rem; margin-inline: 1rem; margin-top: -1.5rem; padding: 0.75rem; position: relative; text-align: center; z-index: 1; } @media (min-width: 640px) { .recruitPage--company__text { margin-inline: 5rem; margin-top: -5rem; padding: 1.5rem; } } .recruitPage--company__information__heading { align-items: center; color: var(--color-text); display: flex; font-family: var(--font-family--notoSansJP); font-size: 1.25rem; font-weight: 800; gap: 1.5rem; justify-content: center; margin-bottom: 1.5rem; } @media (min-width: 640px) { .recruitPage--company__information__heading { font-size: 1.75rem; } } .recruitPage--company__information__heading::before, .recruitPage--company__information__heading::after { background-color: var(--color-accent); content: ''; height: 0.125rem; width: 4rem; } .recruitPage--company__information__table { align-items: stretch; display: grid; grid-template-columns: auto 1fr; margin-bottom: 1.5rem; margin-top: 0; overflow: hidden; } @media (min-width: 640px) { .recruitPage--company__information__table { margin-left: 5rem; margin-right: 5rem; } } .recruitPage--company__information__table dt, .recruitPage--company__information__table dd { align-items: center; border-bottom: 1px solid var(--color-gray--500); display: flex; padding: 1rem; } .recruitPage--company__information__table dt { background-color: var(--color-gray--200); font-weight: 600; } .recruitPage--company__information__table dd { background-color: var(--color-white); } .recruitPage--company__information__icon img { border-radius: 0.5rem; width: 4rem; } /* 流れ */ .recruitPage--flow { background-color: var(--color-white); border-radius: 2rem; box-shadow: rgba(0, 0, 0, 0.05) 0px 0px 16px; counter-reset: step; counter-set: step 0; padding: 0.5rem 1rem; } @media (min-width: 640px) { .recruitPage--flow { margin-inline: 7.5rem; padding: 0.5rem 2rem; } } .recruitPage--flow__item { counter-increment: step; display: grid; gap: 1rem; grid-template-columns: auto 1fr; padding: 1rem; } @media (min-width: 640px) { .recruitPage--flow__item { gap: 2rem; padding: 1.5rem; } } .recruitPage--flow__item:not(:last-child) { border-bottom: 1px solid var(--color-gray--400); } .recruitPage--flow__item::before { border-right: 1px solid var(--color-gray--600); color: var(--color-accent); content: '0'counter(step); font-family: var(--font-family--notoSansJP); font-size: 1.75rem; font-weight: 800; padding-right: 1rem; } @media (min-width: 640px) { .recruitPage--flow__item::before { font-size: 3rem; padding-right: 2rem; } } .recruitPage--flow__item__inner { display: flex; flex-direction: column; justify-content: center; } .recruitPage--flow__item__heading { color: var(--color-text); font-family: var(--font-family--notoSansJP); font-size: 1.125rem; font-weight: 600; margin-bottom: 0.5rem; } /* 地域別コンテンツ */ .recruitPage--location { h1 { display: none; } h2 { color: var(--color-accent); font-family: var(--font-family--notoSansJP); font-weight: 800; margin-bottom: 1rem; margin-top: 0; } *:not(h1) + h2 { margin-top: 3rem; } p { margin: 0; } strong { border: none; font-weight: 400; } ul { margin: 0; padding-left: 1.5em; } ul li strong { display: block; } } /* 導入事例 */ .recruitPage--casesReason { border: 4px solid var(--color-gray--500); border-radius: 0.5rem; margin-inline: auto; margin-bottom: 3rem; padding: 1rem 8rem 1rem 1rem; position: relative; width: fit-content; } .recruitPage--casesReason::after { aspect-ratio: 130 / 217; background-image: url('/3kwp/wp-content/uploads/2021/06/c_recruit_reason2_woman.png'); background-position: center; background-repeat: no-repeat; background-size: contain; bottom: 0; content: ''; display: block; position: absolute; right: 1rem; width: 6rem; } .recruitPage--casesReason ul { list-style-type: none; margin: 0; padding: 0; } .recruitPage--casesReason ul li { padding-left: calc(1em + 0.5rem); position: relative; } .recruitPage--casesReason ul li::before { aspect-ratio: 1 / 1; background-color: var(--color-accent); content: ''; display: block; left: 0; mask-image: url('data:image/svg+xml;charset=utf8, '); mask-position: center; mask-repeat: no-repeat; mask-size: contain; position: absolute; top: 2.5px; width: 1em; } /* 料金 */ .recruitPage--pricingWrapper:has(.recruitPage--pricingWrapper__blur) { position: relative; user-select: none; } .recruitPage--pricingWrapper__blur { align-items: start; backdrop-filter: blur(5px); content: ''; cursor: pointer; display: grid; inset: -1rem; justify-content: center; position: absolute; } @media (min-width: 640px) { .recruitPage--pricingWrapper__blur { align-items: center; } } .recruitPage--pricingWrapper__blur__button { margin-bottom: 3rem; margin-top: 3rem; position: sticky; top: 7.5rem; } @media (min-width: 640px) { .recruitPage--pricingWrapper__blur__button { margin-bottom: 0; margin-top: 0; position: static; } } .recruitPage--pricing { --border-color: var(--color-gray--400); --heading-color: var(--color-gray--400); --item-heading-color: var(--color-gray--200); display: grid; grid-template-rows: auto 1fr; } .recruitPage--pricing-green { --heading-color: var(--color-green--400); --item-heading-color: var(--color-green--100); } .recruitPage--pricing-yellow { --heading-color: var(--color-yellow--400); --item-heading-color: var(--color-yellow--100); } .recruitPage--pricing__heading { background-color: var(--heading-color); border-radius: 0.5rem 0.5rem 0 0; font-family: var(--font-family--notoSansJP); font-size: 1.25rem; font-weight: 800; padding: 1.125rem; text-align: center; } .recruitPage--pricing__body { border-color: var(--border-color); border-style: solid; border-radius: 0 0 0.5rem 0.5rem; border-width: 0 1px 1px 1px; } .recruitPage--pricing__body__item { padding: 1rem; } .recruitPage--pricing__body__item:not(:last-child) { border-bottom: 1px solid var(--border-color); } .recruitPage--pricing__body__item__heading { background-color: var(--item-heading-color); border-radius: 0.25rem; font-size: 0.875rem; font-weight: 600; margin-bottom: 1rem; text-align: center; padding: 0.25rem; } /* 相談フォーム */ .recruitPage--registrationForm #contact { background: none !important; padding: 0; } .recruitPage--registrationForm #contact::before { display: none; } .recruitPage--registrationForm #contact header { display: none; } .recruitPage--registrationForm .l-inner--md { width: auto; } .recruitPage--registrationForm form.basic-form { margin: 0; padding: 0; } .recruitPage--registrationForm form.basic-form h2.h { margin-top: 0.25rem; } .recruitPage--formArticleGrid { counter-set: number; display: grid; grid-template-columns: repeat(2, 1fr); gap: 1rem; } .recruitPage--formArticleGrid--item { border: 1px solid var(--color-gray--400); border-radius: 0.5rem; counter-increment: number; display: grid; gap: 1rem; padding: 0.75rem; } .recruitPage--formArticleGrid--item::before { color: var(--color-accent); content: '0'counter(number); font-family: var(--font-family--notoSansJP); font-size: 1.75rem; font-weight: 800; line-height: 1; text-align: center; } .recruitPage--formArticleGrid--item__image img { aspect-ratio: 3 / 2; border-radius: 0.375rem; width: 100%; } .recruitPage--formArticleGrid--item__text { font-size: var(--font-size--sm); } /* 料金フォーム */ html:has(.recruitPage) .overlay ul.btn .message.message--alert-send { display: block; margin: 1rem 0.5rem 0 0.5rem; padding-left: 0; padding-right: 0; position: static; transform: none; } /* ご紹介事例 */ .recruitPage--caseCardWrapper { --column: 1; display: grid; gap: 1rem; grid-template-columns: repeat(var(--column), 1fr); margin-bottom: 1.5rem; } .recruitPage--caseCard { background-color: var(--color-white); border-radius: 1rem; box-shadow: rgba(0, 0, 0, 0.05) 0px 0px 16px; display: grid; overflow: hidden; } @media (min-width: 640px) { .recruitPage--caseCard { grid-template-columns: 33.333333% 1fr; } } .recruitPage--caseCard__header { background-color: var(--color-green--50); padding: 1.5rem; } .recruitPage--caseCard__photo img { border-radius: 0.75rem; } .recruitPage--caseCard__body { padding: 1.5rem; } .recruitPage--caseCard__information { align-items: center; display: grid; font-weight: 600; gap: 1rem; grid-template-columns: 4rem 1fr; margin-bottom: 1rem; } @media (min-width: 640px) { .recruitPage--caseCard__information { margin-bottom: 1.5rem; } } .recruitPage--caseCard__information::before { aspect-ratio: 1 / 1; background-color: var(--color-red--200); content: ''; display: block; inset: 1.5rem 1rem; mask-image: var(--prefecture-image); mask-position: center; mask-repeat: no-repeat; mask-size: contain; width: 100%; } .recruitPage--caseCard__prefecture { color: var(--color-accent); font-family: var(--font-family--notoSansJP); font-size: 1.125rem; font-weight: 800; margin-bottom: 0.25rem; } .recruitPage--caseCard__type { font-size: var(--font-size--xs); } .recruitPage--caseCard__age { font-size: var(--font-size--xs); } .recruitPage--caseCard__description { font-size: var(--font-size--sm); margin-bottom: 1rem; } @media (min-width: 640px) { .recruitPage--caseCard__description { font-size: var(--font-size--base); } } .recruitPage--caseCard__voice__heading { --background-color: var(--color-green--400); background-color: var(--background-color); border-radius: 100vmax; color: var(--color-white); font-size: var(--font-size--sm); font-weight: 800; margin-bottom: 0.75rem; padding: 0.125rem 1rem; position: relative; width: fit-content; } .recruitPage--caseCard__voice__heading::after { background-color: var(--background-color); bottom: -0.5rem; clip-path: polygon(0 0, 100% 0, 50% 100%); content: ''; height: 0.5rem; left: 1rem; position: absolute; width: 0.65rem; } .recruitPage--caseCard__voice__text { font-size: var(--font-size--sm); } @media (min-width: 640px) { .recruitPage--caseCard__voice__text { font-size: var(--font-size--base); } } /* お客様の声 */ .recruitPage--voiceCardWrapper { --column: 1; display: grid; gap: 1rem; grid-template-columns: repeat(var(--column), 1fr); margin-bottom: 1.5rem; } @media (min-width: 640px) { .recruitPage--voiceCardWrapper { --column: 2; } } .recruitPage--voiceCard { background-color: var(--color-white); border-radius: 1rem; box-shadow: rgba(0, 0, 0, 0.05) 0px 0px 16px; display: grid; gap: 0.75rem; grid-template-columns: 1fr; padding: 1.5rem; } @media (min-width: 640px) { .recruitPage--voiceCard { gap: 1.5rem; grid-template-columns: 7rem 1fr; } } .recruitPage--voiceCard::before { aspect-ratio: 1 / 1; background-color: var(--color-red--200); content: ''; display: block; inset: 1.5rem 1rem; margin-inline: auto; mask-image: var(--prefecture-image); mask-position: center; mask-repeat: no-repeat; mask-size: contain; width: 7rem; } @media (min-width: 640px) { .recruitPage--voiceCard::before { width: 100%; } } .recruitPage--voiceCard__heading { color: var(--color-accent); font-family: var(--font-family--notoSansJP); font-size: 1.25rem; font-weight: 800; line-height: 1.25; margin-bottom: 0.5rem; } .recruitPage--voiceCard__shop { font-size: 0.875rem; margin-bottom: 0.25rem; } .recruitPage--voiceCard__employmentType { background-color: #f5f5f5; font-size: 0.75rem; margin-bottom: 0.5rem; padding: 0.125rem 0.5rem; width: fit-content; } .recruitPage--snapContainer { display: flex; overflow: auto; scroll-snap-type: x mandatory; } @media (min-width: 640px) { .recruitPage--snapContainer { display: block; overflow: visible; } } .recruitPage--snapArea { flex: none; position: relative; scroll-snap-align: start; width: 100vw; } @media (min-width: 640px) { .recruitPage--snapArea { overflow: visible; width: auto; } } .recruitPage--snapContainer::before, .recruitPage--snapContainer::after { align-items: center; background-color: color-mix(in srgb, var(--color-white) 80%, transparent); border-color: var(--color-green--300); border-style: solid; box-shadow: rgba(0, 0, 0, 0.05) 0px 0px 16px; display: flex; height: 6rem; justify-content: center; position: absolute; top: 50%; width: 2rem; z-index: 2; } .recruitPage--snapContainer::before { border-radius: 0 1rem 1rem 0; border-width: 1px 1px 1px 0; content: '←'; left: 0; } .recruitPage--snapContainer::after { border-radius: 1rem 0 0 1rem; border-width: 1px 0 1px 1px; content: '→'; right: 0; } .recruitPage--snapArea .recruitPage--section { height: calc(100dvh - var(--header-height)); overflow: auto; padding-bottom: 6rem; } @media (min-width: 640px) { .recruitPage--snapArea .recruitPage--section { height: auto; overflow: visible; padding-bottom: 3rem; } } html:has(.recruitPage--snapContainer) .recruitPage--fixedFooter { opacity: 1; pointer-events: auto; } @media (min-width: 640px) { html:has(.recruitPage--snapContainer) .recruitPage--fixedFooter { opacity: 0; pointer-events: none; } } .recruitPage--mediaCarouselWrapper { margin: 0 calc(50% - 50vw); width: 100vw; } .recruitPage--mediaCarousel__slide { padding-bottom: 1rem; padding-top: 1rem; } .recruitPage--mediaCard { background-color: #fff; border: 0.5rem solid var(--color-gray--500); border-radius: 2rem; box-shadow: rgba(0, 0, 0, 0.05) 0px 0px 16px; height: 100%; overflow: hidden; } .recruitPage--mediaCard__thumbnail img { aspect-ratio: 3 / 2; height: auto; object-fit: cover; width: 100%; } .recruitPage--mediaCard__title { color: var(--color-purple--500); font-size: 1.125rem; font-weight: 600; padding: 1rem 1.5rem; text-align: center; }