@charset "UTF-8"; /*** The new CSS reset - version 1.9 (last updated 19.6.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):not(svg *, symbol *)) { all: unset; display: revert; } /* Preferred box-sizing value */ *, *::before, *::after { box-sizing: border-box; } /* Reapply the pointer cursor for anchor tags */ a, button { cursor: revert; } /* Remove list styles (bullets/numbers) */ ol, ul, menu { 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; } /* reset default text opacity of input placeholder */ ::-moz-placeholder { color: unset; } ::placeholder { color: unset; } /* remove default dot (•) sign */ ::marker { content: initial; } /* 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; } html { font-size: 62.5%; } body { font-family: -apple-system, BlinkMacSystemFont, "Roboto", "Segoe UI", "Helvetica Neue", "HelveticaNeue", "YuGothic", "Yu Gothic Medium", "Yu Gothic", "Verdana", "Meiryo", sans-serif; color: #dbdcdc; background-color: #00428e; } main { height: 100dvh; overflow: auto; scroll-snap-type: y mandatory; } @media (orientation: landscape) and (height <= 440px), (orientation: landscape) and (height <= 700px) { main { scroll-snap-type: y proximity; } } section { min-height: 100dvh; padding: 0 15px; } img { display: block; width: 100%; height: auto; } br.forPC { display: none; } @media (min-width: 760px) { br.forSP { display: none; } br.forPC { display: inherit; } } button { cursor: pointer; } .scrollSnap_start { scroll-snap-align: start; } .scrollSnap_end { scroll-snap-align: end; } .header { position: fixed; top: 0; right: 0; z-index: 500; width: -moz-fit-content; width: fit-content; transition: all 0.8s ease; } .header.hide { visibility: hidden; opacity: 0; } @media (min-width: 760px) { .header { display: flex; align-items: flex-end; height: 60px; padding: 0 30px 10px; background-color: rgba(0, 66, 142, 0.9); } } .header_navTrigger { position: relative; z-index: 500; width: 56px; height: 50px; pointer-events: visible; } .header_navTrigger .navBar { position: absolute; top: calc(50% - 1px); left: calc(50% - 10px); display: block; width: 21px; height: 2px; pointer-events: none; background-color: #fff; border-radius: 1px; transition: all 0.2s ease; } .header_navTrigger .navBar:nth-child(1) { transform: translateY(-5px); } .header_navTrigger .navBar:nth-child(3) { transform: translateY(5px); } .header_navTrigger.on .navBar:nth-child(1) { transform: rotate(45deg); } .header_navTrigger.on .navBar:nth-child(2) { opacity: 0; } .header_navTrigger.on .navBar:nth-child(3) { transform: rotate(-45deg); } @media (min-width: 760px) { .header_navTrigger { display: none; } } .headerNav { position: fixed; top: 0; left: 0; z-index: 100; display: grid; place-items: center; width: 100%; height: 100dvh; padding-top: 90px; pointer-events: none; background-color: #00215b; opacity: 0; transition: opacity 0.2s ease; } .headerNav.open { pointer-events: visible; opacity: 1; } @media (min-width: 760px) { .headerNav { position: unset; display: block; width: auto; height: auto; padding-top: 0; pointer-events: visible; background-color: transparent; opacity: 1; } } .headerNav_list { font-family: "clarendon-urw", serif; height: 100%; font-size: 1.8rem; transform: scaleY(0.79); } .headerNav_list a { position: relative; display: block; padding: 20px 0; color: #9e9e9f; } .headerNav_list a::after { position: absolute; top: 0; left: calc(-50vw + 50%); width: 100vw; height: 100%; content: ""; } @media (min-width: 760px) { .headerNav_list { display: flex; height: auto; } .headerNav_list a { padding: 0 10px; transition: all 0.3s ease; } .headerNav_list a::after { content: none; } .headerNav_list a:hover { color: #fff; } } .footer { padding: 0 15px 15.4px; color: #9e9e9f; } .footer p { margin-bottom: 5px; font-size: 1.1rem; font-feature-settings: "palt"; line-height: 1.2; text-align: justify; } .footer .copyright { font-size: 1.1rem; } @media (min-width: 760px) { .footer { width: min(100%, 920px); padding-bottom: 25px; margin: 0 auto; } } .top { position: relative; display: grid; place-items: center; } .top p { display: none; width: min(100%, 240px); font-size: 1.7rem; line-height: 1.7; letter-spacing: 0.055em; } .top .induction_scroll { font-family: "clarendon-urw", serif; position: absolute; bottom: 40px; left: 50%; transition: opacity 0.5s ease; transform: translateX(-50%); } .top .induction_scroll::after { position: absolute; top: calc(100% + 6.7px); left: calc(50% - 16px); width: 32px; height: 14.7px; content: ""; background: url(../img/icn_scroll.svg) no-repeat center bottom/contain; } .top .induction_scroll span { display: inline-block; font-size: 1.1rem; line-height: 1; color: #9e9e9f; transform: scaleY(0.79); } .top .induction_scroll.hide { opacity: 0; } @media (min-width: 760px) { .top p { width: 385px; font-size: 2.72rem; line-height: 1.71; letter-spacing: 0.165em; } .top .induction_scroll { bottom: 60px; } .top .induction_scroll::after { left: calc(50% - 25px); width: 50px; height: 23px; } .top .induction_scroll span { font-size: 1.8rem; } } .siteTitle { display: grid; place-items: center; } .siteTitle h1 { width: min(80%, 262px); } @media (min-width: 760px) { .siteTitle h1 { width: 413px; } } .intro { display: grid; place-items: center; padding-top: 30px; padding-bottom: 30px; } .intro p { width: min(100%, 262px); margin: 0.5em 0; font-size: 1.1rem; font-feature-settings: "palt"; line-height: 2; letter-spacing: 0.035em; } @media (min-width: 760px) { .intro { padding-top: 60px; padding-bottom: 60px; } .intro p { width: 401px; margin: 0; font-size: 1.77rem; letter-spacing: 0.105em; } } .about { display: grid; place-items: center; } .about .inner { width: min(100%, 380px); padding: 0 15px; } @media (min-width: 760px) { .about .inner { width: 541px; padding: 0; } } .about_title_label { font-family: "din-2014", sans-serif; margin-bottom: 18px; font-size: 1.4rem; text-align: center; letter-spacing: 0.034em; } @media (min-width: 760px) { .about_title_label { margin-bottom: 32px; font-size: 2.27rem; letter-spacing: 0.105em; } } .about_title { margin-bottom: 31px; text-align: center; font-family: "clarendon-urw", serif; } .about_title_lg, .about_title_md, .about_title_sm { margin-bottom: 5px; line-height: 0.9; transform: scaleY(0.79); } .about_title_lg { font-size: min(16.4vw, 6.7rem); } .about_title_md { font-size: min(7vw, 2.7rem); } .about_title_sm { font-size: min(5vw, 2rem); } @media (min-width: 760px) { .about_title { margin-bottom: 50px; } .about_title_lg { font-size: 10rem; } .about_title_md { font-size: 4.3rem; } .about_title_sm { font-size: 3.1rem; } } .about_sentence { font-size: 1rem; font-feature-settings: "palt"; line-height: 2; text-align: justify; } @media (min-width: 760px) { .about_sentence { font-size: 1.24rem; letter-spacing: 0.105em; } } .member { padding-top: 30px; } @media (min-width: 760px) { .member { padding-top: 60px; } } .member_lead { width: min(100%, 380px); padding: 0 15px; margin: 0 auto; } .member_lead .label { font-family: "din-2014", sans-serif; margin-bottom: 20px; font-size: 1.4rem; text-align: center; letter-spacing: 0.035em; } .member_lead .sentence { font-size: 1rem; font-feature-settings: "palt"; line-height: 1.71; text-align: justify; letter-spacing: 0.035em; } .member_lead .contactBtn { position: fixed; right: 25px; bottom: 25px; z-index: 50; width: 67.3px; pointer-events: none; box-shadow: 3.9px 3.9px 2.8px rgba(0, 0, 0, 0.5); opacity: 0; transition: all 0.3s ease; } .member_lead .contactBtn.active { pointer-events: visible; opacity: 1; } .member_lead .contactBtn img { pointer-events: none; } @media (min-width: 760px) { .member_lead { position: relative; width: 523px; padding: 0; } .member_lead .label { margin-bottom: 22px; font-size: 2.27rem; letter-spacing: 0.105em; } .member_lead .sentence { font-size: 1.24rem; line-height: 2; letter-spacing: 0.105em; } .member_lead .contactBtn { top: 20%; bottom: auto; width: 101px; background-color: #fff; box-shadow: 6px 6px 4px rgba(0, 0, 0, 0.5); } .member_lead .contactBtn img { transition: all 0.3s ease; } .member_lead .contactBtn:hover img { opacity: 0.7; } } .member_list { display: grid; gap: 10px; width: min(100%, 290px); margin: 30px auto; } .member_list a { display: grid; grid-template-rows: 63.3px; grid-template-columns: 63.3px 1fr; gap: 13px; } .member_list a:hover img { opacity: 0.7; } .member_list .thumb { background-color: #fff; } .member_list .thumb img { transition: all 0.3s ease; } .member_list .name { margin-bottom: 2px; line-height: 1; } .member_list .name .ja { margin-right: 5px; font-size: 1.4rem; color: #fff; } .member_list .name .en { font-family: "clarendon-urw", serif; display: inline-block; font-size: 1.2rem; color: #9e9e9f; transform: scaleY(0.79); } .member_list .position { font-family: "clarendon-urw", serif; font-size: 1.2rem; line-height: 1.2; color: #9e9e9f; transform: scaleY(0.79); transform-origin: 0 0; } .member_list .position span { display: inline-block; } @media (min-width: 760px) { .member_list { grid-template-columns: repeat(2, 1fr); gap: 20px; width: min(100%, 890px); margin: 60px auto; } .member_list a { grid-template-rows: min(12vw, 95px); grid-template-columns: min(12vw, 95px) 1fr; } .member_list .name .ja { font-size: min(2.1vw, 2.1rem); } .member_list .name .en { font-size: min(1.8vw, 1.8rem); } .member_list .position { font-size: min(1.8vw, 1.8rem); } } .member_positionGroup { width: min(100%, 341.9px); margin: 60px auto 0; } .member_positionGroup .box_container { font-family: "clarendon-urw", serif; position: relative; display: grid; grid-template-columns: 87.5px 1fr 87.5px; } .member_positionGroup .box_wrap_left, .member_positionGroup .box_wrap_right { display: grid; grid-auto-rows: 48.4px; gap: 7.6px; } .member_positionGroup .box_wrap_left { grid-column: 1/2; } .member_positionGroup .box_wrap_right { grid-column: 3/4; } .member_positionGroup .box { background-color: #7d7d7d; } .member_positionGroup .box a { display: grid; place-items: center; width: 100%; height: 100%; } .member_positionGroup .box span { font-size: 1.2rem; color: #fff; transform: scaleY(0.79); } .member_positionGroup .box_logo_wrap { display: grid; place-items: center; } .member_positionGroup .box_logo_wrap .logo { width: 67%; } .member_positionGroup .box_connectLine { position: absolute; top: 50%; left: 50%; z-index: -1; width: calc(100% - 175px); } .member_positionGroup .box_connectLine .line { position: absolute; display: block; width: 100%; border-top: solid 1px #7d7d7d; transform-origin: center; } @media (min-width: 760px) { .member_positionGroup { width: 590px; margin-top: 100px; } .member_positionGroup .box_container { grid-template-columns: 150px 1fr 150px; } .member_positionGroup .box_wrap_left, .member_positionGroup .box_wrap_right { grid-auto-rows: 84px; gap: 13px; } .member_positionGroup .box a { transition: all 0.3s ease; } .member_positionGroup .box a:hover { background-color: rgba(0, 0, 0, 0.2); } .member_positionGroup .box span { font-size: 2.1rem; } .member_positionGroup .box_connectLine { width: calc(100% - 300px); } } .contact { padding: 33.3px 15px 40px; } .contact p { font-size: 1.3rem; color: #9e9e9f; text-align: center; letter-spacing: 0.105em; } .contact a { color: #fff; transition: all 0.3s ease; } .contact a:hover { opacity: 0.7; } @media (min-width: 760px) { .contact { padding: 65px 15px; } .contact p { font-size: 2.27rem; } } .modalContent { display: none; } .modaal-container { display: block; } .modaal-close { position: absolute; top: 0; right: 3px; width: 50px; height: 50px; color: #9e9e9f; } .modaal-close::before, .modaal-close::after { top: 50%; left: calc(50% - 10.7px); width: 21.3px; height: 1.5px; background: #9e9e9f; } .modaal-close:hover::before, .modaal-close:hover::after { background: #9e9e9f; } @media (min-width: 760px) { .modaal-close { display: none; } } .memberModal .modaal-container { height: 100dvh; overflow: scroll; } .memberModal .modaal-inner-wrapper { padding: 0; } .memberModal .modaal-content-container { padding: 50px 25px 40px; } .memberModal .modaal-content-container .profile { display: grid; grid-template-rows: 72px; grid-template-columns: 72px 1fr; gap: 14px; margin-bottom: 20px; } .memberModal .modaal-content-container .name { margin-bottom: 2px; line-height: 1; } .memberModal .modaal-content-container .name .ja { margin-right: 5px; font-size: 1.6rem; color: #231815; } .memberModal .modaal-content-container .name .en { font-family: "clarendon-urw", serif; display: inline-block; font-size: 1.4rem; color: #9e9e9f; transform: scaleY(0.79); } .memberModal .modaal-content-container .position { font-family: "clarendon-urw", serif; font-size: 1.4rem; line-height: 1.2; color: #9e9e9f; transform: scaleY(0.79); transform-origin: 0 0; } .memberModal .modaal-content-container .position span { display: inline-block; } .memberModal .modaal-content-container .career li, .memberModal .modaal-content-container .career p { font-size: 1.1rem; font-feature-settings: "palt"; line-height: 1.59; text-align: justify; } .memberModal .modaal-content-container .career p { margin: 1em 0; letter-spacing: 0.1em; } .memberModal .modaal-content-container .career h4 { margin-top: 1em; margin-bottom: 0.2em; font-size: 1.1rem; } .memberModal .modaal-content-container .career .word { display: inline-block; } .memberModal .modaal-content-container .career .website { font-family: "clarendon-urw", serif; margin: 1.58em 0 0; font-size: 1.4rem; letter-spacing: 0; transform: scaleY(0.79); transform-origin: 0 0; } .memberModal .modaal-content-container .career .website a { transition: all 0.3s ease; } .memberModal .modaal-content-container .career .website a:hover { opacity: 0.5; } .memberModal .modaal-content-container .career .website span { display: inline-block; font-family: -apple-system, BlinkMacSystemFont, "Roboto", "Segoe UI", "Helvetica Neue", "HelveticaNeue", "YuGothic", "Yu Gothic Medium", "Yu Gothic", "Verdana", "Meiryo", sans-serif; font-size: 1.06rem; letter-spacing: 0.08em; transform: scaleY(1.26); } .memberModal .modaal-content-container .history li { display: flex; gap: 0.5em; } .memberModal .modaal-content-container .history li .year, .memberModal .modaal-content-container .history li .year_m { font-feature-settings: "tnum"; } .memberModal .modaal-content-container .history li .year { width: 4em; } .memberModal .modaal-content-container .history li .year + .event { width: calc(100% - 4em); } .memberModal .modaal-content-container .history li .year_m { width: 6em; } .memberModal .modaal-content-container .history li .year_m + .event { width: calc(100% - 6em); } .memberModal .modaal-content-container .history li .event { letter-spacing: 0.1em; } .memberModal .modaal-content-container .inlineList { display: inline; } .memberModal .modaal-content-container .inlineList span { display: inline-block; margin-right: 0.1em; } @media (min-width: 760px) { .memberModal .modaal-container { width: 510px; height: auto; max-height: calc(100dvh - 120px); } .memberModal .modaal-content-container { padding: 36px; } .memberModal .modaal-content-container .profile { grid-template-rows: 95px; grid-template-columns: 95px 1fr; } .memberModal .modaal-content-container .name .ja { font-size: 2.1rem; } .memberModal .modaal-content-container .name .en { font-size: 1.8rem; } .memberModal .modaal-content-container .position { font-size: 1.8rem; } .memberModal .modaal-content-container .career li, .memberModal .modaal-content-container .career p { font-size: 1.2rem; } .memberModal .modaal-content-container .career .website { margin-top: 1em; font-size: 1.8rem; } .memberModal .modaal-content-container .inlineList { display: block; } } .positionModal .modaal-container { width: min(100%, 390px); } .positionModal .modaal-content-container { font-family: "clarendon-urw", serif; padding: 25px; } .positionModal .modaal-content-container h3, .positionModal .modaal-content-container li { color: #9e9e9f; transform: scaleY(0.79); } .positionModal .modaal-content-container h3 { margin-bottom: 0.1em; font-size: 1.8rem; } .positionModal .modaal-content-container ul { padding-left: 2em; } .positionModal .modaal-content-container li { font-size: 1.4rem; } @media (min-width: 760px) { .positionModal .modaal-content-container { padding: 20px 30px; } .positionModal .modaal-content-container h3 { margin-bottom: 0.3em; font-size: 2.1rem; } .positionModal .modaal-content-container li { font-size: 1.8rem; } }