@charset "UTF-8"; /*** The new CSS reset - version 1.11.2 (last updated 15.11.2023) GitHub page: https://github.com/elad2412/the-new-css-reset ***/ /* Remove all the styles of the "User-Agent-Stylesheet", except for the 'display' property - The "symbol *" part is to solve Firefox SVG sprite bug - The "html" element is excluded, otherwise a bug in Chrome breaks the CSS hyphens property (https://github.com/elad2412/the-new-css-reset/issues/36) */ *:where(:not(html, iframe, canvas, img, svg, video, audio, input):not(svg *, symbol *)) { all: unset; display: revert; } /* Preferred box-sizing value */ *, *::before, *::after { box-sizing: border-box; } /* Fix mobile Safari increase font-size on landscape mode */ html { -moz-text-size-adjust: none; -webkit-text-size-adjust: none; text-size-adjust: none; } /* Reapply the pointer cursor for anchor tags */ a, button { cursor: revert; } /* Remove list styles (bullets/numbers) */ ol, ul, menu, summary { list-style: none; } /* For images to not be able to exceed their container */ img { max-inline-size: 100%; max-block-size: 100%; width: 100%; vertical-align: top; } /* removes spacing between cells in tables */ table { border-collapse: collapse; } /* Safari - solving issue when using user-select:none on the text input doesn't working */ input, textarea { -webkit-user-select: auto; } /* revert the 'white-space' property for textarea elements on Safari */ textarea { white-space: revert; } /* minimum style to allow to style meter element */ meter { -webkit-appearance: revert; -moz-appearance: revert; appearance: revert; } /* preformatted text - use only for this feature */ :where(pre) { all: revert; box-sizing: border-box; } /* reset default text opacity of input placeholder */ ::-moz-placeholder { color: unset; } ::placeholder { color: unset; } /* 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; } .tatete { writing-mode: vertical-rl; -ms-writing-mode: tb-rl; text-orientation: upright; } header { transition: none !important; position: fixed; top: 0; left: 0; width: 100%; background: none; display: flex; justify-content: space-between; align-items: center; z-index: 5000; padding: 0 20px; } @media screen and (max-width: 767px) { header { background: #F0F3F7; padding-block: 10px 11px; } } header .white { display: block; } header .blue { display: none; } header #logo { padding: 22px 30px; background: #F0F3F7; border-radius: 0 0 10px 10px; } @media screen and (max-width: 767px) { header #logo { padding: 0; } } header #logo a { display: flex; align-items: center; } header #logo .image { width: 100px; margin-right: 15px; } @media screen and (max-width: 767px) { header #logo .image { width: 80px; line-height: 1; } } header #logo .txt { font-size: 0.9rem; line-height: 1.5; color: #0F3675; margin: 0 0 0 1rem; line-height: 1; font-size: clamp(1.5rem, 1.224rem + 0.4vw, 1.8rem); } @media screen and (max-width: 767px) { header #logo .txt { font-size: 0.875rem; padding: 0.5rem 0 0 0; } } header .header-entry-nav { display: none; position: relative; z-index: 9001; flex: 1; margin-right: 24px; } header .header-entry-nav ul { display: flex; justify-content: flex-end; gap: 8px; } @media screen and (max-width: 767px) { header .header-entry-nav ul { justify-content: space-between; gap: 5px; } } header .header-entry-nav ul li { width: 33%; max-width: 130px; min-width: 110px; } @media screen and (max-width: 767px) { header .header-entry-nav ul li { max-width: 100%; min-width: 0; } } header .header-entry-nav ul li a { display: block; border-radius: 50px; color: #fff; padding: 15px 10px; text-align: center; background-color: #0F3675; border: 2px solid #0F3675; transition: all 0.3s ease; line-height: 1; font-size: clamp(1.3rem, 1.068rem + 0.3vw, 1.5rem); } @media screen and (max-width: 767px) { header .header-entry-nav ul li a { font-size: 1rem; padding: 0.1rem; } } header .header-entry-nav ul li a:hover { background-color: #fff; border-color: #0F3675; color: #0F3675; } header .header-entry-nav ul li.e2 a { background-color: #315CA2; border-color: #315CA2; } header .header-entry-nav ul li.e2 a:hover { background-color: #fff; border-color: #315CA2; color: #315CA2; } header .header-entry-nav ul li.e3 a { background-color: #7599D4; border-color: #7599D4; min-width: 140px; } header .header-entry-nav ul li.e3 a:hover { background-color: #fff; border-color: #7599D4; color: #7599D4; } header .header-entry-nav ul li.e4 a { background-color: #0f3675; border-color: #0f3675; } header .header-entry-nav ul li.e4 a:hover { background-color: #fff; border-color: #0f3675; color: #0f3675; } #sp_menu { display: block; position: relative; max-width: 54px; width: 100%; aspect-ratio: 1; height: auto; cursor: pointer; padding: 0.5rem 0; background: #D6007F; border-radius: 10px; border: 1px #D6007F solid; } @media screen and (max-width: 1060px) { #sp_menu { width: 60px; } } @media screen and (max-width: 767px) { #sp_menu { width: 39px; } } #sp_menu span { position: absolute; background-color: #ffffff; height: 2px; width: 40%; left: 30%; top: 50%; transition: all 0.4s ease-in-out; transition: all 0.3s ease; transform-origin: center center; margin: auto; } #sp_menu:hover, #sp_menu.active { background-color: #fff; } #sp_menu:hover span, #sp_menu.active span { background: #D6007F !important; } #sp_menu span:nth-of-type(1) { transform: translateY(-8px); } #sp_menu span:nth-of-type(2) { width: calc(40% - 2px); } #sp_menu span:nth-of-type(3) { transform: translateY(8px); width: calc(40% - 4px); } /* クリック時に横アイコンが斜めになる */ #sp_menu.active span:nth-of-type(1) { transform: translateY(0) rotate(45deg); width: 40%; } #sp_menu.active span:nth-of-type(2) { opacity: 0; } #sp_menu.active span:nth-of-type(3) { transform: translateY(0) rotate(-45deg); width: 40%; } #overlay { position: fixed; top: 0; left: 0; width: 100%; height: 100vh; background: rgba(0, 0, 0, 0.5); z-index: 7999; visibility: hidden; } #overlay_menu { position: fixed; top: 0; right: 0; width: 95%; height: 100vh; background: rgb(255, 255, 255); z-index: 8000; background-color: #F0F3F7; clip-path: polygon(100% 0, 100% 0, 100% 100%, 100% 100%); visibility: hidden; display: flex; align-items: center; justify-content: center; color: #000; } @media screen and (max-width: 767px) { #overlay_menu { display: flex; flex-direction: column; height: 100vh; overflow-y: auto; justify-content: flex-start; padding-top: 15px; width: 100%; } #overlay_menu .inner { width: 100%; } } #overlay_menu #menu_logos { margin: 0 0 20px 0; padding: 0 0 0 5px; display: none; } @media screen and (max-width: 767px) { #overlay_menu #menu_logos { display: block; } } #overlay_menu #menu_logos .logos { display: flex; align-items: center; } #overlay_menu #menu_logos .logos #logo { width: 80px; } #overlay_menu #menu_logos .logos .txt { font-size: 12px; margin: 0 0 0 1rem; } #overlay_menu #menu_logos .cat p { background-image: linear-gradient(90deg, #D6007F 0%, #0F3675 100%); background-clip: text; -webkit-background-clip: text; -webkit-text-fill-color: transparent; } #overlay_menu .spmenu_inner { margin: 0 auto; padding: 120px 4.375rem 3rem; flex-direction: column; gap: -3.125rem; width: 100%; height: 100vh; overflow-y: auto; scrollbar-width: 1px; /* Firefox */ scrollbar-color: rgba(0, 0, 0, 0.1) transparent; /* Firefox */ } #overlay_menu .spmenu_inner::-webkit-scrollbar { width: 1px; /* Chrome, Safari, Opera */ } #overlay_menu .spmenu_inner::-webkit-scrollbar-track { background: transparent; /* Chrome, Safari, Opera */ } #overlay_menu .spmenu_inner::-webkit-scrollbar-thumb { background-color: rgba(0, 0, 0, 0.2); /* Chrome, Safari, Opera */ border-radius: 0px; /* Chrome, Safari, Opera */ } @media screen and (max-width: 767px) { #overlay_menu .spmenu_inner { overflow-x: hidden; gap: 3rem; padding: 2rem 1.25rem; } } @media screen and (max-width: 767px) and (max-width: 767px) { #overlay_menu .spmenu_inner { padding: 2rem; gap: 0; margin: 0 0 1rem 0; width: 100% !important; } } #overlay_menu .spmenu_top { gap: 33.125rem; width: 100%; } @media screen and (max-width: 767px) { #overlay_menu .spmenu_top { flex-direction: column; gap: 2rem; padding-bottom: 5rem; } } #overlay_menu .spmenu_top .spmenu_logo { display: flex; flex-direction: column; gap: 0.75rem; margin-bottom: 0; flex-shrink: 0; } #overlay_menu .spmenu_top .spmenu_logo img { width: 8.75rem; height: 2.1875rem; } #overlay_menu .spmenu_top .spmenu_logo .en { font-family: "Barlow", sans-serif; font-weight: 500; font-size: 1rem; line-height: 1.5; letter-spacing: 0.05em; color: #0F3675; } #overlay_menu .spmenu_top #spmenu_nav { display: flex; gap: 4rem; justify-content: space-between; margin-top: 0; width: 100%; flex-shrink: 0; position: relative; z-index: 10; } @media screen and (max-width: 767px) { #overlay_menu .spmenu_top #spmenu_nav { flex-direction: column; display: block; width: 100%; gap: 0; } } #overlay_menu .spmenu_top #spmenu_nav .nav_column { display: flex; flex-direction: column; gap: 2.5rem; } @media screen and (max-width: 767px) { #overlay_menu .spmenu_top #spmenu_nav .nav_column { gap: 0; display: block; } } #overlay_menu .spmenu_top #spmenu_nav .nav_group { display: flex; flex-direction: column; gap: 1rem; } @media screen and (max-width: 767px) { #overlay_menu .spmenu_top #spmenu_nav .nav_group { gap: 0; } } #overlay_menu .spmenu_top #spmenu_nav .nav_group .nav_title { display: flex; flex-direction: column; gap: 0; transition: all 0.3s ease; } #overlay_menu .spmenu_top #spmenu_nav .nav_group .nav_title a:hover { opacity: 0.8; } @media screen and (max-width: 767px) { #overlay_menu .spmenu_top #spmenu_nav .nav_group .nav_title { position: relative; border-bottom: 1px solid #ccc; padding: 1rem 0; } #overlay_menu .spmenu_top #spmenu_nav .nav_group .nav_title:after { position: absolute; top: 50%; right: 0%; transform: translateY(-50%); content: ""; display: inline-block; width: 1.5em; height: 1.5em; --svg: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cg fill='none' stroke='%23000' stroke-linecap='round' stroke-linejoin='round' stroke-width='1'%3E%3Ccircle cx='12' cy='11.999' r='9'/%3E%3Cpath d='M12 9v6m-3-3h6'/%3E%3C/g%3E%3C/svg%3E"); background-color: currentColor; -webkit-mask-image: var(--svg); mask-image: var(--svg); -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; -webkit-mask-size: 100% 100%; mask-size: 100% 100%; } #overlay_menu .spmenu_top #spmenu_nav .nav_group .nav_title.link:after { --svg: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cg fill='none' stroke='%23000' stroke-linecap='round' stroke-linejoin='round' stroke-width='1'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='m11 15l3-3l-3-3'/%3E%3C/g%3E%3C/svg%3E") !important; } } #overlay_menu .spmenu_top #spmenu_nav .nav_group .nav_title p { font-family: "Noto Sans JP", sans-serif; font-weight: 400; font-size: 2.4rem; color: #0F3675; margin: 0; } @media screen and (max-width: 767px) { #overlay_menu .spmenu_top #spmenu_nav .nav_group .nav_title p { font-size: 1.6rem; line-height: 1.5; } } #overlay_menu .spmenu_top #spmenu_nav .nav_group .nav_title p.en { font-family: "Barlow", sans-serif; font-weight: 500; font-size: 1.4rem; color: #D6007F; margin-top: 0; } @media screen and (max-width: 767px) { #overlay_menu .spmenu_top #spmenu_nav .nav_group .nav_title p.en { font-size: 1rem; } } #overlay_menu .spmenu_top #spmenu_nav .nav_group .nav_list { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 0rem; } @media screen and (max-width: 767px) { #overlay_menu .spmenu_top #spmenu_nav .nav_group .nav_list { display: none; } } #overlay_menu .spmenu_top #spmenu_nav .nav_group .nav_list li { margin: 0; } @media screen and (max-width: 767px) { #overlay_menu .spmenu_top #spmenu_nav .nav_group .nav_list li:first-child { margin: 1rem 0 0 0; } } #overlay_menu .spmenu_top #spmenu_nav .nav_group .nav_list li a { position: relative; font-family: "Noto Sans JP", sans-serif; font-weight: 400; letter-spacing: 0.1em; color: #0F3675; text-decoration: none; transition: opacity 0.3s ease; font-size: 1.4rem; } @media screen and (max-width: 767px) { #overlay_menu .spmenu_top #spmenu_nav .nav_group .nav_list li a { display: block; padding-block: 0rem; padding: 0.3rem 0; } } #overlay_menu .spmenu_top #spmenu_nav .nav_group .nav_list li a:hover { opacity: 0.7; } #overlay_menu .spmenu_top #spmenu_nav .nav_group .nav_list li a::before { position: absolute; left: 0; content: ""; width: 100%; height: 1px; background: #0F3675; bottom: -1px; transform: scale(0, 1); transform-origin: right top; /*変形（アンダーラインの伸長）の原点がaタグ（各メニュー）の右端*/ transition: transform 0.3s; /*変形の時間*/ } @media screen and (max-width: 767px) { #overlay_menu .spmenu_top #spmenu_nav .nav_group .nav_list li a::before { display: none !important; } } #overlay_menu .spmenu_top #spmenu_nav .nav_group .nav_list li a:hover::before { transform: scale(1, 1); /*ホバー後、x軸方向に1（相対値）伸長*/ transform-origin: left top; /*左から右に向かう*/ } #overlay_menu .spmenu_top #spmenu_nav .nav_group .nav_list li .sub_nav_list { list-style: none; padding: 0; margin: 0.5rem 0 0 1.5rem; display: flex; flex-direction: column; } #overlay_menu .spmenu_top #spmenu_nav .nav_group .nav_list li .sub_nav_list li { position: relative; margin: 0; } #overlay_menu .spmenu_top #spmenu_nav .nav_group .nav_list li .sub_nav_list li::before { content: ""; position: absolute; display: block; width: 10px; height: 1px; background-color: #D6007F; left: -1.5rem; top: 14px; } #overlay_menu .spmenu_top #spmenu_nav .nav_group .nav_list li .sub_nav_list li a { font-family: "Noto Sans JP", sans-serif; font-weight: 400; font-size: 1.3rem; letter-spacing: 0.05em; color: #0F3675; text-decoration: none; transition: opacity 0.3s ease; opacity: 0.6; } @media screen and (max-width: 767px) { #overlay_menu .spmenu_top #spmenu_nav .nav_group .nav_list li .sub_nav_list li a { opacity: 1; font-size: 1rem; padding: 0.3rem 0; } } #overlay_menu .spmenu_top #spmenu_nav .nav_group .nav_list li .sub_nav_list li a:hover { opacity: 0.7; } #overlay_menu .spmenu_bottom { width: 100%; z-index: 0; } @media screen and (max-width: 767px) { #overlay_menu .spmenu_bottom { flex-direction: column; gap: 2rem; margin-top: 0; align-items: flex-start; } } #overlay_menu .spmenu_bottom .spmenu_catchphrase { display: flex; flex-direction: column; gap: 2rem; margin-top: 3rem; } @media screen and (max-width: 767px) { #overlay_menu .spmenu_bottom .spmenu_catchphrase { gap: 1rem; margin-top: 0; } } #overlay_menu .spmenu_bottom .spmenu_catchphrase .catchphrase_en { font-family: "Barlow", sans-serif; font-weight: 300; font-size: 4.2rem; line-height: 1; letter-spacing: 0; color: transparent; background: linear-gradient(90deg, rgb(17, 17, 236) 0%, rgb(201, 117, 176) 24%, rgb(17, 17, 236) 51%, rgb(201, 117, 176) 64%, rgb(17, 17, 236) 100%); background-clip: text; -webkit-background-clip: text; -webkit-text-fill-color: transparent; opacity: 0.2; margin: 0; } @media screen and (max-width: 767px) { #overlay_menu .spmenu_bottom .spmenu_catchphrase .catchphrase_en { font-size: 9vw; } } #overlay_menu .spmenu_bottom .spmenu_catchphrase .catchphrase_ja { font-family: "Zen Kaku Gothic New", "Noto Sans JP", sans-serif; font-weight: 500; font-size: 2rem; line-height: 1.2; color: #0F3675; margin: 0; } @media screen and (max-width: 767px) { #overlay_menu .spmenu_bottom .spmenu_catchphrase .catchphrase_ja { font-size: 1.5rem; } } header #sp_menu { z-index: 9001; } #header-entry-nav-sp { display: none; position: relative; z-index: 9001; flex: 1; margin-right: 24px; width: 100%; max-width: 100%; flex: none; box-sizing: border-box; margin: 0 0 2rem 0; } #header-entry-nav-sp ul { display: flex; justify-content: center; gap: 0.3rem; width: 100%; max-width: 100%; margin: 0; padding: 0; box-sizing: border-box; } #header-entry-nav-sp ul li { width: 33%; min-width: 0; max-width: none; margin: 0; padding: 0; box-sizing: border-box; } #header-entry-nav-sp ul li a { color: #fff; padding: 24px 10px; text-align: center; background-color: #0F3675; border: 2px solid #0F3675; transition: all 0.3s ease; line-height: 1; font-size: clamp(1.4rem, 0.936rem + 0.6vw, 1.8rem); font-size: 1rem; padding: 1rem 0; box-sizing: border-box; border-radius: 0; display: inline-block; display: block; width: 100%; border-radius: 3rem; } #header-entry-nav-sp ul li a:hover { background-color: #fff; border-color: #0F3675; color: #0F3675; } #header-entry-nav-sp ul li.e2 a { background-color: #315CA2; border-color: #315CA2; } #header-entry-nav-sp ul li.e2 a:hover { background-color: #fff; border-color: #315CA2; color: #315CA2; } #header-entry-nav-sp ul li.e3 a { background-color: #7599D4; border-color: #7599D4; min-width: 0; } #header-entry-nav-sp ul li.e3 a:hover { background-color: #fff; border-color: #7599D4; color: #7599D4; } #header-entry-nav-sp ul li.e4 a { background-color: #0f3675; border-color: #0f3675; } #header-entry-nav-sp ul li.e4 a:hover { background-color: #fff; border-color: #0f3675; color: #0f3675; } .careertrack #recruit_header .header-entry-nav { display: block; } .careertrack #recruit_header .header-entry-nav ul { display: none; } .careertrack #recruit_header .header-entry-nav ul.careertrack { display: flex; } .careertrack #recruit_header #header-entry-nav-sp { display: none; } @media screen and (max-width: 767px) { .careertrack #recruit_header #header-entry-nav { display: none !important; } .careertrack #recruit_header #header-entry-nav-sp { display: block; } } .internship #recruit_header .header-entry-nav { display: block; } .internship #recruit_header .header-entry-nav ul { display: none; } .internship #recruit_header .header-entry-nav ul.internship { display: flex; } .internship #recruit_header #header-entry-nav-sp { display: none; } @media screen and (max-width: 767px) { .internship #recruit_header #header-entry-nav { display: none !important; } .internship #recruit_header #header-entry-nav-sp { display: block; } } .newgrad #recruit_header .header-entry-nav { display: block; } .newgrad #recruit_header .header-entry-nav ul { display: none; } .newgrad #recruit_header .header-entry-nav ul.newgrad { display: flex; } .newgrad #recruit_header #header-entry-nav-sp { display: none; } @media screen and (max-width: 767px) { .newgrad #recruit_header #header-entry-nav { display: none !important; } .newgrad #recruit_header #header-entry-nav-sp { display: block; } } .expert #recruit_header .header-entry-nav { display: block; } .expert #recruit_header .header-entry-nav ul { display: none; } .expert #recruit_header .header-entry-nav ul.expert { display: flex; } .expert #recruit_header #header-entry-nav-sp { display: none; } @media screen and (max-width: 767px) { .expert #recruit_header #header-entry-nav { display: none !important; } .expert #recruit_header #header-entry-nav-sp { display: block; } } @media screen and (max-width: 767px) { #career header { background: #F6F0F7; } } #career header #logo { background: #F6F0F7; } #career header #header-entry-nav { display: block; } #career header #header-entry-nav ul { display: flex; } @media screen and (max-width: 767px) { #career header #header-entry-nav { display: none !important; } #career header #header-entry-nav-sp { display: block; } } #recruit_footer { position: relative; z-index: 10; color: #0F3675; background: #F0F3F7; padding: 4.375rem 0 0 0; } @media screen and (max-width: 767px) { #recruit_footer { padding-top: 2rem; } } footer .footer_inner { margin: 0 auto; padding: 4.375rem; display: flex; flex-direction: column; gap: -3.125rem; } @media screen and (max-width: 767px) { footer .footer_inner { gap: 3rem; padding: 2rem 1.25rem; padding: 0; gap: 1rem; } } footer .footer_link { text-align: center; } footer .footer_link a { position: relative; display: inline-block; border-radius: 16px; border: 1px solid #0F3675; padding: 2rem 8rem 2rem 3rem; } footer .footer_link a::after { position: absolute; content: ""; width: 8px; height: 8px; border-right: 1px solid #0F3675; border-top: 1px solid #0F3675; transform: rotate(45deg); top: 50%; right: 3rem; margin-top: -4px; } .footer_top { display: flex; flex-direction: row; justify-content: space-between; align-items: flex-start; gap: 33.125rem; width: 100%; } @media screen and (max-width: 767px) { .footer_top { flex-direction: column; gap: 2rem; } } .footer_top .footer_logo { display: flex; flex-direction: column; gap: 0.75rem; margin-bottom: 0; flex-shrink: 0; } .footer_top .footer_logo img { width: 8.75rem; height: 2.1875rem; } .footer_top .footer_logo .en { font-family: "Barlow", sans-serif; font-weight: 500; font-size: 1rem; line-height: 1.5; letter-spacing: 0.05em; color: #0F3675; } .footer_top #footer_nav { display: flex; gap: 2rem; margin-top: 0; width: 100%; flex-shrink: 0; position: relative; z-index: 10; } @media screen and (max-width: 767px) { .footer_top #footer_nav { flex-direction: column; width: 100%; gap: 2rem; display: none; } } .footer_top #footer_nav .nav_column { display: flex; flex-direction: column; gap: 2.5rem; width: 22%; } .footer_top #footer_nav .nav_column:nth-child(2), .footer_top #footer_nav .nav_column:nth-child(3) { width: 28%; } @media screen and (max-width: 767px) { .footer_top #footer_nav .nav_column { gap: 1.5rem; } } .footer_top #footer_nav .nav_group { display: flex; flex-direction: column; gap: 1.25rem; } .footer_top #footer_nav .nav_group .nav_title { display: flex; flex-direction: column; gap: 0; transition: all 0.3s ease; } .footer_top #footer_nav .nav_group .nav_title a:hover { opacity: 0.8; } .footer_top #footer_nav .nav_group .nav_title p { font-family: "Noto Sans JP", sans-serif; font-weight: 400; font-size: 2.4rem; line-height: 1.2; color: #0F3675; margin: 0; } @media screen and (max-width: 767px) { .footer_top #footer_nav .nav_group .nav_title p { font-size: 1.25rem; } } .footer_top #footer_nav .nav_group .nav_title p.en { font-family: "Barlow", sans-serif; font-weight: 500; font-size: 1.4rem; line-height: 1.4; letter-spacing: 0.05em; color: #D6007F; margin-top: 0; } .footer_top #footer_nav .nav_group .nav_list { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 0rem; } .footer_top #footer_nav .nav_group .nav_list li { margin: 0; } .footer_top #footer_nav .nav_group .nav_list li a { position: relative; font-family: "Noto Sans JP", sans-serif; font-weight: 400; font-size: 1.4rem; letter-spacing: 0.1em; color: #0F3675; text-decoration: none; transition: opacity 0.3s ease; } .footer_top #footer_nav .nav_group .nav_list li a:hover { opacity: 0.7; } .footer_top #footer_nav .nav_group .nav_list li a::before { position: absolute; left: 0; content: ""; width: 100%; height: 1px; background: #0F3675; bottom: -1px; transform: scale(0, 1); transform-origin: right top; /*変形（アンダーラインの伸長）の原点がaタグ（各メニュー）の右端*/ transition: transform 0.3s; /*変形の時間*/ } @media screen and (max-width: 767px) { .footer_top #footer_nav .nav_group .nav_list li a::before { display: none !important; } } .footer_top #footer_nav .nav_group .nav_list li a:hover::before { transform: scale(1, 1); /*ホバー後、x軸方向に1（相対値）伸長*/ transform-origin: left top; /*左から右に向かう*/ } .footer_top #footer_nav .nav_group .nav_list .sub_nav_list { list-style: none; padding: 0; margin: 0.5rem 0 0 1.5rem; display: flex; flex-direction: column; } .footer_top #footer_nav .nav_group .nav_list .sub_nav_list li { position: relative; margin: 0; } .footer_top #footer_nav .nav_group .nav_list .sub_nav_list li::before { content: ""; position: absolute; display: block; width: 10px; height: 1px; background-color: #D6007F; left: -1.5rem; top: 14px; } .footer_top #footer_nav .nav_group .nav_list .sub_nav_list li a { font-family: "Noto Sans JP", sans-serif; font-weight: 400; font-size: 1.3rem; letter-spacing: 0.05em; color: #0F3675; text-decoration: none; transition: opacity 0.3s ease; opacity: 0.6; } .footer_top #footer_nav .nav_group .nav_list .sub_nav_list li a:hover { opacity: 0.7; } .footer_bottom { display: block; margin-top: 3rem; width: 100%; z-index: 0; } @media screen and (max-width: 767px) { .footer_bottom { flex-direction: column; gap: 2rem; margin-top: 0; align-items: flex-start; } } .footer_bottom .footer_catchphrase { flex-shrink: 0; } .footer_bottom .footer_catchphrase { display: flex; flex-direction: column; gap: 1.875rem; max-width: 54.25rem; } @media screen and (max-width: 767px) { .footer_bottom .footer_catchphrase { gap: 1rem; display: none; } } .footer_bottom .footer_catchphrase .catchphrase_en { font-family: "Barlow", sans-serif; font-weight: 300; font-size: 4.2rem; line-height: 1; letter-spacing: 0; color: transparent; background: linear-gradient(90deg, rgb(17, 17, 236) 0%, rgb(201, 117, 176) 24%, rgb(17, 17, 236) 51%, rgb(201, 117, 176) 64%, rgb(17, 17, 236) 100%); background-clip: text; -webkit-background-clip: text; -webkit-text-fill-color: transparent; opacity: 0.2; margin: 0; } .footer_bottom .footer_catchphrase .catchphrase_ja { font-family: "Zen Kaku Gothic New", "Noto Sans JP", sans-serif; font-weight: 400; font-size: clamp(2.6rem, 2vw, 4rem); line-height: 1.2; color: #0F3675; margin: 0; } @media screen and (max-width: 767px) { .footer_bottom .footer_catchphrase .catchphrase_ja { font-size: 1.5rem; } } .footer_bottom_right { display: flex; justify-content: space-between; align-items: flex-end; margin: 5rem 0 0 0; } @media screen and (max-width: 767px) { .footer_bottom_right { display: block; margin: 0; } } .footer_bottom_right .footer_links { text-align: center; } .footer_bottom_right .footer_links a { font-size: 1.2rem; padding: 0 1rem; transition: all 0.3s ease; } .footer_bottom_right .footer_links a:hover { text-decoration: underline; } @media screen and (max-width: 767px) { .footer_bottom_right .footer_links a { font-size: 1rem; } } .footer_bottom_right .copyright { font-size: 1.2rem; } @media screen and (max-width: 767px) { .footer_bottom_right .copyright { font-size: 0.875rem; text-align: center; } } #pagetop { position: fixed; bottom: 2rem; right: 2rem; width: 50px; height: 50px; border-radius: 50%; z-index: 1000; content: ""; } #pagetop .loading-section { position: relative; transition: all 0.3s ease; } #pagetop .loading-section svg { position: absolute; top: 50%; left: 50%; transform: translateX(-50%) translateY(-50%); } #pagetop .circle-line { position: relative; width: 50px; height: 50px; border-radius: 50%; background-image: linear-gradient(135deg, #D6007F 10%, #0F3675 100%); box-sizing: border-box; } #pagetop .circle-line::before { position: absolute; top: 1px; left: 1px; bottom: 1px; right: 1px; border-radius: 50%; background-color: #fff; content: ""; } #pagetop:hover .loading-section { transform: scale(1.05); } #pagetop:hover .spin { animation: circle 1s linear infinite; } @keyframes circle { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } } html { font-size: 62.5%; } :root .pc { display: block; } @media screen and (max-width: 767px) { :root .pc { display: none; } } :root .sp { display: none; } @media screen and (max-width: 767px) { :root .sp { display: block; } } body { font-family: "Noto Sans JP", YuGothic, "Yu Gothic Medium", "Yu Gothic", Verdana, Meiryo, sans-serif; font-size: clamp(1.4rem, 1.168rem + 0.3vw, 1.6rem); letter-spacing: var(--font-letter-spacing, 0.05em); line-height: 1.75; background: #F0F3F7; color: #0F3675; } body#career { background-color: #F6F0F7 !important; } body#career #overlay_menu { background-color: #F6F0F7; } body#career #recruit_footer { background: #F6F0F7; } .en { font-family: "Barlow", sans-serif; } sub { font-size: 60%; } main { position: relative; width: 100%; z-index: 3; display: block; } main > *:not(#sticky_cont) { overflow-x: hidden; } main #sticky_cont { overflow-x: visible !important; overflow-y: visible !important; } #main-contents-wrapper .main-inner { max-width: 1300px; padding: 0 3.125rem 8rem 3.125rem; margin: auto; } @media screen and (max-width: 767px) { #main-contents-wrapper .main-inner { padding: 0 2rem 2rem 2rem; } } #main-contents-wrapper { border-bottom: 1px solid rgba(15, 54, 117, 0.2); } #novisual_header .title-area { position: relative; width: 100%; padding: 15rem 0 2rem 0; margin: 0 0 5rem 0; } @media screen and (max-width: 767px) { #novisual_header .title-area { padding: 6rem 0 1rem 0; margin: 0 0 2rem 0; } } #novisual_header .title-area .title-area-inner { max-width: 1300px; padding: 0 3.125rem 0 3.125rem; margin: auto; position: relative; } @media screen and (max-width: 1060px) { #novisual_header .title-area .title-area-inner { padding: 0 5rem; align-items: flex-start; } } @media screen and (max-width: 767px) { #novisual_header .title-area .title-area-inner { flex-direction: column; gap: 1.6rem; padding: 0 2rem; } } #novisual_header .title-area .page-title-wrapper { display: flex; flex-direction: column; gap: 1.6rem; } @media screen and (max-width: 767px) { #novisual_header .title-area .page-title-wrapper { display: block; } } #novisual_header .title-area .page-title { font-weight: 500; font-size: clamp(3.2rem, 1.344rem + 2.4vw, 4.8rem); line-height: 1.2; letter-spacing: 0.1em; color: #0F3675; margin: 0; } @media screen and (max-width: 767px) { #novisual_header .title-area .page-title { font-size: 22px; line-height: 1.5; font-feature-settings: "palt"; } } #novisual_header .title-area .page-title-en { font-weight: 500; font-size: clamp(1.8rem, 1.336rem + 0.6vw, 2.2rem); line-height: 1.2; letter-spacing: 0.05em; color: #D6007F; margin: 0; } @media screen and (max-width: 767px) { #novisual_header .title-area .page-title-en { font-size: 1.2rem; } } #novisual_header .title-area .pankuzu { display: flex; align-items: center; gap: 1.6rem; position: absolute; bottom: 0; right: 5rem; } @media screen and (max-width: 767px) { #novisual_header .title-area .pankuzu { align-self: flex-start; } } #novisual_header .title-area .pankuzu-item { font-size: 1.2rem; line-height: 1.67; letter-spacing: 0.1em; color: #0F3675; text-decoration: none; opacity: 0.5; transition: opacity 0.3s ease; } @media screen and (max-width: 767px) { #novisual_header .title-area .pankuzu-item { display: none; } } #novisual_header .title-area .pankuzu-item.current { opacity: 1; } #novisual_header .title-area .pankuzu-item:hover { opacity: 1; } #novisual_header .title-area .pankuzu-separator { width: 0.6rem; height: 0.6rem; border-radius: 50%; background: linear-gradient(180deg, rgb(113, 165, 255) 0%, rgb(233, 155, 210) 100%); flex-shrink: 0; } @media screen and (max-width: 767px) { #novisual_header .title-area .pankuzu-separator { display: none; } } #novisual_header .title-area { border-bottom: 1px solid rgba(15, 54, 117, 0.2); } .main-image { position: relative; width: 100%; margin: 0 auto 10rem auto; z-index: 1; } @media screen and (max-width: 767px) { .main-image { height: auto; margin-bottom: 2rem; } } .main-image .bg-decoration { position: absolute; content: ""; top: 3rem; left: 1rem; width: 100%; height: 100%; border-radius: 50px; z-index: 0; background: conic-gradient(from 85deg at 63% 100%, rgb(17, 17, 236) 0%, rgb(201, 117, 176) 24%, rgb(17, 17, 236) 51%, rgb(201, 117, 176) 64%, rgb(17, 17, 236) 100%); filter: blur(50px); opacity: 0.2; z-index: 0; pointer-events: none; } @media screen and (max-width: 767px) { .main-image .bg-decoration { display: none; } } .main-image .round-photo { position: relative; z-index: 35; } .main-image .main-image-wrapper { width: 100%; height: 100%; position: relative; z-index: 5; } @media screen and (max-width: 767px) { .main-image .main-image-wrapper { height: auto; } } .main-image .main-image-wrapper img { width: 100%; height: 100%; -o-object-fit: cover; object-fit: cover; } @media screen and (max-width: 767px) { .main-image .main-image-wrapper img { height: 14rem; } } .main-image .lead { padding: 5rem 10rem 0rem 10rem; } .main-image .lead.nopad { padding: 3rem 0 0 0; } .main-image .lead.center { text-align: center; } @media screen and (max-width: 767px) { .main-image .lead.center { text-align: left; } .main-image .lead.center br { display: none; } } @media screen and (max-width: 767px) { .main-image .lead { padding: 1.5rem 0; } } .main-image .lead h2 { font-size: clamp(2.8rem, 2.336rem + 0.6vw, 3.2rem); line-height: 1.6; letter-spacing: 0.06em; color: #0F3675; margin: 4rem 0 2rem 0; } @media screen and (max-width: 767px) { .main-image .lead h2 { font-size: 18px; } } .round-photo { border-radius: 2.4rem; overflow: hidden; } .round-photo.border { border: 2px solid rgba(0, 0, 0, 0.1); } @media screen and (max-width: 767px) { .round-photo { border-radius: 1rem; } } .gradation_bar { position: relative; content: ""; width: 100%; height: 0.5rem; background: linear-gradient(90deg, rgba(113, 165, 255, 0.8) 0%, rgba(233, 155, 210, 0.8) 100%); margin: 0 0 5rem 0; } @media screen and (max-width: 767px) { .gradation_bar { margin: 0 0 2rem 0; } } .bg-decoration { position: absolute; content: ""; top: 3rem; left: 1rem; width: 100%; height: 100%; border-radius: 50px; z-index: 0; background: conic-gradient(from 85deg at 63% 100%, rgb(17, 17, 236) 0%, rgb(201, 117, 176) 24%, rgb(17, 17, 236) 51%, rgb(201, 117, 176) 64%, rgb(17, 17, 236) 100%); filter: blur(50px); opacity: 0.2; z-index: 0; pointer-events: none; } @media screen and (max-width: 767px) { .bg-decoration { display: none; } } a.outer_link { position: relative; } a.outer_link:after { content: ""; color: #0F3675; display: inline-block; width: 1.2em; height: 1.2em; margin: 0 0 0 0.5rem; vertical-align: middle; --svg: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23000' d='M4 20h12.23v-9.384H4zm13.23-5.616v-1H20V4H7.77v5.616h-1V3H21v11.385zM3 21V9.616h14.23V21zm7.116-5.692'/%3E%3C/svg%3E"); background-color: currentColor; -webkit-mask-image: var(--svg); mask-image: var(--svg); -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; -webkit-mask-size: 100% 100%; mask-size: 100% 100%; } .inview.fadeInup { opacity: 0; } .inview.fadeInup.active { animation: fadeInup 0.5s ease-out; animation-fill-mode: forwards; } .inview.leftright { opacity: 0; } @media screen and (max-width: 767px) { .inview.leftright { opacity: 1; } } .inview.leftright.active { animation: leftright_anim 0.5s ease; animation-fill-mode: forwards; } @media screen and (max-width: 767px) { .inview.leftright.active { animation: none; } } .inview.rightleft { opacity: 0; } .inview.rightleft.active { animation: rightleft_anim 0.5s ease-out; animation-fill-mode: forwards; } @media screen and (max-width: 767px) { .inview.rightleft.active { animation: none; } } .inview.show { opacity: 0; } .inview.show.active { animation: show 1s ease-out; animation-fill-mode: forwards; } @keyframes zoom02 { 0% { transform: scale(1.2); opacity: 0; } 50% { opacity: 1; } 100% { transform: scale(1); opacity: 1; } } @keyframes fadeInup { 0% { transform: translateY(25px); opacity: 0; } 100% { transform: translateY(0px); opacity: 1; } } @keyframes leftright_anim { 0% { transform: translatex(-30px); opacity: 0; } 100% { transform: translateX(0px); opacity: 1; } } @keyframes rightleft_anim { 0% { transform: translatex(30px); opacity: 0; } 100% { transform: translateX(0px); opacity: 1; } } @keyframes show { 0% { opacity: 0; } 100% { opacity: 1; } } .hi .image, .hi .images { overflow: hidden !important; line-height: 1; } .hi .image img, .hi .images img { transition: all 0.5s ease; will-change: transform; } .hi.slow .image img, .hi.slow .images img { transition: all 1.5s ease; will-change: transform; } .hi:hover .image img, .hi:hover .images img { transform: scale(1.05); } .hi.slow:hover .image img, .hi.slow:hover .images img { transform: scale(1.1); } .arrow { width: 2.4rem; height: 1rem; background: #0F3675; position: relative; border-radius: 5rem; } .arrow span.c-icon { position: absolute; font-size: 1rem; display: inline-block; animation-fill-mode: forwards; animation-duration: 0.5s; animation-timing-function: cubic-bezier(0, 1, 0.25, 1); background: #FFFFFF; color: #FFFFFF; top: 0.05rem; left: 0.7rem; display: inline-block; width: 1em; height: 1em; --svg: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 21 21'%3E%3Cpath fill='none' stroke='%23000' stroke-linecap='round' stroke-linejoin='round' d='m13.5 6.497l4 4.002l-4 4.001m-9-4h13' stroke-width='1'/%3E%3C/svg%3E"); background-color: currentColor; -webkit-mask-image: var(--svg); mask-image: var(--svg); -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; -webkit-mask-size: 100% 100%; mask-size: 100% 100%; } .arrow span.c-icon.afters { transform: translateX(-100%); opacity: 0; background: #FFFFFF; } @keyframes transformLeftRight { 0% { transform: translateX(-100%); opacity: 0; } 100% { transform: translateX(0); opacity: 1; } } @keyframes transformRightLeft { 0% { transform: translateX(0); opacity: 1; } 100% { transform: translateX(100%); opacity: 0; } } .round_icon { content: ""; width: 27px; height: 27px; background: rgba(214, 0, 127, 0.1); border-radius: 50%; position: absolute; top: 50%; right: 6%; transform: translateY(-50%); z-index: 55; line-height: 1; transition: all 0.3s ease; } .round_icon::before { content: ""; display: block; position: absolute; width: 6px; height: 6px; border-top: 1px solid #D6007F; border-right: 1px solid #D6007F; top: 50%; left: 45%; transform: translateX(-50%) translateY(-50%) rotate(45deg); } .round_icon { /* content: ""; width: 7px; height: 7px; position: absolute; top: 50%; right: 12%; transform: translateY(-50%); border-radius: 50%; display: block; z-index: 55; background: $p; line-height: 1; transition: all .3s ease; &::before { display: block; position: absolute; width: 27px; height: 27px; content: ""; z-index: 3; top: 50%; left: 50%; transform: translateX(-50%) translateY(-50%); border-radius: 50%; background: rgba($p, 0.1); transition: all .3s ease; transform-origin: center center; } */ } .recruit_category_text { margin: 1rem 0 3rem 0; } .recruit_category_text p { display: inline-block; background-color: #fafafa; padding: 1rem 2rem; border-radius: 3rem; font-weight: 500; } @media screen and (max-width: 767px) { .recruit_category_text p { padding: 0.5rem 1rem; } } .recruit_category_text p span { background-image: linear-gradient(90deg, #D6007F 0%, #0F3675 100%); background-clip: text; -webkit-background-clip: text; -webkit-text-fill-color: transparent; } @keyframes scroll-hint-appear { 0% { transform: translateX(40px); opacity: 0; } 10% { opacity: 1; } 50%, 100% { transform: translateX(-40px); opacity: 0; } } .scroll-hint-icon { position: absolute; top: calc(50% - 20px); left: calc(50% - 40px); box-sizing: border-box; width: 80px; height: auto; border-radius: 5px; transition: opacity 0.3s; opacity: 0; background: rgba(0, 0, 0, 0.7); text-align: center; padding: 10px 10px 10px 10px; } .scroll-hint-icon-wrap { position: absolute; top: 0; left: 0; width: 100%; height: 100%; max-height: 100%; pointer-events: none; } .scroll-hint-text { font-size: 10px; color: #FFF; margin-top: 5px; } .scroll-hint-icon-wrap.is-active .scroll-hint-icon { opacity: 0.8; } .scroll-hint-icon:before { display: inline-block; width: 30px; height: 30px; color: #FFF; vertical-align: middle; text-align: center; content: ""; background-size: contain; background-position: center center; background-repeat: no-repeat; background-image: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyNS43NyIgaGVpZ2h0PSIzMC41MiIgdmlld0JveD0iMCAwIDI1Ljc3IDMwLjUyIj48dGl0bGU+44Ki44K744OD44OIIDM8L3RpdGxlPjxnIGlkPSLjg6zjgqTjg6Tjg7xfMiIgZGF0YS1uYW1lPSLjg6zjgqTjg6Tjg7wgMiI+PGcgaWQ9IuODrOOCpOODpOODvF8xLTIiIGRhdGEtbmFtZT0i44Os44Kk44Ok44O8IDEiPjxwYXRoIGQ9Ik0yMS4zMywzMC41Mkg3Ljg1QTEuNTUsMS41NSwwLDAsMSw2LjMsMjlhMTIuNDYsMTIuNDYsMCwwLDAtLjYzLTQuNDIsMjUuMTYsMjUuMTYsMCwwLDAtNC4yNS01bC0uMDYtLjA2QTUsNSwwLDAsMSwwLDE1Ljg2YTMuNjQsMy42NCwwLDAsMSwxLjE3LTIuNjIsMy42MywzLjYzLDAsMCwxLDUuMTQuMDdWMy43N2EzLjc3LDMuNzcsMCwxLDEsNy41NCwwVjguMzNhMy4zNSwzLjM1LDAsMCwxLDEuMjYsMCwzLDMsMCwwLDEsMiwxLjIyLDMuNSwzLjUsMCwwLDEsMi0uMDYsMy4yMSwzLjIxLDAsMCwxLDIsMS41NCwzLjc0LDMuNzQsMCwwLDEsMywuNDdBNC4yMSw0LjIxLDAsMCwxLDI1Ljc0LDE1YzAsLjExLDAsLjI3LDAsLjQ2YTE5LjI2LDE5LjI2LDAsMCwxLS44NCw3Yy0uMTQuMzgtLjM2LjgxLS41NiwxLjIybC0uMTEuMjJjMCwuMDctLjA5LjE0LS4xNC4yMWE3LjEzLDcuMTMsMCwwLDAtMS4xNywyLjE3Yy0uMDYuNTYtLjA2LDIuMTUtLjA1LDIuNzFBMS41NSwxLjU1LDAsMCwxLDIxLjMzLDMwLjUyWk04LjYxLDI4LjIxaDEyYzAtLjcxLDAtMS43MS4wNy0yLjIzYTguNzQsOC43NCwwLDAsMSwxLjU5LTMuMjVsLjA2LS4xMmExMCwxMCwwLDAsMCwuNDYtMSwxNi44LDE2LjgsMCwwLDAsLjctNi4xMmMwLS4yMywwLS40MSwwLS41NGgwYTIsMiwwLDAsMC0uNjQtMS41MiwxLjMzLDEuMzMsMCwwLDAtMS41NS4wOCwxLjEzLDEuMTMsMCwwLDEtMS4xOC4yOCwxLjE1LDEuMTUsMCwwLDEtLjc4LS45NCwxLjI2LDEuMjYsMCwwLDAtLjc1LTEuMTEsMSwxLDAsMCwwLTEuMTEuMjhsLS4xLjFhMS4xNSwxLjE1LDAsMCwxLTEuMTkuMjksMS4xNiwxLjE2LDAsMCwxLS43OC0uOTVjLS4wOS0uNjgtLjIxLS43Ny0uNy0uODdhLjgyLjgyLDAsMCwwLTEsLjQ4LDEuMTYsMS4xNiwwLDAsMS0yLjE2LS41OFYzLjc3YTEuNDYsMS40NiwwLDEsMC0yLjkyLDB2Ny44NWwwLDQuMzNhMS4xNywxLjE3LDAsMCwxLS44MywxLjExLDEuMTUsMS4xNSwwLDAsMS0xLjItLjM1bC0xLS45MWMtLjQ3LS40Mi0uNzMtLjY2LS44NC0uNzdhMS4zNSwxLjM1LDAsMCwwLTItLjEyTDIuNywxNWExLjMyLDEuMzIsMCwwLDAtLjM5LDFBMi41NywyLjU3LDAsMCwwLDMsMTcuODVsMCwwYTI3LjI0LDI3LjI0LDAsMCwxLDQuNyw1LjYyQTEyLjYzLDEyLjYzLDAsMCwxLDguNjEsMjguMjFaTTIzLjIsMjMuMzVaTTYuNTEsMTYuNTlaIiBmaWxsPSIjZmZmIi8+PC9nPjwvZz48L3N2Zz4=); } .scroll-hint-icon:after { content: ""; width: 34px; height: 14px; display: block; position: absolute; top: 10px; left: 50%; margin-left: -20px; background-repeat: no-repeat; background-image: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIzMy4yOSIgaGVpZ2h0PSIxMi4wMiIgdmlld0JveD0iMCAwIDMzLjI5IDEyLjAyIj48dGl0bGU+44Ki44K744OD44OIIDE8L3RpdGxlPjxnIGlkPSLjg6zjgqTjg6Tjg7xfMiIgZGF0YS1uYW1lPSLjg6zjgqTjg6Tjg7wgMiI+PGcgaWQ9IuODrOOCpOODpOODvF8xLTIiIGRhdGEtbmFtZT0i44Os44Kk44Ok44O8IDEiPjxsaW5lIHgxPSIxLjg1IiB5MT0iNi4wMSIgeDI9IjEwLjQiIHkyPSI2LjAxIiBmaWxsPSIjZmZmIi8+PHBhdGggZD0iTTEwLjQsNy4xN0gxLjg1YTEuMTYsMS4xNiwwLDEsMSwwLTIuMzFIMTAuNGExLjE2LDEuMTYsMCwxLDEsMCwyLjMxWiIgZmlsbD0iI2ZmZiIvPjxwYXRoIGQ9Ik03LjQsMTJhMS4xNSwxLjE1LDAsMCwxLS43Mi0uMjVsLTYuMjUtNUExLjIsMS4yLDAsMCwxLDAsNS44NywxLjE0LDEuMTQsMCwwLDEsLjQ2LDVMNi43LjIzQTEuMTYsMS4xNiwwLDAsMSw4LjEsMi4wOEwzLDUuOTEsOC4xMiwxMEExLjE2LDEuMTYsMCwwLDEsNy40LDEyWiIgZmlsbD0iI2ZmZiIvPjxsaW5lIHgxPSIzMS40NSIgeTE9IjYuMDEiIHgyPSIyMi44OSIgeTI9IjYuMDEiIGZpbGw9IiNmZmYiLz48cGF0aCBkPSJNMzEuNDUsNy4xN0gyMi44OWExLjE2LDEuMTYsMCwxLDEsMC0yLjMxaDguNTZhMS4xNiwxLjE2LDAsMCwxLDAsMi4zMVoiIGZpbGw9IiNmZmYiLz48cGF0aCBkPSJNMjUuOSwxMmExLjE4LDEuMTgsMCwwLDEtLjkxLS40M0ExLjE3LDEuMTcsMCwwLDEsMjUuMTcsMTBsNS4wOS00LjA1TDI1LjIsMi4wOEExLjE2LDEuMTYsMCwwLDEsMjYuNTkuMjNMMzIuODQsNWExLjE2LDEuMTYsMCwwLDEsLjQ1LjkxLDEuMTQsMS4xNCwwLDAsMS0uNDMuOTJsLTYuMjQsNUExLjE3LDEuMTcsMCwwLDEsMjUuOSwxMloiIGZpbGw9IiNmZmYiLz48L2c+PC9nPjwvc3ZnPg==); opacity: 0; transition-delay: 2.4s; } .scroll-hint-icon-wrap.is-active .scroll-hint-icon:after { opacity: 1; } .scroll-hint-icon-wrap.is-active .scroll-hint-icon:before { animation: scroll-hint-appear 1.2s linear; animation-iteration-count: 2; } .scroll-hint-icon-white { background-color: #FFF; box-shadow: 0 4px 5px rgba(0, 0, 0, 0.4); } .scroll-hint-icon-white:before { background-image: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyNS43NyIgaGVpZ2h0PSIzMC41MiIgdmlld0JveD0iMCAwIDI1Ljc3IDMwLjUyIj48dGl0bGU+44Ki44K744OD44OIIDQ8L3RpdGxlPjxnIGlkPSLjg6zjgqTjg6Tjg7xfMiIgZGF0YS1uYW1lPSLjg6zjgqTjg6Tjg7wgMiI+PGcgaWQ9IuODrOOCpOODpOODvF8xLTIiIGRhdGEtbmFtZT0i44Os44Kk44Ok44O8IDEiPjxwYXRoIGQ9Ik0yMS4zMywzMC41Mkg3Ljg1QTEuNTUsMS41NSwwLDAsMSw2LjMsMjlhMTIuNDYsMTIuNDYsMCwwLDAtLjYzLTQuNDIsMjUuMTYsMjUuMTYsMCwwLDAtNC4yNS01bC0uMDYtLjA2QTUsNSwwLDAsMSwwLDE1Ljg2YTMuNjQsMy42NCwwLDAsMSwxLjE3LTIuNjIsMy42MywzLjYzLDAsMCwxLDUuMTQuMDdWMy43N2EzLjc3LDMuNzcsMCwxLDEsNy41NCwwVjguMzNhMy4zNSwzLjM1LDAsMCwxLDEuMjYsMCwzLDMsMCwwLDEsMiwxLjIyLDMuNSwzLjUsMCwwLDEsMi0uMDYsMy4yMSwzLjIxLDAsMCwxLDIsMS41NCwzLjc0LDMuNzQsMCwwLDEsMywuNDdBNC4yMSw0LjIxLDAsMCwxLDI1Ljc0LDE1YzAsLjExLDAsLjI3LDAsLjQ2YTE5LjI2LDE5LjI2LDAsMCwxLS44NCw3Yy0uMTQuMzgtLjM2LjgxLS41NiwxLjIybC0uMTEuMjJjMCwuMDctLjA5LjE0LS4xNC4yMWE3LjEzLDcuMTMsMCwwLDAtMS4xNywyLjE3Yy0uMDYuNTYtLjA2LDIuMTUtLjA1LDIuNzFBMS41NSwxLjU1LDAsMCwxLDIxLjMzLDMwLjUyWk04LjYxLDI4LjIxaDEyYzAtLjcxLDAtMS43MS4wNy0yLjIzYTguNzQsOC43NCwwLDAsMSwxLjU5LTMuMjVsLjA2LS4xMmExMCwxMCwwLDAsMCwuNDYtMSwxNi44LDE2LjgsMCwwLDAsLjctNi4xMmMwLS4yMywwLS40MSwwLS41NGgwYTIsMiwwLDAsMC0uNjQtMS41MiwxLjMzLDEuMzMsMCwwLDAtMS41NS4wOCwxLjEzLDEuMTMsMCwwLDEtMS4xOC4yOCwxLjE1LDEuMTUsMCwwLDEtLjc4LS45NCwxLjI2LDEuMjYsMCwwLDAtLjc1LTEuMTEsMSwxLDAsMCwwLTEuMTEuMjhsLS4xLjFhMS4xNSwxLjE1LDAsMCwxLTEuMTkuMjksMS4xNiwxLjE2LDAsMCwxLS43OC0uOTVjLS4wOS0uNjgtLjIxLS43Ny0uNy0uODdhLjgyLjgyLDAsMCwwLTEsLjQ4LDEuMTYsMS4xNiwwLDAsMS0yLjE2LS41OFYzLjc3YTEuNDYsMS40NiwwLDEsMC0yLjkyLDB2Ny44NWwwLDQuMzNhMS4xNywxLjE3LDAsMCwxLS44MywxLjExLDEuMTUsMS4xNSwwLDAsMS0xLjItLjM1bC0xLS45MWMtLjQ3LS40Mi0uNzMtLjY2LS44NC0uNzdhMS4zNSwxLjM1LDAsMCwwLTItLjEyTDIuNywxNWExLjMyLDEuMzIsMCwwLDAtLjM5LDFBMi41NywyLjU3LDAsMCwwLDMsMTcuODVsMCwwYTI3LjI0LDI3LjI0LDAsMCwxLDQuNyw1LjYyQTEyLjYzLDEyLjYzLDAsMCwxLDguNjEsMjguMjFaTTIzLjIsMjMuMzVaTTYuNTEsMTYuNTlaIi8+PC9nPjwvZz48L3N2Zz4=); } .scroll-hint-icon-white:after { background-image: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIzMy4yOSIgaGVpZ2h0PSIxMi4wMiIgdmlld0JveD0iMCAwIDMzLjI5IDEyLjAyIj48dGl0bGU+44Ki44K744OD44OIIDI8L3RpdGxlPjxnIGlkPSLjg6zjgqTjg6Tjg7xfMiIgZGF0YS1uYW1lPSLjg6zjgqTjg6Tjg7wgMiI+PGcgaWQ9IuODrOOCpOODpOODvF8xLTIiIGRhdGEtbmFtZT0i44Os44Kk44Ok44O8IDEiPjxsaW5lIHgxPSIxLjg1IiB5MT0iNi4wMSIgeDI9IjEwLjQiIHkyPSI2LjAxIi8+PHBhdGggZD0iTTEwLjQsNy4xN0gxLjg1YTEuMTYsMS4xNiwwLDEsMSwwLTIuMzFIMTAuNGExLjE2LDEuMTYsMCwxLDEsMCwyLjMxWiIvPjxwYXRoIGQ9Ik03LjQsMTJhMS4xNSwxLjE1LDAsMCwxLS43Mi0uMjVsLTYuMjUtNUExLjIsMS4yLDAsMCwxLDAsNS44NywxLjE0LDEuMTQsMCwwLDEsLjQ2LDVMNi43LjIzQTEuMTYsMS4xNiwwLDAsMSw4LjEsMi4wOEwzLDUuOTEsOC4xMiwxMEExLjE2LDEuMTYsMCwwLDEsNy40LDEyWiIvPjxsaW5lIHgxPSIzMS40NSIgeTE9IjYuMDEiIHgyPSIyMi44OSIgeTI9IjYuMDEiLz48cGF0aCBkPSJNMzEuNDUsNy4xN0gyMi44OWExLjE2LDEuMTYsMCwxLDEsMC0yLjMxaDguNTZhMS4xNiwxLjE2LDAsMCwxLDAsMi4zMVoiLz48cGF0aCBkPSJNMjUuOSwxMmExLjE4LDEuMTgsMCwwLDEtLjkxLS40M0ExLjE3LDEuMTcsMCwwLDEsMjUuMTcsMTBsNS4wOS00LjA1TDI1LjIsMi4wOEExLjE2LDEuMTYsMCwwLDEsMjYuNTkuMjNMMzIuODQsNWExLjE2LDEuMTYsMCwwLDEsLjQ1LjkxLDEuMTQsMS4xNCwwLDAsMS0uNDMuOTJsLTYuMjQsNUExLjE3LDEuMTcsMCwwLDEsMjUuOSwxMloiLz48L2c+PC9nPjwvc3ZnPg==); } .scroll-hint-icon-white .scroll-hint-text { color: #000; } .scroll-hint-shadow-wrap { position: relative; } .scroll-hint-shadow-wrap::after { content: ""; width: 20px; height: 100%; background: linear-gradient(270deg, rgba(0, 0, 0, 0.15) 0, rgba(0, 0, 0, 0) 16px, rgba(0, 0, 0, 0)); position: absolute; top: 0; right: 0; pointer-events: none; z-index: 1; opacity: 0; visibility: hidden; } .scroll-hint-shadow-wrap::before { content: ""; width: 20px; height: 100%; background: linear-gradient(90deg, rgba(0, 0, 0, 0.15) 0, rgba(0, 0, 0, 0) 16px, rgba(0, 0, 0, 0)); position: absolute; top: 0; left: 0; pointer-events: none; z-index: 1; opacity: 0; visibility: hidden; } .scroll-hint-shadow-wrap:has(.scroll-hint.is-right-scrollable)::after, .scroll-hint-shadow-wrap.is-right-scrollable::after { opacity: 1; visibility: visible; } .scroll-hint-shadow-wrap:has(.scroll-hint.is-left-scrollable)::before, .scroll-hint-shadow-wrap.is-left-scrollable::before { opacity: 1; visibility: visible; }