@charset "UTF-8"; @import url("https://fonts.googleapis.com/css2?family=Inter:opsz,wght@14..32,100..900&family=Zen+Kaku+Gothic+Antique:wght@500;700;900&display=swap"); :root { --color-white: rgba(255, 255, 255, 1); --side-width: 152px; --main-width: calc(100% - var(--side-width) ); --content-width: 90.78%; } /*** 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):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; appearance: revert; } /* preformatted text - use only for this feature */ :where(pre) { all: revert; box-sizing: border-box; } /* reset default text opacity of input placeholder */ ::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: 3.125vw; } body { font-size: 14px; font-size: 1.4rem; } /* Small Devices, Tablets */ @media all and (min-width: 768px) { html { font-size: 62.5%; } body { font-size: 14px; font-size: 1.4rem; } } /* PC */ :root { --vh: 100vh; } body { color: #000; font-family: "Zen Kaku Gothic Antique", "Segoe UI", "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "Hiragino Sans", "游ゴシック", YuGothic, "メイリオ", Meiryo, "ＭＳＰゴシック", sans-serif; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; -webkit-font-feature-settings: "palt" 1; font-feature-settings: "palt" 1; font-weight: 500; overscroll-behavior-y: none; touch-action: manipulation; overflow-wrap: anywhere; word-break: normal; line-break: strict; font-display: swap; } a { color: #000; text-decoration: none; text-decoration-thickness: 1px; } button:focus-visible, summary:focus-visible, a:focus-visible, input:focus-visible { outline: solid #ff0000; } li { list-style: none; } h1, h2, h3, h4, h5, h6 { font-weight: normal; } button { cursor: pointer; } img { width: 100%; vertical-align: top; height: auto; } main.l-main { width: var(--main-width); } .l-content { width: var(--content-width); margin-inline: auto; } .sr_only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); border: 0; white-space: nowrap; } .show_menu #b-glbnav { opacity: 1; pointer-events: auto; } .show_menu button[data-menu] span.inr span:nth-of-type(2) { width: 100%; left: 0px; } .show_menu button[data-menu] span.inr span:nth-of-type(1) { display: none; } .show_menu button[data-menu] span.inr span:nth-of-type(3) { display: none; } button[data-menu] { width: 112px; height: 112px; display: block; margin-inline: auto; margin: 20px auto 106px auto; background: #333; border-radius: 100vmax; position: relative; } button[data-menu] span.inr { width: 28px; height: 6px; position: absolute; display: block; top: 50%; left: 50%; margin: -3px 0 0 -14px; } button[data-menu] span.inr span { width: 6px; height: 6px; display: block; border-radius: 100vmax; background: var(--color-white); position: absolute; } button[data-menu] span.inr span:nth-of-type(1) { left: 0px; top: 0px; } button[data-menu] span.inr span:nth-of-type(2) { left: 11px; top: 0px; transition: width 0.1s ease-out 0s, left 0.1s ease-out 0s; } button[data-menu] span.inr span:nth-of-type(3) { left: 22px; top: 0px; } #b-glbnav { width: 100%; height: 100%; position: fixed; top: 0px; left: 0px; z-index: 2; background: var(--color-bg-nav); opacity: 0; pointer-events: none; transition: opacity 0.3s ease; } #b-glbnav .c-nav_inner { width: 100%; height: 100%; position: absolute; top: 0px; left: 0px; } #b-glbnav .c-nav_content { padding: 80px 52px; } #b-glbnav ul li { margin-bottom: 56px; } #b-glbnav ul li:last-child { margin-bottom: 0px; } #b-glbnav ul li a { font-size: 5.6rem; font-weight: 700; line-height: 0.8; color: var(--color-nav); } body { background: var(--color-bg); color: var(--color-text); } [data-theme=light] { --color-bg: #ffffff; --color-text: #000000; --color-bg-nav: #333; --color-nav: #ffffff; } [data-theme=light] [data-switch-theme=light] { pointer-events: none; } [data-theme=light] [data-switch-theme=light] span { width: 100%; height: 100%; } [data-theme=dark] { --color-bg: #333333; --color-text: #ffffff; --color-bg-nav: #fff; --color-nav: #000000; } [data-theme=dark] [data-switch-theme=dark] { pointer-events: none; } [data-theme=dark] [data-switch-theme=dark] span { width: 100%; height: 100%; } [data-theme=dark] button[data-menu] { background: #fff; color: #333; } /*# sourceMappingURL=common.css.map */