@charset "UTF-8"; @import url("https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@100..900&family=Noto+Serif+JP:wght@200..900&display=swap"); @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; } } /*** 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; } img { vertical-align: top; } /* Fix mobile Safari increase font-size on landscape mode */ html { -moz-text-size-adjust: none; -webkit-text-size-adjust: none; text-size-adjust: none; } /* Reapply the pointer cursor for anchor tags */ a, button { cursor: revert; } /* Remove list styles (bullets/numbers) */ ol, ul, menu, summary { list-style: none; } /* For images to not be able to exceed their container */ img { max-inline-size: 100%; max-block-size: 100%; } /* removes spacing between cells in tables */ table { border-collapse: collapse; } /* Safari - solving issue when using user-select:none on the text input doesn't working */ input, textarea { -webkit-user-select: auto; } /* revert the 'white-space' property for textarea elements on Safari */ textarea { white-space: revert; } /* minimum style to allow to style meter element */ meter { -webkit-appearance: revert; -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; } html { font-size: 62.5%; } :root { --font-size-min: 16; --font-size-max: 16; --font-ratio-min: 1; --font-ratio-max: 1.3; --font-width-min: 320; --font-width-max: 1600; /* ヘッダー高さ：確実なフォールバックと即座の適用 */ --header-height: 110px; /* 安全なデフォルト値 */ --fluid-s-min: calc(var(--font-size-min) * pow(var(--font-ratio-min), -1)); --fluid-s-max: calc(var(--font-size-max) * pow(var(--font-ratio-max), -1)); --fluid-s-preferred: calc((var(--fluid-s-max) - var(--fluid-s-min)) / (var(--font-width-max) - var(--font-width-min))); --fluid-s: clamp((var(--fluid-s-min) / 10) * 1rem, ((var(--fluid-s-min) / 10) * 1rem) - (((var(--fluid-s-preferred) * var(--font-width-min)) / 10) * 1rem) + (var(--fluid-s-preferred) * 100vi), (var(--fluid-s-max) / 10) * 1rem); --fluid-0-min: calc(var(--font-size-min) * pow(var(--font-ratio-min), 0)); --fluid-0-max: calc(var(--font-size-max) * pow(var(--font-ratio-max), 0)); --fluid-0-preferred: calc((var(--fluid-0-max) - var(--fluid-0-min)) / (var(--font-width-max) - var(--font-width-min))); --fluid-0: clamp((var(--fluid-0-min) / 10) * 1rem, ((var(--fluid-0-min) / 10) * 1rem) - (((var(--fluid-0-preferred) * var(--font-width-min)) / 10) * 1rem) + (var(--fluid-0-preferred) * 100vi), (var(--fluid-0-max) / 10) * 1rem); --fluid-1-min: calc(var(--font-size-min) * pow(var(--font-ratio-min), 1)); --fluid-1-max: calc(var(--font-size-max) * pow(var(--font-ratio-max), 1)); --fluid-1-preferred: calc((var(--fluid-1-max) - var(--fluid-1-min)) / (var(--font-width-max) - var(--font-width-min))); --fluid-1: clamp((var(--fluid-1-min) / 10) * 1rem, ((var(--fluid-1-min) / 10) * 1rem) - (((var(--fluid-1-preferred) * var(--font-width-min)) / 10) * 1rem) + (var(--fluid-1-preferred) * 100vi), (var(--fluid-1-max) / 10) * 1rem); --fluid-2-min: calc(var(--font-size-min) * pow(var(--font-ratio-min), 2)); --fluid-2-max: calc(var(--font-size-max) * pow(var(--font-ratio-max), 2)); --fluid-2-preferred: calc((var(--fluid-2-max) - var(--fluid-2-min)) / (var(--font-width-max) - var(--font-width-min))); --fluid-2: clamp((var(--fluid-2-min) / 10) * 1rem, ((var(--fluid-2-min) / 10) * 1rem) - (((var(--fluid-2-preferred) * var(--font-width-min)) / 10) * 1rem) + (var(--fluid-2-preferred) * 100vi), (var(--fluid-2-max) / 10) * 1rem); --fluid-3-min: calc(var(--font-size-min) * pow(var(--font-ratio-min), 3)); --fluid-3-max: calc(var(--font-size-max) * pow(var(--font-ratio-max), 3)); --fluid-3-preferred: calc((var(--fluid-3-max) - var(--fluid-3-min)) / (var(--font-width-max) - var(--font-width-min))); --fluid-3: clamp((var(--fluid-3-min) / 10) * 1rem, ((var(--fluid-3-min) / 10) * 1rem) - (((var(--fluid-3-preferred) * var(--font-width-min)) / 10) * 1rem) + (var(--fluid-3-preferred) * 100vi), (var(--fluid-3-max) / 10) * 1rem); } body { color: #222; font-family: "Noto Sans JP", YuGothic, "Yu Gothic Medium", "Yu Gothic", Verdana, Meiryo, sans-serif; font-size: clamp(1.4rem, 1.3vw, 1.6rem); letter-spacing: 0.05em; line-height: 1.75; font-weight: 400; } h1 { font-size: clamp(2rem, 5vw, 4.8rem); } h2 { font-size: clamp(1.8rem, 3vw, 3.2rem); } h3 { font-size: clamp(1.6rem, 2vw, 2.6rem); } h4 { font-size: clamp(1.6rem, 1.8vw, 2rem); } main { background: #F8F8F8; } #bg { position: relative; z-index: 0; } img[src$=".svg"], img { width: 100%; } .serif { font-family: "Noto Serif JP", serif; } .gothic { font-family: "Noto Sans JP", YuGothic, "Yu Gothic Medium", "Yu Gothic", Verdana, Meiryo, sans-serif; } .en { font-family: "Noto Serif JP", sans-serif; } a { transition: all 0.3s ease; } a img { transition: all 0.3s ease; } span.c-icon { display: inline-block; position: relative; width: 1em; height: 1em; line-height: 1; margin: 0 0.5em 0.2em; vertical-align: middle; } .ly_container { position: relative; } .inview { opacity: 0; } .inviewwrap { position: absolute; top: 0; width: 100%; height: 100%; } .inview.active { animation: fadeInup 0.5s ease-out; animation-fill-mode: forwards; } .inview.noanimation { opacity: 1; animation: none; } .inview.active.lefts { animation: fadeInLeft 1s ease-out; animation-fill-mode: forwards; } .inview.fade.active { animation: fadeIn 1s ease-out; animation-fill-mode: forwards; } .inview.clip { clip-path: inset(0 100% 0 0); transition: clip-path 0.4s ease-in; transition-delay: 0.3s; opacity: 1; } .inview.active.clip { clip-path: inset(0 0 0 0); animation: none; } .inview.clip.delay01 { transition-delay: 0.6s; } .inview.clip.delay02 { transition-delay: 0.9s; } @keyframes fadeIn { 0% { opacity: 0; } 100% { opacity: 1; } } @keyframes fadeInup { 0% { transform: translateY(50px) translateX(0); opacity: 0; } 100% { transform: translateY(0px); opacity: 1; } } @keyframes fadeInLeft { 0% { transform: translateX(-50px); opacity: 0; } 100% { transform: translateX(0px); opacity: 1; } } .delay01 { animation-delay: 0.3s !important; } .delay02 { animation-delay: 0.6s !important; } .delay03 { animation-delay: 0.9s !important; } ._spShowImportant { display: none !important; } @media screen and (max-width: 767px) { .inviewwrap { position: static; } ._pcShowImportant { display: none !important; } ._spShowImportant { display: block !important; } } .zoom { display: block; position: relative; overflow: hidden; } .zoom img { transform-origin: center; transition: all 1.2s ease; } .zoom:hover img { transform: scale(1.1); opacity: 1; } .sp { display: none !important; } @media screen and (max-width: 767px) { .pc { display: none !important; } .sp { display: block !important; } } /* HEADER ================================================== */ .header { position: relative; top: 0; left: 0; width: 100%; background: #ffffff; z-index: 3000; /* ヘッダーの高さを計算するためのCSS */ height: auto; transition: transform 0.3s ease, box-shadow 0.3s ease; } .header svg { display: block; } .header .sub { font-size: 0.8em; font-weight: 500; margin: 0 auto 0 0; line-height: 1; } .header.fixed { transform: translateY(0); box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1); position: fixed; width: 100%; background: #ffffff; } .header.fixed .header-logo h1 { width: 240px; padding: 2rem 0 0 2.5rem; } .header.fixed .header-logo .sublogo { width: 170px; padding: 0 2rem 0 0; } @media screen and (max-width: 1060px) { .header.fixed .header-logo h1 { width: 300px; padding: 0 0 0 2rem; } .header.fixed .header-logo .sublogo { width: 170px; padding: 0 2rem 0 0; } } .header-logo { display: flex; justify-content: space-between; border-bottom: 5px solid #E60000; align-items: center; width: 100%; /* SVGの隙間を解消 */ } .header-logo h1 { width: 350px; transition: all 0.3s ease; padding: 2rem 0 2rem 2.5rem; line-height: 1; /* ライン高さを1に設定 */ } @media screen and (max-width: 1060px) { .header-logo h1 { vertical-align: middle; width: 300px; padding: 0 0 0 2rem; } } @media screen and (max-width: 767px) { .header-logo h1 { display: none; } } .header-logo h1 a { line-height: 1; transition: all 0.3s ease; display: block; /* ブロック要素に変更 */ /* SVG内のa要素 */ } .header-logo h1 a:hover { opacity: 0.9; } .header-logo h1 a svg { display: block; } .header-logo .sublogo { width: 200px; transition: all 0.3s ease; padding: 2rem; line-height: 1; /* ライン高さを1に設定 */ } @media screen and (max-width: 1060px) { .header-logo .sublogo { margin: 0 0 0 auto; padding: 0 2rem 0 0; width: 170px; } } @media screen and (max-width: 767px) { .header-logo .sublogo { width: 50% !important; margin: 0 0 0 2rem; } } nav.header-nav { display: flex; align-items: center; } #pc_gnav { width: 100%; padding: 0; } @media screen and (max-width: 1060px) { #pc_gnav { display: none; } } #pc_gnav ul { display: flex; justify-content: space-between; } #pc_gnav ul li { width: 14.2857142857%; border-right: 1px solid #ccc; } #pc_gnav ul li:last-child { border-right: none; } #pc_gnav ul li.entry a { color: #E60000; } #pc_gnav ul li.entry a:hover, #pc_gnav ul li.entry a:active { background: #E60000; color: #ffffff; border-bottom: 2px solid #E60000; } #pc_gnav ul li a { display: block; text-align: center; padding: 1.2rem 0; border-bottom: 2px solid #ffffff; transition: all 0.3s ease; font-size: 0.9em; } #pc_gnav ul li a:hover, #pc_gnav ul li a.active { color: #E60000; border-bottom: 2px solid #E60000; } #pc_gnav ul li a.comingsoon { pointer-events: none; opacity: 0.3; pointer-events: none; } #entry_mypage { display: block; margin: 0 1vw 0 1vw; } #entry_mypage .btn { display: flex; justify-content: space-between; margin: 10px 0 0 0; } #entry_mypage .btn a { width: 49%; color: #ffffff; text-align: center; padding: 1rem 0; display: block; background: #E60000; transition: all 0.3s ease; border-bottom: 2px solid #E60000; } #entry_mypage .btn a:hover { background: #be0030; border-bottom: 2px solid #E60000; } @media screen and (max-width: 767px) { #entry_mypage { display: none; } } .sp_menus { padding: 3vw; } .sp_menus .box { border-bottom: 1px solid #ccc; } .sp_menus .entry_btn a { display: block; background: #E60000; text-align: center; color: #ffffff; padding: 1.5rem 0; } .sp_menus .title { display: flex; align-items: baseline; position: relative; cursor: pointer; padding: 1em; } .sp_menus .title.active { color: #ffffff; background: #333; } .sp_menus .title.active p.en { color: #ffffff; } .sp_menus .title.comingsoon { pointer-events: none; opacity: 0.6; pointer-events: none; } .sp_menus .title.comingsoon.active { background-color: #fff; color: #222; } .sp_menus .title a { display: flex; align-items: baseline; position: relative; width: 100%; } .sp_menus .title:after { font-size: 2em; content: ""; position: absolute; top: 50%; right: 2vw; transform: translateY(-50%); display: inline-block; width: 1em; height: 1em; --svg: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='none' stroke='%23000' stroke-linecap='round' stroke-linejoin='round' d='M12 6v12m-6-6h12' 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%; } .sp_menus .title.links:after { --svg: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='none' stroke='%23000' stroke-linecap='round' stroke-linejoin='round' d='m10 17l5-5l-5-5' stroke-width='1'/%3E%3C/svg%3E"); } .sp_menus .title p.en { color: #E60000; font-size: var(--fluid-2); margin: 0 1em 0 0; } .sp_menus .title p.jp { font-size: 0.95em; font-feature-settings: "palt"; } .sp_menus ul { display: none; background: #f1f1f1; margin: 0 0 1em 0; } .sp_menus ul li:last-child a { border-bottom: none; } .sp_menus ul li a { font-size: 0.9em; padding: 1em; display: block; position: relative; border-bottom: 1px solid #ffffff; } .sp_menus ul li a:after { font-size: 2em; color: #E60000; display: block; content: ""; position: absolute; top: 50%; right: 2vw; transform: translateY(-50%); display: inline-block; width: 1em; height: 1em; --svg: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='none' stroke='%23000' stroke-linecap='round' stroke-linejoin='round' d='m10 17l5-5l-5-5' 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%; } #slide-menu { display: none; position: fixed; overflow-y: auto; top: var(--header-height); left: 0; width: 100%; height: calc(100vh - var(--header-height)); background-color: #ffffff; z-index: 9900; } #slide-menu .slide-menu-top { display: flex; justify-content: space-between; } #slide-menu .slide-menu-top .logo { display: flex; align-items: center; } #slide-menu .slide-menu-top .logo a { display: flex; align-items: center; font-weight: 400; white-space: nowrap; } #slide-menu .slide-menu-top .logo a .images { width: 40px; margin: 0.5em 0 0 0; } #slide-menu .slide-menu-top .logo a img { line-height: 0; } #slide-menu .slide-menu-top .logo .sub { line-height: 1.2; margin: 0 0 0 1rem; } @media screen and (max-width: 767px) { #slide-menu .slide-menu-top .logo { width: 200px; margin: 2px 0 0 6%; } } #slide-menu .slide-menu-top .entry-menu { flex: 1; } @media screen and (max-width: 767px) { #slide-menu .slide-menu-top { align-items: flex-start; } } #slide-menu .slide-menu-top-menu { flex: 1; display: flex; justify-content: space-between; } @media screen and (max-width: 767px) { #slide-menu .slide-menu-top-menu { display: block; width: 100%; } } @media screen and (max-width: 767px) { #slide-menu #sp-mm-close { position: absolute; top: 0; right: 0; } } #slide-menu #sp-mm-close .sp-mm-btn { position: relative; width: 60px; height: 50px; background-color: #E60000; cursor: pointer; transition: all 0.3s ease; margin: 0 0 0 1rem; } @media screen and (max-width: 767px) { #slide-menu #sp-mm-close .sp-mm-btn { width: 60px; height: 50px; } } #slide-menu #sp-mm-close .sp-mm-btn span { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%) rotate(45deg); display: block; width: 21px; height: 21px; } #slide-menu #sp-mm-close .sp-mm-btn span:before, #slide-menu #sp-mm-close .sp-mm-btn span:after { content: ""; display: block; position: absolute; transition: all 0.3s ease; } #slide-menu #sp-mm-close .sp-mm-btn span:before { background-color: #ffffff; width: 100%; height: 1px; top: 50%; margin-top: -1px; } #slide-menu #sp-mm-close .sp-mm-btn span:after { background-color: #ffffff; height: 100%; width: 1px; left: 50%; margin-left: -1px; } #slide-menu #sp-mm-close .sp-mm-btn:hover { background-color: #3e3e3e; } #slide-menu #sp-mm-close .sp-mm-btn:hover span:before { background-color: #fff; } #slide-menu #sp-mm-close .sp-mm-btn:hover span:after { background-color: #fff; } #slide-menu ul.entry-menu { display: flex; justify-content: flex-end; margin-right: 30px; margin-top: 10px; } @media screen and (max-width: 767px) { #slide-menu ul.entry-menu { margin-right: 0; width: 100%; margin: 3rem 0 0 0; justify-content: space-between; position: absolute; padding: 0 5%; } } #slide-menu ul.entry-menu li { width: 200px; margin-bottom: 10px; position: relative; margin-right: 5px; } @media screen and (max-width: 767px) { #slide-menu ul.entry-menu li { width: 48%; } } #slide-menu ul.entry-menu li a { display: flex; align-items: center; justify-content: center; width: 100%; height: 60px; text-align: center; border-radius: 5px; background-color: #E60000; color: #ffffff; line-height: 1.4; } @media screen and (max-width: 767px) { #slide-menu ul.entry-menu li a { display: block; width: 100%; padding: 1rem 0 0 0; } } #slide-menu ul.entry-menu li a:hover { opacity: 0.8; } #slide-menu ul.entry-menu li a.internship { background-color: #fff; color: #9A0026; } #slide-menu ul.entry-menu li a.internship span { transform: scaleX(90%); padding-right: 4px; } #slide-menu .other-site-menu { padding: 0 40px 0 0; display: flex; justify-content: flex-end; flex-wrap: wrap; gap: 3%; flex: 1; } @media screen and (max-width: 767px) { #slide-menu .other-site-menu { justify-content: flex-start; padding-left: 5%; } } #slide-menu .other-site-menu li { padding-right: 23px; position: relative; } #slide-menu .other-site-menu li::after { content: url("/career/images/blank-icon.svg"); display: block; position: absolute; right: 0px; top: 52%; transform: translateY(-50%); } #slide-menu .other-site-menu li a { color: #3e3e3e; } #slide-menu .slide-menu-nav-layout { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 0; padding: 5rem 5vw 0 5vw; } @media screen and (max-width: 767px) { #slide-menu .slide-menu-nav-layout { display: block; padding: 13rem 5% 50px 5%; } } #slide-menu .slide-menu-nav-layout .titles { border-bottom: 1px solid #eee; margin: 0 0 2rem 0; } @media screen and (max-width: 767px) { #slide-menu .slide-menu-nav-layout .titles { margin: 0 0 0 0; position: relative; padding: 0 0 1rem 0; } #slide-menu .slide-menu-nav-layout .titles .icon { width: 14px; position: absolute; top: 0em; right: 5%; } #slide-menu .slide-menu-nav-layout .titles.active .icon { transform: rotate(45deg); } } #slide-menu .slide-menu-nav-layout .titles p.jp { font-weight: 500; } @media screen and (max-width: 767px) { #slide-menu .slide-menu-nav-layout .titles p.jp { line-height: 1; } } #slide-menu .slide-menu-nav-layout .titles p.en { color: #555; } #slide-menu .slide-menu-nav-layout .people_nav_flex { display: flex; justify-content: space-between; } @media screen and (max-width: 767px) { #slide-menu .slide-menu-nav-layout .people_nav_flex { display: block; } } #slide-menu .slide-menu-nav-layout .people_nav_flex ul { width: 50%; } @media screen and (max-width: 767px) { #slide-menu .slide-menu-nav-layout .people_nav_flex ul { width: 100%; display: block !important; padding: 0 2rem !important; } } #slide-menu .slide-menu-nav-layout .block { margin: 0 0 5rem 0; } @media screen and (max-width: 767px) { #slide-menu .slide-menu-nav-layout .block { margin: 0 0 2rem 0; } } @media screen and (max-width: 767px) { #slide-menu .slide-menu-nav-layout .block ul { display: none; padding: 2rem 0 0 0; background: #E60000; padding: 2rem 2rem 2rem 2rem; } } #slide-menu .slide-menu-nav-layout .block ul li { font-feature-settings: "palt"; } #slide-menu .slide-menu-nav-layout .block ul li a { display: block; padding: 5px 0; color: #555; } #slide-menu .slide-menu-nav-layout .block ul li a span { display: inline-block; line-height: 1.4; } #slide-menu .slide-menu-nav-layout .block ul li a p.name { line-height: 1.2; } #slide-menu .slide-menu-nav-layout .block ul li a:hover { color: #E60000; } @media screen and (max-width: 767px) { #slide-menu .slide-menu-nav-layout .block ul li a { padding: 0.5em 0; color: #ffffff; position: relative; } #slide-menu .slide-menu-nav-layout .block ul li a::after { position: absolute; top: 50%; right: -0.8em; transform: translateY(-50%); display: block; width: 20px; height: 10px; content: ""; background: url(/career/assets/image/common/yaji_white.svg) no-repeat; } } #slide-menu .slide-menu-nav-layout .col { width: 22%; } @media screen and (max-width: 767px) { #slide-menu .slide-menu-nav-layout .col { width: 100%; } } #slide-menu .slide-menu-nav-layout .col .parent-menu { margin-bottom: 35px; } @media screen and (max-width: 767px) { #slide-menu .slide-menu-nav-layout .col .parent-menu { margin-bottom: 0; } } #slide-menu .slide-menu-nav-layout .col .parent-menu .parent-title { position: relative; display: block; color: #3e3e3e; border-bottom: 1px solid #3e3e3e; padding-bottom: 10px; margin-bottom: 10px; } @media screen and (max-width: 767px) { #slide-menu .slide-menu-nav-layout .col .parent-menu .parent-title { padding: 12px 0; margin-bottom: 0; } #slide-menu .slide-menu-nav-layout .col .parent-menu .parent-title i { position: absolute; display: block; width: 19px; height: 19px; right: 10px; top: 50%; transform: translateY(-50%); } #slide-menu .slide-menu-nav-layout .col .parent-menu .parent-title i::before { content: ""; display: block; position: absolute; width: 100%; height: 1px; background-color: #3e3e3e; top: calc(50% - 1px); left: 0; } #slide-menu .slide-menu-nav-layout .col .parent-menu .parent-title i::after { content: ""; display: block; position: absolute; width: 1px; height: 100%; background-color: #3e3e3e; top: 0; left: calc(50% - 1px); } } @media screen and (max-width: 767px) { #slide-menu .slide-menu-nav-layout .col .parent-menu.open .parent-title i { transform: translateY(-50%) rotate(45deg); } } #slide-menu .special { margin-top: 50px; } @media screen and (max-width: 767px) { #slide-menu .special { text-align: center; } } .drawer_menu, #tagsearch { position: absolute; /* ヘッダーの高さに基づいた動的な位置調整（2px上に調整） */ top: calc(var(--header-height) - 1px); left: 0; width: 100%; z-index: 200; } @media screen and (max-width: 767px) { .drawer_menu, #tagsearch { /* スマホの場合は固定値 */ top: 60px; padding: 2rem 3rem; } } @media screen and (max-width: 1060px) { #drawer_menu_block { display: none; position: relative; z-index: 10000; padding-bottom: 40px; position: fixed; overflow-y: auto; /* ヘッダーの高さに基づいた動的な位置調整（2px上に調整） */ top: calc(var(--header-height) - 2px); left: 0; width: 100%; height: calc(100vh - var(--header-height) + 2px); background-color: #fff; padding-top: 40px; } #drawer_menu_block.is-open { display: grid !important; grid-template-columns: 1fr 1fr; -moz-column-gap: 20px; column-gap: 20px; } #drawer_menu_block .drawer_menu { position: static; visibility: visible; padding: 0 5vw; } #drawer_menu_block .drawer_menu .inner { display: block; opacity: 1; } #drawer_menu_block .drawer_menu .inner .title { display: block; width: 100%; margin-bottom: 0 !important; border-bottom: 1px solid #999; } #drawer_menu_block .drawer_menu .inner .title p.en { margin-right: 0; padding: 8px 0; } #drawer_menu_block .drawer_menu .inner .title a { display: block; width: 100%; position: relative; } #drawer_menu_block .drawer_menu .inner .title a::before { content: ""; display: block; position: absolute; width: 8px; height: 8px; right: 10px; top: 14px; border-top: 1px solid #000; border-right: 1px solid #000; transform: rotate(45deg); } #drawer_menu_block .drawer_menu .inner .boxs { display: block; border-bottom: 1px solid #999; padding: 0.5rem 0; } #drawer_menu_block .drawer_menu .inner .boxs li a { position: relative; padding: 1em 0; } #drawer_menu_block .drawer_menu .inner .boxs li a::after { content: none; } #drawer_menu_block .drawer_menu .inner .boxs li a::before { content: ""; display: block; position: absolute; width: 8px; height: 8px; right: 10px; top: 18px; border-top: 1px solid #000; border-right: 1px solid #000; transform: rotate(45deg); } #drawer_menu_block .drawer_menu .inner .boxs li a img { display: none; } #drawer_menu_block .drawer_menu .inner .boxs li a span { position: static; color: #000; } } @media screen and (max-width: 767px) { #drawer_menu_block { padding-top: 20px; top: 60px; } #drawer_menu_block.is-open { display: block !important; } } .drawer_menu { display: block; visibility: hidden; padding: 3rem 5rem; } .drawer_menu .bg { display: block; position: absolute; width: 100%; height: 0; top: 0; left: 0; content: ""; z-index: 0; background: #ffffff; max-height: 0; opacity: 0; transition: height 0.5s ease, max-height 0.5s ease, opacity 0.5s ease; transition-delay: 0.3s; /* 消える時はdrawer_flexが消えた後に消える */ } .drawer_menu .inner { max-width: 100%; position: relative; z-index: 10; opacity: 0; transition: all 0.2s ease; transition-delay: 0s; /* 高さを自動調整に変更 */ height: auto; min-height: auto; } @media screen and (max-width: 767px) { .drawer_menu .inner { opacity: 1; } } .drawer_menu .inner .title { display: flex; align-items: baseline; margin: 0 0 3rem 0; margin: 0 0 1rem 0; } .drawer_menu .inner .title p.en { margin: 0 1em 0 0; letter-spacing: 0.1em; color: #E60000; font-size: var(--fluid-2); } .drawer_menu .inner .title p.jp { margin: 0 1rem 0 0; } .drawer_menu.is-open { visibility: visible; /* drawer_flexを0.3秒遅らせて表示 */ } .drawer_menu.is-open .inner { opacity: 1; transition-delay: 0.3s; } .drawer_menu.is-open .bg { /* コンテンツに合わせた高さに調整 */ height: 100%; max-height: none; min-height: 100%; /* 親要素の高さに合わせる */ opacity: 1; transition-delay: 0s; /* 開く時は即座に表示 */ } .drawer_menu.is-open .drawer_flex { opacity: 1; transform: translateY(0); transition-delay: 0.3s; } .drawer_flex { display: grid; grid-template-columns: repeat(4, 1fr); grid-column-gap: 30px; grid-row-gap: 30px; /* 初期状態は透明で遅延設定 */ opacity: 0; transform: translateY(20px); transition: opacity 0.3s ease, transform 0.3s ease; transition-delay: 0s; } .drawer_flex.four .box { width: 24%; } .drawer_flex .image { position: relative; } .drawer_flex .image .icons { position: absolute; top: 0; right: 0; z-index: 30; line-height: 2; width: 80px; } .drawer_flex .image .icons p { display: block; background: #E60000; color: #ffffff; text-align: center; } .drawer_flex .image .icons2 { position: absolute; top: 1.5em; right: 0; z-index: 30; line-height: 2; width: 80px; } .drawer_flex .image .icons2 p { display: block; background: #321a7b; color: #ffffff; text-align: center; } .drawer_flex .box.noimages { background: #fafafa; padding: 2rem; transition: all 0.3s ease; } .drawer_flex .box.noimages:hover { background: #E60000; color: #ffffff; } .drawer_flex .box .image { margin: 0 0 0.5em 0; } .drawer_flex .box:hover .txt .icon { background: #301BB4; } .drawer_flex .box .txt { position: relative; display: flex; } .drawer_flex .box .txt.btnss { background: #d1d3db; color: #000; color: #ffffff; padding: 2rem; justify-content: space-between; transition: all 0.3s ease; } .drawer_flex .box .txt.btnss:hover { background: #3865DB; } .drawer_flex .box .txt.btnss:hover p { color: #ffffff; } .drawer_flex .box .txt.btnss p { color: #000; } .drawer_flex .box .txt .icon { width: 30px; height: 20px; background: #000; border-radius: 30px; text-align: center; line-height: 1; margin: 0 0 0 1rem; } .drawer_flex .box .txt .icon img[src$=".svg"], .drawer_flex .box .txt .icon img { width: 10px; line-height: 0; margin: auto; } .drawer_flex .box .txt .profile { font-size: 1.5rem; line-height: 1.4; } .drawer_flex .box .txt .arrows { position: absolute; top: 50%; right: 2%; transform: translateY(-50%); transform-origin: center; display: inline-block; display: flex; justify-content: center; align-items: center; transition: all 0.3s ease; } .drawer_flex .box .txt .arrows .bround { content: ""; position: absolute; top: 50%; left: 50%; transform: translateX(-50%) translateY(-50%); width: 30px; height: 30px; border-radius: 50%; border: 1px solid #ccc; background: #ffffff; transition: all 0.3s ease; } .drawer_flex .box .txt p { font-size: 0.875em; font-feature-settings: "palt"; } .drawer_flex .box .image { position: relative; } .drawer_flex .box .image::before { display: block; position: absolute; width: 100%; height: 100%; top: 0; left: 0; content: ""; z-index: 2; background: transparent linear-gradient(52deg, #938BC3 0%, #D37EBE 100%) 0% 0% no-repeat padding-box; opacity: 0; transition: all 0.3s ease; } .drawer_flex .box .image.bgs { display: block; height: 200px; background: #E60000; } /* FOOTER ================================================== */ footer { border-top: 6px solid #E60000; padding: 10rem 0; margin: 0; position: relative; z-index: 5; background: #ffffff; } @media screen and (max-width: 767px) { footer { margin: 0; } } @media screen and (max-width: 767px) { footer #footer_nav { padding: 2rem 0 0 0; } } footer #footer_nav ul { display: flex; justify-content: center; } footer #footer_nav ul li a { padding: 0 2em; border-right: 1px solid #ccc; } @media screen and (max-width: 767px) { footer #footer_nav ul li a { font-size: 12px; } } footer #footer_nav ul li a:hover { color: #E60000; } footer #footer_nav ul li:last-child a { border-right: 0; } footer .copyright { text-align: center; padding: 3rem 0 5rem 0; font-size: 14px; font-feature-settings: "palt"; } @media screen and (max-width: 767px) { footer .copyright { font-size: 10px; } } #pagetop { position: fixed; right: 2%; bottom: 2%; cursor: pointer; transition: all 0.3s ease; z-index: 200; width: 4vw; height: 4vw; border-radius: 50%; background: #fff; content: ""; display: block; } @media screen and (max-width: 767px) { #pagetop { height: 46px; width: 46px; height: auto; aspect-ratio: 1; } } #pagetop::after { content: ""; position: absolute; top: 50%; left: 50%; transform: translateX(-50%) translateY(-50%); z-index: 201; color: #E60000; font-size: 2em; display: inline-block; width: 1em; height: 1em; --svg: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='none' stroke='%23000' stroke-linecap='round' stroke-linejoin='round' d='m19 12l-7-7l-7 7m7-7v14' 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%; } @media screen and (max-width: 767px) { #pagetop::after { width: 80%; height: 80%; } } #pagetop:hover { background: #333; color: #ffffff; } @keyframes pagetop { 0% { transform: translateY(0); } 100% { transform: translateY(-4px); } } .tatete { /* vertical-rl を基準 */ writing-mode: vertical-rl; /* mixed */ text-orientation: mixed; /* upright */ text-orientation: upright; /* sideways */ text-orientation: sideways; } .grbg { background: transparent linear-gradient(52deg, #820000 0%, #E60000 100%) 0% 0% no-repeat padding-box; } .mainoverlay { display: block; width: 100%; height: 100%; top: 0; left: 0; content: ""; z-index: 999; background: rgba(0, 0, 0, 0.8); position: fixed; display: none; } .mainoverlay.is-open { display: block; } .hi .image { overflow: hidden !important; line-height: 1; } .hi .image img { transition: all 0.5s ease; will-change: transform; } .hi:hover .image img { transform: scale(1.05); } .tatetes { writing-mode: vertical-rl; line-height: 1.4; } .tatetes span.numbers { text-combine-upright: all; } @media screen and (max-width: 767px) { .tatetes { writing-mode: horizontal-tb; } } .menuoverlay { width: 100%; height: 100%; background: rgba(0, 0, 0, 0.8); position: fixed; z-index: 50; display: none; content: ""; opacity: 0; } .menuoverlay.is-open { display: block; opacity: 1; animation: fadeIns 0.3s ease-in 0s forwards; } @keyframes fadeIns { 0% { display: none; opacity: 0; } 1% { display: block; opacity: 0; } 100% { display: block; opacity: 1; } } /*============ #spmenu =============*/ /*============================= .btn-trigger =============================*/ #spmenu { padding: 2.5rem 1.5rem 2rem 1.5rem; background: #E60000; line-height: 1; display: none; } @media screen and (max-width: 1060px) { #spmenu { display: block; } } @media screen and (max-width: 767px) { #spmenu { display: block; padding: 1.2rem 1.5rem 1rem 1.5rem; } } .btn-trigger { position: relative; width: 50px; height: 24px; cursor: pointer; } @media screen and (max-width: 767px) { .btn-trigger { width: 30px; } } .btn-trigger span { position: absolute; left: 0; width: 100%; height: 1px; background-color: #fff; } .btn-trigger, .btn-trigger span { display: inline-block; transition: all 0.5s; box-sizing: border-box; } .btn-trigger span:nth-of-type(1) { top: 0; } .btn-trigger span:nth-of-type(2) { top: 12px; } .btn-trigger span:nth-of-type(3) { bottom: 0; } /*============================= #btn06 =============================*/ #btn06.active span:nth-of-type(1) { transform: translateY(12px) rotate(-45deg); } #btn06.active span:nth-of-type(2) { left: 200%; opacity: 0; transform: translateY(12px); animation: active-btn06-bar02 0.8s forwards; } @keyframes active-btn06-bar02 { 100% { height: 0; } } #btn06.active span:nth-of-type(3) { transform: translateY(-12px) rotate(45deg); } /* FOOTER DESIGN ================================================== */ footer { padding: 60px 0 0; } @media screen and (max-width: 767px) { footer { padding: 0; } } footer .footer-main { margin: 0 auto; padding: 0 5vw; display: flex; justify-content: space-between; gap: 60px; } @media screen and (max-width: 767px) { footer .footer-main { flex-direction: column; gap: 40px; display: none; } } footer .footer-left { width: 300px; } @media screen and (max-width: 767px) { footer .footer-left { width: 100%; } } footer .footer-brand .site-title { line-height: 1.4; margin-bottom: 20px; color: #ccc; } footer .footer-brand .copy-image { margin-bottom: 5rem; width: 240px; } footer .footer-brand .copy-image img { width: auto; height: 60px; } footer .footer-brand .logo { margin-bottom: 5rem; } footer .footer-brand .logo img { width: 160px; height: auto; } footer .footer-brand .career-btn a { display: inline-block; padding: 12px 24px; border: 1px solid #555; color: #fff; text-decoration: none; transition: all 0.3s ease; } footer .footer-brand .career-btn a:hover { background-color: #fff; color: #333; } footer .footer-links { flex: 1; display: flex; justify-content: space-between; gap: 3rem; } @media screen and (max-width: 1060px) { footer .footer-links { flex-wrap: wrap; } } footer .footer-links .block { width: 30%; } @media screen and (max-width: 1060px) { footer .footer-links .block { width: 44%; } } footer .footer-links .block.wide { width: 40%; } @media screen and (max-width: 1060px) { footer .footer-links .block.wide { width: 100%; } } @media screen and (max-width: 767px) { footer .footer-links { flex-direction: column; gap: 30px; } } footer .link-section { margin: 0 0 2rem 0; flex: 1; } footer .link-section h3 { letter-spacing: 0.05em; font-weight: 300; margin-bottom: 20px; color: #fff; font-family: "Inter", sans-serif; border-bottom: 1px solid #666; } footer .link-section ul { list-style: none; } footer .link-section ul li { margin-bottom: 8px; } footer .link-section ul li a { color: #ccc; text-decoration: none; line-height: 1.4; transition: color 0.3s ease; } footer .link-section ul li a:hover { color: #fff; } footer .interview-section { flex: 2; } footer .interview-section .interview-index .interview-names { display: flex; gap: 1rem; } footer .interview-section .interview-index .interview-names .name-column { flex: 1; } footer .interview-section .interview-index .interview-names .name-column p { line-height: 1.6; margin-bottom: 4px; color: #ccc; } footer .footer-bottom { padding: 20px 0; margin-top: 60px; } footer .footer-bottom .copyright { padding: 0 3vw; color: #999; text-align: left; } /* ----------------------------------------- Visual Header ----------------------------------------- */ #visual_header { position: relative; width: 100%; height: 40vh; min-height: 360px; overflow: hidden; } #visual_header.threemin { height: 70vh; min-height: 600px; } #visual_header.threemin .image { position: fixed; top: 0; left: 0; width: 100%; z-index: 0; } #visual_header.threemin .txt { width: 100%; left: 0; text-align: center; top: 50%; left: 50%; transform: translateX(-50%) translateY(-50%); } #visual_header.threemin .txt h1 { margin: 2rem 0 10rem 0; line-height: 1.6; font-feature-settings: "palt"; } @media screen and (max-width: 767px) { #visual_header.threemin .txt h1 { margin: 2rem 0; } } #visual_header.threemin .txt p.en { text-align: center; } @media screen and (max-width: 767px) { #visual_header.threemin .txt { padding: 0 8vw; } #visual_header.threemin .txt p { text-align: left; } #visual_header.threemin .txt p br { display: none; } } @media screen and (max-width: 767px) { #visual_header { height: 240px; min-height: auto; } } #visual_header .image { width: 100%; height: 100%; position: relative; } #visual_header .image::before { content: ""; display: block; position: absolute; width: 100%; height: 100%; top: 0; left: 0; content: ""; z-index: 3; background: rgba(0, 0, 0, 0.5); } #visual_header .image img { width: 100%; height: 100%; -o-object-fit: cover; object-fit: cover; } #visual_header .txt { position: absolute; top: 50%; left: 5%; transform: translateY(-50%); z-index: 5; } #visual_header .txt .lead { color: #ffffff; } @media screen and (max-width: 767px) { #visual_header .txt { top: 60%; } } #visual_header .txt h1 { line-height: 1.2; margin-bottom: 2rem; letter-spacing: 0.05em; color: #ffffff; } #visual_header .txt .en { font-size: 1.6rem; color: #E60000; } @media screen and (max-width: 767px) { #visual_header .txt .en { font-size: 1.2rem; } } #novisual_header { position: relative; width: 100%; height: 30vh; min-height: 400px; overflow: hidden; } @media screen and (max-width: 767px) { #novisual_header { min-height: 0; height: auto; } } #novisual_header.nop { height: 300px; min-height: 300px; } @media screen and (max-width: 767px) { #novisual_header.nop { height: 200px; min-height: 200px; } } #novisual_header.nop .txt { position: static; transform: none; padding: 10rem 0 0 5vw; } @media screen and (max-width: 767px) { #novisual_header.nop .txt { margin: 0; } } #novisual_header.nop .txt h1 { color: #000; } #novisual_header .txt { position: absolute; top: 50%; left: 26%; transform: translateY(-50%); z-index: 5; color: #E60000; } @media screen and (max-width: 767px) { #novisual_header .txt { position: static; margin: calc(5rem + 60px) 0 2rem; padding: 0; } } /* ----------------------------------------- Contents ----------------------------------------- */ .contents { padding: 10rem 0; position: relative; z-index: 5; } .contents.wide { padding: 0; } @media screen and (max-width: 767px) { .contents { padding: 5vw 0; } } .contents .inner { width: 100%; margin: 0 auto; padding: 0 5vw; max-width: 1300px; } .contents .inner.wide { max-width: 100%; } .contents .inner.narrow { max-width: 900px; } @media screen and (max-width: 767px) { .contents .inner.narrow { max-width: 100%; } } .contents .inner.narrow.message p { margin: 0 0 2em 0; } .contents .inner h2 { margin-bottom: 5rem; line-height: 1.4; letter-spacing: 0.05em; } @media screen and (max-width: 767px) { .contents .inner h2 { font-size: 1.8rem; margin-bottom: 3rem; } } .contents .inner p { line-height: 2; letter-spacing: 0.05em; } .contents .inner p:last-child { margin-bottom: 0; } @media screen and (max-width: 767px) { .contents .inner p { line-height: 1.8; margin-bottom: 2em; } } .plusminus { position: relative; width: 25px; height: 25px; cursor: pointer; } @media screen and (max-width: 767px) { .plusminus { width: 20px; height: 20px; } } .plusminus.active:before { transform: translatey(-50%) rotate(-90deg); opacity: 0; } .plusminus.active:after { transform: translatey(-50%) rotate(0); } .plusminus:before, .plusminus:after { content: ""; display: block; background-color: #E60000; position: absolute; top: 50%; left: 0; transition: 0.35s; width: 100%; height: 2px; } @media screen and (max-width: 767px) { .plusminus:before, .plusminus:after { height: 1px; } } .plusminus:before { transform: translatey(-50%); } .plusminus:after { transform: translatey(-50%) rotate(90deg); } /* ----------------------------------------- FAQ Section ----------------------------------------- */ @media screen and (max-width: 767px) { #faq .contents .inner.wide { padding: 0; } } .faq_section { background: #F4F3F2; padding: 8vw 0; } @media screen and (max-width: 767px) { .faq_section .inner { padding: 8vw 2vw; } } .faq_section.under { padding: 4vw 0; margin: 0 0 5rem 0; } .faq_section.under .inner { max-width: 100%; } .faq_section a.txtlink { position: relative; display: inline-block; color: #E60000; font-feature-settings: "palt"; } .faq_section a.txtlink::before { position: absolute; left: 0; content: ""; width: 100%; height: 1px; background: #E60000; bottom: -1px; transform: scale(0, 1); transform-origin: right top; /*変形（アンダーラインの伸長）の原点がaタグ（各メニュー）の右端*/ transition: transform 0.3s; /*変形の時間*/ } .faq_section a.txtlink:hover::before { transform: scale(1, 1); /*ホバー後、x軸方向に1（相対値）伸長*/ transform-origin: left top; /*左から右に向かう*/ } .faq_section .inner { max-width: 1400px; margin: auto; } .faq_section .inner.mbs { margin: 0 auto 10rem auto; } @media screen and (max-width: 767px) { .faq_section { padding: 8vw 3vw; } } .faq_section .faq_header { display: flex; align-items: baseline; margin-bottom: 6rem; } .faq_section .faq_header.under { margin-bottom: 0; } @media screen and (max-width: 767px) { .faq_section .faq_header { margin-bottom: 3rem; } } .faq_section .faq_en { color: #E60000; font-size: clamp(2rem, 5vw, 4.8rem); margin: 0 1em 0 0; } .faq_section .faq_title { color: #E60000; } .faq_section .faq_list { margin: 0 auto; } .faq_section .faq_item { background: #ffffff; margin-bottom: 2rem; } .faq_section .faq_item:last-child { margin-bottom: 0; } .faq_section .faq_q { display: flex; align-items: center; gap: 1.2rem; padding: 3.4rem 5.1rem; cursor: pointer; transition: all 0.3s ease; } @media screen and (max-width: 767px) { .faq_section .faq_q { align-items: flex-start; padding: 2.5rem 1rem; } } .faq_section .faq_q:hover { opacity: 0.8; } .faq_section .faq_q .plusminus { margin: 0 0 0 auto; } @media screen and (max-width: 767px) { .faq_section .faq_q .plusminus { margin: 0.5rem 0 0 auto; width: 16px; height: 16px; } } .faq_section .faq_q_mark { color: #E60000; font-size: clamp(1.6rem, 1.8vw, 2rem); } .faq_section .faq_question { font-size: clamp(1.6rem, 1.8vw, 2rem); } .faq_section .faq_a { padding-left: calc(clamp(1.6rem, 1.8vw, 2rem) + 1em); transition: all 0.3s ease; height: 0; overflow: hidden; will-change: height; padding: 0 5.1rem; } @media screen and (max-width: 767px) { .faq_section .faq_a { padding: 0 2rem; } } .faq_section .faq_a p { padding: 2rem 0 5rem 0; margin: 0 0 3rem 0; } @media screen and (max-width: 767px) { .faq_section .faq_a p { padding: 0 0 2rem 0; } } #sticky_cont { min-height: 100vh; } #sticky_cont .inner { min-height: 100vh; align-items: start; display: grid; grid-template-columns: 1fr 4fr; gap: 3vw; padding: 0 5vw; overflow: visible; } @media screen and (max-width: 767px) { #sticky_cont .inner { grid-template-columns: 1fr; } } #sticky_cont .left { position: sticky; top: calc(var(--header-height, 140px) + 2em); z-index: 10; } @media screen and (max-width: 767px) { #sticky_cont .left { display: none; } } #sticky_cont .left ul li a { color: #E60000; margin: 0 0 0.8em 0; display: block; line-height: 1.5; font-size: 0.9em; opacity: 0.5; } #sticky_cont .left ul li a.active, #sticky_cont .left ul li a:hover { font-weight: 500; position: relative; opacity: 1; } #sticky_cont .left ul li a.active::before, #sticky_cont .left ul li a:hover::before { content: ""; width: 0.8em; height: 0.8em; display: block; background: #E60000; border-radius: 50%; position: absolute; top: 0.4em; left: -1.4em; } @media screen and (max-width: 767px) { #sticky_cont .right { width: 100%; } } #bread { display: flex; padding: 1rem 2rem; border-bottom: 1px solid #eee; width: 100%; position: absolute; z-index: 10; } #bread.white { color: #ffffff; border-bottom: 1px solid #ffffff; } #bread ul { display: flex; gap: 1rem; } #bread ul li { font-size: 12px; } @media screen and (max-width: 767px) { #bread ul li { font-size: 10px; } } #bread ul li a { text-decoration: none; } #bread ul li a:hover { text-decoration: underline; } #bread ul li svg { font-size: 0.8em; line-height: 1; vertical-align: middle; display: inline-block; margin: -0.2em 0 0 0.5em; } .related_link { position: relative; z-index: 5; background: #ffffff; } .related_link .inner { padding: 5vw 8vw; } .related_link .inner p.title { font-size: var(--fluid-2); margin: 0 0 3rem 0; font-weight: 500; } .related_link .inner .related_links { display: grid; grid-template-columns: repeat(4, 1fr); gap: 30px; justify-content: space-between; } .related_link .inner .related_links a { display: block; } .related_link .inner .related_links .image { position: relative; line-height: 0; } .related_link .inner .related_links .comingsoon { pointer-events: none; color: #888; } .related_link .inner .related_links .comingsoon .image::before { content: "coming soon"; position: absolute; width: 100%; height: 100%; left: 0; top: 0; color: #fff; font-weight: 500; display: flex; align-items: center; justify-content: center; z-index: 1; } .related_link .inner .related_links .comingsoon .image::after { content: ""; position: absolute; width: 100%; height: 100%; left: 0; top: 0; background: rgba(0, 0, 0, 0.4); z-index: 0; } @media screen and (max-width: 767px) { .related_link .inner .related_links { display: block; } .related_link .inner .related_links a { margin: 0 0 3rem 0; } } .related_link .inner .related_links .image { margin: 0 0 1rem 0; } p.etc { text-align: right; margin: 0 !important; } /** * Modules in this bundle * @license * * scroll-hint: * license: MIT (http://opensource.org/licenses/MIT) * author: steelydylan * version: 1.2.8 * * es6-object-assign: * license: MIT (http://opensource.org/licenses/MIT) * author: Rubén Norte * homepage: https://github.com/rubennorte/es6-object-assign * version: 1.1.0 * * This header is generated by licensify (https://github.com/twada/licensify) */ @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% - 25px); left: calc(50% - 60px); box-sizing: border-box; width: 120px; height: auto; border-radius: 5px; transition: opacity 0.3s; opacity: 0; background: rgba(0, 0, 0, 0.7); text-align: center; padding: 20px 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: 40px; height: 40px; 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; } @media screen and (max-width: 767px) { .js-scroll img { max-width: none; width: 800px; } }