@import url("https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,100..900;1,100..900&family=Zen+Kaku+Gothic+New:wght@400;500;700&display=swap"); /*** 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, select):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%; } /* 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%; } @media screen and (max-width: 767px) { html { font-size: 2.5vw; } } body { overflow-x: hidden; font-family: "Zen Kaku Gothic New", sans-serif; font-size: 1.6rem; line-height: 2; font-weight: 400; color: #3C3C3C; letter-spacing: 1px; } body.menu-open { overflow: hidden; } .en { font-family: "Montserrat", sans-serif; font-optical-sizing: auto; font-weight: 400; } a { transition: all 0.3s ease; } a img { transition: all 0.3s ease; } a:hover { color: #E83F24; } .ly_container { position: relative; } .inview { opacity: 0; } .inviewwrap { position: absolute; top: 0; width: 100%; height: 100%; } .inview.active { animation: fadeInup 1s ease-out; animation-fill-mode: forwards; } .inview.noanimation { opacity: 1; animation: none; } .inview.active.left { 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 fadeOut { 0% { opacity: 1; } 100% { opacity: 0; } } @keyframes fadeInup { 0% { transform: translateY(50px); 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; } } .slash-title { display: inline-block; padding: 10px 50px 10px 20px; font-weight: bold; color: #fff; clip-path: polygon(0 0, 100% 0, calc(100% - 33px) 100%, 0 100%); background: linear-gradient(90deg, #133BA3 0%, #3865DB 100%); } a .zoom { display: block; position: relative; overflow: hidden; line-height: 0; border-radius: 6px; } a .zoom .image img { transform-origin: center; transition: all 1.5s cubic-bezier(0.19, 1, 0.22, 1); } a.zoom:hover .image img, a:hover .zoom .image img { transform: scale(1.05); opacity: 1; } .sp { display: none !important; } @media screen and (max-width: 767px) { .pc { display: none !important; } .sp { display: block !important; } } .inner { max-width: calc(1080px + 6%); margin: auto; padding: 0 3%; } .inner.short { max-width: calc(1042px + 6%); } main { padding-top: 90px; background-color: #FAF8F2; } @media screen and (max-width: 767px) { main { padding-top: 70px; } } /* HEADER ================================================== */ #header { position: fixed; top: 0px; left: 0px; width: 100%; height: 90px; z-index: 500; background-color: rgba(255, 255, 255, 0.9); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); transition: height 0.2s ease; padding: 0 0 0 3%; position: fixed; align-items: center; } @media screen and (max-width: 820px) { #header { padding-right: 0; } } @media screen and (max-width: 767px) { #header { display: flex; padding: 0; height: 70px; } } #header .header-layout-main { position: relative; display: flex; justify-content: space-between; align-items: center; width: 100%; height: 90px; z-index: 200; } @media screen and (max-width: 970px) { #header .header-layout-main { padding-block: 0; } } @media screen and (max-width: 767px) { #header .header-layout-main { padding: 0 0; height: 70px; } } #header .header-layout-main .header-logo { position: relative; display: flex; width: 320px; gap: 15px; align-items: baseline; } @media screen and (max-width: 767px) { #header .header-layout-main .header-logo { padding: 0 3%; width: auto; } #header .header-layout-main .header-logo img { width: 100px; } } #header .header-layout-main .header-logo .logo { line-height: 0; } #header .header-layout-main .header-logo .logo a { display: block; margin-bottom: 8px; } @media screen and (max-width: 767px) { #header .header-layout-main .header-logo .logo a { margin-bottom: 0; } } #header .header-layout-main .header-logo .sub { display: inline-block; line-height: 1; letter-spacing: 1px; font-weight: bold; font-size: clamp(1.2rem, 0.736rem + 0.6vw, 1.6rem); } @media screen and (max-width: 767px) { #header .header-layout-main .header-logo .sub { font-size: 1.1rem; } } #header #header-submenu { flex: 1; display: flex; justify-content: flex-end; } @media screen and (max-width: 767px) { #header #header-submenu { flex-direction: column; align-items: flex-end; margin-right: 12px; } } @media screen and (max-width: 1010px) { #header #header-submenu .pc { display: none; } } #header #header-submenu li a { display: block; font-weight: bold; line-height: 1; text-align: center; } #header #header-submenu li.nav1 { margin-right: 12px; } #header #header-submenu li.nav1 a { border: 2px solid #E83F24; border-radius: 20px; background-color: #FAF8F2; color: #5B5B56; font-size: 1.2rem; padding: 7px 13px; height: 30px; display: flex; } #header #header-submenu li.nav1 a img { margin-left: 10px; vertical-align: middle; } #header #header-submenu li.nav1 a:hover { color: #E83F24; } #header #header-submenu li.nav2 { margin-right: 6px; } @media screen and (max-width: 767px) { #header #header-submenu li.nav2 { width: 50%; min-width: 72px; max-width: 120px; margin-right: 0; } } #header #header-submenu li.nav2 a { font-size: 1.5rem; padding: 10px 15px; color: #fff; background-color: #E83F24; border: 2px solid #E83F24; padding: 6px; text-align: center; width: 140px; } @media screen and (max-width: 767px) { #header #header-submenu li.nav2 a { font-size: clamp(1.2rem, 2.8vw, 1.6rem); width: 100%; padding: 0 5px; height: 56px; display: flex; align-items: center; justify-content: center; } } #header #header-submenu li.nav2 a:hover { background-color: #eb7e76; color: #fff; } @media screen and (max-width: 767px) { #header #header-submenu li.nav3 { width: 50%; min-width: 72px; max-width: 120px; } } #header #header-submenu li.nav3 a { font-size: 1.5rem; padding: 10px 15px; color: #fff; background-color: #3C3C3C; border: 2px solid #3C3C3C; padding: 6px; text-align: center; width: 108px; } @media screen and (max-width: 767px) { #header #header-submenu li.nav3 a { font-size: clamp(1rem, 2.5vw, 1.4rem); width: 100%; } } #header #header-submenu li.nav3 a:hover { background-color: #979797; color: #fff; } @media screen and (max-width: 767px) { #header #header-submenu li.nav4 { width: 50%; min-width: 72px; max-width: 120px; } } #header #header-submenu li.nav4 a { font-size: 1.5rem; padding: 10px 15px; color: #3C3C3C; background-color: #fff; border: 2px solid #3C3C3C; padding: 6px; text-align: center; width: 108px; } @media screen and (max-width: 767px) { #header #header-submenu li.nav4 a { font-size: clamp(1rem, 2.5vw, 1.4rem); width: 100%; } } #header #header-submenu li.nav4 a:hover { background-color: #979797; color: #fff; } #sp-mm { position: relative; height: 78px; width: 120px; cursor: pointer; z-index: 200; } @media screen and (max-width: 767px) { #sp-mm { width: 70px; height: 75px; } } #sp-mm:focus-visible { outline: solid; } #sp-mm:hover .sp-mm-btn span:before { top: -10px; } #sp-mm:hover .sp-mm-btn span:after { bottom: -10px; } #sp-mm.close .sp-mm-btn { height: 82px; } #sp-mm .sp-mm-btn { position: relative; width: 75px; height: 65px; margin: auto; overflow: hidden; } @media screen and (max-width: 767px) { #sp-mm .sp-mm-btn { width: 70px; height: 62px; } } #sp-mm .sp-mm-btn span { display: block; height: 82px; } #sp-mm.close .sp-mm-btn span { background-color: transparent; } #sp-mm.close .sp-mm-btn span:before { animation: close1 0.3s cubic-bezier(0.075, 0.82, 0.165, 1) forwards; } #sp-mm.close .sp-mm-btn span:after { animation: close2 0.3s cubic-bezier(0.075, 0.82, 0.165, 1) forwards; } @keyframes close1 { 0% { top: -8px; transform: rotate(0); } 50% { top: 0px; transform: rotate(0); } 100% { top: 0px; transform: rotate(-45deg); } } @keyframes close2 { 0% { bottom: -8px; transform: rotate(0); } 50% { bottom: 0px; transform: rotate(0); } 100% { bottom: 0px; transform: rotate(45deg); } } body.menu-open { position: relative; } body.menu-open::after { content: ""; display: block; position: fixed; width: 100%; height: 100%; top: 0; left: 0; background-color: rgba(255, 255, 255, 0.9); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); z-index: 10; } body.menu-open #header { background: transparent; } #sp-menu { display: none; position: fixed; left: 0; top: 90px; width: 100%; height: 100vh; z-index: 210; padding-block: 50px; height: calc(100svh - 90px); overflow-y: auto; } @media screen and (max-width: 767px) { #sp-menu { top: 100px; padding-top: 20px; } } #sp-menu .inner { display: flex; justify-content: space-between; gap: 5%; max-width: calc(1280px + 6%); } @media screen and (max-width: 1045px) { #sp-menu .inner { max-width: 700px; flex-wrap: wrap; justify-content: center; gap: 0; } } @media screen and (max-width: 767px) { #sp-menu .inner { display: block; padding: 0 3%; } } #sp-menu .inner .col { position: relative; width: 28%; } @media screen and (max-width: 1045px) { #sp-menu .inner .col { width: 46%; margin-bottom: 5rem; } } @media screen and (max-width: 767px) { #sp-menu .inner .col { width: 100%; margin-bottom: 0rem; } } #sp-menu .inner .col.short { width: 22%; } @media screen and (max-width: 1045px) { #sp-menu .inner .col.short { width: 46%; } } @media screen and (max-width: 767px) { #sp-menu .inner .col.short { width: 100%; } } #sp-menu .inner .col h2 { position: relative; margin-bottom: 30px; font-weight: 500; color: #E83F24; } @media screen and (max-width: 767px) { #sp-menu .inner .col h2 { position: relative; margin-bottom: 0; border-bottom: 2px solid #E83F24; padding: 12px 0; } #sp-menu .inner .col h2::before { content: ""; display: block; position: absolute; height: 25px; width: 2px; background-color: #E83F24; top: 50%; right: 12px; transform: translateY(-50%); transition: all 0.3s ease; } #sp-menu .inner .col h2::after { content: ""; display: block; position: absolute; width: 24px; height: 2px; background-color: #E83F24; top: 50%; right: 1px; transform: translateY(-50%); } #sp-menu .inner .col h2.open::before { transform: translateY(-50%) rotate(90deg); } } #sp-menu .inner .col h2 .en { display: block; font-weight: bold; font-size: clamp(3rem, 2.304rem + 0.9vw, 3.6rem); line-height: 1; } #sp-menu .inner .col h2 .jp { display: block; font-weight: bold; letter-spacing: 2px; } @media screen and (max-width: 767px) { #sp-menu .inner .col ul { padding-bottom: 20px; display: none; } } @media screen and (max-width: 767px) { #sp-menu .inner .col ul li { margin-bottom: 0; } } #sp-menu .inner .col ul li a { font-size: clamp(1.2rem, 0.924rem + 0.4vw, 1.5rem); font-weight: bold; } #sp-menu .inner .col ul li a:hover { text-decoration: underline; } @media screen and (max-width: 767px) { #sp-menu .inner .col ul li a { display: block; padding: 12px 0; font-size: 1.6rem; } } #sp-menu .inner .col ul li a .mark { display: inline-block; width: 17px; height: 17px; margin-left: 10px; vertical-align: -2px; } #sp-menu .inner .col ul.people-list { max-width: 300px; } @media screen and (max-width: 767px) { #sp-menu .inner .col ul.people-list { max-width: none; width: 100%; padding-top: 2rem; } } #sp-menu .inner .col ul.people-list li { margin-bottom: 15px; } #sp-menu .inner .col ul.people-list li a { position: relative; display: flex; align-items: center; gap: 15px; border-bottom: 1px dashed #E83F24; padding: 6px 0; padding-right: 60px; } #sp-menu .inner .col ul.people-list li a .num { width: 40px; font-size: clamp(2rem, 1.536rem + 0.6vw, 2.4rem); line-height: 1; color: #E83F24; font-weight: bold; transform: scaleX(0.7); } @media screen and (max-width: 767px) { #sp-menu .inner .col ul.people-list li a .num { font-size: 3rem; } } #sp-menu .inner .col ul.people-list li a .name { flex: 1; font-size: clamp(1.2rem, 0.924rem + 0.4vw, 1.5rem); line-height: 1; } @media screen and (max-width: 767px) { #sp-menu .inner .col ul.people-list li a .name { font-size: 1.6rem; } } #sp-menu .inner .col ul.people-list li a .arrow { width: 18px; } #sp-menu .inner .col ul.people-list li a .image { position: absolute; right: 0; width: 45px; aspect-ratio: 1; overflow: hidden; border-radius: 50%; } #sp-menu .inner .col .policy { position: absolute; bottom: 0; } @media screen and (max-width: 767px) { #sp-menu .inner .col .policy { display: block; position: static; margin-top: 30px; } } #sp-menu #header-submenu-sp { display: flex; justify-content: center; flex-wrap: wrap; gap: 5px; margin-bottom: 30px; } #sp-menu #header-submenu-sp li { width: 45%; margin-bottom: 5px; } #sp-menu #header-submenu-sp li a { display: block; font-weight: bold; line-height: 1; text-align: center; } #sp-menu #header-submenu-sp li.nav1 { width: 100%; text-align: center; } #sp-menu #header-submenu-sp li.nav1 a { border: 2px solid #E83F24; border-radius: 20px; background-color: #FAF8F2; color: #5B5B56; font-size: 1.2rem; padding: 7px 13px; height: 30px; display: inline-flex; justify-content: center; width: 50%; } #sp-menu #header-submenu-sp li.nav1 a img { margin-left: 10px; vertical-align: middle; } #sp-menu #header-submenu-sp li.nav2 { width: 100%; text-align: center; } #sp-menu #header-submenu-sp li.nav2 a { display: inline-block; padding: 20px 45px; color: #fff; width: 50%; background-color: #E83F24; border: 2px solid #E83F24; padding: 6px; text-align: center; font-size: 1.5rem; } #sp-menu #header-submenu-sp li.nav3 { margin-right: 6px; } #sp-menu #header-submenu-sp li.nav3 a { font-size: 1.5rem; padding: 10px 15px; color: #fff; background-color: #3C3C3C; border: 2px solid #3C3C3C; padding: 6px; text-align: center; } #sp-menu #header-submenu-sp li.nav4 a { font-size: 1.5rem; padding: 10px 15px; color: #3C3C3C; background-color: #fff; border: 2px solid #3C3C3C; padding: 6px; text-align: center; } /* FOOTER ================================================== */ #footer { height: 150px; background: #FAF8F2 url("/newgrads/assets/image/footer-copy.png") no-repeat center top; background-size: auto 86px; } @media screen and (max-width: 767px) { #footer { padding-block: 40px; background-size: 100% auto; } } @media screen and (max-width: 767px) { #footer .footer-in { display: block; } } #footer .footer-in #footer-left-logo { padding: 0 3% 20px; font-size: 2.4rem; font-weight: bold; line-height: 1.3; } @media screen and (max-width: 767px) { #footer .footer-in #footer-left-logo { font-size: 1.2rem; } } #footer .footer-in #footer-copyright { background-color: #FAF8F2; padding: 0 3% 20px; font-size: 1.2rem; text-align: right; padding-top: 30px; } @media screen and (max-width: 767px) { #footer .footer-in #footer-copyright { text-align: center; width: 100%; display: block; margin-top: 1rem; } } #footer-nav { background-color: #3C3C3C; color: #fff; padding: 5rem 0 5rem; } @media screen and (max-width: 767px) { #footer-nav { display: none; } } #footer-nav .inner { display: flex; gap: 5%; max-width: calc(1280px + 6%); } @media screen and (max-width: 960px) { #footer-nav .inner { flex-wrap: wrap; justify-content: center; } } #footer-nav .inner .col { position: relative; width: 25%; } @media screen and (max-width: 960px) { #footer-nav .inner .col { width: 46%; margin-bottom: 5rem; } } #footer-nav .inner .col h2 { margin-bottom: 30px; } #footer-nav .inner .col h2 .en { display: block; font-weight: bold; font-size: clamp(3rem, 2.304rem + 0.9vw, 3.6rem); line-height: 1; } #footer-nav .inner .col h2 .jp { display: block; font-weight: bold; letter-spacing: 2px; } #footer-nav .inner .col .policy { position: absolute; bottom: 0; } #pagetop { position: fixed; right: 5%; bottom: 5%; cursor: pointer; transition: all 0.3s ease; z-index: 2; } @media screen and (max-width: 767px) { #pagetop { right: 3%; } } #pagetop a { display: flex; align-items: center; justify-content: center; border: 1px solid #ccc; border-radius: 50%; width: 66px; height: 66px; line-height: 0; z-index: 100; background-color: rgba(255, 255, 255, 0.9); } #pagetop a:hover { background-color: #fff; } #pagetop a::after { content: ""; display: block; position: absolute; width: 14px; height: 14px; border-top: 2px solid #E83F24; border-right: 2px solid #E83F24; top: 50%; left: 50%; transform: translate(-40%, -25%) rotate(-45deg); } @media screen and (max-width: 767px) { #pagetop a { width: 50px; height: 50px; } } @keyframes pagetop { 0% { transform: translateY(0); } 100% { transform: translateY(-4px); } } #news #news-nav { background-color: #fff; border-bottom: 1px solid #E83F24; background: #fff url(/newgrads/assets/image/news/news.svg) no-repeat left top/auto 100%; padding: 30px 15px; } @media screen and (max-width: 767px) { #news #news-nav { background-size: 50% auto; background-position: left bottom; } } #news #news-nav ul { display: flex; justify-content: center; align-items: center; gap: 30px; } @media screen and (max-width: 767px) { #news #news-nav ul { flex-wrap: wrap; gap: 15px; } } #news #news-nav ul li { background-color: #3C3C3C; color: #fff; width: 50%; max-width: 270px; } @media screen and (max-width: 767px) { #news #news-nav ul li { width: calc(50% - 10px); } } #news #news-nav ul li a { position: relative; display: block; padding: 18px; line-height: 1; font-weight: bold; text-align: center; overflow: hidden; } @media screen and (max-width: 767px) { #news #news-nav ul li a { font-size: 1.4rem; padding-left: 6px; } } #news #news-nav ul li a::before { content: ""; display: block; position: absolute; height: 120%; width: 1px; background-color: #fff; top: -5px; left: 30px; transform: rotate(15deg); } #news #news-nav ul li a::after { content: ""; display: block; position: absolute; width: 8px; height: 8px; border-right: 1px solid #fff; border-bottom: 1px solid #fff; top: 50%; right: 20px; margin-top: -5px; transform: rotate(45deg); } @media screen and (max-width: 767px) { #news #news-nav ul li a::after { right: 8px; } } #news .content-block { padding-block: 90px 10px; } #news .content-block section { margin-bottom: 90px; } #news .content-block h2 { position: relative; background-color: #E83F24; color: #fff; text-align: center; font-size: 2.4rem; font-weight: bold; height: 120px; max-width: 780px; margin: 0 auto 60px; display: flex; align-items: center; justify-content: center; overflow: hidden; } @media screen and (max-width: 767px) { #news .content-block h2 { height: auto; padding: 20px; margin-bottom: 4rem; } } #news .content-block h2::before { content: ""; display: block; position: absolute; height: 130%; width: 2px; background-color: #fff; top: -5px; left: 50px; transform: rotate(15deg); } #news .content-block .lead { text-align: center; font-size: 2.4rem; font-weight: bold; color: #E83F24; margin-bottom: 60px; } @media screen and (max-width: 767px) { #news .content-block .lead { font-size: 1.7rem; margin-bottom: 30px; } } #news .content-block .message { color: #E83F24; font-weight: bold; text-align: center; } @media screen and (max-width: 767px) { #news .content-block .message { text-align: left; } } #news .content-block .normal { display: flex; justify-content: center; } #news .content-block .normal.center { text-align: center; } #news .content-block dl.data-table { margin: 40px auto 0; font-size: 1.6rem; display: flex; flex-wrap: wrap; } @media screen and (max-width: 767px) { #news .content-block dl.data-table { flex-direction: column; font-size: 1.4rem; } } #news .content-block dl.data-table dt { font-weight: bold; width: 15%; border-top: 1px solid #E83F24; padding: 30px 0 30px; color: #E83F24; position: relative; } @media screen and (max-width: 767px) { #news .content-block dl.data-table dt { width: 100%; padding: 15px 0; } } #news .content-block dl.data-table dt::after { content: ""; display: block; position: absolute; height: 30px; width: 1px; background-color: #E83F24; right: 0; top: 0; } @media screen and (max-width: 767px) { #news .content-block dl.data-table dt::after { display: none; } } #news .content-block dl.data-table dd { width: 85%; border-top: 1px solid #E83F24; padding: 30px; } @media screen and (max-width: 767px) { #news .content-block dl.data-table dd { width: 100%; padding: 15px 0; } } #news .content-block dl.data-table dd b { font-weight: bold; } #news .content-block dl.data-table dd .date { font-weight: bold; color: #E83F24; }