@charset "UTF-8"; /*! normalize.css v8.0.1 | MIT License | github.com/necolas/normalize.css */ /* Document ========================================================================== */ /** * 1. Correct the line height in all browsers. * 2. Prevent adjustments of font size after orientation changes in iOS. */ html { line-height: 1.15; /* 1 */ -webkit-text-size-adjust: 100%; /* 2 */ } /* Sections ========================================================================== */ /** * Remove the margin in all browsers. */ body { margin: 0; } /** * Render the `main` element consistently in IE. */ main { display: block; } /** * Correct the font size and margin on `h1` elements within `section` and * `article` contexts in Chrome, Firefox, and Safari. */ h1 { font-size: 2em; margin: 0.67em 0; } /* Grouping content ========================================================================== */ /** * 1. Add the correct box sizing in Firefox. * 2. Show the overflow in Edge and IE. */ hr { -webkit-box-sizing: content-box; box-sizing: content-box; /* 1 */ height: 0; /* 1 */ overflow: visible; /* 2 */ } /** * 1. Correct the inheritance and scaling of font size in all browsers. * 2. Correct the odd `em` font sizing in all browsers. */ pre { font-family: monospace, monospace; /* 1 */ font-size: 1em; /* 2 */ } /* Text-level semantics ========================================================================== */ /** * Remove the gray background on active links in IE 10. */ a { background-color: transparent; } /** * 1. Remove the bottom border in Chrome 57- * 2. Add the correct text decoration in Chrome, Edge, IE, Opera, and Safari. */ abbr[title] { border-bottom: none; /* 1 */ text-decoration: underline; /* 2 */ -webkit-text-decoration: underline dotted; text-decoration: underline dotted; /* 2 */ } /** * Add the correct font weight in Chrome, Edge, and Safari. */ b, strong { font-weight: bolder; } /** * 1. Correct the inheritance and scaling of font size in all browsers. * 2. Correct the odd `em` font sizing in all browsers. */ code, kbd, samp { font-family: monospace, monospace; /* 1 */ font-size: 1em; /* 2 */ } /** * Add the correct font size in all browsers. */ small { font-size: 80%; } /** * Prevent `sub` and `sup` elements from affecting the line height in * all browsers. */ sub, sup { font-size: 75%; line-height: 0; position: relative; vertical-align: baseline; } sub { bottom: 0em; } sup { top: -0.25em; } /* Embedded content ========================================================================== */ /** * Remove the border on images inside links in IE 10. */ img { border-style: none; } /* Forms ========================================================================== */ /** * 1. Change the font styles in all browsers. * 2. Remove the margin in Firefox and Safari. */ button, input, optgroup, select, textarea { font-family: inherit; /* 1 */ font-size: 100%; /* 1 */ line-height: 1.15; /* 1 */ margin: 0; /* 2 */ } /** * Show the overflow in IE. * 1. Show the overflow in Edge. */ button, input { /* 1 */ overflow: visible; } /** * Remove the inheritance of text transform in Edge, Firefox, and IE. * 1. Remove the inheritance of text transform in Firefox. */ button, select { /* 1 */ text-transform: none; } /** * Correct the inability to style clickable types in iOS and Safari. */ button, [type=button], [type=reset], [type=submit] { -webkit-appearance: button; } /** * Remove the inner border and padding in Firefox. */ button::-moz-focus-inner, [type=button]::-moz-focus-inner, [type=reset]::-moz-focus-inner, [type=submit]::-moz-focus-inner { border-style: none; padding: 0; } /** * Restore the focus styles unset by the previous rule. */ button:-moz-focusring, [type=button]:-moz-focusring, [type=reset]:-moz-focusring, [type=submit]:-moz-focusring { outline: 2px dotted ButtonText; } /** * Correct the padding in Firefox. */ fieldset { padding: 0.35em 0.75em 0.625em; } /** * 1. Correct the text wrapping in Edge and IE. * 2. Correct the color inheritance from `fieldset` elements in IE. * 3. Remove the padding so developers are not caught out when they zero out * `fieldset` elements in all browsers. */ legend { -webkit-box-sizing: border-box; box-sizing: border-box; /* 1 */ color: inherit; /* 2 */ display: table; /* 1 */ max-width: 100%; /* 1 */ padding: 0; /* 3 */ white-space: normal; /* 1 */ } /** * Add the correct vertical alignment in Chrome, Firefox, and Opera. */ progress { vertical-align: baseline; } /** * Remove the default vertical scrollbar in IE 10+. */ textarea { overflow: auto; } /** * 1. Add the correct box sizing in IE 10. * 2. Remove the padding in IE 10. */ [type=checkbox], [type=radio] { -webkit-box-sizing: border-box; box-sizing: border-box; /* 1 */ padding: 0; /* 2 */ } /** * Correct the cursor style of increment and decrement buttons in Chrome. */ [type=number]::-webkit-inner-spin-button, [type=number]::-webkit-outer-spin-button { height: auto; } /** * 1. Correct the odd appearance in Chrome and Safari. * 2. Correct the outline style in Safari. */ [type=search] { -webkit-appearance: textfield; /* 1 */ outline-offset: -2px; /* 2 */ } /** * Remove the inner padding in Chrome and Safari on macOS. */ [type=search]::-webkit-search-decoration { -webkit-appearance: none; } /** * 1. Correct the inability to style clickable types in iOS and Safari. * 2. Change font properties to `inherit` in Safari. */ ::-webkit-file-upload-button { -webkit-appearance: button; /* 1 */ font: inherit; /* 2 */ } /* Interactive ========================================================================== */ /* * Add the correct display in Edge, IE 10+, and Firefox. */ details { display: block; } /* * Add the correct display in all browsers. */ summary { display: list-item; } /* Misc ========================================================================== */ /** * Add the correct display in IE 10+. */ template { display: none; } /** * Add the correct display in IE 10. */ [hidden] { display: none; } /** * Convert font-size from px to rem with px fallback * * @param $size - the value in pixel you want to convert * * e.g. p {@include fontSize(12px);} * */ :root { --color-nagasu: #F4B4D0; --color-nagasu-bg: rgba(244,180,208,.2); --color-nankan: #C1DB81; --color-nankan-bg: rgba(193,219,129,.2); --color-kikusui: #54C3F1; --color-kikusui-bg: rgba(84,195,241,.2); --color-jack: #F08300; --color-port: #0081CC; --color-toncho: #009D85; --color-neos: #7F1084; --color-parma: #E84566; --color-doctor: #A83B26; --color-main: #444; --color-sub: #000; --color-primary: #FABE00; --color-secondary: #811902; --color-icon: #444; --color-link: var(--color-main); --color-hover: var(--color-sub); --color-txt: var(--color-main); --color-txt-weak: rgba(68,68,68,.7); --color-border-weak: rgba(68,68,68,.3); --color-line: var(--color-txt-weak); --color-accent: var(--color-sub); --color-important: #F08300; --color-warning: #f00; --color-disable: #999; --color-bg: #fff; --color-overlay: #444444; --borderw: 1px; --borderrad: max(5px, calc(var(--borderw) * 3)); --hover-animation: 0.05s steps(5) 0s infinite normal backwards animate_color; --hover-animation-bg: 0.05s steps(5) 0s infinite normal backwards animate_color_bg; --hover-animation-arrow: 1s linear infinite hoverArrowImgRight; --hover-animation-arrow-l: 1s linear infinite hoverArrowImgLeft; --icon-transform: translateX(-4px); --icon-transition: transform,stroke-width, 0.15s cubic-bezier(0.17, 0.84, 0.44, 1); --scrollbar-width: 0px; --wcalc-window-side-width: calc((100vw - var(--scrollbar-width) - 1440px) / 2); --docPadding: clamp(20px, 13.7931034483px + 1.724137931vw, 80px); --ghw: clamp(60px, 51.724137931px + 2.2988505747vw, 140px); --input-color-main: var(--color-txt); --input-color-main-bg: #ffffff; --input-color-main-active: var(--color-accent); --input-error: #ff0000; --input-error-bg: #444444; /* rgba(255,0,0,0.2)*/ --system-fonts: sans-serif; --font-primaly: "Zen Kaku Gothic New", sans-serif; --font-secondary: "Hina Mincho", serif; --font-en: sans-serif; --font-ja: "Zen Kaku Gothic New", sans-serif; } /* ============================================================================================== */ /* Global */ /* ============================================================================================== */ ::-moz-selection { background-color: var(--color-txt); color: #fff; } ::selection { background-color: var(--color-txt); color: #fff; } /* ----------------------------- */ * { -webkit-box-sizing: border-box; box-sizing: border-box; } body { height: 100%; margin: 0; padding: 0; background-color: var(--color-bg); /*background-image: url(/assets/img/global/bg.webp); background-size: 600px; background-blend-mode: multiply;*/ } main { width: 100%; height: auto; } /* ----------------------------------------------------------------------------------------*/ a { color: inherit; -webkit-transition: 0.2s ease; transition: 0.2s ease; -webkit-transition-property: color, opacity, background-color; transition-property: color, opacity, background-color; } a[href^=tel] { pointer-events: auto; } @media (min-width: 80em) { a[href^=tel] { pointer-events: none; text-decoration: none; cursor: auto; } } a:hover { text-decoration: none; color: var(--color-hover); opacity: 1 !important; -webkit-transition: color 0.2s ease; transition: color 0.2s ease; } /* ----------------------------------------------------------------------------------------*/ /* tabindex */ :focus { outline: 1px dotted currentColor; } :focus-visible { outline: 2px dashed currentColor; background: transparent; } /* ----------------------------------------------------------------------------------------*/ h1, h2, h3, h4, h5, h6 { margin-bottom: 0; font-size: inherit; font-weight: 400; line-height: 1.65; letter-spacing: 0.08rem; } [lang=en] h1, [lang=en] h2, [lang=en] h3, [lang=en] h4, [lang=en] h5, [lang=en] h6 { line-height: 1.3; } /* ----------------------------------------------------------------------------------------*/ abbr[title], dfn[title] { border: none; text-decoration: none; } /* ----------------------------------------------------------------------------------------*/ menu { margin: 0; padding: 0; } /* ----------------------------------------------------------------------------------------*/ p { margin-bottom: 0; letter-spacing: 0.02rem; } pre { margin-bottom: 0; } dl { margin-bottom: 0; } ul { margin-bottom: 0; } ol { margin-bottom: 0; list-style: decimal; padding-left: 1em; } b, strong { font-weight: bold; } dd { margin-left: 1.75em; } /* ----------------------------------------------------------------------------------------*/ img { display: block; width: 100%; height: auto; } /* ----------------------------------------------------------------------------------------*/ hr { height: 0; margin: 2em 0; border: none; border-top: 1px solid var(--color-main); border-radius: 20px; } /* discList --------------------------------- */ ul { list-style: none; padding: 0; } li { position: relative; padding-left: 1.75em; } ul > li { position: relative; padding-left: 1.75em; /*&::before { position: absolute; content: ''; display: block; left: 0; width: 3px; height: 3px; background-color: currentColor; } & li::before { content: ''; display: block; width: 2px; height: 2px; border: 1px solid currentColor; background-color: transparent; }*/ } ul > li::before { position: absolute; content: "・"; left: 0; } /* orderedList --------------------------------- */ ol { list-style: none; padding: 0; } ol > li { position: relative; counter-increment: ol-number; padding-left: 1.75em; } ol > li::before { position: absolute; content: counter(ol-number) "."; left: 0; } /** * Swiper 5.4.0 * Most modern mobile touch slider and framework with hardware accelerated transitions * http://swiperjs.com * * Copyright 2014-2020 Vladimir Kharlampidi * * Released under the MIT License * * Released on: May 15, 2020 */ @font-face { font-family: swiper-icons; src: url("data:application/font-woff;charset=utf-8;base64, d09GRgABAAAAAAZgABAAAAAADAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAABGRlRNAAAGRAAAABoAAAAci6qHkUdERUYAAAWgAAAAIwAAACQAYABXR1BPUwAABhQAAAAuAAAANuAY7+xHU1VCAAAFxAAAAFAAAABm2fPczU9TLzIAAAHcAAAASgAAAGBP9V5RY21hcAAAAkQAAACIAAABYt6F0cBjdnQgAAACzAAAAAQAAAAEABEBRGdhc3AAAAWYAAAACAAAAAj//wADZ2x5ZgAAAywAAADMAAAD2MHtryVoZWFkAAABbAAAADAAAAA2E2+eoWhoZWEAAAGcAAAAHwAAACQC9gDzaG10eAAAAigAAAAZAAAArgJkABFsb2NhAAAC0AAAAFoAAABaFQAUGG1heHAAAAG8AAAAHwAAACAAcABAbmFtZQAAA/gAAAE5AAACXvFdBwlwb3N0AAAFNAAAAGIAAACE5s74hXjaY2BkYGAAYpf5Hu/j+W2+MnAzMYDAzaX6QjD6/4//Bxj5GA8AuRwMYGkAPywL13jaY2BkYGA88P8Agx4j+/8fQDYfA1AEBWgDAIB2BOoAeNpjYGRgYNBh4GdgYgABEMnIABJzYNADCQAACWgAsQB42mNgYfzCOIGBlYGB0YcxjYGBwR1Kf2WQZGhhYGBiYGVmgAFGBiQQkOaawtDAoMBQxXjg/wEGPcYDDA4wNUA2CCgwsAAAO4EL6gAAeNpj2M0gyAACqxgGNWBkZ2D4/wMA+xkDdgAAAHjaY2BgYGaAYBkGRgYQiAHyGMF8FgYHIM3DwMHABGQrMOgyWDLEM1T9/w8UBfEMgLzE////P/5//f/V/xv+r4eaAAeMbAxwIUYmIMHEgKYAYjUcsDAwsLKxc3BycfPw8jEQA/gZBASFhEVExcQlJKWkZWTl5BUUlZRVVNXUNTQZBgMAAMR+E+gAEQFEAAAAKgAqACoANAA+AEgAUgBcAGYAcAB6AIQAjgCYAKIArAC2AMAAygDUAN4A6ADyAPwBBgEQARoBJAEuATgBQgFMAVYBYAFqAXQBfgGIAZIBnAGmAbIBzgHsAAB42u2NMQ6CUAyGW568x9AneYYgm4MJbhKFaExIOAVX8ApewSt4Bic4AfeAid3VOBixDxfPYEza5O+Xfi04YADggiUIULCuEJK8VhO4bSvpdnktHI5QCYtdi2sl8ZnXaHlqUrNKzdKcT8cjlq+rwZSvIVczNiezsfnP/uznmfPFBNODM2K7MTQ45YEAZqGP81AmGGcF3iPqOop0r1SPTaTbVkfUe4HXj97wYE+yNwWYxwWu4v1ugWHgo3S1XdZEVqWM7ET0cfnLGxWfkgR42o2PvWrDMBSFj/IHLaF0zKjRgdiVMwScNRAoWUoH78Y2icB/yIY09An6AH2Bdu/UB+yxopYshQiEvnvu0dURgDt8QeC8PDw7Fpji3fEA4z/PEJ6YOB5hKh4dj3EvXhxPqH/SKUY3rJ7srZ4FZnh1PMAtPhwP6fl2PMJMPDgeQ4rY8YT6Gzao0eAEA409DuggmTnFnOcSCiEiLMgxCiTI6Cq5DZUd3Qmp10vO0LaLTd2cjN4fOumlc7lUYbSQcZFkutRG7g6JKZKy0RmdLY680CDnEJ+UMkpFFe1RN7nxdVpXrC4aTtnaurOnYercZg2YVmLN/d/gczfEimrE/fs/bOuq29Zmn8tloORaXgZgGa78yO9/cnXm2BpaGvq25Dv9S4E9+5SIc9PqupJKhYFSSl47+Qcr1mYNAAAAeNptw0cKwkAAAMDZJA8Q7OUJvkLsPfZ6zFVERPy8qHh2YER+3i/BP83vIBLLySsoKimrqKqpa2hp6+jq6RsYGhmbmJqZSy0sraxtbO3sHRydnEMU4uR6yx7JJXveP7WrDycAAAAAAAH//wACeNpjYGRgYOABYhkgZgJCZgZNBkYGLQZtIJsFLMYAAAw3ALgAeNolizEKgDAQBCchRbC2sFER0YD6qVQiBCv/H9ezGI6Z5XBAw8CBK/m5iQQVauVbXLnOrMZv2oLdKFa8Pjuru2hJzGabmOSLzNMzvutpB3N42mNgZGBg4GKQYzBhYMxJLMlj4GBgAYow/P/PAJJhLM6sSoWKfWCAAwDAjgbRAAB42mNgYGBkAIIbCZo5IPrmUn0hGA0AO8EFTQAA") format("woff"); font-weight: 400; font-style: normal; } :root { --swiper-theme-color:#000; } .swiper-container { margin-left: auto; margin-right: auto; position: relative; overflow: hidden; list-style: none; padding: 0; z-index: 1; } .swiper-container-vertical > .swiper-wrapper { -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; } .swiper-wrapper { position: relative; width: 100%; height: 100%; z-index: 1; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-transition-property: -webkit-transform; transition-property: -webkit-transform; transition-property: transform; transition-property: transform, -webkit-transform; -webkit-box-sizing: content-box; box-sizing: content-box; } .swiper-container-android .swiper-slide, .swiper-wrapper { -webkit-transform: translate3d(0px, 0, 0); transform: translate3d(0px, 0, 0); } .swiper-container-multirow > .swiper-wrapper { -ms-flex-wrap: wrap; flex-wrap: wrap; } .swiper-container-multirow-column > .swiper-wrapper { -ms-flex-wrap: wrap; flex-wrap: wrap; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; } .swiper-container-free-mode > .swiper-wrapper { -webkit-transition-timing-function: ease-out; transition-timing-function: ease-out; margin: 0 auto; } .swiper-slide { -ms-flex-negative: 0; flex-shrink: 0; width: 100%; height: 100%; position: relative; -webkit-transition-property: -webkit-transform; transition-property: -webkit-transform; transition-property: transform; transition-property: transform, -webkit-transform; } .swiper-slide-invisible-blank { visibility: hidden; } .swiper-container-autoheight, .swiper-container-autoheight .swiper-slide { height: auto; } .swiper-container-autoheight .swiper-wrapper { -webkit-box-align: start; -ms-flex-align: start; align-items: flex-start; -webkit-transition-property: height, -webkit-transform; transition-property: height, -webkit-transform; transition-property: transform, height; transition-property: transform, height, -webkit-transform; } .swiper-container-3d { -webkit-perspective: 1200px; perspective: 1200px; } .swiper-container-3d .swiper-cube-shadow, .swiper-container-3d .swiper-slide, .swiper-container-3d .swiper-slide-shadow-bottom, .swiper-container-3d .swiper-slide-shadow-left, .swiper-container-3d .swiper-slide-shadow-right, .swiper-container-3d .swiper-slide-shadow-top, .swiper-container-3d .swiper-wrapper { -webkit-transform-style: preserve-3d; transform-style: preserve-3d; } .swiper-container-3d .swiper-slide-shadow-bottom, .swiper-container-3d .swiper-slide-shadow-left, .swiper-container-3d .swiper-slide-shadow-right, .swiper-container-3d .swiper-slide-shadow-top { position: absolute; left: 0; top: 0; width: 100%; height: 100%; pointer-events: none; z-index: 10; } .swiper-container-3d .swiper-slide-shadow-left { background-image: -webkit-gradient(linear, right top, left top, from(rgba(0, 0, 0, 0.5)), to(rgba(0, 0, 0, 0))); background-image: linear-gradient(to left, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0)); } .swiper-container-3d .swiper-slide-shadow-right { background-image: -webkit-gradient(linear, left top, right top, from(rgba(0, 0, 0, 0.5)), to(rgba(0, 0, 0, 0))); background-image: linear-gradient(to right, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0)); } .swiper-container-3d .swiper-slide-shadow-top { background-image: -webkit-gradient(linear, left bottom, left top, from(rgba(0, 0, 0, 0.5)), to(rgba(0, 0, 0, 0))); background-image: linear-gradient(to top, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0)); } .swiper-container-3d .swiper-slide-shadow-bottom { background-image: -webkit-gradient(linear, left top, left bottom, from(rgba(0, 0, 0, 0.5)), to(rgba(0, 0, 0, 0))); background-image: linear-gradient(to bottom, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0)); } .swiper-container-css-mode > .swiper-wrapper { overflow: auto; scrollbar-width: none; -ms-overflow-style: none; } .swiper-container-css-mode > .swiper-wrapper::-webkit-scrollbar { display: none; } .swiper-container-css-mode > .swiper-wrapper > .swiper-slide { scroll-snap-align: start start; } .swiper-container-horizontal.swiper-container-css-mode > .swiper-wrapper { -ms-scroll-snap-type: x mandatory; scroll-snap-type: x mandatory; } .swiper-container-vertical.swiper-container-css-mode > .swiper-wrapper { -ms-scroll-snap-type: y mandatory; scroll-snap-type: y mandatory; } :root { --swiper-navigation-size:44px; } .swiper-button-next, .swiper-button-prev { position: absolute; top: 50%; width: calc(var(--swiper-navigation-size) / 44 * 27); height: var(--swiper-navigation-size); margin-top: calc(-1 * var(--swiper-navigation-size) / 2); z-index: 10; cursor: pointer; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; color: var(--swiper-navigation-color, var(--swiper-theme-color)); } .swiper-button-next.swiper-button-disabled, .swiper-button-prev.swiper-button-disabled { opacity: 0.35; cursor: auto; pointer-events: none; } .swiper-button-next:after, .swiper-button-prev:after { font-family: swiper-icons; font-size: var(--swiper-navigation-size); text-transform: none !important; letter-spacing: 0; text-transform: none; font-variant: initial; line-height: 1; } .swiper-button-prev, .swiper-container-rtl .swiper-button-next { left: 10px; right: auto; } .swiper-button-prev:after, .swiper-container-rtl .swiper-button-next:after { content: "prev"; } .swiper-button-next, .swiper-container-rtl .swiper-button-prev { right: 10px; left: auto; } .swiper-button-next:after, .swiper-container-rtl .swiper-button-prev:after { content: "next"; } .swiper-button-next.swiper-button-white, .swiper-button-prev.swiper-button-white { --swiper-navigation-color:#ffffff; } .swiper-button-next.swiper-button-black, .swiper-button-prev.swiper-button-black { --swiper-navigation-color:#000000; } .swiper-button-lock { display: none; } .swiper-pagination { position: absolute; text-align: center; -webkit-transition: 0.3s opacity; transition: 0.3s opacity; -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); z-index: 10; } .swiper-pagination.swiper-pagination-hidden { opacity: 0; } .swiper-container-horizontal > .swiper-pagination-bullets, .swiper-pagination-custom, .swiper-pagination-fraction { bottom: 10px; left: 0; width: 100%; } .swiper-pagination-bullets-dynamic { overflow: hidden; font-size: 0; } .swiper-pagination-bullets-dynamic .swiper-pagination-bullet { -webkit-transform: scale(0.33); transform: scale(0.33); position: relative; } .swiper-pagination-bullets-dynamic .swiper-pagination-bullet-active { -webkit-transform: scale(1); transform: scale(1); } .swiper-pagination-bullets-dynamic .swiper-pagination-bullet-active-main { -webkit-transform: scale(1); transform: scale(1); } .swiper-pagination-bullets-dynamic .swiper-pagination-bullet-active-prev { -webkit-transform: scale(0.66); transform: scale(0.66); } .swiper-pagination-bullets-dynamic .swiper-pagination-bullet-active-prev-prev { -webkit-transform: scale(0.33); transform: scale(0.33); } .swiper-pagination-bullets-dynamic .swiper-pagination-bullet-active-next { -webkit-transform: scale(0.66); transform: scale(0.66); } .swiper-pagination-bullets-dynamic .swiper-pagination-bullet-active-next-next { -webkit-transform: scale(0.33); transform: scale(0.33); } .swiper-pagination-bullet { width: 8px; height: 8px; display: inline-block; border-radius: 100%; background: #000; opacity: 0.2; } button.swiper-pagination-bullet { border: none; margin: 0; padding: 0; -webkit-box-shadow: none; box-shadow: none; -webkit-appearance: none; -moz-appearance: none; appearance: none; } .swiper-pagination-clickable .swiper-pagination-bullet { cursor: pointer; } .swiper-pagination-bullet-active { opacity: 1; background: var(--swiper-pagination-color, var(--swiper-theme-color)); } .swiper-container-vertical > .swiper-pagination-bullets { right: 10px; top: 50%; -webkit-transform: translate3d(0px, -50%, 0); transform: translate3d(0px, -50%, 0); } .swiper-container-vertical > .swiper-pagination-bullets .swiper-pagination-bullet { margin: 6px 0; display: block; } .swiper-container-vertical > .swiper-pagination-bullets.swiper-pagination-bullets-dynamic { top: 50%; -webkit-transform: translateY(-50%); transform: translateY(-50%); width: 8px; } .swiper-container-vertical > .swiper-pagination-bullets.swiper-pagination-bullets-dynamic .swiper-pagination-bullet { display: inline-block; -webkit-transition: 0.2s top, 0.2s -webkit-transform; transition: 0.2s top, 0.2s -webkit-transform; transition: 0.2s transform, 0.2s top; transition: 0.2s transform, 0.2s top, 0.2s -webkit-transform; } .swiper-container-horizontal > .swiper-pagination-bullets .swiper-pagination-bullet { margin: 0 4px; } .swiper-container-horizontal > .swiper-pagination-bullets.swiper-pagination-bullets-dynamic { left: 50%; -webkit-transform: translateX(-50%); transform: translateX(-50%); white-space: nowrap; } .swiper-container-horizontal > .swiper-pagination-bullets.swiper-pagination-bullets-dynamic .swiper-pagination-bullet { -webkit-transition: 0.2s left, 0.2s -webkit-transform; transition: 0.2s left, 0.2s -webkit-transform; transition: 0.2s transform, 0.2s left; transition: 0.2s transform, 0.2s left, 0.2s -webkit-transform; } .swiper-container-horizontal.swiper-container-rtl > .swiper-pagination-bullets-dynamic .swiper-pagination-bullet { -webkit-transition: 0.2s right, 0.2s -webkit-transform; transition: 0.2s right, 0.2s -webkit-transform; transition: 0.2s transform, 0.2s right; transition: 0.2s transform, 0.2s right, 0.2s -webkit-transform; } .swiper-pagination-progressbar { background: rgba(0, 0, 0, 0.25); position: absolute; } .swiper-pagination-progressbar .swiper-pagination-progressbar-fill { background: var(--swiper-pagination-color, var(--swiper-theme-color)); position: absolute; left: 0; top: 0; width: 100%; height: 100%; -webkit-transform: scale(0); transform: scale(0); -webkit-transform-origin: left top; transform-origin: left top; } .swiper-container-rtl .swiper-pagination-progressbar .swiper-pagination-progressbar-fill { -webkit-transform-origin: right top; transform-origin: right top; } .swiper-container-horizontal > .swiper-pagination-progressbar, .swiper-container-vertical > .swiper-pagination-progressbar.swiper-pagination-progressbar-opposite { width: 100%; height: 4px; left: 0; top: 0; } .swiper-container-horizontal > .swiper-pagination-progressbar.swiper-pagination-progressbar-opposite, .swiper-container-vertical > .swiper-pagination-progressbar { width: 4px; height: 100%; left: 0; top: 0; } .swiper-pagination-white { --swiper-pagination-color:#ffffff; } .swiper-pagination-black { --swiper-pagination-color:#000000; } .swiper-pagination-lock { display: none; } .swiper-scrollbar { border-radius: 10px; position: relative; -ms-touch-action: none; background: rgba(0, 0, 0, 0.1); } .swiper-container-horizontal > .swiper-scrollbar { position: absolute; left: 1%; bottom: 3px; z-index: 50; height: 5px; width: 98%; } .swiper-container-vertical > .swiper-scrollbar { position: absolute; right: 3px; top: 1%; z-index: 50; width: 5px; height: 98%; } .swiper-scrollbar-drag { height: 100%; width: 100%; position: relative; background: rgba(0, 0, 0, 0.5); border-radius: 10px; left: 0; top: 0; } .swiper-scrollbar-cursor-drag { cursor: move; } .swiper-scrollbar-lock { display: none; } .swiper-zoom-container { width: 100%; height: 100%; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; -webkit-box-align: center; -ms-flex-align: center; align-items: center; text-align: center; } .swiper-zoom-container > canvas, .swiper-zoom-container > img, .swiper-zoom-container > svg { max-width: 100%; max-height: 100%; -o-object-fit: contain; object-fit: contain; } .swiper-slide-zoomed { cursor: move; } .swiper-lazy-preloader { width: 42px; height: 42px; position: absolute; left: 50%; top: 50%; margin-left: -21px; margin-top: -21px; z-index: 10; -webkit-transform-origin: 50%; transform-origin: 50%; -webkit-animation: swiper-preloader-spin 1s infinite linear; animation: swiper-preloader-spin 1s infinite linear; -webkit-box-sizing: border-box; box-sizing: border-box; border: 4px solid var(--swiper-preloader-color, var(--swiper-theme-color)); border-radius: 50%; border-top-color: transparent; } .swiper-lazy-preloader-white { --swiper-preloader-color:#fff; } .swiper-lazy-preloader-black { --swiper-preloader-color:#000; } @-webkit-keyframes swiper-preloader-spin { 100% { -webkit-transform: rotate(360deg); transform: rotate(360deg); } } @keyframes swiper-preloader-spin { 100% { -webkit-transform: rotate(360deg); transform: rotate(360deg); } } .swiper-container .swiper-notification { position: absolute; left: 0; top: 0; pointer-events: none; opacity: 0; z-index: -1000; } .swiper-container-fade.swiper-container-free-mode .swiper-slide { -webkit-transition-timing-function: ease-out; transition-timing-function: ease-out; } .swiper-container-fade .swiper-slide { pointer-events: none; -webkit-transition-property: opacity; transition-property: opacity; } .swiper-container-fade .swiper-slide .swiper-slide { pointer-events: none; } .swiper-container-fade .swiper-slide-active, .swiper-container-fade .swiper-slide-active .swiper-slide-active { pointer-events: auto; } .swiper-container-cube { overflow: visible; } .swiper-container-cube .swiper-slide { pointer-events: none; -webkit-backface-visibility: hidden; backface-visibility: hidden; z-index: 1; visibility: hidden; -webkit-transform-origin: 0 0; transform-origin: 0 0; width: 100%; height: 100%; } .swiper-container-cube .swiper-slide .swiper-slide { pointer-events: none; } .swiper-container-cube.swiper-container-rtl .swiper-slide { -webkit-transform-origin: 100% 0; transform-origin: 100% 0; } .swiper-container-cube .swiper-slide-active, .swiper-container-cube .swiper-slide-active .swiper-slide-active { pointer-events: auto; } .swiper-container-cube .swiper-slide-active, .swiper-container-cube .swiper-slide-next, .swiper-container-cube .swiper-slide-next + .swiper-slide, .swiper-container-cube .swiper-slide-prev { pointer-events: auto; visibility: visible; } .swiper-container-cube .swiper-slide-shadow-bottom, .swiper-container-cube .swiper-slide-shadow-left, .swiper-container-cube .swiper-slide-shadow-right, .swiper-container-cube .swiper-slide-shadow-top { z-index: 0; -webkit-backface-visibility: hidden; backface-visibility: hidden; } .swiper-container-cube .swiper-cube-shadow { position: absolute; left: 0; bottom: 0px; width: 100%; height: 100%; background: #000; opacity: 0.6; -webkit-filter: blur(50px); filter: blur(50px); z-index: 0; } .swiper-container-flip { overflow: visible; } .swiper-container-flip .swiper-slide { pointer-events: none; -webkit-backface-visibility: hidden; backface-visibility: hidden; z-index: 1; } .swiper-container-flip .swiper-slide .swiper-slide { pointer-events: none; } .swiper-container-flip .swiper-slide-active, .swiper-container-flip .swiper-slide-active .swiper-slide-active { pointer-events: auto; } .swiper-container-flip .swiper-slide-shadow-bottom, .swiper-container-flip .swiper-slide-shadow-left, .swiper-container-flip .swiper-slide-shadow-right, .swiper-container-flip .swiper-slide-shadow-top { z-index: 0; -webkit-backface-visibility: hidden; backface-visibility: hidden; } /* ============================================================================================== */ /* Module / Animation */ /* ============================================================================================== */ @-webkit-keyframes animate_color { /* 0% { color: var(--color-secondary); fill: var(--color-secondary); } */ 0% { color: rgb(226, 125, 140); fill: rgb(226, 125, 140); } 1% { color: rgb(229, 150, 133); fill: rgb(229, 150, 133); } 2% { color: rgb(179, 148, 173); fill: rgb(179, 148, 173); } 3% { color: rgb(193, 190, 135); fill: rgb(193, 190, 135); } 4% { color: rgb(251, 118, 187); fill: rgb(251, 118, 187); } 5% { color: rgb(173, 146, 122); fill: rgb(173, 146, 122); } 6% { color: rgb(236, 193, 154); fill: rgb(236, 193, 154); } 7% { color: rgb(231, 142, 133); fill: rgb(231, 142, 133); } 8% { color: rgb(201, 137, 186); fill: rgb(201, 137, 186); } 9% { color: rgb(194, 109, 162); fill: rgb(194, 109, 162); } 10% { color: rgb(166, 196, 164); fill: rgb(166, 196, 164); } 11% { color: rgb(239, 115, 102); fill: rgb(239, 115, 102); } 12% { color: rgb(232, 164, 175); fill: rgb(232, 164, 175); } 13% { color: rgb(218, 172, 177); fill: rgb(218, 172, 177); } 14% { color: rgb(250, 119, 161); fill: rgb(250, 119, 161); } 15% { color: rgb(244, 200, 163); fill: rgb(244, 200, 163); } 16% { color: rgb(240, 112, 159); fill: rgb(240, 112, 159); } 17% { color: rgb(219, 130, 142); fill: rgb(219, 130, 142); } 18% { color: rgb(160, 168, 123); fill: rgb(160, 168, 123); } 19% { color: rgb(214, 190, 169); fill: rgb(214, 190, 169); } 20% { color: rgb(202, 189, 105); fill: rgb(202, 189, 105); } 21% { color: rgb(159, 143, 138); fill: rgb(159, 143, 138); } 22% { color: rgb(197, 142, 199); fill: rgb(197, 142, 199); } 23% { color: rgb(232, 168, 142); fill: rgb(232, 168, 142); } 24% { color: rgb(199, 181, 200); fill: rgb(199, 181, 200); } 25% { color: rgb(233, 117, 107); fill: rgb(233, 117, 107); } 26% { color: rgb(190, 144, 156); fill: rgb(190, 144, 156); } 27% { color: rgb(187, 165, 139); fill: rgb(187, 165, 139); } 28% { color: rgb(217, 194, 186); fill: rgb(217, 194, 186); } 29% { color: rgb(202, 154, 189); fill: rgb(202, 154, 189); } 30% { color: rgb(229, 115, 174); fill: rgb(229, 115, 174); } 31% { color: rgb(234, 112, 177); fill: rgb(234, 112, 177); } 32% { color: rgb(200, 191, 139); fill: rgb(200, 191, 139); } 33% { color: rgb(189, 132, 163); fill: rgb(189, 132, 163); } 34% { color: rgb(210, 121, 172); fill: rgb(210, 121, 172); } 35% { color: rgb(209, 129, 186); fill: rgb(209, 129, 186); } 36% { color: rgb(252, 197, 133); fill: rgb(252, 197, 133); } 37% { color: rgb(254, 154, 176); fill: rgb(254, 154, 176); } 38% { color: rgb(254, 136, 128); fill: rgb(254, 136, 128); } 39% { color: rgb(230, 146, 172); fill: rgb(230, 146, 172); } 40% { color: rgb(225, 170, 185); fill: rgb(225, 170, 185); } 41% { color: rgb(186, 180, 181); fill: rgb(186, 180, 181); } 42% { color: rgb(186, 189, 159); fill: rgb(186, 189, 159); } 43% { color: rgb(168, 123, 197); fill: rgb(168, 123, 197); } 44% { color: rgb(162, 148, 135); fill: rgb(162, 148, 135); } 45% { color: rgb(174, 125, 127); fill: rgb(174, 125, 127); } 46% { color: rgb(222, 198, 180); fill: rgb(222, 198, 180); } 47% { color: rgb(192, 128, 110); fill: rgb(192, 128, 110); } 48% { color: rgb(246, 153, 111); fill: rgb(246, 153, 111); } 49% { color: rgb(206, 136, 192); fill: rgb(206, 136, 192); } 50% { color: rgb(227, 126, 126); fill: rgb(227, 126, 126); } 51% { color: rgb(241, 110, 118); fill: rgb(241, 110, 118); } 52% { color: rgb(199, 107, 144); fill: rgb(199, 107, 144); } 53% { color: rgb(189, 145, 170); fill: rgb(189, 145, 170); } 54% { color: rgb(205, 200, 154); fill: rgb(205, 200, 154); } 55% { color: rgb(177, 134, 187); fill: rgb(177, 134, 187); } 56% { color: rgb(241, 166, 150); fill: rgb(241, 166, 150); } 57% { color: rgb(240, 111, 126); fill: rgb(240, 111, 126); } 58% { color: rgb(184, 172, 145); fill: rgb(184, 172, 145); } 59% { color: rgb(236, 150, 178); fill: rgb(236, 150, 178); } 60% { color: rgb(238, 111, 132); fill: rgb(238, 111, 132); } 100% { color: var(--color-txt); fill: var(--color-txt); } } @keyframes animate_color { /* 0% { color: var(--color-secondary); fill: var(--color-secondary); } */ 0% { color: rgb(226, 125, 140); fill: rgb(226, 125, 140); } 1% { color: rgb(229, 150, 133); fill: rgb(229, 150, 133); } 2% { color: rgb(179, 148, 173); fill: rgb(179, 148, 173); } 3% { color: rgb(193, 190, 135); fill: rgb(193, 190, 135); } 4% { color: rgb(251, 118, 187); fill: rgb(251, 118, 187); } 5% { color: rgb(173, 146, 122); fill: rgb(173, 146, 122); } 6% { color: rgb(236, 193, 154); fill: rgb(236, 193, 154); } 7% { color: rgb(231, 142, 133); fill: rgb(231, 142, 133); } 8% { color: rgb(201, 137, 186); fill: rgb(201, 137, 186); } 9% { color: rgb(194, 109, 162); fill: rgb(194, 109, 162); } 10% { color: rgb(166, 196, 164); fill: rgb(166, 196, 164); } 11% { color: rgb(239, 115, 102); fill: rgb(239, 115, 102); } 12% { color: rgb(232, 164, 175); fill: rgb(232, 164, 175); } 13% { color: rgb(218, 172, 177); fill: rgb(218, 172, 177); } 14% { color: rgb(250, 119, 161); fill: rgb(250, 119, 161); } 15% { color: rgb(244, 200, 163); fill: rgb(244, 200, 163); } 16% { color: rgb(240, 112, 159); fill: rgb(240, 112, 159); } 17% { color: rgb(219, 130, 142); fill: rgb(219, 130, 142); } 18% { color: rgb(160, 168, 123); fill: rgb(160, 168, 123); } 19% { color: rgb(214, 190, 169); fill: rgb(214, 190, 169); } 20% { color: rgb(202, 189, 105); fill: rgb(202, 189, 105); } 21% { color: rgb(159, 143, 138); fill: rgb(159, 143, 138); } 22% { color: rgb(197, 142, 199); fill: rgb(197, 142, 199); } 23% { color: rgb(232, 168, 142); fill: rgb(232, 168, 142); } 24% { color: rgb(199, 181, 200); fill: rgb(199, 181, 200); } 25% { color: rgb(233, 117, 107); fill: rgb(233, 117, 107); } 26% { color: rgb(190, 144, 156); fill: rgb(190, 144, 156); } 27% { color: rgb(187, 165, 139); fill: rgb(187, 165, 139); } 28% { color: rgb(217, 194, 186); fill: rgb(217, 194, 186); } 29% { color: rgb(202, 154, 189); fill: rgb(202, 154, 189); } 30% { color: rgb(229, 115, 174); fill: rgb(229, 115, 174); } 31% { color: rgb(234, 112, 177); fill: rgb(234, 112, 177); } 32% { color: rgb(200, 191, 139); fill: rgb(200, 191, 139); } 33% { color: rgb(189, 132, 163); fill: rgb(189, 132, 163); } 34% { color: rgb(210, 121, 172); fill: rgb(210, 121, 172); } 35% { color: rgb(209, 129, 186); fill: rgb(209, 129, 186); } 36% { color: rgb(252, 197, 133); fill: rgb(252, 197, 133); } 37% { color: rgb(254, 154, 176); fill: rgb(254, 154, 176); } 38% { color: rgb(254, 136, 128); fill: rgb(254, 136, 128); } 39% { color: rgb(230, 146, 172); fill: rgb(230, 146, 172); } 40% { color: rgb(225, 170, 185); fill: rgb(225, 170, 185); } 41% { color: rgb(186, 180, 181); fill: rgb(186, 180, 181); } 42% { color: rgb(186, 189, 159); fill: rgb(186, 189, 159); } 43% { color: rgb(168, 123, 197); fill: rgb(168, 123, 197); } 44% { color: rgb(162, 148, 135); fill: rgb(162, 148, 135); } 45% { color: rgb(174, 125, 127); fill: rgb(174, 125, 127); } 46% { color: rgb(222, 198, 180); fill: rgb(222, 198, 180); } 47% { color: rgb(192, 128, 110); fill: rgb(192, 128, 110); } 48% { color: rgb(246, 153, 111); fill: rgb(246, 153, 111); } 49% { color: rgb(206, 136, 192); fill: rgb(206, 136, 192); } 50% { color: rgb(227, 126, 126); fill: rgb(227, 126, 126); } 51% { color: rgb(241, 110, 118); fill: rgb(241, 110, 118); } 52% { color: rgb(199, 107, 144); fill: rgb(199, 107, 144); } 53% { color: rgb(189, 145, 170); fill: rgb(189, 145, 170); } 54% { color: rgb(205, 200, 154); fill: rgb(205, 200, 154); } 55% { color: rgb(177, 134, 187); fill: rgb(177, 134, 187); } 56% { color: rgb(241, 166, 150); fill: rgb(241, 166, 150); } 57% { color: rgb(240, 111, 126); fill: rgb(240, 111, 126); } 58% { color: rgb(184, 172, 145); fill: rgb(184, 172, 145); } 59% { color: rgb(236, 150, 178); fill: rgb(236, 150, 178); } 60% { color: rgb(238, 111, 132); fill: rgb(238, 111, 132); } 100% { color: var(--color-txt); fill: var(--color-txt); } } @-webkit-keyframes animate_color_bg { 0% { background-color: rgb(206, 99, 64); border-color: rgb(206, 99, 64); fill: rgb(206, 99, 64); } 5% { background-color: rgb(241, 82, 105); border-color: rgb(241, 82, 105); fill: rgb(241, 82, 105); } 10% { background-color: rgb(223, 92, 96); border-color: rgb(223, 92, 96); fill: rgb(223, 92, 96); } 15% { background-color: rgb(244, 90, 57); border-color: rgb(244, 90, 57); fill: rgb(244, 90, 57); } 20% { background-color: rgb(207, 76, 71); border-color: rgb(207, 76, 71); fill: rgb(207, 76, 71); } 25% { background-color: rgb(235, 103, 70); border-color: rgb(235, 103, 70); fill: rgb(235, 103, 70); } 30% { background-color: rgb(236, 57, 105); border-color: rgb(236, 57, 105); fill: rgb(236, 57, 105); } 35% { background-color: rgb(186, 61, 92); border-color: rgb(186, 61, 92); fill: rgb(186, 61, 92); } 40% { background-color: rgb(244, 82, 104); border-color: rgb(244, 82, 104); fill: rgb(244, 82, 104); } 45% { background-color: rgb(229, 71, 72); border-color: rgb(229, 71, 72); fill: rgb(229, 71, 72); } 50% { background-color: rgb(188, 68, 94); border-color: rgb(188, 68, 94); fill: rgb(188, 68, 94); } 100% { background-color: var(--color-txt); border-color: var(--color-txt); fill: var(--color-txt); } } @keyframes animate_color_bg { 0% { background-color: rgb(206, 99, 64); border-color: rgb(206, 99, 64); fill: rgb(206, 99, 64); } 5% { background-color: rgb(241, 82, 105); border-color: rgb(241, 82, 105); fill: rgb(241, 82, 105); } 10% { background-color: rgb(223, 92, 96); border-color: rgb(223, 92, 96); fill: rgb(223, 92, 96); } 15% { background-color: rgb(244, 90, 57); border-color: rgb(244, 90, 57); fill: rgb(244, 90, 57); } 20% { background-color: rgb(207, 76, 71); border-color: rgb(207, 76, 71); fill: rgb(207, 76, 71); } 25% { background-color: rgb(235, 103, 70); border-color: rgb(235, 103, 70); fill: rgb(235, 103, 70); } 30% { background-color: rgb(236, 57, 105); border-color: rgb(236, 57, 105); fill: rgb(236, 57, 105); } 35% { background-color: rgb(186, 61, 92); border-color: rgb(186, 61, 92); fill: rgb(186, 61, 92); } 40% { background-color: rgb(244, 82, 104); border-color: rgb(244, 82, 104); fill: rgb(244, 82, 104); } 45% { background-color: rgb(229, 71, 72); border-color: rgb(229, 71, 72); fill: rgb(229, 71, 72); } 50% { background-color: rgb(188, 68, 94); border-color: rgb(188, 68, 94); fill: rgb(188, 68, 94); } 100% { background-color: var(--color-txt); border-color: var(--color-txt); fill: var(--color-txt); } } @-webkit-keyframes animate_color_loop { /* 0% { color: var(--color-secondary); fill: var(--color-secondary); } */ 0% { --animate-color: rgb(182, 137, 124); } 5% { --animate-color: rgb(245, 120, 160); } 10% { --animate-color: rgb(189, 151, 182); } 15% { --animate-color: rgb(237, 171, 181); } 20% { --animate-color: rgb(197, 193, 118); } 25% { --animate-color: rgb(235, 190, 163); } 30% { --animate-color: rgb(216, 139, 124); } 35% { --animate-color: rgb(166, 133, 188); } 40% { --animate-color: rgb(208, 127, 141); } 45% { --animate-color: rgb(209, 136, 136); } 50% { --animate-color: rgb(246, 196, 108); } 55% { --animate-color: rgb(229, 174, 198); } 60% { --animate-color: rgb(192, 128, 179); } 65% { --animate-color: rgb(216, 151, 113); } 70% { --animate-color: rgb(187, 191, 197); } 75% { --animate-color: rgb(173, 178, 196); } 80% { --animate-color: rgb(215, 144, 112); } 85% { --animate-color: rgb(246, 124, 144); } 90% { --animate-color: rgb(166, 146, 147); } 95% { --animate-color: rgb(246, 152, 132); } 100% { --animate-color: rgb(212, 181, 155); } 105% { --animate-color: rgb(181, 195, 160); } 110% { --animate-color: rgb(193, 110, 135); } 115% { --animate-color: rgb(194, 135, 197); } 120% { --animate-color: rgb(252, 102, 148); } 125% { --animate-color: rgb(226, 115, 182); } } @keyframes animate_color_loop { /* 0% { color: var(--color-secondary); fill: var(--color-secondary); } */ 0% { --animate-color: rgb(182, 137, 124); } 5% { --animate-color: rgb(245, 120, 160); } 10% { --animate-color: rgb(189, 151, 182); } 15% { --animate-color: rgb(237, 171, 181); } 20% { --animate-color: rgb(197, 193, 118); } 25% { --animate-color: rgb(235, 190, 163); } 30% { --animate-color: rgb(216, 139, 124); } 35% { --animate-color: rgb(166, 133, 188); } 40% { --animate-color: rgb(208, 127, 141); } 45% { --animate-color: rgb(209, 136, 136); } 50% { --animate-color: rgb(246, 196, 108); } 55% { --animate-color: rgb(229, 174, 198); } 60% { --animate-color: rgb(192, 128, 179); } 65% { --animate-color: rgb(216, 151, 113); } 70% { --animate-color: rgb(187, 191, 197); } 75% { --animate-color: rgb(173, 178, 196); } 80% { --animate-color: rgb(215, 144, 112); } 85% { --animate-color: rgb(246, 124, 144); } 90% { --animate-color: rgb(166, 146, 147); } 95% { --animate-color: rgb(246, 152, 132); } 100% { --animate-color: rgb(212, 181, 155); } 105% { --animate-color: rgb(181, 195, 160); } 110% { --animate-color: rgb(193, 110, 135); } 115% { --animate-color: rgb(194, 135, 197); } 120% { --animate-color: rgb(252, 102, 148); } 125% { --animate-color: rgb(226, 115, 182); } } /* ------------------------------------------------------------- */ @-webkit-keyframes animate_shake { 0%, 100% { -webkit-transform: translateX(0); transform: translateX(0); } 10% { -webkit-transform: translateX(-9px); transform: translateX(-9px); } 20% { -webkit-transform: translateX(8px); transform: translateX(8px); } 30% { -webkit-transform: translateX(-7px); transform: translateX(-7px); } 40% { -webkit-transform: translateX(6px); transform: translateX(6px); } 50% { -webkit-transform: translateX(-5px); transform: translateX(-5px); } 60% { -webkit-transform: translateX(4px); transform: translateX(4px); } 70% { -webkit-transform: translateX(-3px); transform: translateX(-3px); } 80% { -webkit-transform: translateX(2px); transform: translateX(2px); } 90% { -webkit-transform: translateX(-1px); transform: translateX(-1px); } } @keyframes animate_shake { 0%, 100% { -webkit-transform: translateX(0); transform: translateX(0); } 10% { -webkit-transform: translateX(-9px); transform: translateX(-9px); } 20% { -webkit-transform: translateX(8px); transform: translateX(8px); } 30% { -webkit-transform: translateX(-7px); transform: translateX(-7px); } 40% { -webkit-transform: translateX(6px); transform: translateX(6px); } 50% { -webkit-transform: translateX(-5px); transform: translateX(-5px); } 60% { -webkit-transform: translateX(4px); transform: translateX(4px); } 70% { -webkit-transform: translateX(-3px); transform: translateX(-3px); } 80% { -webkit-transform: translateX(2px); transform: translateX(2px); } 90% { -webkit-transform: translateX(-1px); transform: translateX(-1px); } } /* ------------------------------------------------------------- */ @-webkit-keyframes hideOftText { 0% { -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); } 100% { -webkit-transform: translate3d(0, -100%, 0); transform: translate3d(0, -100%, 0); } } @keyframes hideOftText { 0% { -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); } 100% { -webkit-transform: translate3d(0, -100%, 0); transform: translate3d(0, -100%, 0); } } @-webkit-keyframes showOftText { 0% { -webkit-transform: translate3d(0, 100%, 0); transform: translate3d(0, 100%, 0); } 100% { -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); } } @keyframes showOftText { 0% { -webkit-transform: translate3d(0, 100%, 0); transform: translate3d(0, 100%, 0); } 100% { -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); } } /* ------------------------------------------------------------- */ @-webkit-keyframes hoverImg { 0% { -webkit-transform: scale(1.2); transform: scale(1.2); } 100% { -webkit-transform: scale(1); transform: scale(1); } } @keyframes hoverImg { 0% { -webkit-transform: scale(1.2); transform: scale(1.2); } 100% { -webkit-transform: scale(1); transform: scale(1); } } /* ------------------------------------------------------------- */ @-webkit-keyframes hoverArrowImgRight { 0% { -webkit-transform: translateX(0px); transform: translateX(0px); } 5% { -webkit-transform: translateX(12px); transform: translateX(12px); } 10% { -webkit-transform: translateX(6px); transform: translateX(6px); } 15% { -webkit-transform: translateX(10px); transform: translateX(10px); } 20% { -webkit-transform: translateX(8px); transform: translateX(8px); } 100% { -webkit-transform: translateX(8px); transform: translateX(8px); } } @keyframes hoverArrowImgRight { 0% { -webkit-transform: translateX(0px); transform: translateX(0px); } 5% { -webkit-transform: translateX(12px); transform: translateX(12px); } 10% { -webkit-transform: translateX(6px); transform: translateX(6px); } 15% { -webkit-transform: translateX(10px); transform: translateX(10px); } 20% { -webkit-transform: translateX(8px); transform: translateX(8px); } 100% { -webkit-transform: translateX(8px); transform: translateX(8px); } } @-webkit-keyframes hoverArrowImgLeft { 0% { -webkit-transform: translateX(0px); transform: translateX(0px); } 5% { -webkit-transform: translateX(-12px); transform: translateX(-12px); } 10% { -webkit-transform: translateX(-6px); transform: translateX(-6px); } 15% { -webkit-transform: translateX(-10px); transform: translateX(-10px); } 20% { -webkit-transform: translateX(-8px); transform: translateX(-8px); } 100% { -webkit-transform: translateX(-8px); transform: translateX(-8px); } } @keyframes hoverArrowImgLeft { 0% { -webkit-transform: translateX(0px); transform: translateX(0px); } 5% { -webkit-transform: translateX(-12px); transform: translateX(-12px); } 10% { -webkit-transform: translateX(-6px); transform: translateX(-6px); } 15% { -webkit-transform: translateX(-10px); transform: translateX(-10px); } 20% { -webkit-transform: translateX(-8px); transform: translateX(-8px); } 100% { -webkit-transform: translateX(-8px); transform: translateX(-8px); } } /* ============================================================================================== */ /* UI / Button */ /* ============================================================================================== */ /* * UI / Button * - default style * - primary * - -secondary * - warning * - disabled * - decoration * * - option : sizing * - option : width * - option : icon * - option : levitate * * - type : fill * - type : underline * - type : card * - type : navigate */ .btn { -webkit-appearance: none; -moz-appearance: none; appearance: none; display: -webkit-inline-box; display: -ms-inline-flexbox; display: inline-flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; -webkit-box-sizing: border-box; box-sizing: border-box; text-decoration: none; -webkit-transition: 0.5s ease; transition: 0.5s ease; -webkit-transition-property: border, background, color, -webkit-box-shadow; transition-property: border, background, color, -webkit-box-shadow; transition-property: border, background, color, box-shadow; transition-property: border, background, color, box-shadow, -webkit-box-shadow; -webkit-font-feature-settings: "palt"; font-feature-settings: "palt"; } .btn:hover { text-decoration: none; } .btn svg, .btn use { -webkit-transition: none; transition: none; } /* button 要素は input.scss (form関連部品) に記述しています。 */ /* ----------------------------------------------------------------------- */ /* default style */ /* ----------------------------------------------------------------------- */ .btn { position: relative; min-width: 2.5rem; min-height: 2.5rem; padding: 10px 0; margin-top: 0; border-bottom: 1px solid var(--color-border-weak); -webkit-box-sizing: border-box; box-sizing: border-box; text-align: center; text-decoration: none !important; color: inherit; white-space: nowrap; line-height: 1; font-family: var(--font-primaly); font-size: clamp(0.9375rem, 0.8942307692rem + 0.1923076923vw, 1.125rem); letter-spacing: 5%; /* -primary */ /* -secondary */ /* warning */ /* anchor link */ /* disabled */ } .btn::before { position: absolute; left: 0; top: 0; display: block; width: 100%; height: 100%; -webkit-box-sizing: border-box; box-sizing: border-box; content: ""; opacity: 1; -webkit-backface-visibility: hidden; backface-visibility: hidden; -webkit-transition: inherit; transition: inherit; } .btn::after { content: ""; position: absolute; bottom: 0; left: 0; width: 0; height: 2px; background-color: var(--color-primary); -webkit-transition: 0.6s cubic-bezier(0.17, 0.84, 0.44, 1); transition: 0.6s cubic-bezier(0.17, 0.84, 0.44, 1); z-index: 2; } a:hover .btn, .btn:hover { color: var(--color-primary); border-color: transparent; } a:hover .btn::before, .btn:hover::before { opacity: 1; color: var(--color-hover); } a:hover .btn::after, .btn:hover::after { width: 100%; } .btn.-primary { color: var(--color-accent); font-weight: bold; font-family: var(--font-m); } .btn.-primary::before { border-width: 2px; opacity: 1; } a:hover .btn.-primary, .btn.-primary:hover { color: #fff; background-color: var(--color-accent); } a:hover .btn.-primary::before, .btn.-primary:hover::before { border-color: var(--color-accent); } a:active .btn.-primary, .btn.-primary:active { color: #fff; background-color: var(--color-accent); } .btn.-primary .icon { stroke-width: 1.4; } .btn.-secondary { font-weight: bold; font-family: var(--font-m); } .btn.-secondary::before { border-width: 2px; opacity: 0.7; } a:hover .btn.-secondary, .btn.-secondary:hover { color: #fff; background-color: var(--color-accent); } a:hover .btn.-secondary::before, .btn.-secondary:hover::before { border-color: var(--color-accent); } a:active .btn.-secondary, .btn.-secondary:active { color: #fff; background-color: var(--color-accent); } .btn.-secondary .icon { stroke-width: 1.4; } .btn.-warning { color: rgb(255, 0, 0); border-color: rgba(255, 0, 0, 0.4); font-weight: bold; font-family: var(--font-m); } .btn.-warning::before { border-width: 2px; opacity: 1; } a:hover .btn.-warning, .btn.-warning:hover { color: #fff; background-color: rgb(255, 0, 0); } a:hover .btn.-warning::before, .btn.-warning:hover::before { border-color: rgb(255, 0, 0); } .btn.-warning .icon { stroke-width: 1.4; } .btn[disabled] { opacity: 0.3; pointer-events: none; -webkit-box-shadow: none !important; box-shadow: none !important; } /* ----------------------------------------------------------------------- */ .btn { /* option : sizing */ /* option : align */ /* option : width */ /* px等の指定はレスポンシブでは使いづらいことと、ほぼ使用することが無かったので廃止しました。 */ } .btn.-xs { min-width: 1.25rem !important; min-height: 1.25rem !important; padding: 0.3125rem 0.5rem !important; } .btn.-s { min-width: 1.875rem !important; min-height: 1.875rem !important; padding: 0.625rem !important; } .btn.-l { min-width: 3.125rem !important; min-height: 3.125rem !important; padding: 1.25rem !important; } .btn.-xl { min-width: 3.75rem !important; min-height: 3.75rem !important; padding: 1.5625rem !important; } .btn.-left { -webkit-box-pack: start; -ms-flex-pack: start; justify-content: flex-start; } .btn.-right { -webkit-box-pack: end; -ms-flex-pack: end; justify-content: flex-end; } .btn.-center { -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; } .btn.-w10p { width: 10%; } .btn.-w20p { width: 20%; } .btn.-w30p { width: 30%; } .btn.-w40p { width: 40%; } .btn.-w50p { width: 50%; } .btn.-w60p { width: 60%; } .btn.-w70p { width: 70%; } .btn.-w80p { width: 80%; } .btn.-w90p { width: 90%; } .btn.-w100p { width: 100%; } /* ----------------------------------------------------------------------- */ /* option : icon */ .btn-lbl { display: inline-block; } .btn .lbl { display: inline-block; } .btn .icon { opacity: inherit; margin-left: -0.3125rem; margin-right: 0.1875rem; } .btn .icon:first-child { margin: -0.375rem 0.625rem -0.375rem 0.625rem; } .btn .icon:last-child { margin: -0.375rem 0.625rem -0.375rem 0.625rem; } .btn .icon:only-child { margin: -0.375rem 0.625rem; } .btn.-xs .icon { font-size: 70%; } .btn.-xs .icon:first-child { margin-right: 0.3125rem; } .btn.-xs .icon:last-child { margin-left: 0.3125rem; } .btn.-xs .icon:only-child { margin: -0.625rem -0.3125rem; } .btn.-s .icon { font-size: 90%; } .btn.-s .icon:first-child { margin-right: 0.3125rem; } .btn.-s .icon:last-child { margin-left: 0.3125rem; } .btn.-s .icon:only-child { margin: -0.625rem; } .btn.-l .icon { font-size: 120%; } .btn.-l .icon:last-child { margin: -0.5rem -0.125rem -0.5rem 0.5rem; } .btn.-l .icon:only-child { margin: -0.3125rem -0.625rem; } .btn.-xl .icon { font-size: 140%; } .btn.-xl .icon:last-child { margin: -0.75rem -0.125rem -0.75rem 0.625rem; } .btn.-xl .icon:only-child { margin: -0.3125rem -0.625rem; } .btn .down__ico { -webkit-transition: all 0.4s cubic-bezier(0.17, 0.84, 0.44, 1); transition: all 0.4s cubic-bezier(0.17, 0.84, 0.44, 1); -webkit-transform: translateY(0); transform: translateY(0); } .btn:hover .down__ico { -webkit-transform: translateY(5px); transform: translateY(5px); } .ico__wrap { margin-left: 10px; display: -webkit-inline-box; display: -ms-inline-flexbox; display: inline-flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; overflow: hidden; } a:hover .ico__wrap { position: relative; } a:hover .ico__wrap .more__ico { -webkit-animation: arwHover 0.6s linear forwards; animation: arwHover 0.6s linear forwards; } a:hover .ico__wrap .blank__ico { -webkit-animation: arwBlankHover 0.6s linear forwards; animation: arwBlankHover 0.6s linear forwards; } @-webkit-keyframes arwHover { 0% { -webkit-transform: translateZ(0); transform: translateZ(0); -webkit-animation-timing-function: cubic-bezier(0.86, 0, 0.07, 1); animation-timing-function: cubic-bezier(0.86, 0, 0.07, 1); } 30% { -webkit-transform: translate3d(200%, 0, 0); transform: translate3d(200%, 0, 0); opacity: 0; } 30.1% { -webkit-transform: translate3d(-200%, 0, 0); transform: translate3d(-200%, 0, 0); -webkit-animation-timing-function: cubic-bezier(0.23, 1, 0.32, 1); animation-timing-function: cubic-bezier(0.23, 1, 0.32, 1); opacity: 0; } to { -webkit-transform: translateZ(0); transform: translateZ(0); opacity: 1; } } @keyframes arwHover { 0% { -webkit-transform: translateZ(0); transform: translateZ(0); -webkit-animation-timing-function: cubic-bezier(0.86, 0, 0.07, 1); animation-timing-function: cubic-bezier(0.86, 0, 0.07, 1); } 30% { -webkit-transform: translate3d(200%, 0, 0); transform: translate3d(200%, 0, 0); opacity: 0; } 30.1% { -webkit-transform: translate3d(-200%, 0, 0); transform: translate3d(-200%, 0, 0); -webkit-animation-timing-function: cubic-bezier(0.23, 1, 0.32, 1); animation-timing-function: cubic-bezier(0.23, 1, 0.32, 1); opacity: 0; } to { -webkit-transform: translateZ(0); transform: translateZ(0); opacity: 1; } } @-webkit-keyframes arwBlankHover { 0% { -webkit-transform: translateZ(0); transform: translateZ(0); -webkit-animation-timing-function: cubic-bezier(0.86, 0, 0.07, 1); animation-timing-function: cubic-bezier(0.86, 0, 0.07, 1); } 30% { -webkit-transform: translate3d(100%, -100%, 0); transform: translate3d(100%, -100%, 0); opacity: 0; } 30.1% { -webkit-transform: translate3d(-100%, 100%, 0); transform: translate3d(-100%, 100%, 0); -webkit-animation-timing-function: cubic-bezier(0.23, 1, 0.32, 1); animation-timing-function: cubic-bezier(0.23, 1, 0.32, 1); opacity: 0; } to { -webkit-transform: translateZ(0); transform: translateZ(0); } } @keyframes arwBlankHover { 0% { -webkit-transform: translateZ(0); transform: translateZ(0); -webkit-animation-timing-function: cubic-bezier(0.86, 0, 0.07, 1); animation-timing-function: cubic-bezier(0.86, 0, 0.07, 1); } 30% { -webkit-transform: translate3d(100%, -100%, 0); transform: translate3d(100%, -100%, 0); opacity: 0; } 30.1% { -webkit-transform: translate3d(-100%, 100%, 0); transform: translate3d(-100%, 100%, 0); -webkit-animation-timing-function: cubic-bezier(0.23, 1, 0.32, 1); animation-timing-function: cubic-bezier(0.23, 1, 0.32, 1); opacity: 0; } to { -webkit-transform: translateZ(0); transform: translateZ(0); } } .more__ico { -webkit-transition: all 0.4s cubic-bezier(0.17, 0.84, 0.44, 1); transition: all 0.4s cubic-bezier(0.17, 0.84, 0.44, 1); color: var(--color-main); width: clamp(32px, 26.4615384615px + 1.5384615385vw, 56px); height: clamp(32px, 26.4615384615px + 1.5384615385vw, 56px); stroke-width: 1 !important; } a:hover .more__ico { color: var(--color-primary); stroke-width: 1.4 !important; } /* ----------------------------------------------------------------------- */ /* option : levitate */ .btn.btn--lev { -webkit-box-shadow: 0.3125rem 0.3125rem 0.8125rem rgba(0, 0, 0, 0.2); box-shadow: 0.3125rem 0.3125rem 0.8125rem rgba(0, 0, 0, 0.2); -webkit-transition-duration: 0.3s; transition-duration: 0.3s; /* 塗りつぶしボタンの場合は影を少し濃くする */ } .btn.btn--lev::before { border: none; } .btn.btn--lev.btn--fill { -webkit-box-shadow: 0.625rem 0.625rem 0.9375rem rgba(0, 0, 0, 0.2); box-shadow: 0.625rem 0.625rem 0.9375rem rgba(0, 0, 0, 0.2); } .btn.btn--lev:hover { -webkit-box-shadow: 0.625rem 0.625rem 1.125rem rgba(0, 0, 0, 0.2); box-shadow: 0.625rem 0.625rem 1.125rem rgba(0, 0, 0, 0.2); } .btn.btn--lev:active { -webkit-box-shadow: 0.1875rem 0.1875rem 0.3125rem rgba(0, 0, 0, 0.2); box-shadow: 0.1875rem 0.1875rem 0.3125rem rgba(0, 0, 0, 0.2); } /* ----------------------------------------------------------------------- */ /* type : fill */ /* ----------------------------------------------------------------------- */ .btn.btn--fill { color: #fff; background-color: var(--color-main); /* primary */ /* -secondary */ /* warning */ /* disabled */ } a:hover .btn.btn--fill, .btn.btn--fill:hover { color: #fff !important; background-color: var(--color-hover) !important; } .btn.btn--fill::before { position: absolute; content: ""; bottom: 0; top: auto; left: 0; display: block; width: 100%; height: 20%; -webkit-transition: 0.2s cubic-bezier(0.55, 0.06, 0.83, 0.43); transition: 0.2s cubic-bezier(0.55, 0.06, 0.83, 0.43); -webkit-transition-property: height, opacity, background; transition-property: height, opacity, background; border: none; opacity: 1; border-radius: 5px; } .btn.btn--fill.-primary { color: rgb(255, 255, 255); background-color: var(--color-accent); font-weight: 500; } a:hover .btn.btn--fill.-primary, .btn.btn--fill.-primary:hover { font-weight: 500 !important; background-color: var(--color-main) !important; border-color: var(--color-main) !important; color: rgb(255, 255, 255) !important; } .btn.btn--fill.-secondary { background-color: var(--color-main); font-weight: 500; } a:hover .btn.btn--fill.-secondary, .btn.btn--fill.-secondary:hover { font-weight: 500 !important; background-color: var(--color-main) !important; border-color: var(--color-main) !important; color: rgb(255, 255, 255) !important; } .btn.btn--fill.-warning { background-color: rgb(255, 0, 0) !important; } a:hover .btn.btn--fill.-warning, .btn.btn--fill.-warning:hover { color: #fff !important; background-color: rgb(255, 0, 0) !important; border-color: rgb(255, 0, 0) !important; } .btn.btn--fill[disabled] { background: rgba(0, 0, 0, 0.25); color: #fff; pointer-events: none; } /* ----------------------------------------------------------------------- */ /* type : text */ /* ----------------------------------------------------------------------- */ .btn--t { min-width: 0; } .btn--t::before { position: absolute; display: block; bottom: 0; left: 0; top: auto; right: auto; width: 100%; height: 0; margin: auto 0 0; border: none; background-color: currentColor; -webkit-transition: 0.2s cubic-bezier(0.22, 0.61, 0.36, 1); transition: 0.2s cubic-bezier(0.22, 0.61, 0.36, 1); -webkit-transition-property: background-color, color, opacity; transition-property: background-color, color, opacity; content: ""; } .btn--t, .btn--t.-secondary, .btn--t.-primary, .btn--t.-warning { padding: 0; font-weight: inherit; } .btn--t::before, .btn--t.-secondary::before, .btn--t.-primary::before, .btn--t.-warning::before { opacity: 0; } .btn--t:hover::before, .btn--t.-secondary:hover::before, .btn--t.-primary:hover::before, .btn--t.-warning:hover::before { opacity: 1; } .btn--t:hover, .btn--ta.-secondary:hover, .btn--ta.-primary:hover, .btn--ta.-warning:hover, .btn--t.btn:hover, .btn--t.btn.-secondary:hover, .btn--t.btn.-primary:hover, .btn--t.btn.-warning:hover { text-decoration: none; background-color: transparent; color: var(--color-hover); } .btn--t[target=_blank]::after, a .btn--t[target=_blank]::after { margin-left: 3px; margin-right: 0; } /* ============================================================================================== */ /* Icon Menu */ /* ============================================================================================== */ .menu-button { z-index: 201; position: relative; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; margin: auto; padding: 0; pointer-events: auto; text-align: center; white-space: nowrap; text-transform: uppercase; letter-spacing: 0.125em; font-size: 0.8125rem; font-weight: 500; color: var(--color-primary); border: none; overflow: hidden; -webkit-box-sizing: border-box; box-sizing: border-box; -webkit-transition: all 0.5s cubic-bezier(0.17, 0.84, 0.44, 1) !important; transition: all 0.5s cubic-bezier(0.17, 0.84, 0.44, 1) !important; -webkit-transition-delay: 0s; transition-delay: 0s; cursor: pointer; } .menu-button:hover { border: none; } .menu-button a:hover { color: currentColor; } .menu-buttona, .menu-button a, .menu-buttonbutton, .menu-button button { cursor: pointer; } .menu-button a, .menu-button button { position: relative; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; width: clamp(80px, 75.3846153846px + 1.2820512821vw, 100px); min-height: clamp(80px, 75.3846153846px + 1.2820512821vw, 100px); padding: 0; -webkit-box-sizing: border-box; box-sizing: border-box; -webkit-transition: none; transition: none; -ms-touch-action: manipulation; touch-action: manipulation; } .menu-button__icon-wrap { position: relative; display: block; width: clamp(70px, 65.3846153846px + 1.2820512821vw, 90px); height: clamp(30px, 27.6923076923px + 0.641025641vw, 40px); } .menu-button__icon { position: relative; -webkit-transition: background-color 0.2s cubic-bezier(0.65, 0.05, 0.36, 1); transition: background-color 0.2s cubic-bezier(0.65, 0.05, 0.36, 1); width: clamp(70px, 65.3846153846px + 1.2820512821vw, 90px); height: clamp(30px, 27.6923076923px + 0.641025641vw, 40px); display: block; top: calc(50% - 5px); left: 0; right: 0; margin: 0 auto; -webkit-transform-origin: center 15px; transform-origin: center 15px; } .menu-button__icon:before, .menu-button__icon:after { -webkit-transform-origin: center center; transform-origin: center center; -webkit-transition-duration: 0.2s; transition-duration: 0.2s; -webkit-transition-timing-function: cubic-bezier(0.65, 0.05, 0.36, 1); transition-timing-function: cubic-bezier(0.65, 0.05, 0.36, 1); -webkit-transition-property: background-color, top, left, width, -webkit-transform; transition-property: background-color, top, left, width, -webkit-transform; transition-property: background-color, top, left, width, transform; transition-property: background-color, top, left, width, transform, -webkit-transform; } .menu-button__icon:before, .menu-button__icon:after { content: ""; position: absolute; display: block; width: clamp(70px, 65.3846153846px + 1.2820512821vw, 90px); height: 8px; border-radius: 2px; padding: 0; -webkit-box-sizing: border-box; box-sizing: border-box; background: var(--color-primary); } .menu-button__icon:before { top: -6px; } .menu-button__icon:after { top: 6px; } .menu-button__txt { position: relative; } .menu-button__txt::before { content: "もくじ"; display: block; font-weight: 600; font-size: 15px; color: var(--color-jack); } .menu-button:hover .menu-button__icon:before, .menu-button:hover .menu-button__icon:after { background-color: var(--color-jack); } .-show .menu-button__icon-wrap { -webkit-transform: translateY(5px) !important; transform: translateY(5px) !important; } .-show .menu-button__icon, .-show .menu-button__icon:before, .-show .menu-button__icon:after { left: 0px; } .-show .menu-button__icon:before, .-show .menu-button__icon:after { width: clamp(70px, 65.3846153846px + 1.2820512821vw, 90px); } .-show .menu-button__icon:before { -webkit-transform: rotate(15deg) translate(0px, 6px); transform: rotate(15deg) translate(0px, 6px); } .-show .menu-button__icon:after { -webkit-transform: rotate(-15deg) translate(0px, -6px); transform: rotate(-15deg) translate(0px, -6px); } .-show .menu-button__txt::before { content: "とじる"; } /* ------------------------------------------------------------------- */ .close-button { position: relative; right: 0; margin: 0; pointer-events: auto; z-index: 201; font-weight: bolder; text-align: center; white-space: nowrap; letter-spacing: -0.1em; } .close-button a, .close-button button { position: relative; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; width: 40px; min-height: 40px; margin: auto; padding: 0; -webkit-box-sizing: border-box; box-sizing: border-box; -webkit-transition: none; transition: none; cursor: pointer; border: none; -ms-touch-action: manipulation; touch-action: manipulation; } .close-button a:hover, .close-button button:hover { color: currentColor; border: none; } /* ============================================================================================== */ /* Module / document container */ /* ============================================================================================== */ /* CMSを利用した投稿記事部分など、プレーンなタグで整形を行う場合のフリーエリア */ .document-container { font-size: clamp(0.9375rem, 0.8641304348rem + 0.3260869565vw, 1.125rem); overflow-wrap: break-word; /* * 1. Content sectioning * 2. Text content * 3. Inline text semantics * 4. Image and multimedia * 5. Embedded content * 6. Demarcating edits * 7. Table content */ /* -------------------------------------------------- * 1. Content sectioning * -------------------------------------------------- */ /* ------------------------------ */ /* ------------------------------ */ /* -------------------------------------------------- * 2. Text content * -------------------------------------------------- */ /* ------------------------------ */ /* ------------------------------ */ /* ------------------------------ */ /* ------------------------------ */ /* ------------------------------ */ /* -------------------------------------------------- * 3. Inline text semantics * -------------------------------------------------- */ /* -------------------------------------------------- * 4. Image and multimedia * -------------------------------------------------- */ /* -------------------------------------------------- * 5. Embedded content * -------------------------------------------------- */ /* -------------------------------------------------- * 6. Demarcating edits * -------------------------------------------------- */ /* -------------------------------------------------- * 7. Table content * -------------------------------------------------- */ } .document-container h1, .document-container h2, .document-container h3, .document-container h4, .document-container h5, .document-container h6 { margin: 1.5em 0 0.5em; line-height: 1.5; font-size: 135%; font-weight: bold; font-family: var(--font-ja); -webkit-font-feature-settings: "palt"; font-feature-settings: "palt"; } .document-container h1 { font-size: 150%; -webkit-text-stroke: 0.02em; } .document-container h2 { font-size: 125%; -webkit-text-stroke: 0.02em; } .document-container h3, .document-container h4, .document-container h5, .document-container h6 { font-size: 100%; } .document-container section > *:last-child { margin-bottom: 0; } .document-container p { line-height: 2; margin: 1.25em 0 0; } .document-container p:empty { display: none; } .document-container p:first-child { margin-top: 0; } .document-container ol, .document-container ul { margin: 1.5em 0 0; padding-left: 1.25em; -webkit-box-sizing: border-box; box-sizing: border-box; } .document-container ol { list-style-type: decimal; } .document-container ul { list-style-type: disc; } .document-container ul ul, .document-container ul ol, .document-container ol ul, .document-container ol ul { margin-top: 0.5em; } .document-container li { line-height: 1.6; margin-top: 0.3em; padding: 0; } .document-container li::before { content: none; } .document-container li:first-child { margin-top: 0; } .document-container dl { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; gap: 0.5em; margin: 1.5em 0 0; line-height: 1.6; } .document-container dl > div { display: -webkit-box; display: -ms-flexbox; display: flex; gap: 0.5em; } .document-container dt { min-width: 5em; margin: 0; padding-right: 0.5em; font-weight: 600; } .document-container dd { margin: 0; } .document-container blockquote { position: relative; margin: 1.5em 0; padding: 2em; -webkit-box-sizing: border-box; box-sizing: border-box; } .document-container blockquote::before { position: absolute; content: "“"; left: 0; top: -0.25em; font-size: 3em; opacity: 0.3; } .document-container hr { margin: 2em 0; border: none; border-bottom: 1px dashed var(--color-txt); } .document-container pre { overflow-x: scroll; width: 100%; margin: 2em 0; } .document-container q { margin: 1.5em 0.5em; quotes: "“" "”"; } .document-container q:before { content: open-quote; } .document-container q:after { content: close-quote; } .document-container b { font-weight: 800; } .document-container strong { font-weight: 800; } .document-container em { font-style: italic; } .document-container a { display: inline-block; text-decoration: underline; text-underline-position: under; border: none; } .document-container a [data-icon=icon_file-pdf] { vertical-align: text-bottom; } .document-container a[target=_blank]::after { font-family: "blankfont" !important; font-style: normal; font-weight: normal; font-variant: normal; text-transform: none; content: " \e901"; font-size: 90%; margin: 0; text-indent: 3px; display: inline-block; } .document-container img { width: 100%; height: auto; max-width: 100%; } .document-container figure { margin-block: 2.5em; margin-inline: 0; } .document-container figure > *:first-child { -webkit-margin-before: 0; margin-block-start: 0; } .document-container figure > *:first-child { -webkit-margin-after: 0; margin-block-end: 0; } .document-container figcaption { margin-top: 0.5em; margin-bottom: 1em; font-size: 0.75rem; font-style: italic; line-height: 1.7; color: var(--color-txt-weak); } .document-container video { width: auto; height: auto; max-width: 100%; } .document-container iframe { width: 100%; } .document-container table { width: 100%; margin: 1.5em 0; border-collapse: collapse; border-block: 1px dashed var(--color-txt); } .document-container tr { -webkit-border-before: 1px dashed var(--color-txt); border-block-start: 1px dashed var(--color-txt); } .document-container tr:first-child { -webkit-border-before: none; border-block-start: none; } .document-container th { padding: 1em; } .document-container td { padding: 1em; vertical-align: baseline; } .document-container td:first-child { -webkit-padding-start: 0; padding-inline-start: 0; min-width: 5em; } .document-container td:last-child { -webkit-padding-end: 0; padding-inline-end: 0; } /* ============================================================================================== */ /* Module / document container WordPress Gutenberg */ /* ============================================================================================== */ /** * Colors */ /** * Breakpoints & Media Queries */ /** * Colors */ /** * Fonts & basic variables. */ /** * Grid System. * https://make.wordpress.org/design/2019/10/31/proposal-a-consistent-spacing-system-for-wordpress/ */ /** * Dimensions. */ /** * Shadows. */ /** * Editor widths. */ /** * Block UI. */ /** * Border radii. */ /** * Block paddings. */ /** * Breakpoint mixins */ /** * Long content fade mixin * * Creates a fading overlay to signify that the content is longer * than the space allows. */ /** * Focus styles. */ /** * Applies editor left position to the selector passed as argument */ /** * Styles that are reused verbatim in a few places */ /** * Allows users to opt-out of animations via OS-level preferences. */ /** * Reset default styles for JavaScript UI based pages. * This is a WP-admin agnostic reset */ /** * Reset the WP Admin page styles for Gutenberg-like pages. */ #start-resizable-editor-section { display: none; } .wp-block-audio figcaption { margin-top: 0.5em; margin-bottom: 1em; } .wp-block-audio audio { width: 100%; min-width: 300px; } .wp-block-button__link { color: #fff; background-color: #32373c; border: none; border-radius: 1.55em; -webkit-box-shadow: none; box-shadow: none; cursor: pointer; display: inline-block; font-size: 1.125em; padding: 0.667em 1.333em; text-align: center; text-decoration: none; overflow-wrap: break-word; } .wp-block-button__link:hover, .wp-block-button__link:focus, .wp-block-button__link:active, .wp-block-button__link:visited { color: #fff; } .wp-block-button__link.aligncenter { text-align: center; } .wp-block-button__link.alignright { /*rtl:ignore*/ text-align: right; } .wp-block-button.is-style-squared, .wp-block-button__link.wp-block-button.is-style-squared { border-radius: 0; } .wp-block-button.no-border-radius, .wp-block-button__link.no-border-radius { border-radius: 0 !important; } .is-style-outline > .wp-block-button__link, .wp-block-button__link.is-style-outline { border: 2px solid; } .is-style-outline > .wp-block-button__link:not(.has-text-color), .wp-block-button__link.is-style-outline:not(.has-text-color) { color: #32373c; } .is-style-outline > .wp-block-button__link:not(.has-background), .wp-block-button__link.is-style-outline:not(.has-background) { background-color: transparent; } .wp-block-buttons .wp-block-button { display: inline-block; margin-right: 0.5em; margin-bottom: 0.5em; } .wp-block-buttons .wp-block-button:last-child { margin-right: 0; } .wp-block-buttons.alignright .wp-block-button { /*rtl:ignore*/ margin-right: 0; /*rtl:ignore*/ margin-left: 0.5em; } .wp-block-buttons.alignright .wp-block-button:first-child { margin-left: 0; } .wp-block-buttons.alignleft .wp-block-button { /*rtl:ignore*/ margin-left: 0; /*rtl:ignore*/ margin-right: 0.5em; } .wp-block-buttons.alignleft .wp-block-button:last-child { margin-right: 0; } .wp-block-button.aligncenter, .wp-block-buttons.aligncenter { text-align: center; } .wp-block-calendar { text-align: center; } .wp-block-calendar th, .wp-block-calendar tbody td { padding: 0.25em; border: 1px solid #ddd; } .wp-block-calendar tfoot td { border: none; } .wp-block-calendar table { width: 100%; border-collapse: collapse; } .wp-block-calendar table th { font-weight: 400; background: #ddd; } .wp-block-calendar a { text-decoration: underline; } .wp-block-calendar table tbody, .wp-block-calendar table caption { color: #40464d; } .wp-block-categories.alignleft { /*rtl:ignore*/ margin-right: 2em; } .wp-block-categories.alignright { /*rtl:ignore*/ margin-left: 2em; } .wp-block-code code { white-space: pre-wrap; overflow-wrap: break-word; } .wp-block-columns { display: -webkit-box; display: -ms-flexbox; display: flex; margin-bottom: 20px; -ms-flex-wrap: wrap; flex-wrap: wrap; /** * All Columns Alignment */ } .wp-block-columns.has-background { padding: 1.25em 2.375em; } .wp-block-columns.are-vertically-aligned-top { -webkit-box-align: start; -ms-flex-align: start; align-items: flex-start; } .wp-block-columns.are-vertically-aligned-center { -webkit-box-align: center; -ms-flex-align: center; align-items: center; } .wp-block-columns.are-vertically-aligned-bottom { -webkit-box-align: end; -ms-flex-align: end; align-items: flex-end; } .wp-block-column { -webkit-box-flex: 1; -ms-flex-positive: 1; flex-grow: 1; min-width: 0; word-break: break-word; overflow-wrap: break-word; /** * Individual Column Alignment */ } .wp-block-column.is-vertically-aligned-top { -ms-flex-item-align: start; align-self: flex-start; } .wp-block-column.is-vertically-aligned-center { -ms-grid-row-align: center; -ms-flex-item-align: center; align-self: center; } .wp-block-column.is-vertically-aligned-bottom { -ms-flex-item-align: end; align-self: flex-end; } .wp-block-column.is-vertically-aligned-top, .wp-block-column.is-vertically-aligned-center, .wp-block-column.is-vertically-aligned-bottom { width: 100%; } .wp-block-cover-image, .wp-block-cover { position: relative; background-size: cover; background-position: center center; min-height: 430px; height: 100%; width: 100%; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; -webkit-box-align: center; -ms-flex-align: center; align-items: center; padding: 1em; -webkit-box-sizing: border-box; box-sizing: border-box; /** * Set a default background color for has-background-dim _unless_ it includes another * background-color class (e.g. has-green-background-color). The presence of another * background-color class implies that another style will provide the background color * for the overlay. * * See: * - Issue with background color specificity: https://github.com/WordPress/gutenberg/issues/26545 * - Issue with alternative fix: https://github.com/WordPress/gutenberg/issues/26545 */ } .wp-block-cover-image.has-parallax, .wp-block-cover.has-parallax { background-attachment: fixed; } @supports (-webkit-overflow-scrolling: touch) { .wp-block-cover-image.has-parallax, .wp-block-cover.has-parallax { background-attachment: scroll; } } @media (prefers-reduced-motion: reduce) { .wp-block-cover-image.has-parallax, .wp-block-cover.has-parallax { background-attachment: scroll; } } .wp-block-cover-image.is-repeated, .wp-block-cover.is-repeated { background-repeat: repeat; background-size: auto; } .wp-block-cover-image.has-background-dim:not([class*=-background-color]), .wp-block-cover.has-background-dim:not([class*=-background-color]) { background-color: #000; } .wp-block-cover-image.has-background-dim::before, .wp-block-cover.has-background-dim::before { content: ""; background-color: inherit; } .wp-block-cover-image.has-background-dim:not(.has-background-gradient)::before, .wp-block-cover-image .wp-block-cover__gradient-background, .wp-block-cover.has-background-dim:not(.has-background-gradient)::before, .wp-block-cover .wp-block-cover__gradient-background { position: absolute; top: 0; left: 0; bottom: 0; right: 0; z-index: 1; opacity: 0.5; } .wp-block-cover-image.has-background-dim.has-background-dim-10:not(.has-background-gradient)::before, .wp-block-cover-image.has-background-dim.has-background-dim-10 .wp-block-cover__gradient-background, .wp-block-cover.has-background-dim.has-background-dim-10:not(.has-background-gradient)::before, .wp-block-cover.has-background-dim.has-background-dim-10 .wp-block-cover__gradient-background { opacity: 0.1; } .wp-block-cover-image.has-background-dim.has-background-dim-20:not(.has-background-gradient)::before, .wp-block-cover-image.has-background-dim.has-background-dim-20 .wp-block-cover__gradient-background, .wp-block-cover.has-background-dim.has-background-dim-20:not(.has-background-gradient)::before, .wp-block-cover.has-background-dim.has-background-dim-20 .wp-block-cover__gradient-background { opacity: 0.2; } .wp-block-cover-image.has-background-dim.has-background-dim-30:not(.has-background-gradient)::before, .wp-block-cover-image.has-background-dim.has-background-dim-30 .wp-block-cover__gradient-background, .wp-block-cover.has-background-dim.has-background-dim-30:not(.has-background-gradient)::before, .wp-block-cover.has-background-dim.has-background-dim-30 .wp-block-cover__gradient-background { opacity: 0.3; } .wp-block-cover-image.has-background-dim.has-background-dim-40:not(.has-background-gradient)::before, .wp-block-cover-image.has-background-dim.has-background-dim-40 .wp-block-cover__gradient-background, .wp-block-cover.has-background-dim.has-background-dim-40:not(.has-background-gradient)::before, .wp-block-cover.has-background-dim.has-background-dim-40 .wp-block-cover__gradient-background { opacity: 0.4; } .wp-block-cover-image.has-background-dim.has-background-dim-50:not(.has-background-gradient)::before, .wp-block-cover-image.has-background-dim.has-background-dim-50 .wp-block-cover__gradient-background, .wp-block-cover.has-background-dim.has-background-dim-50:not(.has-background-gradient)::before, .wp-block-cover.has-background-dim.has-background-dim-50 .wp-block-cover__gradient-background { opacity: 0.5; } .wp-block-cover-image.has-background-dim.has-background-dim-60:not(.has-background-gradient)::before, .wp-block-cover-image.has-background-dim.has-background-dim-60 .wp-block-cover__gradient-background, .wp-block-cover.has-background-dim.has-background-dim-60:not(.has-background-gradient)::before, .wp-block-cover.has-background-dim.has-background-dim-60 .wp-block-cover__gradient-background { opacity: 0.6; } .wp-block-cover-image.has-background-dim.has-background-dim-70:not(.has-background-gradient)::before, .wp-block-cover-image.has-background-dim.has-background-dim-70 .wp-block-cover__gradient-background, .wp-block-cover.has-background-dim.has-background-dim-70:not(.has-background-gradient)::before, .wp-block-cover.has-background-dim.has-background-dim-70 .wp-block-cover__gradient-background { opacity: 0.7; } .wp-block-cover-image.has-background-dim.has-background-dim-80:not(.has-background-gradient)::before, .wp-block-cover-image.has-background-dim.has-background-dim-80 .wp-block-cover__gradient-background, .wp-block-cover.has-background-dim.has-background-dim-80:not(.has-background-gradient)::before, .wp-block-cover.has-background-dim.has-background-dim-80 .wp-block-cover__gradient-background { opacity: 0.8; } .wp-block-cover-image.has-background-dim.has-background-dim-90:not(.has-background-gradient)::before, .wp-block-cover-image.has-background-dim.has-background-dim-90 .wp-block-cover__gradient-background, .wp-block-cover.has-background-dim.has-background-dim-90:not(.has-background-gradient)::before, .wp-block-cover.has-background-dim.has-background-dim-90 .wp-block-cover__gradient-background { opacity: 0.9; } .wp-block-cover-image.has-background-dim.has-background-dim-100:not(.has-background-gradient)::before, .wp-block-cover-image.has-background-dim.has-background-dim-100 .wp-block-cover__gradient-background, .wp-block-cover.has-background-dim.has-background-dim-100:not(.has-background-gradient)::before, .wp-block-cover.has-background-dim.has-background-dim-100 .wp-block-cover__gradient-background { opacity: 1; } .wp-block-cover-image.alignleft, .wp-block-cover-image.alignright, .wp-block-cover.alignleft, .wp-block-cover.alignright { max-width: 290px; width: 100%; } .wp-block-cover-image::after, .wp-block-cover::after { display: block; content: ""; font-size: 0; min-height: inherit; } @supports (position: sticky) { .wp-block-cover-image::after, .wp-block-cover::after { content: none; } } .wp-block-cover-image.aligncenter, .wp-block-cover-image.alignleft, .wp-block-cover-image.alignright, .wp-block-cover.aligncenter, .wp-block-cover.alignleft, .wp-block-cover.alignright { display: -webkit-box; display: -ms-flexbox; display: flex; } .wp-block-cover-image .wp-block-cover__inner-container, .wp-block-cover .wp-block-cover__inner-container { width: 100%; z-index: 1; color: #fff; } .wp-block-cover-image p:not(.has-text-color), .wp-block-cover-image h1:not(.has-text-color), .wp-block-cover-image h2:not(.has-text-color), .wp-block-cover-image h3:not(.has-text-color), .wp-block-cover-image h4:not(.has-text-color), .wp-block-cover-image h5:not(.has-text-color), .wp-block-cover-image h6:not(.has-text-color), .wp-block-cover-image .wp-block-subhead:not(.has-text-color), .wp-block-cover p:not(.has-text-color), .wp-block-cover h1:not(.has-text-color), .wp-block-cover h2:not(.has-text-color), .wp-block-cover h3:not(.has-text-color), .wp-block-cover h4:not(.has-text-color), .wp-block-cover h5:not(.has-text-color), .wp-block-cover h6:not(.has-text-color), .wp-block-cover .wp-block-subhead:not(.has-text-color) { color: inherit; } .wp-block-cover-image.is-position-top-left, .wp-block-cover.is-position-top-left { -webkit-box-align: start; -ms-flex-align: start; align-items: flex-start; -webkit-box-pack: start; -ms-flex-pack: start; justify-content: flex-start; } .wp-block-cover-image.is-position-top-center, .wp-block-cover.is-position-top-center { -webkit-box-align: start; -ms-flex-align: start; align-items: flex-start; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; } .wp-block-cover-image.is-position-top-right, .wp-block-cover.is-position-top-right { -webkit-box-align: start; -ms-flex-align: start; align-items: flex-start; -webkit-box-pack: end; -ms-flex-pack: end; justify-content: flex-end; } .wp-block-cover-image.is-position-center-left, .wp-block-cover.is-position-center-left { -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: start; -ms-flex-pack: start; justify-content: flex-start; } .wp-block-cover-image.is-position-center-center, .wp-block-cover.is-position-center-center { -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; } .wp-block-cover-image.is-position-center-right, .wp-block-cover.is-position-center-right { -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: end; -ms-flex-pack: end; justify-content: flex-end; } .wp-block-cover-image.is-position-bottom-left, .wp-block-cover.is-position-bottom-left { -webkit-box-align: end; -ms-flex-align: end; align-items: flex-end; -webkit-box-pack: start; -ms-flex-pack: start; justify-content: flex-start; } .wp-block-cover-image.is-position-bottom-center, .wp-block-cover.is-position-bottom-center { -webkit-box-align: end; -ms-flex-align: end; align-items: flex-end; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; } .wp-block-cover-image.is-position-bottom-right, .wp-block-cover.is-position-bottom-right { -webkit-box-align: end; -ms-flex-align: end; align-items: flex-end; -webkit-box-pack: end; -ms-flex-pack: end; justify-content: flex-end; } .wp-block-cover-image.has-custom-content-position.has-custom-content-position .wp-block-cover__inner-container, .wp-block-cover.has-custom-content-position.has-custom-content-position .wp-block-cover__inner-container { margin: 0; width: auto; } .wp-block-cover__video-background { position: absolute; top: 50%; left: 50%; -webkit-transform: translateX(-50%) translateY(-50%); transform: translateX(-50%) translateY(-50%); width: 100%; height: 100%; z-index: 0; -o-object-fit: cover; object-fit: cover; } section.wp-block-cover-image h2, .wp-block-cover-image-text, .wp-block-cover-text { color: #fff; } section.wp-block-cover-image h2 a, section.wp-block-cover-image h2 a:hover, section.wp-block-cover-image h2 a:focus, section.wp-block-cover-image h2 a:active, .wp-block-cover-image-text a, .wp-block-cover-image-text a:hover, .wp-block-cover-image-text a:focus, .wp-block-cover-image-text a:active, .wp-block-cover-text a, .wp-block-cover-text a:hover, .wp-block-cover-text a:focus, .wp-block-cover-text a:active { color: #fff; } .wp-block-cover-image .wp-block-cover.has-left-content { -webkit-box-pack: start; -ms-flex-pack: start; justify-content: flex-start; } .wp-block-cover-image .wp-block-cover.has-right-content { -webkit-box-pack: end; -ms-flex-pack: end; justify-content: flex-end; } section.wp-block-cover-image.has-left-content > h2, .wp-block-cover-image.has-left-content .wp-block-cover-image-text, .wp-block-cover.has-left-content .wp-block-cover-text { margin-left: 0; text-align: left; } section.wp-block-cover-image.has-right-content > h2, .wp-block-cover-image.has-right-content .wp-block-cover-image-text, .wp-block-cover.has-right-content .wp-block-cover-text { margin-right: 0; text-align: right; } section.wp-block-cover-image > h2, .wp-block-cover-image .wp-block-cover-image-text, .wp-block-cover .wp-block-cover-text { font-size: 2em; line-height: 1.25; z-index: 1; margin-bottom: 0; max-width: 580px; padding: 0.44em; text-align: center; } .wp-block[data-align=left] > [data-type="core/embed"], .wp-block[data-align=right] > [data-type="core/embed"], .wp-block-embed.alignleft, .wp-block-embed.alignright { max-width: 360px; width: 100%; } .wp-block[data-align=left] > [data-type="core/embed"] .wp-block-embed__wrapper, .wp-block[data-align=right] > [data-type="core/embed"] .wp-block-embed__wrapper, .wp-block-embed.alignleft .wp-block-embed__wrapper, .wp-block-embed.alignright .wp-block-embed__wrapper { min-width: 280px; } .wp-block-embed { margin-bottom: 1em; } .wp-block-embed figcaption { margin-top: 0.5em; margin-bottom: 1em; } .wp-block-embed iframe { max-width: 100%; height: auto; } .wp-block-embed__wrapper { position: relative; } .wp-has-aspect-ratio .wp-block-embed__wrapper::before { content: ""; display: block; padding-top: 50%; } .wp-has-aspect-ratio iframe { position: absolute; top: 0; right: 0; bottom: 0; left: 0; height: 100%; width: 100%; } .wp-embed-aspect-21-9 .wp-block-embed__wrapper::before { padding-top: 42.85%; } .wp-embed-aspect-18-9 .wp-block-embed__wrapper::before { padding-top: 50%; } .wp-embed-aspect-16-9 .wp-block-embed__wrapper::before { padding-top: 56.25%; } .wp-embed-aspect-4-3 .wp-block-embed__wrapper::before { padding-top: 75%; } .wp-embed-aspect-1-1 .wp-block-embed__wrapper::before { padding-top: 100%; } .wp-embed-aspect-9-16 .wp-block-embed__wrapper::before { padding-top: 177.77%; } .wp-embed-aspect-1-2 .wp-block-embed__wrapper::before { padding-top: 200%; } .wp-block-file { margin-bottom: 1.5em; } .wp-block-file.aligncenter { text-align: center; } .wp-block-file.alignright { /*rtl:ignore*/ text-align: right; } .wp-block-file .wp-block-file__button { background: #32373c; border-radius: 2em; color: #fff; font-size: 0.8em; padding: 0.5em 1em; } .wp-block-file a.wp-block-file__button { text-decoration: none; } .wp-block-file a.wp-block-file__button:hover, .wp-block-file a.wp-block-file__button:visited, .wp-block-file a.wp-block-file__button:focus, .wp-block-file a.wp-block-file__button:active { -webkit-box-shadow: none; box-shadow: none; color: #fff; opacity: 0.85; text-decoration: none; } .wp-block-file * + .wp-block-file__button { margin-left: 0.75em; } .wp-block-gallery, .blocks-gallery-grid { display: -webkit-box; display: -ms-flexbox; display: flex; -ms-flex-wrap: wrap; flex-wrap: wrap; list-style-type: none; padding: 0; margin: 0; } .wp-block-gallery .blocks-gallery-image, .wp-block-gallery .blocks-gallery-item, .blocks-gallery-grid .blocks-gallery-image, .blocks-gallery-grid .blocks-gallery-item { margin: 0 1em 1em 0; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-flex: 1; -ms-flex-positive: 1; flex-grow: 1; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; position: relative; width: calc(50% - 1em); } .wp-block-gallery .blocks-gallery-image:nth-of-type(even), .wp-block-gallery .blocks-gallery-item:nth-of-type(even), .blocks-gallery-grid .blocks-gallery-image:nth-of-type(even), .blocks-gallery-grid .blocks-gallery-item:nth-of-type(even) { margin-right: 0; } .wp-block-gallery .blocks-gallery-image figure, .wp-block-gallery .blocks-gallery-item figure, .blocks-gallery-grid .blocks-gallery-image figure, .blocks-gallery-grid .blocks-gallery-item figure { margin: 0; height: 100%; } @supports (position: sticky) { .wp-block-gallery .blocks-gallery-image figure, .wp-block-gallery .blocks-gallery-item figure, .blocks-gallery-grid .blocks-gallery-image figure, .blocks-gallery-grid .blocks-gallery-item figure { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: end; -ms-flex-align: end; align-items: flex-end; -webkit-box-pack: start; -ms-flex-pack: start; justify-content: flex-start; } } .wp-block-gallery .blocks-gallery-image img, .wp-block-gallery .blocks-gallery-item img, .blocks-gallery-grid .blocks-gallery-image img, .blocks-gallery-grid .blocks-gallery-item img { display: block; max-width: 100%; height: auto; width: 100%; } @supports (position: sticky) { .wp-block-gallery .blocks-gallery-image img, .wp-block-gallery .blocks-gallery-item img, .blocks-gallery-grid .blocks-gallery-image img, .blocks-gallery-grid .blocks-gallery-item img { width: auto; } } .wp-block-gallery .blocks-gallery-image figcaption, .wp-block-gallery .blocks-gallery-item figcaption, .blocks-gallery-grid .blocks-gallery-image figcaption, .blocks-gallery-grid .blocks-gallery-item figcaption { position: absolute; bottom: 0; width: 100%; max-height: 100%; overflow: auto; padding: 3em 0.77em 0.7em; color: #fff; text-align: center; font-size: 0.8em; background: -webkit-gradient(linear, left bottom, left top, color-stop(0, rgba(0, 0, 0, 0.7)), color-stop(70%, rgba(0, 0, 0, 0.3)), to(transparent)); background: linear-gradient(0deg, rgba(0, 0, 0, 0.7) 0, rgba(0, 0, 0, 0.3) 70%, transparent); -webkit-box-sizing: border-box; box-sizing: border-box; margin: 0; } .wp-block-gallery .blocks-gallery-image figcaption img, .wp-block-gallery .blocks-gallery-item figcaption img, .blocks-gallery-grid .blocks-gallery-image figcaption img, .blocks-gallery-grid .blocks-gallery-item figcaption img { display: inline; } .wp-block-gallery figcaption, .blocks-gallery-grid figcaption { -webkit-box-flex: 1; -ms-flex-positive: 1; flex-grow: 1; } .wp-block-gallery.is-cropped .blocks-gallery-image a, .wp-block-gallery.is-cropped .blocks-gallery-image img, .wp-block-gallery.is-cropped .blocks-gallery-item a, .wp-block-gallery.is-cropped .blocks-gallery-item img, .blocks-gallery-grid.is-cropped .blocks-gallery-image a, .blocks-gallery-grid.is-cropped .blocks-gallery-image img, .blocks-gallery-grid.is-cropped .blocks-gallery-item a, .blocks-gallery-grid.is-cropped .blocks-gallery-item img { width: 100%; } @supports (position: sticky) { .wp-block-gallery.is-cropped .blocks-gallery-image a, .wp-block-gallery.is-cropped .blocks-gallery-image img, .wp-block-gallery.is-cropped .blocks-gallery-item a, .wp-block-gallery.is-cropped .blocks-gallery-item img, .blocks-gallery-grid.is-cropped .blocks-gallery-image a, .blocks-gallery-grid.is-cropped .blocks-gallery-image img, .blocks-gallery-grid.is-cropped .blocks-gallery-item a, .blocks-gallery-grid.is-cropped .blocks-gallery-item img { height: 100%; -webkit-box-flex: 1; -ms-flex: 1; flex: 1; -o-object-fit: cover; object-fit: cover; } } .wp-block-gallery.columns-1 .blocks-gallery-image, .wp-block-gallery.columns-1 .blocks-gallery-item, .blocks-gallery-grid.columns-1 .blocks-gallery-image, .blocks-gallery-grid.columns-1 .blocks-gallery-item { width: 100%; margin-right: 0; } @media (min-width: 46.25em) { .wp-block-gallery.columns-3 .blocks-gallery-image, .wp-block-gallery.columns-3 .blocks-gallery-item, .blocks-gallery-grid.columns-3 .blocks-gallery-image, .blocks-gallery-grid.columns-3 .blocks-gallery-item { width: calc(33.33333% - 0.66667em); margin-right: 1em; } .wp-block-gallery.columns-4 .blocks-gallery-image, .wp-block-gallery.columns-4 .blocks-gallery-item, .blocks-gallery-grid.columns-4 .blocks-gallery-image, .blocks-gallery-grid.columns-4 .blocks-gallery-item { width: calc(25% - 0.75em); margin-right: 1em; } .wp-block-gallery.columns-5 .blocks-gallery-image, .wp-block-gallery.columns-5 .blocks-gallery-item, .blocks-gallery-grid.columns-5 .blocks-gallery-image, .blocks-gallery-grid.columns-5 .blocks-gallery-item { width: calc(20% - 0.8em); margin-right: 1em; } .wp-block-gallery.columns-6 .blocks-gallery-image, .wp-block-gallery.columns-6 .blocks-gallery-item, .blocks-gallery-grid.columns-6 .blocks-gallery-image, .blocks-gallery-grid.columns-6 .blocks-gallery-item { width: calc(16.66667% - 0.83333em); margin-right: 1em; } .wp-block-gallery.columns-7 .blocks-gallery-image, .wp-block-gallery.columns-7 .blocks-gallery-item, .blocks-gallery-grid.columns-7 .blocks-gallery-image, .blocks-gallery-grid.columns-7 .blocks-gallery-item { width: calc(14.28571% - 0.85714em); margin-right: 1em; } .wp-block-gallery.columns-8 .blocks-gallery-image, .wp-block-gallery.columns-8 .blocks-gallery-item, .blocks-gallery-grid.columns-8 .blocks-gallery-image, .blocks-gallery-grid.columns-8 .blocks-gallery-item { width: calc(12.5% - 0.875em); margin-right: 1em; } .wp-block-gallery.columns-1 .blocks-gallery-image:nth-of-type(1n), .wp-block-gallery.columns-1 .blocks-gallery-item:nth-of-type(1n), .blocks-gallery-grid.columns-1 .blocks-gallery-image:nth-of-type(1n), .blocks-gallery-grid.columns-1 .blocks-gallery-item:nth-of-type(1n) { margin-right: 0; } .wp-block-gallery.columns-2 .blocks-gallery-image:nth-of-type(2n), .wp-block-gallery.columns-2 .blocks-gallery-item:nth-of-type(2n), .blocks-gallery-grid.columns-2 .blocks-gallery-image:nth-of-type(2n), .blocks-gallery-grid.columns-2 .blocks-gallery-item:nth-of-type(2n) { margin-right: 0; } .wp-block-gallery.columns-3 .blocks-gallery-image:nth-of-type(3n), .wp-block-gallery.columns-3 .blocks-gallery-item:nth-of-type(3n), .blocks-gallery-grid.columns-3 .blocks-gallery-image:nth-of-type(3n), .blocks-gallery-grid.columns-3 .blocks-gallery-item:nth-of-type(3n) { margin-right: 0; } .wp-block-gallery.columns-4 .blocks-gallery-image:nth-of-type(4n), .wp-block-gallery.columns-4 .blocks-gallery-item:nth-of-type(4n), .blocks-gallery-grid.columns-4 .blocks-gallery-image:nth-of-type(4n), .blocks-gallery-grid.columns-4 .blocks-gallery-item:nth-of-type(4n) { margin-right: 0; } .wp-block-gallery.columns-5 .blocks-gallery-image:nth-of-type(5n), .wp-block-gallery.columns-5 .blocks-gallery-item:nth-of-type(5n), .blocks-gallery-grid.columns-5 .blocks-gallery-image:nth-of-type(5n), .blocks-gallery-grid.columns-5 .blocks-gallery-item:nth-of-type(5n) { margin-right: 0; } .wp-block-gallery.columns-6 .blocks-gallery-image:nth-of-type(6n), .wp-block-gallery.columns-6 .blocks-gallery-item:nth-of-type(6n), .blocks-gallery-grid.columns-6 .blocks-gallery-image:nth-of-type(6n), .blocks-gallery-grid.columns-6 .blocks-gallery-item:nth-of-type(6n) { margin-right: 0; } .wp-block-gallery.columns-7 .blocks-gallery-image:nth-of-type(7n), .wp-block-gallery.columns-7 .blocks-gallery-item:nth-of-type(7n), .blocks-gallery-grid.columns-7 .blocks-gallery-image:nth-of-type(7n), .blocks-gallery-grid.columns-7 .blocks-gallery-item:nth-of-type(7n) { margin-right: 0; } .wp-block-gallery.columns-8 .blocks-gallery-image:nth-of-type(8n), .wp-block-gallery.columns-8 .blocks-gallery-item:nth-of-type(8n), .blocks-gallery-grid.columns-8 .blocks-gallery-image:nth-of-type(8n), .blocks-gallery-grid.columns-8 .blocks-gallery-item:nth-of-type(8n) { margin-right: 0; } } .wp-block-gallery .blocks-gallery-image:last-child, .wp-block-gallery .blocks-gallery-item:last-child, .blocks-gallery-grid .blocks-gallery-image:last-child, .blocks-gallery-grid .blocks-gallery-item:last-child { margin-right: 0; } .wp-block-gallery.alignleft, .wp-block-gallery.alignright, .blocks-gallery-grid.alignleft, .blocks-gallery-grid.alignright { max-width: 290px; width: 100%; } .wp-block-gallery.aligncenter .blocks-gallery-item figure, .blocks-gallery-grid.aligncenter .blocks-gallery-item figure { -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; } .wp-block-group { -webkit-box-sizing: border-box; box-sizing: border-box; } h1.has-background, h2.has-background, h3.has-background, h4.has-background, h5.has-background, h6.has-background { padding: 1.25em 2.375em; } .wp-block-image { margin-bottom: 20px; } @media (min-width: 46.25em) { .wp-block-image { margin-bottom: 40px; -ms-flex-wrap: nowrap; flex-wrap: nowrap; } } .wp-block-image { margin-inline: 0; } .wp-block-image img { max-width: 100%; border-radius: 8px; } .wp-block-image.aligncenter { text-align: center; } .wp-block-image.alignfull img, .wp-block-image.alignwide img { width: 100%; } .wp-block-image .alignleft, .wp-block-image .alignright, .wp-block-image .aligncenter { display: table; } .wp-block-image .alignleft > figcaption, .wp-block-image .alignright > figcaption, .wp-block-image .aligncenter > figcaption { display: table-caption; caption-side: bottom; } .wp-block-image .alignleft { /*rtl:ignore*/ float: left; /*rtl:ignore*/ margin-left: 0; margin-right: 1em; margin-top: 0.5em; margin-bottom: 0.5em; } .wp-block-image .alignright { /*rtl:ignore*/ float: right; /*rtl:ignore*/ margin-right: 0; margin-left: 1em; margin-top: 0.5em; margin-bottom: 0.5em; } .wp-block-image .aligncenter { margin-left: auto; margin-right: auto; } .is-style-rounded img { border-radius: 9999px; } .is-style-circle-mask img { border-radius: 9999px; } @supports ((-webkit-mask-image: none) or (mask-image: none)) or (-webkit-mask-image: none) { .is-style-circle-mask img { /* stylelint-disable */ -webkit-mask-image: url('data:image/svg+xml;utf8,'); mask-image: url('data:image/svg+xml;utf8,'); /* stylelint-enable */ mask-mode: alpha; -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; -webkit-mask-size: contain; mask-size: contain; -webkit-mask-position: center; mask-position: center; border-radius: 0; } } .wp-block-latest-comments__comment { line-height: 1.1; list-style: none; margin-bottom: 1em; } .has-avatars .wp-block-latest-comments__comment { min-height: 2.25em; list-style: none; } .has-avatars .wp-block-latest-comments__comment .wp-block-latest-comments__comment-meta, .has-avatars .wp-block-latest-comments__comment .wp-block-latest-comments__comment-excerpt { margin-left: 3.25em; } .has-dates .wp-block-latest-comments__comment, .has-excerpts .wp-block-latest-comments__comment { line-height: 1.5; } .wp-block-latest-comments__comment-excerpt p { font-size: 0.875em; line-height: 1.8; margin: 0.36em 0 1.4em; } .wp-block-latest-comments__comment-date { display: block; font-size: 0.75em; } .wp-block-latest-comments .avatar, .wp-block-latest-comments__comment-avatar { border-radius: 1.5em; display: block; float: left; height: 2.5em; margin-right: 0.75em; width: 2.5em; } .wp-block-latest-posts.alignleft { /*rtl:ignore*/ margin-right: 2em; } .wp-block-latest-posts.alignright { /*rtl:ignore*/ margin-left: 2em; } .wp-block-latest-posts.wp-block-latest-posts__list { list-style: none; } .wp-block-latest-posts.wp-block-latest-posts__list li { clear: both; } .wp-block-latest-posts.is-grid { display: -webkit-box; display: -ms-flexbox; display: flex; -ms-flex-wrap: wrap; flex-wrap: wrap; padding: 0; } .wp-block-latest-posts.is-grid li { margin: 0 1.25em 1.25em 0; width: 100%; } @media (min-width: 46.25em) { .wp-block-latest-posts.columns-2 li { width: calc(50% - 1.25em + 0.625em); } .wp-block-latest-posts.columns-2 li:nth-child(2n) { margin-right: 0; } .wp-block-latest-posts.columns-3 li { width: calc(33.3333333333% - 1.25em + 0.4166666667em); } .wp-block-latest-posts.columns-3 li:nth-child(3n) { margin-right: 0; } .wp-block-latest-posts.columns-4 li { width: calc(25% - 1.25em + 0.3125em); } .wp-block-latest-posts.columns-4 li:nth-child(4n) { margin-right: 0; } .wp-block-latest-posts.columns-5 li { width: calc(20% - 1.25em + 0.25em); } .wp-block-latest-posts.columns-5 li:nth-child(5n) { margin-right: 0; } .wp-block-latest-posts.columns-6 li { width: calc(16.6666666667% - 1.25em + 0.2083333333em); } .wp-block-latest-posts.columns-6 li:nth-child(6n) { margin-right: 0; } } .wp-block-latest-posts__post-date, .wp-block-latest-posts__post-author { display: block; color: #555; font-size: 0.8125em; } .wp-block-latest-posts__post-excerpt { margin-top: 0.5em; margin-bottom: 1em; } .wp-block-latest-posts__featured-image a { display: inline-block; } .wp-block-latest-posts__featured-image img { height: auto; width: auto; } .wp-block-latest-posts__featured-image.alignleft { /*rtl:ignore*/ margin-right: 1em; } .wp-block-latest-posts__featured-image.alignright { /*rtl:ignore*/ margin-left: 1em; } .wp-block-latest-posts__featured-image.aligncenter { margin-bottom: 1em; text-align: center; } .block-editor-image-alignment-control__row .components-base-control__field { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; -webkit-box-align: center; -ms-flex-align: center; align-items: center; } .block-editor-image-alignment-control__row .components-base-control__field .components-base-control__label { margin-bottom: 0; } ol.has-background, ul.has-background { padding: 1.25em 2.375em; } .wp-block-media-text { /*!rtl:begin:ignore*/ direction: ltr; /*!rtl:end:ignore*/ display: -ms-grid; display: grid; -ms-grid-columns: 50% 1fr; grid-template-columns: 50% 1fr; -ms-grid-rows: auto; grid-template-rows: auto; } .wp-block-media-text.has-media-on-the-right { -ms-grid-columns: 1fr 50%; grid-template-columns: 1fr 50%; } .wp-block-media-text.is-vertically-aligned-top .wp-block-media-text__content, .wp-block-media-text.is-vertically-aligned-top .wp-block-media-text__media { -ms-grid-row-align: start; -ms-flex-item-align: start; align-self: start; } .wp-block-media-text .wp-block-media-text__content, .wp-block-media-text .wp-block-media-text__media, .wp-block-media-text.is-vertically-aligned-center .wp-block-media-text__content, .wp-block-media-text.is-vertically-aligned-center .wp-block-media-text__media { -ms-grid-row-align: center; -ms-flex-item-align: center; align-self: center; } .wp-block-media-text.is-vertically-aligned-bottom .wp-block-media-text__content, .wp-block-media-text.is-vertically-aligned-bottom .wp-block-media-text__media { -ms-grid-row-align: end; -ms-flex-item-align: end; align-self: end; } .wp-block-media-text .wp-block-media-text__media { /*!rtl:begin:ignore*/ -ms-grid-column: 1; grid-column: 1; -ms-grid-row: 1; grid-row: 1; /*!rtl:end:ignore*/ margin: 0; } .wp-block-media-text .wp-block-media-text__content { direction: ltr; /*!rtl:begin:ignore*/ -ms-grid-column: 2; grid-column: 2; -ms-grid-row: 1; grid-row: 1; /*!rtl:end:ignore*/ padding: 0 8% 0 8%; word-break: break-word; } .wp-block-media-text.has-media-on-the-right .wp-block-media-text__media { /*!rtl:begin:ignore*/ -ms-grid-column: 2; grid-column: 2; -ms-grid-row: 1; grid-row: 1; /*!rtl:end:ignore*/ } .wp-block-media-text.has-media-on-the-right .wp-block-media-text__content { /*!rtl:begin:ignore*/ -ms-grid-column: 1; grid-column: 1; -ms-grid-row: 1; grid-row: 1; /*!rtl:end:ignore*/ } .wp-block-media-text__media img, .wp-block-media-text__media video { max-width: unset; width: 100%; vertical-align: middle; } .wp-block-media-text.is-image-fill figure.wp-block-media-text__media { height: 100%; min-height: 250px; background-size: cover; } .wp-block-media-text.is-image-fill figure.wp-block-media-text__media > img { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); border: 0; } /* * Here we here not able to use a mobile first CSS approach. * Custom widths are set using inline styles, and on mobile, * we need 100% width, so we use important to overwrite the inline style. * If the style were set on mobile first, on desktop styles, * we would have no way of setting the style again to the inline style. */ @media (min-width: 46.25em) { .wp-block-media-text.is-stacked-on-mobile { -ms-grid-columns: 100% !important; grid-template-columns: 100% !important; } .wp-block-media-text.is-stacked-on-mobile .wp-block-media-text__media { -ms-grid-column: 1; grid-column: 1; -ms-grid-row: 1; grid-row: 1; } .wp-block-media-text.is-stacked-on-mobile .wp-block-media-text__content { -ms-grid-column: 1; grid-column: 1; -ms-grid-row: 2; grid-row: 2; } } .wp-block-navigation:not(.has-background) .wp-block-navigation__container .wp-block-navigation-link:not(.has-text-color) { color: #1e1e1e; } .wp-block-navigation:not(.has-background) .wp-block-navigation__container .wp-block-navigation__container { background-color: #fff; } .items-justified-left > ul { -webkit-box-pack: start; -ms-flex-pack: start; justify-content: flex-start; } .items-justified-center > ul { -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; } .items-justified-right > ul { -webkit-box-pack: end; -ms-flex-pack: end; justify-content: flex-end; } .wp-block-navigation-link { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; position: relative; margin: 0; } .wp-block-navigation-link .wp-block-navigation__container:empty { display: none; } .wp-block-navigation__container { list-style: none; margin: 0; padding-left: 0; display: -webkit-box; display: -ms-flexbox; display: flex; -ms-flex-wrap: wrap; flex-wrap: wrap; } .is-vertical .wp-block-navigation__container { display: block; } .has-child > .wp-block-navigation-link__content { padding-right: 0.5em; } .has-child .wp-block-navigation__container { border: 1px solid rgba(0, 0, 0, 0.15); background-color: inherit; color: inherit; position: absolute; left: 0; top: 100%; width: -webkit-fit-content; width: -moz-fit-content; width: fit-content; z-index: 2; opacity: 0; -webkit-transition: opacity 0.1s linear; transition: opacity 0.1s linear; visibility: hidden; } .has-child .wp-block-navigation__container > .wp-block-navigation-link > .wp-block-navigation-link__content { -webkit-box-flex: 1; -ms-flex-positive: 1; flex-grow: 1; } .has-child .wp-block-navigation__container > .wp-block-navigation-link > .wp-block-navigation-link__submenu-icon { padding-right: 0.5em; } @media (min-width: 46.25em) { .has-child .wp-block-navigation__container { left: 1.5em; } .has-child .wp-block-navigation__container .wp-block-navigation__container { left: 100%; top: -1px; } .has-child .wp-block-navigation__container .wp-block-navigation__container::before { content: ""; position: absolute; right: 100%; height: 100%; display: block; width: 0.5em; background: transparent; } .has-child .wp-block-navigation__container .wp-block-navigation-link__submenu-icon svg { -webkit-transform: rotate(0); transform: rotate(0); } } .has-child:hover { cursor: pointer; } .has-child:hover > .wp-block-navigation__container { visibility: visible; opacity: 1; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; } .has-child:focus-within { cursor: pointer; } .has-child:focus-within > .wp-block-navigation__container { visibility: visible; opacity: 1; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; } .wp-block-navigation-link__content { color: inherit; text-decoration: none; padding: 0.5em 1em; } .wp-block-navigation-link__content + .wp-block-navigation-link__content { padding-top: 0; } .has-text-color .wp-block-navigation-link__content { color: inherit; } .wp-block-navigation-link__label { word-break: normal; overflow-wrap: break-word; } .wp-block-navigation-link__submenu-icon { height: inherit; padding: 0.375em 1em 0.375em 0; } .wp-block-navigation-link__submenu-icon svg { fill: currentColor; } @media (min-width: 46.25em) { .wp-block-navigation-link__submenu-icon svg { -webkit-transform: rotate(90deg); transform: rotate(90deg); } } .is-small-text { font-size: 0.875em; } .is-regular-text { font-size: 1em; } .is-large-text { font-size: 2.25em; } .is-larger-text { font-size: 3em; } .has-drop-cap:not(:focus)::first-letter { float: left; font-size: 8.4em; line-height: 0.68; font-weight: 100; margin: 0.05em 0.1em 0 0; text-transform: uppercase; font-style: normal; } p.has-background { padding: 1.25em 2.375em; } p.has-text-color a { color: inherit; } .wp-block-post-author { display: -webkit-box; display: -ms-flexbox; display: flex; -ms-flex-wrap: wrap; flex-wrap: wrap; } .wp-block-post-author__byline { width: 100%; margin-top: 0; margin-bottom: 0; font-size: 0.5em; } .wp-block-post-author__avatar { margin-right: 1em; } .wp-block-post-author__bio { margin-bottom: 0.7em; font-size: 0.7em; } .wp-block-post-author__content { -webkit-box-flex: 1; -ms-flex-positive: 1; flex-grow: 1; -ms-flex-preferred-size: 0; flex-basis: 0; } .wp-block-post-author__name { font-weight: bold; margin: 0; } .wp-block-pullquote { padding: 3em 0; margin-left: 0; margin-right: 0; text-align: center; } .wp-block-pullquote.alignleft, .wp-block-pullquote.alignright { max-width: 290px; } .wp-block-pullquote.alignleft p, .wp-block-pullquote.alignright p { font-size: 1.25em; } .wp-block-pullquote p { font-size: 1.75em; line-height: 1.6; } .wp-block-pullquote cite, .wp-block-pullquote footer { position: relative; } .wp-block-pullquote .has-text-color a { color: inherit; } .wp-block-pullquote:not(.is-style-solid-color) { background: none; } .wp-block-pullquote.is-style-solid-color { border: none; } .wp-block-pullquote.is-style-solid-color blockquote { margin-left: auto; margin-right: auto; text-align: left; max-width: 60%; } .wp-block-pullquote.is-style-solid-color blockquote p { margin-top: 0; margin-bottom: 0; font-size: 2em; } .wp-block-pullquote.is-style-solid-color blockquote cite { text-transform: none; font-style: normal; } .wp-block-pullquote cite { color: inherit; } .wp-block-quote.is-style-large, .wp-block-quote.is-large { margin-bottom: 1em; padding: 0 1em; } .wp-block-quote.is-style-large p, .wp-block-quote.is-large p { font-size: 1.5em; font-style: italic; line-height: 1.6; } .wp-block-quote.is-style-large cite, .wp-block-quote.is-style-large footer, .wp-block-quote.is-large cite, .wp-block-quote.is-large footer { font-size: 1.125em; text-align: right; } .wp-block-rss.alignleft { /*rtl:ignore*/ margin-right: 2em; } .wp-block-rss.alignright { /*rtl:ignore*/ margin-left: 2em; } .wp-block-rss.is-grid { display: -webkit-box; display: -ms-flexbox; display: flex; -ms-flex-wrap: wrap; flex-wrap: wrap; padding: 0; list-style: none; } .wp-block-rss.is-grid li { margin: 0 1em 1em 0; width: 100%; } @media (min-width: 46.25em) { .wp-block-rss.columns-2 li { width: calc(50% - 1em); } .wp-block-rss.columns-3 li { width: calc(33.3333333333% - 1em); } .wp-block-rss.columns-4 li { width: calc(25% - 1em); } .wp-block-rss.columns-5 li { width: calc(20% - 1em); } .wp-block-rss.columns-6 li { width: calc(16.6666666667% - 1em); } } .wp-block-rss__item-publish-date, .wp-block-rss__item-author { display: block; color: #555; font-size: 0.8125em; } .wp-block-search .wp-block-search__inside-wrapper { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-flex: 1; -ms-flex: auto; flex: auto; -ms-flex-wrap: nowrap; flex-wrap: nowrap; max-width: 100%; } .wp-block-search .wp-block-search__label { width: 100%; } .wp-block-search .wp-block-search__input { -webkit-box-flex: 1; -ms-flex-positive: 1; flex-grow: 1; min-width: 3em; border: 1px solid #949494; } .wp-block-search .wp-block-search__button { margin-left: 0.625em; word-break: normal; } .wp-block-search .wp-block-search__button svg { min-width: 1.5em; min-height: 1.5em; } .wp-block-search.wp-block-search__button-only .wp-block-search__button { margin-left: 0; } .wp-block-search.wp-block-search__button-inside .wp-block-search__inside-wrapper { padding: 4px; border: 1px solid #949494; } .wp-block-search.wp-block-search__button-inside .wp-block-search__inside-wrapper .wp-block-search__input { border-radius: 0; border: none; padding: 0 0 0 0.25em; } .wp-block-search.wp-block-search__button-inside .wp-block-search__inside-wrapper .wp-block-search__input:focus { outline: none; } .wp-block-search.wp-block-search__button-inside .wp-block-search__inside-wrapper .wp-block-search__button { padding: 0.125em 0.5em; } .wp-block-separator.is-style-wide { border-bottom-width: 1px; } .wp-block-separator.is-style-dots { background: none !important; border: none; text-align: center; max-width: none; line-height: 1; height: auto; } .wp-block-separator.is-style-dots::before { content: "···"; color: currentColor; font-size: 1.5em; letter-spacing: 2em; /*rtl:ignore*/ padding-left: 2em; font-family: serif; } .wp-block-custom-logo .aligncenter { display: table; } .wp-block-social-links { display: -webkit-box; display: -ms-flexbox; display: flex; -ms-flex-wrap: wrap; flex-wrap: wrap; -webkit-box-pack: start; -ms-flex-pack: start; justify-content: flex-start; padding-left: 0; padding-right: 0; text-indent: 0; margin-left: 0; } .wp-block-social-links .wp-social-link a, .wp-block-social-links .wp-social-link a:hover { text-decoration: none; border-bottom: 0; -webkit-box-shadow: none; box-shadow: none; } .wp-social-link { display: block; width: 36px; height: 36px; border-radius: 9999px; margin: 0 8px 8px 0; -webkit-transition: -webkit-transform 0.1s ease; transition: -webkit-transform 0.1s ease; transition: transform 0.1s ease; transition: transform 0.1s ease, -webkit-transform 0.1s ease; } @media (prefers-reduced-motion: reduce) { .wp-social-link { -webkit-transition-duration: 0s; transition-duration: 0s; } } .wp-social-link a { padding: 6px; display: block; line-height: 0; -webkit-transition: -webkit-transform 0.1s ease; transition: -webkit-transform 0.1s ease; transition: transform 0.1s ease; transition: transform 0.1s ease, -webkit-transform 0.1s ease; } .wp-social-link a, .wp-social-link a:hover, .wp-social-link a:active, .wp-social-link a:visited, .wp-social-link svg { color: currentColor; fill: currentColor; } .wp-social-link:hover { -webkit-transform: scale(1.1); transform: scale(1.1); } .wp-block-social-links.aligncenter { -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; display: -webkit-box; display: -ms-flexbox; display: flex; } .wp-block-social-links.is-style-logos-only .wp-social-link { background: none; padding: 4px; } .wp-block-social-links.is-style-logos-only .wp-social-link svg { width: 28px; height: 28px; } .wp-block-spacer { clear: both; } p.wp-block-subhead { font-size: 1.1em; font-style: italic; opacity: 0.75; } .wp-block-table { overflow-x: auto; } .wp-block-table table { width: 100%; } .wp-block-table .has-fixed-layout { table-layout: fixed; width: 100%; } .wp-block-table .has-fixed-layout td, .wp-block-table .has-fixed-layout th { word-break: break-word; } .wp-block-table.alignleft, .wp-block-table.aligncenter, .wp-block-table.alignright { display: table; width: auto; } .wp-block-table.alignleft td, .wp-block-table.alignleft th, .wp-block-table.aligncenter td, .wp-block-table.aligncenter th, .wp-block-table.alignright td, .wp-block-table.alignright th { word-break: break-word; } .wp-block-table .has-subtle-light-gray-background-color { background-color: #f3f4f5; } .wp-block-table .has-subtle-pale-green-background-color { background-color: #e9fbe5; } .wp-block-table .has-subtle-pale-blue-background-color { background-color: #e7f5fe; } .wp-block-table .has-subtle-pale-pink-background-color { background-color: #fcf0ef; } .wp-block-table.is-style-stripes { border-spacing: 0; border-collapse: inherit; background-color: transparent; border-bottom: 1px solid #f0f0f0; } .wp-block-table.is-style-stripes tbody tr:nth-child(odd) { background-color: #f0f0f0; } .wp-block-table.is-style-stripes.has-subtle-light-gray-background-color tbody tr:nth-child(odd) { background-color: #f3f4f5; } .wp-block-table.is-style-stripes.has-subtle-pale-green-background-color tbody tr:nth-child(odd) { background-color: #e9fbe5; } .wp-block-table.is-style-stripes.has-subtle-pale-blue-background-color tbody tr:nth-child(odd) { background-color: #e7f5fe; } .wp-block-table.is-style-stripes.has-subtle-pale-pink-background-color tbody tr:nth-child(odd) { background-color: #fcf0ef; } .wp-block-table.is-style-stripes th, .wp-block-table.is-style-stripes td { border-color: transparent; } .wp-block-text-columns { display: -webkit-box; display: -ms-flexbox; display: flex; } .wp-block-text-columns.aligncenter { display: -webkit-box; display: -ms-flexbox; display: flex; } .wp-block-text-columns .wp-block-column { margin: 0 1em; padding: 0; } .wp-block-text-columns .wp-block-column:first-child { margin-left: 0; } .wp-block-text-columns .wp-block-column:last-child { margin-right: 0; } .wp-block-text-columns.columns-2 .wp-block-column { width: 50%; } .wp-block-text-columns.columns-3 .wp-block-column { width: 33.3333333333%; } .wp-block-text-columns.columns-4 .wp-block-column { width: 25%; } .wp-block-video { margin-left: 0; margin-right: 0; } .wp-block-video video { max-width: 100%; } @supports (position: sticky) { .wp-block-video [poster] { -o-object-fit: cover; object-fit: cover; } } .wp-block-video.aligncenter { text-align: center; } .wp-block-video figcaption { margin-top: 0.5em; margin-bottom: 1em; } .wp-block-post-featured-image a { display: inline-block; } :root { /* stylelint-disable function-comma-space-after */ /* stylelint-enable function-comma-space-after */ } .has-small-font-size { font-size: 0.8125em; } .has-regular-font-size, .has-normal-font-size { font-size: 1em; } .has-medium-font-size { font-size: 1.25em; } .has-large-font-size { font-size: 2.25em; } .has-larger-font-size, .has-huge-font-size { font-size: 2.625em; } .has-text-align-center { text-align: center; } .has-text-align-left { /*rtl:ignore*/ text-align: left; } .has-text-align-right { /*rtl:ignore*/ text-align: right; } #end-resizable-editor-section { display: none; } .aligncenter { clear: both; } .wp-video { max-width: 100%; } .wp-caption { max-width: 100%; } /* * document elements / headding * document elements / note * document elements / footnote * document elements / table * document elements / divider * document elements / base,layout block * - type : border * - type : card * - option : connect line * - option : padding * - grid layout */ /* headding / 見出しの装飾 --------------------------------- */ .h-t { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; font-size: clamp(1.25rem, 1.1923076923rem + 0.2564102564vw, 1.5rem); font-weight: 600; -webkit-font-feature-settings: "palt"; font-feature-settings: "palt"; line-height: 1.3; } .h-t.-xs { font-size: clamp(0.75rem, 0.7153846154rem + 0.1538461538vw, 0.9rem); } .h-t.-s { font-size: clamp(1rem, 0.9538461538rem + 0.2051282051vw, 1.2rem); } .h-t.-l { font-size: clamp(1.5rem, 1.4307692308rem + 0.3076923077vw, 1.8rem); } .h-t.-xl { font-size: clamp(2.125rem, 2.0269230769rem + 0.4358974359vw, 2.55rem); } .h-t.-xxl { font-size: clamp(3rem, 2.8615384615rem + 0.6153846154vw, 3.6rem); } .h-t.-xxxl { font-size: clamp(3.75rem, 3.5769230769rem + 0.7692307692vw, 4.5rem); } .h-t > .icon:first-child { margin-right: 10px; } .h-u { position: relative; margin-bottom: 1em; padding-bottom: 1em; text-align: center; -webkit-font-feature-settings: "palt"; font-feature-settings: "palt"; /* width */ } .h-u::after { position: absolute; bottom: 0; left: 0; right: 0; display: block; width: 100px; height: var(--borderw); margin: auto; background: currentColor; content: ""; opacity: 1; border-radius: 3px; } .h-u.-s::after { width: 30px; } .h-u.-l::after { width: 165px; } .h-ut { position: relative; padding-bottom: 1em; -webkit-font-feature-settings: "palt"; font-feature-settings: "palt"; /* width */ } .h-ut > * { display: block; } .h-ut::after { position: relative; display: inline-block; width: 100px; height: var(--borderw); margin: auto; background: currentColor; -webkit-transform: translateY(0.25em); transform: translateY(0.25em); content: ""; opacity: 1; border-radius: 3px; vertical-align: middle; } .h-ut.-s::after { width: 30px; } .h-ut.-l::after { width: 165px; } .h-ut.-vs::after { vertical-align: top; } .h-ut.-vl::after { vertical-align: bottom; } /* --- */ .h-dot { position: relative; padding-left: 1.75em; } .h-dot::before { position: absolute; right: auto; left: 0.15em; top: 0; bottom: 0; display: block; width: 1em; height: 1em; margin: auto; content: ""; -webkit-box-sizing: border-box; box-sizing: border-box; border-radius: 50%; border: 0.33em double; } /* --- */ .-mark { position: relative; display: inline; background-image: linear-gradient(transparent calc(100% - 0.5em), rgba(130, 158, 162, 0.25) 1px); background-repeat: no-repeat; background-size: 100% 100%; -webkit-transition: background-size 0.5s cubic-bezier(0.46, 0.03, 0.52, 0.96); transition: background-size 0.5s cubic-bezier(0.46, 0.03, 0.52, 0.96); } /* note / 注釈・脚注 --------------------------------- */ .note { font-size: clamp(0.65625rem, 0.6346153846rem + 0.0961538462vw, 0.75rem); line-height: 1.8; } [lang=en] .note { line-height: 1.4; } .note.-l { font-size: clamp(0.71875rem, 0.6826923077rem + 0.1602564103vw, 0.875rem); } /* footnote / 脚注（リスト） --------------------------------- */ .footnote { position: relative; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; margin: 20px 0; padding-left: 0; font-size: clamp(0.65625rem, 0.6346153846rem + 0.0961538462vw, 0.75rem); line-height: 2; list-style: none; counter-reset: footnote-num; -webkit-font-feature-settings: "palt"; font-feature-settings: "palt"; color: var(--color-txt-weak); } [lang=en] .footnote { line-height: 1.6; } .footnote li { position: relative; display: inline-block; padding-left: 0.9375rem; } .footnote:last-child { margin-bottom: 0; } .footnote li:last-child { margin-bottom: 0; } .footnote li::before { position: absolute; left: 0; content: "※ "; white-space: nowrap; } .footnote li.order { padding-left: 1.5625rem; } .footnote li.order::before { counter-increment: footnote-num; content: "※" counter(footnote-num) ". "; } .footnote.-inline { display: block; padding-left: 0; } .footnote.-inline li { display: inline; padding-left: 0; } .footnote.-inline li::before { position: relative; right: 0; margin-right: 0.0625rem; } .order-footnote { position: relative; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; margin-bottom: 40px; padding-left: 0; font-size: clamp(0.625rem, 0.5961538462rem + 0.1282051282vw, 0.75rem); line-height: 1.8; list-style: none; counter-reset: footnote-num; -webkit-font-feature-settings: "palt"; font-feature-settings: "palt"; } .order-footnote li { position: relative; display: inline-block; padding-left: 1.625rem; } .order-footnote li:last-child { margin-bottom: 0; } .order-footnote li::before { position: absolute; right: calc(100% + 0.53125rem); counter-increment: footnote-num; content: "※" counter(footnote-num) ". "; white-space: nowrap; } .order-footnote.-inline { display: block; padding-left: 0; } .order-footnote.-inline li { display: inline; padding-left: 0; } .order-footnote.-inline li::before { position: relative; right: 0; margin-right: 0.15625rem; } /* table / 表 --------------------------------- */ .table { width: 100%; border-collapse: collapse; table-layout: fixed; } .table th { font-family: var(--font-m); font-weight: 500; } .table thead { color: var(--color-accent); } .table thead tr th, .table thead tr td { border-bottom: 1px solid var(--color-accent-bg); } /* divider / 分割線 --------------------------------- */ .divider { border: none; border-top: var(--borderw) solid; margin: 30px 0; } .divider.-dotted { border-top: var(--borderw) dotted; } .divider.-dashed { border-top: var(--borderw) dashed; } .divider.-double { border-top: calc(var(--borderw) * 2) double; } .divider.-inherit { margin: inherit; } .divider.-xs { margin: 10px 0; } .divider.-s { margin: 20px 0; } .divider.-r { margin: 30px 0; } .divider.-l { margin: 40px 0; } .divider.-xl { margin: 50px 0; } .divider.-xxl { margin: 60px 0; } /* base,layout --------------------------------------------- */ .c-section { margin-top: clamp(3.75rem, 3.1730769231rem + 2.5641025641vw, 6.25rem); } .c-section--0 { margin-top: 0; } .c-section--xxs { margin-top: clamp(0.625rem, 0.5528846154rem + 0.3205128205vw, 0.9375rem); } .c-section--xs { margin-top: clamp(0.9375rem, 0.7932692308rem + 0.641025641vw, 1.5625rem); } .c-section--s { margin-top: clamp(1.875rem, 1.5865384615rem + 1.2820512821vw, 3.125rem); } .c-section--m { margin-top: clamp(3.75rem, 3.1730769231rem + 2.5641025641vw, 6.25rem); } .c-section--l { margin-top: clamp(7.5rem, 6.9230769231rem + 2.5641025641vw, 10rem); } .c-section--xl { margin-top: clamp(9.375rem, 8.7980769231rem + 2.5641025641vw, 11.875rem); } .c-section--xxl { margin-top: clamp(11.25rem, 10.8173076923rem + 1.9230769231vw, 13.125rem); } .c-section--0 > *:first-child, .c-section--xxs > *:first-child, .c-section--xs > *:first-child, .c-section--s > *:first-child, .c-section > *:first-child, .c-section--m > *:first-child, .c-section--ml > *:first-child, .c-section--l > *:first-child, .c-section--xl > *:first-child, .c-section--xxl > *:first-child { margin-top: 0; } /* type : border */ .c-section--border { padding: clamp(1.25rem, 1.1057692308rem + 0.641025641vw, 1.875rem); -webkit-box-sizing: border-box; box-sizing: border-box; border: 1px solid rgba(0, 0, 0, 0.2); border-radius: 5px; } .c-section--border.-primary { border-color: var(--color-accent); } .c-section--border.-secondary { border-color: var(--color-txt); } .c-section--border > *:first-child { margin-top: 0; } /* type : border */ .c-section--fill { padding: clamp(1.25rem, 1.1057692308rem + 0.641025641vw, 1.875rem); -webkit-box-sizing: border-box; box-sizing: border-box; border-radius: 5px; background-color: var(--color-warm-bg); } .c-section--fill > *:first-child { margin-top: 0; } /* type : sub border */ .c-section--subborder { display: flow-root; margin-left: 20px; padding: 0 0 0 20px; border-left: 1px solid var(--color-accent); -webkit-box-sizing: border-box; box-sizing: border-box; font-size: 1.25rem; } .c-section--subborder > *:first-child { margin-top: 0; } /* ============================================================================================== */ /* Icon */ /* ============================================================================================== */ /* * アイコンは基本的に単色で線と塗りだけで構成されています。 * アイコンにtransitionを適用するためには予めSVGをHTML内に記述し、use要素を使用する方法がありますが、ページ内に直接SVGで定義する必要があります。 * そのためJavaScriptでSVGアイコンのデータを定義し、特定の要素の独自データ属性があれば動的にSVGを記述する方法としています。 * */ /* ---------------------------------------------------------------------- */ .active .icon img, .active .icon svg, a:hover .icon img, a:hover .icon svg { opacity: 1; } [data-icon], .icon { position: relative; display: inline-block; vertical-align: middle; letter-spacing: 0; line-height: 0; fill: currentColor; stroke-width: 1; width: 24px; height: 24px; } svg.icon, .icon svg { width: 100%; height: 100%; } /* ---------------------------------------------------------------------- */ /* Inline svg default styles */ /* * SVG内の要素に対して使用するクラス。 */ /* 線の基本設定 */ .svg-line { fill: none; stroke: currentColor; stroke-width: inherit; stroke-linecap: round; stroke-linejoin: round; stroke-miterlimit: 10; } /* 線 丸キャップ 丸角 */ .svg-line-round { fill: none; stroke: currentColor; stroke-width: inherit; stroke-linecap: round; stroke-linejoin: round; stroke-miterlimit: 10; } /* 破線 丸キャップ 丸角 */ .svg-line-dash-round { fill: none; stroke: currentColor; stroke-width: inherit; stroke-linecap: round; stroke-linejoin: round; stroke-miterlimit: 10; stroke-dasharray: 1.25, 1.25; } /* 線あり塗あり */ .svg-line-fill { fill: currentColor; stroke: currentColor; stroke-width: inherit; stroke-miterlimit: 10; } /* 線 キャップ無し 角 */ .svg-line-edge { fill: none; stroke: currentColor; stroke-width: inherit; stroke-linejoin: round; stroke-miterlimit: 10; } /* 塗のみ */ .svg-fill-only { fill: currentColor; } /* 塗無し */ .svg-fill-none { fill: none !important; } /* 塗りの上にくる要素の色 */ .svg-secondary-color { color: #fff; } /* ---------------------------------------------------------------------- */ /* weight */ /* ---------------------------------------------------------------------- */ /* * 線の太さの指定（絶対値） */ .icon.-w100 svg, .icon.-w100 use { stroke-width: 0.2 !important; } .icon.-w200 svg, .icon.-w200 use { stroke-width: 0.4 !important; } .icon.-w300 svg, .icon.-w300 use { stroke-width: 0.6 !important; } .icon.-w400 svg, .icon.-w400 use { stroke-width: 0.8 !important; } .icon.-w500 svg, .icon.-w500 use { stroke-width: 1 !important; } .icon.-w600 svg, .icon.-w600 use { stroke-width: 1.2 !important; } .icon.-w700 svg, .icon.-w700 use { stroke-width: 1.4 !important; } .icon.-w800 svg, .icon.-w800 use { stroke-width: 1.6 !important; } .icon.-w900 svg, .icon.-w900 use { stroke-width: 2 !important; } /* ---------------------------------------------------------------------- */ /* size */ /* ---------------------------------------------------------------------- */ /* * サイズの指定（絶対値） */ .icon.-xxs { width: 16px !important; height: 16px !important; } .icon.-xs { width: 20px !important; height: 20px !important; } .icon.-s { width: 24px !important; height: 24px !important; } .icon.-m { width: 36px !important; height: 36px !important; } .icon.-l { width: 48px !important; height: 48px !important; } .icon.-xl { width: 60px !important; height: 60px !important; } .icon.-xxl { width: 72px !important; height: 72px !important; } /* ------------------------------------------------------------------- */ .toggleIcons { position: relative; } .toggleIcons__icon { display: block; -webkit-transition: 0.3s cubic-bezier(0.7, -0.6, 0.3, 1.5); transition: 0.3s cubic-bezier(0.7, -0.6, 0.3, 1.5); -webkit-transition-property: opacity, -webkit-transform; transition-property: opacity, -webkit-transform; transition-property: transform, opacity; transition-property: transform, opacity, -webkit-transform; } .toggleIcons__icon:nth-child(1) { -webkit-transform: rotate(0deg); transform: rotate(0deg); opacity: 1; } .toggleIcons__icon:nth-child(2) { -webkit-transform: rotate(125deg); transform: rotate(125deg); opacity: 0; } .-show .toggleIcons__icon:nth-child(1) { -webkit-transform: rotate(-125deg); transform: rotate(-125deg); opacity: 0; } .-show .toggleIcons__icon:nth-child(2) { -webkit-transform: rotate(0deg); transform: rotate(0deg); opacity: 1; } .toggleIcons__icon + .toggleIcons__icon { position: absolute; left: 0; top: 0; } /* ============================================================================================== */ /* Indicator */ /* ============================================================================================== */ /* ============================================================================================== */ /* Loading Progress bar */ /* ============================================================================================== */ .progress { position: fixed; left: 0; top: 0; width: 100%; -webkit-transition: all 0.25s ease-out 0.5s; transition: all 0.25s ease-out 0.5s; z-index: 10000; } .progress.progress-complete { top: -5px; } .progress.progress-complete + .indicator span { opacity: 0; } .progress--inner { display: block; width: 0; height: 5px; -webkit-transition: all 3s cubic-bezier(0.22, 0.61, 0.36, 1); transition: all 3s cubic-bezier(0.22, 0.61, 0.36, 1); background: var(--color-accent); } .progress.progress-complete .progress--inner { -webkit-transition-duration: 0.5s; transition-duration: 0.5s; } /* ============================================================================================== */ /* UI / Input(text fields & controls) */ /* ============================================================================================== */ input, textarea, select { -webkit-appearance: none; -moz-appearance: none; appearance: none; border-radius: 0; padding: 10px 15px; outline: solid transparent; -webkit-box-sizing: border-box; box-sizing: border-box; border: 2px solid rgba(0, 0, 0, 0.2); border-radius: 8px; background-color: rgba(0, 0, 0, 0); font-family: var(--system-fonts); font-size: 1.6rem; -webkit-transition: 0.2s ease; transition: 0.2s ease; -webkit-transition-property: background, color, opacity; transition-property: background, color, opacity; line-height: 1.5; color: var(--color-main); } input:hover, textarea:hover, select:hover { border-color: var(--color-main); } input:focus, textarea:focus, select:focus { background: rgba(0, 0, 0, 0); border-color: var(--input-color-main); outline: none; } input[readonly], textarea[readonly], select[readonly] { border: 1px dashed rgba(0, 0, 0, 0.25); -webkit-box-shadow: none; box-shadow: none; background-image: none; -webkit-appearance: none; -moz-appearance: none; appearance: none; } input[readonly]:hover, textarea[readonly]:hover, select[readonly]:hover { border-color: rgba(0, 0, 0, 0.5); } input[readonly]:focus, textarea[readonly]:focus, select[readonly]:focus { border-color: rgba(0, 0, 0, 0.5); -webkit-box-shadow: none !important; box-shadow: none !important; } input:focus::-webkit-input-placeholder, textarea:focus::-webkit-input-placeholder { color: transparent; } input:focus::-moz-placeholder, textarea:focus::-moz-placeholder { color: transparent; } input:focus:-ms-input-placeholder, textarea:focus:-ms-input-placeholder { color: transparent; } input:valid, textarea:valid { background-color: #fff; } input:invalid, textarea:invalid { -webkit-box-shadow: none; box-shadow: none; } input:disabled, textarea:disabled, option:disabled, optgroup:disabled, select:disabled:disabled { background: #f1f1f1; border: 1px solid rgba(0, 0, 0, 0) !important; cursor: not-allowed; } ::-webkit-input-placeholder { color: #999; } ::-moz-placeholder { color: #999; } :-ms-input-placeholder { color: #999; } /* ---------------------------------------------------------- * * textarea element * * ---------------------------------------------------------- */ textarea { font-family: var(--system-fonts) !important; } /* ---------------------------------------------------------- * * input element : text * * ---------------------------------------------------------- */ [type=text] { font-family: var(--system-fonts) !important; } /* ---------------------------------------------------------- * * input element : checkbox, radio * * ---------------------------------------------------------- */ [type=radio], [type=checkbox] { overflow: hidden; width: 0; height: 0; border: none; } [type=radio] + label, [type=checkbox] + label { position: relative; display: -webkit-inline-box; display: -ms-inline-flexbox; display: inline-flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; font-weight: 500; cursor: pointer; } [type=radio] + label .control, [type=checkbox] + label .control { position: relative; display: inline-block; -ms-flex-negative: 0; flex-shrink: 0; width: 20px; height: 20px; margin-right: 10px; border: 2px solid rgba(0, 0, 0, 0.3); -webkit-box-sizing: border-box; box-sizing: border-box; vertical-align: middle; -webkit-transition: all 0.2s ease; transition: all 0.2s ease; } [type=radio] + label .control::before, [type=radio] + label .control::after, [type=checkbox] + label .control::before, [type=checkbox] + label .control::after { position: absolute; content: ""; display: inline-block; top: 0; right: 0; left: 0; bottom: 0; margin: auto; -webkit-box-sizing: border-box; box-sizing: border-box; -webkit-transition: all 0.2s ease-in-out; transition: all 0.2s ease-in-out; } [type=radio] + label .control::before, [type=checkbox] + label .control::before { display: none; } [type=radio] + label .control::after, [type=checkbox] + label .control::after { opacity: 0; } [type=radio] + label:hover, [type=checkbox] + label:hover { color: #000; } [type=radio] + label:hover .control, [type=checkbox] + label:hover .control { border: 2px solid #000; } [type=radio]:checked + label .control, [type=checkbox]:checked + label .control { border: 2px solid var(--input-color-main); opacity: 1; color: #000; opacity: 1; } [type=radio]:checked + label .control::after, [type=checkbox]:checked + label .control::after { color: var(--input-color-main); opacity: 1; } [type=radio]:focus + label, [type=checkbox]:focus + label { outline: 1px dashed; } [type=radio]:focus, [type=radio]:focus-visible, [type=checkbox]:focus, [type=checkbox]:focus-visible { outline: none; } [type=radio] + label .control { border-radius: 50%; } [type=radio] + label .control::after { width: 62.5%; height: 62.5%; background: var(--input-color-main); -webkit-transform: scale(1.2, 1.2); transform: scale(1.2, 1.2); border-radius: 50%; } [type=radio]:checked + label .control::after { background: var(--input-color-main); -webkit-transform: scale(1, 1); transform: scale(1, 1); -webkit-transition-timing-function: cubic-bezier(0.22, 0.61, 0.36, 1); transition-timing-function: cubic-bezier(0.22, 0.61, 0.36, 1); } [type=checkbox] + label .control { border-radius: 3px; } [type=checkbox] + label .control::after { top: -15%; width: 40%; height: 80%; border-right: 2px solid #FFF; border-bottom: 2px solid #FFF; -webkit-transform: scale(1.2, 1.2) rotate(45deg); transform: scale(1.2, 1.2) rotate(45deg); } [type=checkbox]:checked + label .control { background: var(--input-color-main); } [type=checkbox]:checked + label .control::after { -webkit-transform: scale(1, 1) rotate(45deg); transform: scale(1, 1) rotate(45deg); -webkit-transition-timing-function: cubic-bezier(0.22, 0.61, 0.36, 1); transition-timing-function: cubic-bezier(0.22, 0.61, 0.36, 1); } /* disabled */ [type=radio]:disabled + label, [type=checkbox]:disabled + label { cursor: not-allowed; color: var(--color-txt-weak); opacity: 0.7; } [type=radio]:disabled + label:hover, [type=checkbox]:disabled + label:hover { color: var(--color-txt-weak); } [type=radio]:disabled + label .control, [type=checkbox]:disabled + label .control { border-color: #ccc; background-color: #ccc; } [type=radio]:disabled + label:hover .control, [type=checkbox]:disabled + label:hover .control { border-color: #ccc; background-color: #ccc; } [type=radio]:disabled + label .control, [type=checkbox]:disabled + label .control { background: #ccc; border-color: #ccc; } [type=radio]:disabled + label .control::after { background: #fff; } [type=checkbox]:disabled + label .control::after { background: #ccc; border-color: #fff; } /* error */ .error[type=radio] + label .control::after { background-color: var(--input-error); } .error[type=radio]:checked + label .control::after { background-color: var(--input-error); } .error[type=radio]:checked + label .control { border-color: var(--input-error); } .error[type=checkbox]:checked + label .control { background-color: var(--input-error); } .error[type=checkbox]:checked:checked + label .control { background-color: var(--input-error); } .error[type=checkbox]:checked:checked + label .control { border-color: var(--input-error); } /* ---------------------------------------------------------- * * input element : file * * ---------------------------------------------------------- */ [type=file] { font-size: 1.2rem; padding: 5px 0; border: none; -webkit-appearance: none; -moz-appearance: none; appearance: none; } [type=file]:hover::before { border-color: black; } [type=file]:disabled { color: #ccc; background-color: transparent; } .error[type=file] { background-color: transparent; } [type=file] + label .control:after { background: #fff; } /* * 以下は JavaScript を使ってカスタマイズしたタイプ */ .input--file { position: relative; } .input--file input[type=file] { display: none; border: none; padding: 0; } .input--file__label { display: inline-block; padding: 0.25em 1em; border-radius: 5px; -webkit-box-sizing: border-box; box-sizing: border-box; background-color: rgba(0, 0, 0, 0.3); border: none; cursor: pointer; white-space: nowrap; } .input--file.-selected .input--file__label { display: none; } /* UI wrapper */ .input--file__props-wrapper { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; } /* props */ .input--file__props { display: inline-block; -webkit-box-sizing: border-box; box-sizing: border-box; border-bottom: 1px solid #000; padding: 0.25em 0; white-space: nowrap; text-overflow: ellipsis; display: inline-block; overflow: hidden; overflow-y: visible; } .input--file__props:empty { border: none; display: block; padding: 0; } /* remove */ .input--file__remove { position: relative; display: none; border-radius: 5px; border-radius: 50%; padding: 0; -webkit-box-sizing: border-box; box-sizing: border-box; background-color: #7e7e7e; cursor: pointer; } .input--file__remove:before, .input--file__remove:after { position: absolute; top: 0; left: 0; right: 0; bottom: 0; display: block; width: 10px; height: 1px; margin: auto; background-color: #fff; -webkit-transform-origin: 50% 50%; transform-origin: 50% 50%; content: ""; } .input--file__remove:before { -webkit-transform: rotate(45deg); transform: rotate(45deg); } .input--file__remove:after { -webkit-transform: rotate(-45deg); transform: rotate(-45deg); } .input--file__remove.active { display: block; width: 18px; height: 18px; margin: 0 0 0 0.5em; -webkit-transition: background-color 0.2s ease-in-out; transition: background-color 0.2s ease-in-out; } .input--file__remove.active:hover { background-color: #333; } /* error */ .input--file__errorfield { padding: 0.25em 0; color: var(--input-error); } .input--file__errorfield:empty { padding: 0; } .input--file input[type=file]:invalid ~ .input--file__label, .input--file input[type=file].error ~ .input--file__label { background-color: var(--input-error-bg); color: var(--input-error); } .input--file input[type=file]:invalid ~ .input--file__props-wrapper .input--file input[type=file].error ~ .input--file__props-wrapper .input--file__remove { background-color: var(--input-error); } /* disable */ .input--file input[type=file]:disabled ~ .input--file__label { color: #999; background-color: #ccc; cursor: not-allowed; } /* ---------------------------------------------------------- * * input element : color * * ---------------------------------------------------------- */ [type=color] { width: 80px; height: 40px; border-radius: 10px; border-width: 2px; padding: 5px; -webkit-box-sizing: border-box; box-sizing: border-box; cursor: pointer; -webkit-appearance: none; -moz-appearance: none; appearance: none; } [type=color]::-webkit-color-swatch-wrapper { padding: 0; } [type=color]::-webkit-color-swatch { border: none; border-radius: 5px; } [type=color]:disabled { opacity: 0.5; } [type=color].error { background-color: transparent; } /* ---------------------------------------------------------- * * input element : range * * ---------------------------------------------------------- */ [type=range] { width: 100%; height: 40px; padding: 0; border: none; cursor: pointer; background: transparent; -webkit-appearance: range; -moz-appearance: range; appearance: range; /* track styles */ /* thumb styles */ /* state */ /* error */ } [type=range]::-webkit-slider-runnable-track { width: 100%; height: 5px; background: rgba(0, 0, 0, 0.15); border-radius: 5px; border: none; } [type=range]::-moz-range-track { width: 100%; height: 5px; background: rgba(0, 0, 0, 0.15); border-radius: 5px; border: none; } [type=range]::-ms-track { width: 100%; height: 5px; background: rgba(0, 0, 0, 0.15); border-radius: 5px; border: none; } [type=range]::-ms-fill-upper { background: rgba(0, 0, 0, 0.1); } [type=range]::-ms-fill-lower { background: rgba(0, 0, 0, 0.1); } [type=range]::-webkit-slider-thumb { background: var(--input-color-main); -webkit-box-shadow: 5px 5px 10px rgba(0, 0, 0, 0.2); box-shadow: 5px 5px 10px rgba(0, 0, 0, 0.2); border: none; height: 40px; width: 10px; margin-top: -18px; border-radius: 5px; -webkit-appearance: none; -webkit-transition: 0.2s ease-out; transition: 0.2s ease-out; -webkit-transition-property: width, -webkit-box-shadow, -webkit-transform; transition-property: width, -webkit-box-shadow, -webkit-transform; transition-property: box-shadow, transform, width; transition-property: box-shadow, transform, width, -webkit-box-shadow, -webkit-transform; } [type=range]::-moz-range-thumb { background: var(--input-color-main); box-shadow: 5px 5px 10px rgba(0, 0, 0, 0.2); border: none; height: 40px; width: 10px; border-radius: 5px; -moz-transition: 0.2s ease-out; transition: 0.2s ease-out; -moz-transition-property: box-shadow, transform, width; transition-property: box-shadow, transform, width; } [type=range]::-ms-thumb { background: #000; border: none; height: 40px; width: 10px; border-radius: 5px; } [type=range]:valid { background: transparent; } [type=range]:focus { border: none !important; -webkit-box-shadow: none !important; box-shadow: none !important; } [type=range]:hover { background: transparent; } [type=range]:hover::-moz-range-thumb { box-shadow: 10px 10px 15px rgba(0, 0, 0, 0.25); } [type=range]:hover::-webkit-slider-thumb { -webkit-box-shadow: 10px 10px 15px rgba(0, 0, 0, 0.25); box-shadow: 10px 10px 15px rgba(0, 0, 0, 0.25); } [type=range]:hover::-ms-track { background: var(--input-color-main-bg); } [type=range]:disabled { background: transparent; /* track */ /* thumb */ } [type=range]:disabled::-webkit-slider-runnable-track { background: rgba(0, 0, 0, 0.1); } [type=range]:disabled::-moz-range-track { background: rgba(0, 0, 0, 0.1); } [type=range]:disabled::-ms-track { background: rgba(0, 0, 0, 0.1); } [type=range]:disabled::-webkit-slider-thumb { -webkit-box-shadow: 0 0 0 rgba(0, 0, 0, 0.2); box-shadow: 0 0 0 rgba(0, 0, 0, 0.2); background: #ccc; cursor: not-allowed; } [type=range]:disabled::-moz-range-thumb { box-shadow: 0 0 0 rgba(0, 0, 0, 0.2); background: #ccc; cursor: not-allowed; } [type=range]:disabled::-ms-thumb { background: #ccc; cursor: not-allowed; } [type=range].error { background: transparent; /* track */ /* thumb */ } [type=range].error::-webkit-slider-runnable-track { background-color: var(--input-error-bg); } [type=range].error::-moz-range-track { background-color: var(--input-error-bg); } [type=range].error::-ms-track { background-color: var(--input-error-bg); } [type=range].error::-moz-range-thumb { background-color: var(--input-error); box-shadow: 5px 5px 10px var(--input-error-bg); } [type=range].error::-webkit-slider-thumb { background-color: var(--input-error); -webkit-box-shadow: 5px 5px 10px var(--input-error-bg); box-shadow: 5px 5px 10px var(--input-error-bg); } [type=range].error::-ms-thumb { background-color: var(--input-error); } /* ---------------------------------------------------------- * * input element : search * * ---------------------------------------------------------- */ [type=search] { border-radius: 60px; -webkit-appearance: none; -moz-appearance: none; appearance: none; } /* ---------------------------------------------------------- * * input element : reset * * ---------------------------------------------------------- */ [type=reset], [type=reset]:valid { cursor: pointer; /* btn */ } /* ---------------------------------------------------------- * * input element : submit * * ---------------------------------------------------------- */ [type=submit], [type=submit]:valid { color: #fff; background-color: var(--input-color-main); cursor: pointer; /* btn */ } [type=submit].btn::before, [type=submit]:valid.btn::before { opacity: 0; } [type=submit].btn:hover::before, [type=submit]:valid.btn:hover::before { opacity: 0; } [type=submit].error, [type=submit]:valid.error { color: #fff; background-color: var(--input-error); } /* ---------------------------------------------------------- * * input element : image * * ---------------------------------------------------------- */ [type=image], [type=image]:valid { color: #fff; background-color: #000; } [type=image].error, [type=image]:valid.error { color: #fff; background-color: var(--input-error); } /* ---------------------------------------------------------- * * input element : toggle switch (checkbox) * * ---------------------------------------------------------- */ .input-toggle[type=checkbox] { display: none; /* errorのスタイルは未定義 */ } .input-toggle[type=checkbox] + label { --knob-size: 24px; --knob-padding: 4px; position: relative; display: -webkit-inline-box; display: -ms-inline-flexbox; display: inline-flex; -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; min-width: 60px; height: 30px; background: #aeaeae; border-radius: 20px; text-align: left; cursor: pointer; -webkit-transition: 0.3s cubic-bezier(0.03, 0.48, 0.43, 1.18); transition: 0.3s cubic-bezier(0.03, 0.48, 0.43, 1.18); } .input-toggle[type=checkbox] + label::after { position: absolute; display: inline-block; inset: 0 auto 0 var(--knob-padding); width: var(--knob-size); height: var(--knob-size); margin: auto; background: #fff; -webkit-box-shadow: 0 2px 3px rgba(0, 0, 0, 0.25); box-shadow: 0 2px 3px rgba(0, 0, 0, 0.25); border-radius: 100%; -webkit-transition: 0.3s cubic-bezier(0.65, 0.05, 0.36, 1); transition: 0.3s cubic-bezier(0.65, 0.05, 0.36, 1); -webkit-transition-property: background-color, inset, -webkit-transform; transition-property: background-color, inset, -webkit-transform; transition-property: background-color, transform, inset; transition-property: background-color, transform, inset, -webkit-transform; content: ""; } .input-toggle[type=checkbox] + label .input-toggle-button__lbl { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-flex: 1; -ms-flex-positive: 1; flex-grow: 1; height: 100%; margin: 0 auto; padding: 0 5px; pointer-events: none; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; -webkit-transition: opacity 0.2s ease-out; transition: opacity 0.2s ease-out; } .input-toggle[type=checkbox] + label .input-toggle-button__lbl.-true { padding-left: 10px; opacity: 0; } .input-toggle[type=checkbox] + label .input-toggle-button__lbl.-false { padding-right: 10px; opacity: 0.5; } .input-toggle[type=checkbox]:checked + label { background: var(--input-color-main-active); color: #fff; } .input-toggle[type=checkbox]:checked + label::after { left: calc(100% - var(--knob-size) - var(--knob-padding)); } .input-toggle[type=checkbox]:checked + label .input-toggle-button__lbl.-true { opacity: 1; } .input-toggle[type=checkbox]:checked + label .input-toggle-button__lbl.-false { opacity: 0; } .input-toggle[type=checkbox]:disabled + .input-toggle-button { cursor: not-allowed; opacity: 0.3; } .input-toggle[type=checkbox]:disabled + .input-toggle-button::after { -webkit-box-shadow: none; box-shadow: none; } /* ---------------------------------------------------------- * * select element * * ---------------------------------------------------------- */ .input--select-wrap { position: relative; } .input--select-wrap::before { content: ""; position: absolute; width: 24px; height: 24px; right: 10px; top: 50%; -webkit-transform: translateY(-50%); transform: translateY(-50%); opacity: 0.3; z-index: 2; -webkit-transition: 0.2s ease; transition: 0.2s ease; pointer-events: none; background-image: url("data:image/svg+xml;charset=utf8,%3Csvg%20version%3D%221.1%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20x%3D%220px%22%20y%3D%220px%22%20width%3D%2224px%22%20height%3D%2224px%22%20viewBox%3D%220%200%2024%2024%22%20style%3D%22overflow%3Avisible%3Benable-background%3Anew%200%200%2024%2024%3B%22%20xml%3Aspace%3D%22preserve%22%3E%3Cpolyline%20class%3D%22st0%22%20style%3D%22fill-rule%3Aevenodd%3Bclip-rule%3Aevenodd%3Bfill%3Anone%3Bstroke%3A%234c5769%3Bstroke-width%3A1.6%3Bstroke-linecap%3Around%3Bstroke-linejoin%3Around%3Bstroke-miterlimit%3A10%3B%22%20points%3D%2214.73%2C10.69%2012%2C13.73%209.27%2C10.69%22%2F%3E%3C%2Fsvg%3E"); background-repeat: no-repeat; background-size: 100%; background-position: center; } .input--select-wrap:hover::before { opacity: 1; } .input--select-wrap:hover:disabled::before { color: rgba(0, 0, 0, 0.3); } .input--select-wrap select { position: relative; z-index: 1; padding-right: 30px; } .input--select-wrap:has(.error)::before { color: var(--input-error); } /* ---------------------------------------------------------- * * progress element * * ---------------------------------------------------------- */ progress { -webkit-appearance: none; -moz-appearance: none; appearance: none; border: none; /* Firefox also renders a border */ width: 100%; height: 20px; color: var(--input-color-main); } progress::-webkit-progress-bar { background-color: #e5e5e5; } progress::-webkit-progress-value { background: var(--input-color-main); } progress::-moz-progress-bar { background: var(--input-color-main); } /* ---------------------------------------------------------- * * meter element * * ---------------------------------------------------------- */ meter { display: block; margin-top: 10px; border: none; width: 100%; height: 20px; /* for Firefox */ background: #e5e5e5; outline: none; } meter::-webkit-meter-inner-element { display: block; } meter::-webkit-meter-bar { border-radius: 0; border: none; background: #e5e5e5; } meter::-webkit-meter-optimum-value { background: rgb(125, 196, 0); border-radius: 0; } meter::-webkit-meter-suboptimum-value { background: rgb(255, 173, 67); border-radius: 0; } meter::-webkit-meter-even-less-good-value { background: rgb(255, 80, 80); border-radius: 0; } meter:-moz-meter-optimum::-moz-meter-bar { background: rgb(125, 196, 0); } meter:-moz-meter-sub-optimum::-moz-meter-bar { background: rgb(255, 173, 67); } meter:-moz-meter-sub-sub-optimum::-moz-meter-bar { background: rgb(255, 80, 80); } /* ---------------------------------------------------------- * * button element * * ---------------------------------------------------------- */ button { -webkit-appearance: none; -moz-appearance: none; appearance: none; padding: 10px 20px; -webkit-box-sizing: border-box; box-sizing: border-box; border: var(--borderw) solid; border-radius: 5px; background-color: transparent; cursor: pointer; color: inherit; -webkit-transition: 0.2s ease-out; transition: 0.2s ease-out; -webkit-transition-property: background-color, color, border-color, -webkit-box-shadow; transition-property: background-color, color, border-color, -webkit-box-shadow; transition-property: box-shadow, background-color, color, border-color; transition-property: box-shadow, background-color, color, border-color, -webkit-box-shadow; } button:hover { color: var(--color-hover); } button[disabled] { cursor: not-allowed; color: #999; background-color: #f1f1f1; border-color: transparent; -webkit-box-shadow: none; box-shadow: none; } /* ---------------------------------------------------------- * * error * * ---------------------------------------------------------- */ .error { color: rgb(255, 0, 0); line-height: 1.4; } button.error, input.error, select.error, textarea.error, .error input, .error select, .error textarea { background: rgba(255, 0, 0, 0.05); color: rgb(255, 0, 0); border-color: rgb(255, 0, 0); } button.error:focus, input.error:focus, select.error:focus, textarea.error:focus, .error input:focus, .error select:focus, .error textarea:focus { background: rgb(255, 255, 255); border-color: rgb(255, 0, 0) !important; -webkit-box-shadow: inset 0 0 0 1px rgb(255, 0, 0) !important; box-shadow: inset 0 0 0 1px rgb(255, 0, 0) !important; } /* ---------------------------------------------------------- * * password strength * * ---------------------------------------------------------- */ .pw-strength-outer { position: relative; } .pw-strength-label { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; } .pw-strength-result { position: relative; right: 0; top: 0; height: 3px; width: 80px; background: #ddd; border-radius: 5px; overflow: hidden; } .pw-strength-result:before { position: absolute; left: 0; top: 0; display: block; content: ""; width: 0%; height: 100%; background: #999; -webkit-transition: 0.2s ease-out; transition: 0.2s ease-out; } .pw-strength-result.score1:before { width: 25%; background: rgb(255, 86, 86); } .pw-strength-result.score2:before { width: 50%; background: rgb(255, 162, 0); } .pw-strength-result.score3:before { width: 75%; background: rgb(86, 183, 255); } .pw-strength-result.score4:before { width: 100%; background: rgb(98, 189, 0); } /* ---------------------------------------------------------- * * state: width * * ---------------------------------------------------------- */ input .-w10p, select .-w10p, textarea .-w10p { width: 10%; } input .-w20p, select .-w20p, textarea .-w20p { width: 20%; } input .-w30p, select .-w30p, textarea .-w30p { width: 30%; } input .-w40p, select .-w40p, textarea .-w40p { width: 40%; } input .-w50p, select .-w50p, textarea .-w50p { width: 50%; } input .-w60p, select .-w60p, textarea .-w60p { width: 60%; } input .-w70p, select .-w70p, textarea .-w70p { width: 70%; } input .-w80p, select .-w80p, textarea .-w80p { width: 80%; } input .-w90p, select .-w90p, textarea .-w90p { width: 90%; } input .-w100p, select .-w100p, textarea .-w100p { width: 100%; } input .-w1em, select .-w1em, textarea .-w1em { width: 1em; } input .-w2em, select .-w2em, textarea .-w2em { width: 2em; } input .-w3em, select .-w3em, textarea .-w3em { width: 3em; } input .-w4em, select .-w4em, textarea .-w4em { width: 4em; } input .-w5em, select .-w5em, textarea .-w5em { width: 5em; } input .-w6em, select .-w6em, textarea .-w6em { width: 6em; } input .-w7em, select .-w7em, textarea .-w7em { width: 7em; } input .-w8em, select .-w8em, textarea .-w8em { width: 8em; } input .-w9em, select .-w9em, textarea .-w9em { width: 9em; } input .-w10em, select .-w10em, textarea .-w10em { width: 10em; } .oft { display: block; overflow: hidden; } .oft__anm { display: block; } .inview.-unshow .oft__anm { opacity: 0; -webkit-animation: none; animation: none; } .inview.-show .oft__anm { -webkit-animation: 1s cubic-bezier(0.77, 0, 0.18, 1) var(--delay, 0s) 1 both showOftText, 1s linear var(--delay, 0s) 1 both animate_color; animation: 1s cubic-bezier(0.77, 0, 0.18, 1) var(--delay, 0s) 1 both showOftText, 1s linear var(--delay, 0s) 1 both animate_color; } .oft__color { color: inherit; } a:hover .oft__color { color: inherit; } .inview { position: relative; } .inview .inview__obj { opacity: 0; } .inview.-show .inview__obj { -webkit-transition: opacity 1s cubic-bezier(0.22, 0.61, 0.36, 1); transition: opacity 1s cubic-bezier(0.22, 0.61, 0.36, 1); opacity: 1; } .inview.-show .inview__maskobj { -webkit-transition: opacity 1s cubic-bezier(0.22, 0.61, 0.36, 1); transition: opacity 1s cubic-bezier(0.22, 0.61, 0.36, 1); } .inview.inviewMask { position: relative; } .inview.inviewMask .inviewMask__img { -webkit-mask-image: -webkit-gradient(linear, left top, right top, color-stop(0, #000), color-stop(50%, #000), to(transparent)); -webkit-mask-image: linear-gradient(90deg, #000 0, #000 50%, transparent 100%); mask-image: -webkit-gradient(linear, left top, right top, color-stop(0, #000), color-stop(50%, #000), to(transparent)); mask-image: linear-gradient(90deg, #000 0, #000 50%, transparent 100%); -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; -webkit-mask-size: 200% 100%; mask-size: 200% 100%; -webkit-mask-position: 200% 0; mask-position: 200% 0; } .inview.inviewMask.-show .inviewMask__img { will-change: -webkit-mask, mask, animation; -webkit-animation: 1.5s cubic-bezier(0.65, 0.05, 0.36, 1) var(--delay, 0s) 1 normal forwards maskFadeIn; animation: 1.5s cubic-bezier(0.65, 0.05, 0.36, 1) var(--delay, 0s) 1 normal forwards maskFadeIn; } .inview.-animationFinish .image-mask-svg { display: none; } .image-mask-svg { position: absolute; top: 0; left: 0; height: 100%; width: 100%; z-index: 60; pointer-events: none; } .image-mask-svg path { fill: var(--color-bg); } @-webkit-keyframes maskFadeIn { 0% { -webkit-mask-position: 200% 0; mask-position: 200% 0; } 100% { -webkit-mask-position: 0 0; mask-position: 0 0; } } @keyframes maskFadeIn { 0% { -webkit-mask-position: 200% 0; mask-position: 200% 0; } 100% { -webkit-mask-position: 0 0; mask-position: 0 0; } } @-webkit-keyframes maskFadeOut { 0% { -webkit-mask-position: 0 0; mask-position: 0 0; } 100% { -webkit-mask-position: 200% 0; mask-position: 200% 0; } } @keyframes maskFadeOut { 0% { -webkit-mask-position: 0 0; mask-position: 0 0; } 100% { -webkit-mask-position: 200% 0; mask-position: 200% 0; } } /* ============================================================================================== */ /* Letter, glyph */ /* ============================================================================================== */ /* * テキスト・文字に関するタグの基本設定 * タグなので本来はglobalに書きますがテキスト関連ということでここで基本設定を行っています。 * * Layout / global-footer * - genelic class * - Text align * - Break */ /* ---------------------------------------------------------------------------------------- * * ウェブフォント * * ----------------------------------------------------------------------------------------*/ /* ---------------------------------------------------------------------------------------- * * 基本のフォント設定 * * ----------------------------------------------------------------------------------------*/ body { font-weight: normal; font-family: var(--font-primaly); font-weight: 400; color: var(--color-txt); } input, textarea, select { font-family: var(--system-fonts); } main { width: 100%; height: auto; line-height: 2; font-size: clamp(0.875rem, 0.8173076923rem + 0.2564102564vw, 1.125rem); } [lang=en] main { line-height: 1.6; } ruby { ruby-align: center; } ruby rt { font-size: 0.5625rem; } .no-deco a, .no-deco { text-decoration: none; } .no-deco a:hover, .no-deco:hover { text-decoration: none; } /* ---------------------------------------------------------------------------------------- * * genelic class / 汎用クラス * * ----------------------------------------------------------------------------------------*/ .kerning, .kerning--palt { -webkit-font-feature-settings: "palt"; font-feature-settings: "palt"; /* 役物半角 */ /* font-feature-settings: 'pwid';*/ /* font-feature-settings: 'pkna';*/ } .kerning--pwid { /*font-feature-settings: 'palt';*/ -webkit-font-feature-settings: "pwid"; font-feature-settings: "pwid"; /*font-feature-settings: 'pkna';*/ } .tcu { -webkit-text-combine: horizontal; -ms-text-combine-horizontal: all; text-combine-upright: all; } .b { font-weight: 600; } .ib { display: inline-block; } .uppercase { text-transform: uppercase; } .lowercase { text-transform: lowercase; } .capitalize { text-transform: capitalize; } /* ----------------------------------------------------------------------------------------*/ .overflow-ellipsis { white-space: nowrap; text-overflow: ellipsis; display: inline-block; overflow: hidden; overflow-y: visible; width: 100%; } /* ----------------------------------------------------------------------------------------*/ /* ---------------------------------------------------------------------------------------- * * genelic class / フォント指定 * * ----------------------------------------------------------------------------------------*/ /* セリフ系フォント（欧文優先） */ [class^=txt-en].-serif { font-family: "Hina Mincho", serif; font-weight: 400; font-style: normal; } /* サンセリフ系フォント（欧文優先） */ [class^=txt-en] { font-family: "Zen Kaku Gothic New", sans-serif; } /* Condensed （長体） */ .-cnd { font-family: sans-serif; font-weight: inherit; } .b.-cnd { font-family: sans-serif; font-weight: inherit; } .t.-italic { font-style: italic !important; } /* ----------------------------------------------------------------------- */ /* Text align */ .t.-center { text-align: center; } .t.-right { text-align: right; } .t.-left { text-align: left; } .t.-justify { text-align: justify; } .t.-vertical { -webkit-writing-mode: tb-rl; -ms-writing-mode: tb-rl; writing-mode: vertical-rl; } /* ----------------------------------------------------------------------- */ /* Size */ .t.-fs-xs { font-size: 60%; } .t.-fs-s { font-size: 80%; } .t.-fs-l { font-size: 120%; } .t.-fs-xl { font-size: 140%; } /* ----------------------------------------------------------------------- */ /* Break */ br.tb { display: none; } br.pc { display: none; } br.sp { display: inline-block; } @media (min-width: 46.25em) { br.sp { display: none; } br.tb { display: inline-block; } } @media (min-width: 80em) { br.sp { display: none; } br.tb { display: none; } br.pc { display: inline-block; } } /* ----------------------------------------------------------------------- */ /* Color */ .color--disable { color: var(--color-disable) !important; } .color--primary { color: var(--color-primary) !important; } .color--secondary { color: var(--color-secondary) !important; } .color--important { color: var(--color-important) !important; } .color--warning { color: var(--color-warning) !important; } .color--current { color: var(--color-accent) !important; } .color--inherit { color: inherit !important; } .color--animation-loop { -webkit-animation: 1s linear var(--delay, 0s) infinite both animate_color_loop !important; animation: 1s linear var(--delay, 0s) infinite both animate_color_loop !important; } /* ============================================================================================== */ /* UI Ppaging */ /* ============================================================================================== */ .paging { margin: 0 auto 40px; text-align: center; } /* not plugin ------------------------------- */ .page-numbers { display: -webkit-inline-box; display: -ms-inline-flexbox; display: inline-flex; -ms-flex-wrap: wrap; flex-wrap: wrap; list-style: none; padding-left: 0; list-style: none; } .page-numbers li { margin: 0.5em; } .page-numbers li > * { display: block; padding: 1em; border: 1px solid rgba(0, 0, 0, 0.1); line-height: 1; min-width: 1em; text-align: center; -webkit-box-sizing: border-box; box-sizing: border-box; border-radius: 5px; } .page-numbers a { text-decoration: none; } .page-numbers .current { color: #fff; pointer-events: none; background-color: var(--color-primary); border-radius: 100px; border-color: transparent; pointer-events: none; } .page-numbers a:hover { color: #fff; background-color: var(--color-jack); } .paging-detail { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; list-style: none; padding-left: 0; width: 100%; } .wp-pagenavi .pages { width: 100%; font-size: 0.85em; display: block; color: rgba(0, 0, 0, 0.5); display: none; } .wp-pagenavi > * { padding: 0px 5px; min-width: 30px; display: inline-block; -webkit-box-sizing: border-box; box-sizing: border-box; margin-right: 3px; border-radius: 100px; font-weight: 500; } /* ============================================================================================== */ /* Table */ /* ============================================================================================== */ /* ---------------------------------------------------------------------------------------------- */ /* standart */ /* ---------------------------------------------------------------------------------------------- */ .table { line-height: 1.6; } .table__item { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; padding: 1em 0; -webkit-box-sizing: border-box; box-sizing: border-box; border-top: var(--borderw, 1px) dashed; position: relative; } @media (min-width: 61.25em) { .table__item { display: grid; grid-template-columns: repeat(14, 1fr); gap: 30px; } } .table__item:last-child { border-bottom: var(--borderw, 1px) dashed; } .table.-s .table__item { padding: 15px 0; } .table.-s .table__item::after { height: calc(100% - 20px); } .table.-l .table__item { padding: 25px 0; } .table__lbl { -ms-flex-negative: 0; flex-shrink: 0; width: clamp(75px, 25%, 150px); -webkit-box-sizing: border-box; box-sizing: border-box; } @media (min-width: 61.25em) { .table__lbl { width: auto; grid-row: 1; grid-column: 1/span 2; } } .table__des { -webkit-box-flex: 1; -ms-flex-positive: 1; flex-grow: 1; margin: 0; } .table__des > *:first-child { margin-top: 0; } @media (min-width: 61.25em) { .table__des { grid-row: 1; grid-column: 3/-1; } } /* ---------------------------------------------------------------------------------------------- */ /* difinition */ /* ---------------------------------------------------------------------------------------------- */ .defTable { line-height: 1.6; } .defTable__item { padding: 1em 0; -webkit-box-sizing: border-box; box-sizing: border-box; border-bottom: var(--borderw, 1px) solid; } @media (min-width: 61.25em) { .defTable__item { display: grid; grid-template-columns: repeat(14, 1fr); gap: 30px; } } .defTable__item:first-child { border-top: var(--borderw, 1px) solid; } .defTable__lbl { -ms-flex-negative: 0; flex-shrink: 0; width: clamp(75px, 25%, 150px); -webkit-box-sizing: border-box; box-sizing: border-box; } @media (min-width: 61.25em) { .defTable__lbl { grid-row: 1; grid-column: 1/span 2; } } .defTable__des { -webkit-box-flex: 1; -ms-flex-positive: 1; flex-grow: 1; margin-top: 10px; margin-left: 0; } .defTable__des > *:first-child { margin-top: 0; } @media (min-width: 46.25em) { .defTable__des { grid-row: 1; grid-column: 3/-1; } } /* ============================================================================================== */ /* wrap-line */ /* ============================================================================================== */ .js-wrap-g, .js-lwrap-g { opacity: 1 !important; -webkit-transition: none !important; transition: none !important; } .js-wrap, .js-wrap-line { overflow: hidden; white-space: nowrap; scrollbar-width: none; } .js-wrap::-webkit-scrollbar, .js-wrap-line::-webkit-scrollbar { display: none; } .js-wrap-line { display: block; width: -webkit-fit-content; width: -moz-fit-content; width: fit-content; } .js-wrap .word, .js-wrap .char, .js-wrap-line .word, .js-wrap-line .char { display: inline-block; } .js-wrap .char:empty, .js-wrap-line .char:empty { display: none; } .js-wrap .word, .js-wrap-line .word { white-space: nowrap; } .js-wrap .word-space, .js-wrap-line .word-space { display: inline; } .text-wrapped .-show .js-wrap .word, .text-wrapped .-show .js-wrap .char, .text-wrapped .-show .js-wrap-line .word, .text-wrapped .-show .js-wrap-line .char { will-change: transform; } .eraseStart .js-wrap .word, .eraseStart .js-wrap .char, .eraseStart .js-wrap-line .word, .eraseStart .js-wrap-line .char { -webkit-animation: 0.5s cubic-bezier(0.65, 0.05, 0.36, 1) 0s 1 hideOftText; animation: 0.5s cubic-bezier(0.65, 0.05, 0.36, 1) 0s 1 hideOftText; -webkit-animation-delay: var(--delay, 0s); animation-delay: var(--delay, 0s); } .-end-intro .inview .js-wrap .word, .-end-intro .inview .js-wrap .char, .-end-intro .inview .js-wrap-line .word, .-end-intro .inview .js-wrap-line .char { -webkit-animation: 0s 1 hideOftText; animation: 0s 1 hideOftText; -webkit-animation-fill-mode: forwards; animation-fill-mode: forwards; } .-end-intro .inview.-show .js-wrap .word, .-end-intro .inview.-show .js-wrap .char, .-end-intro .inview.-show .js-wrap-line .word, .-end-intro .inview.-show .js-wrap-line .char { -webkit-animation: 1s cubic-bezier(0.17, 0.84, 0.44, 1) 0.2s 1 showOftText, 1s cubic-bezier(0.17, 0.84, 0.44, 1) 0.2s 1 animate_color; animation: 1s cubic-bezier(0.17, 0.84, 0.44, 1) 0.2s 1 showOftText, 1s cubic-bezier(0.17, 0.84, 0.44, 1) 0.2s 1 animate_color; -webkit-animation-delay: var(--delay, 0s); animation-delay: var(--delay, 0s); -webkit-animation-fill-mode: both; animation-fill-mode: both; } /* ============================================================================================== */ /* Module / UI Tooltip */ /* ============================================================================================== */ /* * 1. Hide by default * 2. Position * 3. Dimensions * 4. Style */ [uk-tooltip] { cursor: help; } .uk-tooltip { display: none; position: absolute; z-index: 1030; -webkit-box-sizing: border-box; box-sizing: border-box; max-width: 220px; padding: 15px 18px; background: #fff; border-radius: 5px; color: #333; font-size: 1.2rem; line-height: 1.6; -webkit-box-shadow: 5px 5px 15px rgba(0, 0, 0, 0.1); box-shadow: 5px 5px 15px rgba(0, 0, 0, 0.1); } /* Show */ .uk-tooltip.uk-active { display: block; } /* Direction */ [class*=uk-tooltip-top] { margin-top: -10px; } [class*=uk-tooltip-bottom] { margin-top: 10px; } [class*=uk-tooltip-left] { margin-left: -10px; } [class*=uk-tooltip-right] { margin-left: 10px; } .gh { position: fixed; top: 0; left: 0; width: 100%; height: 100vh; margin: 0 auto; z-index: 100; pointer-events: none; -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); -webkit-backface-visibility: hidden; backface-visibility: hidden; -webkit-transition: all 0.45s cubic-bezier(0.65, 0.05, 0.36, 1); transition: all 0.45s cubic-bezier(0.65, 0.05, 0.36, 1); -webkit-transition-property: opacity, width, -webkit-transform; transition-property: opacity, width, -webkit-transform; transition-property: transform, opacity, width; transition-property: transform, opacity, width, -webkit-transform; pointer-events: none; } .gh, .-show .gh, .-hide .gh { pointer-events: none; } .-show .gh { pointer-events: auto; } .gh a { -webkit-transition: all 0.2s ease-in-out; transition: all 0.2s ease-in-out; text-decoration: none; } .gh a:hover { color: var(--color-hover); } .gh .anm { opacity: 0; -webkit-transition: opacity 0.5s cubic-bezier(0.65, 0.05, 0.36, 1); transition: opacity 0.5s cubic-bezier(0.65, 0.05, 0.36, 1); } .gh__logoWrap { position: absolute; top: 15px; left: 15px; right: auto; z-index: 90; margin: 0; -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); -webkit-transition: all 0.45s cubic-bezier(0.65, 0.05, 0.36, 1); transition: all 0.45s cubic-bezier(0.65, 0.05, 0.36, 1); pointer-events: auto; } .gh__logo { margin: 0; pointer-events: auto; cursor: pointer; } .gh__logo a { cursor: pointer; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; width: clamp(120px, 22.1739130435px + 27.1739130435vw, 370px); height: auto; -webkit-transition: all 0.2s ease-in-out; transition: all 0.2s ease-in-out; } .gh__logo a:hover { color: inherit; } .gh__logo a i { display: block; width: 100%; height: 100%; } .gh__logo .icon.icon_logotype { width: clamp(120px, 107.3076923077px + 3.5256410256vw, 175px); height: clamp(30px, 27.6923076923px + 0.641025641vw, 40px); } .gh__logo .icon.icon_logo-simple { width: clamp(100px, 79.2307692308px + 5.7692307692vw, 190px); height: clamp(28px, 22.4615384615px + 1.5384615385vw, 52px); } .gh__pageTitle { display: none; } .gh__info { display: none; } .-show .gh .anm { opacity: 1; } .gh--inner { position: absolute; top: 0; right: 0; left: auto; bottom: 0; margin: auto; display: block; width: 100%; height: 100%; padding: 0; -webkit-box-sizing: border-box; box-sizing: border-box; z-index: 201; overflow-y: auto; overflow-x: hidden; -ms-scroll-chaining: none; overscroll-behavior: contain; vertical-align: middle; -webkit-overflow-scrolling: touch; opacity: 0; background-color: #fff; border-radius: 5px; -webkit-transform: translateX(100%); transform: translateX(100%); -webkit-transition: 0.5s cubic-bezier(0.65, 0.05, 0.36, 1); transition: 0.5s cubic-bezier(0.65, 0.05, 0.36, 1); -webkit-transition-property: background, opacity, -webkit-transform; transition-property: background, opacity, -webkit-transform; transition-property: background, opacity, transform; transition-property: background, opacity, transform, -webkit-transform; pointer-events: none; } .gh--innerContents { position: relative; margin: 0 auto; width: 100%; margin: 0 auto; height: 100%; padding: 0; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; } .gh--inner__logo { display: none; margin: 0; text-align: center; position: absolute; top: 15px; left: 15px; } .gh--inner__logo a { width: clamp(120px, 22.1739130435px + 27.1739130435vw, 370px); height: auto; display: -webkit-inline-box; display: -ms-inline-flexbox; display: inline-flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; margin: 0 auto; } .gh--inner__logo i { display: block; width: 100%; height: 100%; fill: #fff; } .gh--innerWrap { width: calc(100% - 20px); height: calc(100% - 20px); position: absolute; top: 0; right: 0; left: 0; bottom: 0; margin: auto; pointer-events: none; } .gh--inner__toggle { position: fixed; width: 75px; height: 50px; top: 20px; right: 20px; z-index: 202; -webkit-transition: 1s ease; transition: 1s ease; pointer-events: auto; } .-show .gh--inner__toggle { display: block !important; opacity: 1; } .-show .gh--inner__toggle .menu-button__icon-wrap { -webkit-transform: translateY(0px) !important; transform: translateY(0px) !important; } .gh--inner .nav__logo { width: clamp(200px, 181.5384615385px + 5.1282051282vw, 280px); height: auto; display: block; margin: 100px auto 30px; } .gh--inner .nav__logo a { display: inline-block; } .gh--inner .nav__logo i { width: 100%; height: 100%; } .gh--inner .nav__footer { padding: 20px; } .gh--inner__recBtn { display: none; position: fixed; top: 30px; right: 160px; z-index: 210; pointer-events: auto; cursor: pointer; } .gh--inner__recBtn .rec-button { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; -webkit-box-align: center; -ms-flex-align: center; align-items: center; background-color: var(--color-jack); color: var(--color-bg); font-weight: 600; font-size: 18px; border-radius: var(--borderrad); padding: 15px 20px; line-height: 1; -webkit-box-sizing: border-box; box-sizing: border-box; } .gh--inner__recBtn .rec-button .more__ico { stroke-width: 2 !important; color: var(--color-bg); } .gh--inner__recBtn .rec-button:hover { background-color: var(--color-primary); color: var(--color-bg); } .-show .gh--inner { -webkit-transform: translateX(0); transform: translateX(0); opacity: 1; -webkit-transition-timing-function: cubic-bezier(0.17, 0.84, 0.44, 1); transition-timing-function: cubic-bezier(0.17, 0.84, 0.44, 1); -ms-overflow-style: none; scrollbar-width: none; pointer-events: auto; /* animation */ -webkit-animation: navOpen 0.8s cubic-bezier(0.165, 0.84, 0.44, 1) 0s; animation: navOpen 0.8s cubic-bezier(0.165, 0.84, 0.44, 1) 0s; -webkit-animation-fill-mode: both; animation-fill-mode: both; /**/ } .-show .gh--inner::-webkit-scrollbar { display: none; } .-hide .gh--inner { -webkit-animation: navClose 0.8s cubic-bezier(0.165, 0.84, 0.44, 1) 0s; animation: navClose 0.8s cubic-bezier(0.165, 0.84, 0.44, 1) 0s; -webkit-animation-fill-mode: both; animation-fill-mode: both; } @-webkit-keyframes navOpen { 0% { opacity: 0; -webkit-transform: scale(0.9); transform: scale(0.9); -webkit-transform-origin: top center; transform-origin: top center; } 100% { opacity: 1; -webkit-transform: scale(1); transform: scale(1); -webkit-transform-origin: top center; transform-origin: top center; } } @keyframes navOpen { 0% { opacity: 0; -webkit-transform: scale(0.9); transform: scale(0.9); -webkit-transform-origin: top center; transform-origin: top center; } 100% { opacity: 1; -webkit-transform: scale(1); transform: scale(1); -webkit-transform-origin: top center; transform-origin: top center; } } @-webkit-keyframes navClose { 0% { opacity: 1; -webkit-transform: scale(1); transform: scale(1); -webkit-transform-origin: top center; transform-origin: top center; } 100% { opacity: 0; -webkit-transform: scale(0.9); transform: scale(0.9); -webkit-transform-origin: top center; transform-origin: top center; } } @keyframes navClose { 0% { opacity: 1; -webkit-transform: scale(1); transform: scale(1); -webkit-transform-origin: top center; transform-origin: top center; } 100% { opacity: 0; -webkit-transform: scale(0.9); transform: scale(0.9); -webkit-transform-origin: top center; transform-origin: top center; } } .global-nav { width: 100%; text-align: left; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; -webkit-box-sizing: border-box; box-sizing: border-box; padding: 20px; } .global-nav .rec__btn { width: 100%; } .global-nav .rec__btnAnchor { background-color: var(--color-jack); border-radius: var(--borderrad); color: #fff; padding: clamp(20px, 17.6923076923px + 0.641025641vw, 30px); display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; -webkit-box-align: center; -ms-flex-align: center; align-items: center; position: relative; } .global-nav .rec__btnAnchor:hover { color: #fff; } .global-nav .rec__btnTxt { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; } .global-nav .rec__btnTxt > * { margin: 0; } .global-nav .rec__btnTtl { font-weight: 600; font-size: clamp(1.375rem, 1.1304347826rem + 1.0869565217vw, 2rem); } .global-nav .rec__btnTxt { font-weight: 500; font-size: clamp(0.875rem, 0.7282608696rem + 0.652173913vw, 1.25rem); } .global-nav .rec__btn .more__ico { color: var(--color-bg); height: clamp(24px, 20.3076923077px + 1.0256410256vw, 40px); width: clamp(24px, 20.3076923077px + 1.0256410256vw, 40px); } .global-nav .rec__btn .more__ico svg { color: var(--color-bg); height: clamp(24px, 20.3076923077px + 1.0256410256vw, 40px); width: clamp(24px, 20.3076923077px + 1.0256410256vw, 40px); stroke-width: 2; } .g-nav__list { width: 100%; list-style: none; margin: 0; } .g-nav__list.main { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; margin-bottom: clamp(40px, 35.3846153846px + 1.2820512821vw, 60px); } .g-nav__list.sub { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; gap: 14px; margin-bottom: 30px; } .g-nav__list.sub .g-nav__li a { font-size: clamp(0.875rem, 0.8260869565rem + 0.2173913043vw, 1rem); font-weight: 500; padding-bottom: 5px; } .g-nav__list.sub .g-nav__li a:hover { color: #000; } .g-nav__list.sns { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; gap: 18px; } .g-nav__li { list-style: none; padding-left: 0; border-bottom: 1px dotted var(--color-border-weak); } .g-nav__li:before { content: none; } .g-nav__li a { -webkit-box-sizing: border-box; box-sizing: border-box; position: relative; font-size: clamp(1.125rem, 0.8804347826rem + 1.0869565217vw, 1.75rem); font-weight: 500; text-decoration: none; padding-top: clamp(10px, 7.6923076923px + 0.641025641vw, 20px); padding-bottom: clamp(10px, 7.6923076923px + 0.641025641vw, 20px); display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; } .g-nav__li a:hover { color: #000; } .g-nav__li a .more__ico { margin: 0; height: clamp(24px, 20.3076923077px + 1.0256410256vw, 40px); width: clamp(24px, 20.3076923077px + 1.0256410256vw, 40px); } .g-nav__li a .more__ico svg { width: clamp(24px, 20.3076923077px + 1.0256410256vw, 40px); height: clamp(24px, 20.3076923077px + 1.0256410256vw, 40px); stroke-width: 1; color: var(--color-jack); } .g-nav__li.has-child { padding-bottom: clamp(10px, 8.8461538462px + 0.3205128205vw, 15px); } .g-nav__li.has-child a { padding-bottom: clamp(10px, 8.8461538462px + 0.3205128205vw, 15px); } .g-nav__li .lbl { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; line-height: 1.8; letter-spacing: 0.08em; } .g-nav__childList { list-style: none; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; gap: 10px; } .g-nav__childItem { list-style: none; } .g-nav__childItem:before { content: ""; width: 5px; height: 2px; background-color: var(--color-primary); position: absolute; top: 0; bottom: 0; left: 10px; margin: auto; } .g-nav__childItem a { font-weight: 400; font-size: clamp(0.875rem, 0.8260869565rem + 0.2173913043vw, 1rem); color: var(--color-txt-weak); -webkit-box-sizing: border-box; box-sizing: border-box; padding: 5px 0; } @media (min-width: 80em) { .gh { bottom: 0; margin: 0; } .gh .anm { opacity: 1; } .gh__logoWrap { position: fixed; top: 40px; left: 40px; opacity: 1; } .gh__logo { pointer-events: none; } .gh__logo a { pointer-events: auto; -webkit-box-orient: horizontal; -webkit-box-direction: normal; -ms-flex-direction: row; flex-direction: row; -webkit-box-align: center; -ms-flex-align: center; align-items: center; } .gh__pageTitle { display: block; font-size: 16px; font-weight: 500; -webkit-writing-mode: vertical-rl; -ms-writing-mode: tb-rl; writing-mode: vertical-rl; margin: 0; } .gh__info { display: block; } .gh__info .info--tel { font-weight: 500; font-size: 24px; margin-bottom: 5px; display: block; } .gh__info small { font-size: 12px; } .gh__innerWrap { width: calc(100% - 40px); height: calc(100% - 40px); } .pc.scroll-down:not(.-show) .gh__logoWrap { top: 0; opacity: 0; -webkit-transform: translate3d(0, -100%, 0); transform: translate3d(0, -100%, 0); } .gh--inner { padding: 140px 100px 60px; right: 0; left: auto; margin: 0 auto; width: 100%; } .gh--innerContents { -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; -webkit-box-pack: end; -ms-flex-pack: end; justify-content: flex-end; } .gh--inner__toggle { width: 90px; height: 60px; top: 30px; right: 30px; } .gh--inner .nav__contents { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; height: 100%; margin-bottom: 0; -webkit-box-pack: end; -ms-flex-pack: end; justify-content: flex-end; -webkit-box-orient: horizontal; -webkit-box-direction: normal; -ms-flex-direction: row; flex-direction: row; position: relative; } .gh--inner .nav__logo { position: absolute; bottom: 0; left: 0; width: 280px; height: 100px; margin: 0; } .gh--inner .nav__footer { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: end; -ms-flex-pack: end; justify-content: flex-end; -webkit-box-orient: horizontal; -webkit-box-direction: normal; -ms-flex-direction: row; flex-direction: row; } .gh--inner .nav__footer .gf-info { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; gap: 30px; text-align: right; } .gh--inner__recBtn { display: inline-block; } .global-nav { -webkit-box-align: center; -ms-flex-align: center; align-items: center; width: 65%; height: 100%; padding: 0; } .g-nav__list.main { height: calc(100% - 140px); min-height: 455px; margin-bottom: 0; gap: 0 100px; display: -webkit-box; display: -ms-flexbox; display: flex; -ms-flex-wrap: wrap; flex-wrap: wrap; -webkit-box-align: start; -ms-flex-align: start; align-items: flex-start; } .g-nav__li { width: calc(50% - 50px); } } .-show .gh--inner__recBtn { opacity: 0; display: none; } .overlay { position: fixed; height: 100vh; width: 100%; top: 0; right: 0; opacity: 0; visibility: hidden; -webkit-transition: 0.5s cubic-bezier(0.65, 0.05, 0.36, 1); transition: 0.5s cubic-bezier(0.65, 0.05, 0.36, 1); -webkit-transition-property: opacity, visibility; transition-property: opacity, visibility; background: rgba(250, 190, 0, 0.65); z-index: 10; } .-show .overlay { opacity: 1; visibility: visible; cursor: pointer; -webkit-transition-timing-function: cubic-bezier(0.17, 0.84, 0.44, 1); transition-timing-function: cubic-bezier(0.17, 0.84, 0.44, 1); } [class*=w-state] { position: static; margin-right: auto; margin-left: auto; } .w-state { --w-state-padding: clamp(40px, 3.0769230769px + 10.2564102564vw, 200px); width: calc(100% - var(--w-state-padding) - env(safe-area-inset-left) - env(safe-area-inset-right)); max-width: 1720px; } /* * document wrapper */ [documentContent] { padding: 0 0 env(safe-area-inset-left); counter-reset: sectionNum; } @media (min-width: 80em) { [documentContent] { width: 100%; } } /* precedes language --------------------------------------------- */ /* anchor offset ------------------------------------------------- */ /* Loading Animations -------------------------------------------- */ /* main-document-module.cscc の body-overlay に記述 */ /* inview -------------------------------------------------------------------------- */ .inview .inview__item { opacity: 0; -webkit-transform: translateY(20px); transform: translateY(20px); -webkit-transition-duration: 0.6s, 0.6s; transition-duration: 0.6s, 0.6s; -webkit-transition-property: opacity, -webkit-transform; transition-property: opacity, -webkit-transform; transition-property: opacity, transform; transition-property: opacity, transform, -webkit-transform; -webkit-transition-timing-function: linear, cubic-bezier(0.47, 0, 0.75, 0.72); transition-timing-function: linear, cubic-bezier(0.47, 0, 0.75, 0.72); } .inview.-show .inview__item { opacity: 1; -webkit-transform: translateY(0); transform: translateY(0); } /* mask*/ .txtMask { /* background-image: linear-gradient(30deg,currentColor,currentColor 47.5%,rgba(141,141,141,.5) 52.5%,rgba(141,141,141,.5)); background-position: 0 100%; -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; background-size: 300% 200%; transition: background-position .4s ease-out 1s;*/ -webkit-transition: -webkit-filter 0.4s ease-out 1s; transition: -webkit-filter 0.4s ease-out 1s; transition: filter 0.4s ease-out 1s; transition: filter 0.4s ease-out 1s, -webkit-filter 0.4s ease-out 1s; will-change: -webkit-mask, mask, animation; } .-show .inview__item .txtMask { -webkit-animation: txtMask 1s cubic-bezier(0.65, 0.05, 0.36, 1) var(--delay, 0s) 1 normal forwards; animation: txtMask 1s cubic-bezier(0.65, 0.05, 0.36, 1) var(--delay, 0s) 1 normal forwards; } @-webkit-keyframes txtMask { 0% { -webkit-filter: blur(30px); filter: blur(30px); } 100% { -webkit-filter: blur(0); filter: blur(0); } } @keyframes txtMask { 0% { -webkit-filter: blur(30px); filter: blur(30px); } 100% { -webkit-filter: blur(0); filter: blur(0); } } /*.inview__item.sectionBody__imgWrap .sub__img { opacity: 0; transition-delay: .4s; transition-duration: .6s; } .-show .sectionBody__imgWrap .sub__img { opacity: 1; }*/ .inview.inviewMask .inviewMask__img { -webkit-mask-image: -webkit-gradient(linear, left top, right top, color-stop(0, #000), color-stop(50%, #000), to(transparent)); -webkit-mask-image: linear-gradient(90deg, #000 0, #000 50%, transparent 100%); mask-image: -webkit-gradient(linear, left top, right top, color-stop(0, #000), color-stop(50%, #000), to(transparent)); mask-image: linear-gradient(90deg, #000 0, #000 50%, transparent 100%); -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; -webkit-mask-size: 200% 100%; mask-size: 200% 100%; -webkit-mask-position: 200% 0; mask-position: 200% 0; } .inview.inviewMask img.inviewMask__img { -webkit-filter: blur(30px); filter: blur(30px); opacity: 0; -webkit-transition-duration: 1.5s, 1s; transition-duration: 1.5s, 1s; -webkit-transition-property: opacity, -webkit-filter; transition-property: opacity, -webkit-filter; transition-property: filter, opacity; transition-property: filter, opacity, -webkit-filter; -webkit-transition-timing-function: 0.8s linear, cubic-bezier(0.47, 0, 0.75, 0.72); transition-timing-function: 0.8s linear, cubic-bezier(0.47, 0, 0.75, 0.72); } .inview.-show .inviewMask .inviewMask__img, .inview.inviewMask.-show .inviewMask__img { will-change: -webkit-mask, mask, animation; -webkit-animation: 1.5s cubic-bezier(0.65, 0.05, 0.36, 1) var(--delay, 0s) 1 normal forwards maskFadeIn; animation: 1.5s cubic-bezier(0.65, 0.05, 0.36, 1) var(--delay, 0s) 1 normal forwards maskFadeIn; } .inview.-show .inviewMask .inviewMask__img img { opacity: 1; -webkit-filter: blur(0); filter: blur(0); } .image-mask-svg { position: absolute; top: 0; left: 0; height: 100%; width: 100%; z-index: 60; pointer-events: none; } .image-mask-svg path { fill: var(--color-bg); } @keyframes maskFadeIn { 0% { -webkit-mask-position: 200% 0; mask-position: 200% 0; } 100% { -webkit-mask-position: 0 0; mask-position: 0 0; } } @keyframes maskFadeOut { 0% { -webkit-mask-position: 0 0; mask-position: 0 0; } 100% { -webkit-mask-position: 200% 0; mask-position: 200% 0; } } /* ============================================================================================== */ /* Module / Form */ /* ============================================================================================== */ /* ----------------------------------------------- */ /* form layout */ /* ------------------------------- */ .inputItemBlock { margin-top: 25px; } .inputItemBlock:first-child { margin-top: 0; } /* ------------------------------- */ .input-lbl { display: -webkit-inline-box; display: -ms-inline-flexbox; display: inline-flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; padding-bottom: 5px; font-weight: bold; } .input-lbl::before { content: "任意"; color: #fff; text-indent: 0; margin-right: 8px; font-size: 12px; background-color: var(--color-txt-weak); padding: 0 8px; border-radius: 5px; } .input-lbl.-no-lbl::before { content: none; } .required .input-lbl::before { content: "必須"; color: #fff; text-indent: 0; margin-right: 8px; font-size: 12px; background-color: var(--color-important); padding: 0 8px; border-radius: 5px; } /* ------------------------------- */ .input-elm > *:first-child { margin-top: 0; } .input-elm .error-message { display: block; padding: 0.75em 0 0; } .input-grp { display: -webkit-box; display: -ms-flexbox; display: flex; -ms-flex-wrap: wrap; flex-wrap: wrap; -webkit-box-align: center; -ms-flex-align: center; align-items: center; gap: 20px; } .input-grp > * { margin: 0; } /* ------------------------------- */ .controlBlock { display: -webkit-box; display: -ms-flexbox; display: flex; -ms-flex-wrap: wrap; flex-wrap: wrap; gap: 10px 20px; padding: 10px 0; } .controlBlock__item { display: -webkit-inline-box; display: -ms-inline-flexbox; display: inline-flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; margin: 0; padding: 0; white-space: nowrap; } .controlBlock__item::before { content: none; } /* ------------------------------- */ .input-note { margin: 10px 0; color: var(--color-txt-weak); font-size: 1.05rem; line-height: 1.5; } .input-note:first-child { margin-top: 0; padding-top: 7px; } .input-note:last-child { margin-bottom: 0; } /* ------------------------------- */ .mp-input.-w10p { width: 10%; } .mp-input.-w20p { width: 20%; } .mp-input.-w30p { width: 30%; } .mp-input.-w40p { width: 40%; } .mp-input.-w50p { width: 50%; } .mp-input.-w60p { width: 60%; } .mp-input.-w70p { width: 70%; } .mp-input.-w80p { width: 80%; } .mp-input.-w90p { width: 90%; } .mp-input.-w100p { width: 100%; } /* ------------------------------- */ .mp-textarea { min-height: 10em; } /* ------------------------------- */ .input-definition { position: relative; margin: 0; } .input-definition > div { position: relative; } .input-definition dt { position: absolute; display: inline-block; margin: 0; padding: 0 5px; top: -0.7em; left: 5px; font-size: 1.2rem; line-height: 1; z-index: 2; -webkit-transition: 0.2s ease; transition: 0.2s ease; pointer-events: none; background-color: rgb(255, 255, 255); } .input-definition label { pointer-events: auto; } .input-definition dd { margin-left: 0; } .input-definition .input--select-wrap:hover::after { color: rgb(0, 0, 0); } .input-definition .input--select-wrap:hover:disabled::after { color: rgba(0, 0, 0, 0.3); } /* ------------------------------- */ .mp-form-footer { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; } .mp-form-footer .paging { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; -ms-flex-wrap: wrap; flex-wrap: wrap; gap: 10px; list-style: none; margin: 0; padding: 0; } .mp-form-footer .paging__item { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; margin: 0; padding: 0; } .mp-form-footer .paging__item::before { content: none; } /* ---------------------------------------------------------------------- */ /* confirm */ /* ---------------------------------------------------------------------- */ .mp-confirm-table { display: block; width: 100%; } .mp-confirm-table tr { display: block; border-top: 1px solid rgba(0, 0, 0, 0.1); } .mp-confirm-table th { display: block; width: 180px; padding: 10px 10px 0 0; -webkit-box-sizing: border-box; box-sizing: border-box; text-align: left; font-size: 1.1rem; font-weight: 400; color: #999; } .mp-confirm-table td { display: block; padding: 0 0 10px 0; -webkit-box-sizing: border-box; box-sizing: border-box; font-size: 1.3rem; font-weight: 500; } .mp-status-preview { margin-bottom: 40px; padding: 20px 0; } .mp-status-preview .mp-confirm-table { font-weight: normal; } .mp-status-preview .mp-confirm-table th { font-weight: normal; font-size: 1.3rem; color: #555; width: 150px; } .mp-status-preview .mp-confirm-table td { font-weight: 300; font-size: 1.3rem; color: #555; } .mp-status-preview .mp-confirm-table .txt { display: block; margin-bottom: 0.5em; } .mp-status-preview .mp-confirm-table .btn { position: absolute; right: 0; top: 10px; } /* ============================================================================================== */ /* Layout - main / document transition */ /* ============================================================================================== */ /* Event * - .eraseStart * - .onloadstart * - .onloadajaxcontent * - .onready * - .onloadcomplete * Intro */ /* -------------------------------------------------- */ .-end-intro .eraseStart #async-container { -webkit-animation: hideContents var(--erase-animation-time, 1s) cubic-bezier(0.17, 0.84, 0.44, 1) 1; animation: hideContents var(--erase-animation-time, 1s) cubic-bezier(0.17, 0.84, 0.44, 1) 1; } .-end-intro .onloadcomplete #async-container { -webkit-animation: showContents var(--erase-animation-time, 1s) cubic-bezier(0.17, 0.84, 0.44, 1) 1; animation: showContents var(--erase-animation-time, 1s) cubic-bezier(0.17, 0.84, 0.44, 1) 1; cursor: auto; } @-webkit-keyframes hideContents {} @keyframes hideContents {} @-webkit-keyframes showContents {} @keyframes showContents {} /* -------------------------------------------------- */ .page-transition-cover { position: fixed; left: 0; top: 0; bottom: auto; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; width: 100%; height: 100dvh; z-index: 999; -webkit-perspective: 1; perspective: 1; opacity: 1; -webkit-transition: none; transition: none; color: var(--color-primary); } .page-transition-cover .indicator { position: absolute; inset: 0; display: grid; place-items: center; width: 30px; height: 30px; margin: auto; -webkit-transition: 0.25s ease 0.5s; transition: 0.25s ease 0.5s; opacity: 1; z-index: 1000; -webkit-animation: 0.5s steps(2) 0s infinite indicator_animation; animation: 0.5s steps(2) 0s infinite indicator_animation; } .page-transition-cover .image-mask-svg__elm { -webkit-transition: 0.5s ease-out; transition: 0.5s ease-out; -webkit-transition-property: fill, stroke, opacity; transition-property: fill, stroke, opacity; } .page-transition-cover .image-mask-svg__elm.fill { fill: var(--color-bg); } .page-transition-cover .image-mask-svg__elm.line { stroke-width: 10; stroke: var(--color-main); } .page-transition-cover.-finish { -webkit-transition: opacity 0.25s ease-out; transition: opacity 0.25s ease-out; pointer-events: none; } .page-transition-cover.-finish .image-mask-svg__elm { opacity: 0; } .page-transition-cover.-finish .indicator { opacity: 0; } .-end-intro .onloadcomplete ~ .page-transition-cover { cursor: auto; } .-end-intro .onloadcomplete ~ .page-transition-cover .indicator { opacity: 0; -webkit-transition-delay: 0s; transition-delay: 0s; color: var(--color-primary); } @-webkit-keyframes hidePage { 0% { -webkit-transform: translate3d(0, 100%, 0); transform: translate3d(0, 100%, 0); } 100% { -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); } } @keyframes hidePage { 0% { -webkit-transform: translate3d(0, 100%, 0); transform: translate3d(0, 100%, 0); } 100% { -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); } } @-webkit-keyframes showPage { 0% { -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); } 100% { -webkit-transform: translate3d(0, -100%, 0); transform: translate3d(0, -100%, 0); } } @keyframes showPage { 0% { -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); } 100% { -webkit-transform: translate3d(0, -100%, 0); transform: translate3d(0, -100%, 0); } } /* ---------------------------------------------------------------------------------------------------- */ .first-transition-cover { position: fixed; left: 0; top: 0; bottom: auto; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; width: 100%; height: 100vh; background-color: var(--color-bg); color: var(--color-primary); z-index: 2000; } .-end-intro .first-transition-cover { -webkit-transition: opacity 0.8s cubic-bezier(0.17, 0.84, 0.44, 1); transition: opacity 0.8s cubic-bezier(0.17, 0.84, 0.44, 1); pointer-events: none; opacity: 0; } .first-transition-cover .first-transition-cover__logo { width: 80px; height: 80px; overflow: hidden; } .first-transition-cover .first-transition-cover__logo svg { display: block; padding: 0; -webkit-animation: 0.5s steps(1) 0s infinite indicator_animation; animation: 0.5s steps(1) 0s infinite indicator_animation; } @-webkit-keyframes indicator_animation { 0%, 100% { -webkit-transform: rotate(5deg); transform: rotate(5deg); } 50% { -webkit-transform: rotate(-5deg); transform: rotate(-5deg); } } @keyframes indicator_animation { 0%, 100% { -webkit-transform: rotate(5deg); transform: rotate(5deg); } 50% { -webkit-transform: rotate(-5deg); transform: rotate(-5deg); } } .gf { position: relative; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; -ms-flex-wrap: wrap; flex-wrap: wrap; font-size: 0.875rem; letter-spacing: 0.05em; padding: 0; overflow: hidden; } .gfInner { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: reverse; -ms-flex-direction: column-reverse; flex-direction: column-reverse; gap: 40px; } .gf .maincopy { margin: 30px auto 0; } .gf-logoOther { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; gap: 0; } .gf-logo { cursor: pointer; } .gf-logo__item { margin-top: 0; } .gf-logo a { display: -webkit-box; display: -ms-flexbox; display: flex; width: clamp(270px, 230.8695652174px + 10.8695652174vw, 370px); height: auto; -webkit-transition: all 0.2s ease-in-out; transition: all 0.2s ease-in-out; } .gf-logo .icon.icon_logotype { width: clamp(133px, 123.7692307692px + 2.5641025641vw, 173px); height: 40px; } .gf-logo .icon.icon_logo-simple { width: 190px; height: 52px; } .gf-nav { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; line-height: 2.2; gap: 50px; } .gf-nav__list { list-style: none; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; gap: 5px; } .gf-nav__li { padding: 0; } .gf-nav__li::before { content: none; } .gf-nav__li a { font-size: 16px; text-transform: uppercase; text-decoration: none; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; } .gf-nav__li a .more__ico { margin-left: 0; } .gf-nav__li a .more__ico svg { color: var(--color-jack); stroke-width: 1.5; } .gf-nav__childList { list-style: none; display: none; } .gf-nav__childItem { position: relative; } .gf-nav__childItem:before { content: ""; width: 5px; height: 2px; background-color: var(--color-primary); position: absolute; top: 0; bottom: 0; left: 10px; margin: auto; } .gf-nav__childAnchor { font-size: 13px !important; color: var(--color-txt-weak); } .gf-other { margin-bottom: 30px; } .gf-other > * { margin: 0; } .gf-other__list { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; gap: 8px; margin: 0; list-style: none; } .gf-other__list.sns { -webkit-box-pack: start; -ms-flex-pack: start; justify-content: flex-start; margin-bottom: 15px; } .gf-other__list.sns li a:after { content: none !important; } .gf-other__list.sns li a .icon { -webkit-transition: inherit; transition: inherit; -webkit-transform: scale(1); transform: scale(1); } .gf-other__list.sns li a:hover .icon { -webkit-transform: scale(1.2); transform: scale(1.2); } .gf-other__li { height: clamp(20px, 18.0434782609px + 0.5434782609vw, 25px); list-style: none; padding: 0; } .gf-other__li:before { content: none; } .gf-other__a { font-size: 12px; } .gf-info { font-size: 13px; text-align: left; line-height: 1.8; margin-bottom: 10px; } .gf-info__txt { margin-bottom: 5px; } .gf-info__mapLink { margin-top: 0; } .gf-info__mapLink a { text-decoration: underline; } .copyright { font-size: 12px; color: var(--color-txt-weak); } @media (min-width: 80em) { .gf { -webkit-box-orient: horizontal; -webkit-box-direction: normal; -ms-flex-direction: row; flex-direction: row; -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; } .gfInner { display: grid; grid-template-columns: repeat(2, 1fr); gap: 30px; } .gf-logo a { -webkit-box-orient: horizontal; -webkit-box-direction: normal; -ms-flex-direction: row; flex-direction: row; } .gf-logoOther { gap: 40px; } .gf-nav { gap: 65px; } .gf-nav__list { gap: 15px; margin-top: 30px; display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; } .gf-info > * { margin-top: 0; } .gf-info__txt { margin-bottom: 0; } .gf-other { margin-bottom: 0; } } .gf .maincopy .ftTxtAnimation { -webkit-animation-duration: 10s; animation-duration: 10s; -webkit-animation-timing-function: cubic-bezier(0.65, 0.2, 0.5, 1); animation-timing-function: cubic-bezier(0.65, 0.2, 0.5, 1); -webkit-animation-iteration-count: infinite; animation-iteration-count: infinite; -webkit-animation-fill-mode: backwards; animation-fill-mode: backwards; display: inline-block; } .gf .maincopy .ftTxtAnimation.pt1-1 { -webkit-animation-name: kvTxtFilter1; animation-name: kvTxtFilter1; -webkit-animation-delay: 5s; animation-delay: 5s; } .gf .maincopy .ftTxtAnimation.pt1-2 { -webkit-animation-name: kvTxtFilter2; animation-name: kvTxtFilter2; -webkit-animation-delay: 12s; animation-delay: 12s; } .gf .maincopy .ftTxtAnimation.pt2 { -webkit-animation-name: kvTxtFilter1; animation-name: kvTxtFilter1; -webkit-animation-delay: 0.5s; animation-delay: 0.5s; } .gf .maincopy .ftTxtAnimation.pt3 { -webkit-animation-name: kvTxtFilter2; animation-name: kvTxtFilter2; -webkit-animation-delay: 15s; animation-delay: 15s; } .gf .maincopy .ftTxtAnimation.pt4 { -webkit-animation-name: kvTxtFilter2; animation-name: kvTxtFilter2; -webkit-animation-delay: 8s; animation-delay: 8s; } .gf .maincopy .ftTxtAnimation.pt5 { -webkit-animation-name: kvTxtFilter1; animation-name: kvTxtFilter1; -webkit-animation-delay: 6.5s; animation-delay: 6.5s; } .gf .maincopy .ftTxtAnimation.pt6 { -webkit-animation-name: kvTxtFilter2; animation-name: kvTxtFilter2; -webkit-animation-delay: 20s; animation-delay: 20s; } .gf .maincopy .ftTxtAnimation.pt7 { -webkit-animation-name: kvTxtFilter1; animation-name: kvTxtFilter1; -webkit-animation-delay: 4s; animation-delay: 4s; } .gf .maincopy .ftTxtAnimation.pt8 { -webkit-animation-name: kvTxtFilter1; animation-name: kvTxtFilter1; -webkit-animation-delay: 10s; animation-delay: 10s; } html { border: 3px solid; } @media (min-width: 80em) { html { border: 5px solid; } } main { overflow: hidden; } @media (min-width: 80em) { main { overflow: visible; } } /* btnWrap --------------------------------------- */ .btnWrap { margin-top: 30px; } /* maincopy --------------------------------------- */ .maincopy { text-align: center; font-size: 18vw; line-height: 1; font-family: var(--font-secondary); color: var(--color-secondary); } .maincopy span { display: inline-block; } @media (min-width: 80em) { .maincopy { font-size: 10.8vw; } } /* section --------------------------------------- */ .section { letter-spacing: 1px; } .sectionHeader .mainTtl { position: relative; padding-bottom: 25px; background-image: url("data:image/svg+xml;charset=utf8,%3Csvg%20width%3D%2258%22%20height%3D%228%22%20viewBox%3D%220%200%2058%208%22%20fill%3D%22none%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cpath%20d%3D%22M6.06915%202.28269C8.31019%204.48877%208.38525%207.99472%208.38525%207.99472C8.38525%207.99472%204.83872%208.19551%202.59767%205.98679C0.356624%203.78071%200.273523%200%200.273523%200C0.273523%200%203.83078%200.0739764%206.07183%202.28269H6.06915Z%22%20fill%3D%22%23FFEA00%22%2F%3E%3Cpath%20d%3D%22M12.9316%202.50991C10.8594%204.55218%2010.385%207.39498%2010.385%207.39498C10.385%207.39498%2013.2694%206.92734%2015.3415%204.88507C17.4137%202.8428%2017.8882%200%2017.8882%200C17.8882%200%2015.0038%200.467635%2012.9316%202.50991Z%22%20fill%3D%22%23FFEA00%22%2F%3E%3Cpath%20d%3D%22M25.6839%202.28269C27.9249%204.49141%2028%207.99736%2028%207.99736C28%207.99736%2024.4535%208.19815%2022.2124%205.98943C19.9714%203.78071%2019.8883%200%2019.8883%200C19.8883%200%2023.4455%200.0739764%2025.6866%202.28269H25.6839Z%22%20fill%3D%22%23FFEA00%22%2F%3E%3Cpath%20d%3D%22M32.3161%202.28269C30.0751%204.48877%2030%207.99472%2030%207.99472C30%207.99472%2033.5465%208.19551%2035.7876%205.98679C38.0286%203.78071%2038.1117%200%2038.1117%200C38.1117%200%2034.5545%200.0739764%2032.3134%202.28269H32.3161Z%22%20fill%3D%22%23FFEA00%22%2F%3E%3Cpath%20d%3D%22M45.0684%202.50991C47.1406%204.55218%2047.615%207.39498%2047.615%207.39498C47.615%207.39498%2044.7306%206.92734%2042.6585%204.88507C40.5863%202.8428%2040.1118%200%2040.1118%200C40.1118%200%2042.9962%200.467635%2045.0684%202.50991Z%22%20fill%3D%22%23FFEA00%22%2F%3E%3Cpath%20d%3D%22M51.9313%202.28269C49.6903%204.49141%2049.6152%207.99736%2049.6152%207.99736C49.6152%207.99736%2053.1618%208.19815%2055.4028%205.98943C57.6439%203.78071%2057.727%200%2057.727%200C57.727%200%2054.1697%200.0739764%2051.9287%202.28269H51.9313Z%22%20fill%3D%22%23FFEA00%22%2F%3E%3C%2Fsvg%3E"); background-position: bottom left; background-size: auto 8px; background-repeat: no-repeat; font-weight: 500; margin-top: 0; } .sectionHeader .mainTtl.-s { font-size: clamp(0.875rem, 0.8173076923rem + 0.2564102564vw, 1.125rem); } .sectionHeader .mainTtl.-l { font-size: clamp(1.25rem, 1.1057692308rem + 0.641025641vw, 1.875rem); } .sectionInner { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: start; -ms-flex-align: start; align-items: flex-start; -webkit-box-pack: start; -ms-flex-pack: start; justify-content: flex-start; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; color: var(--color-main); } @media (min-width: 80em) { .sectionInner { -webkit-box-orient: horizontal; -webkit-box-direction: normal; -ms-flex-direction: row; flex-direction: row; gap: 120px; } } .emphasis { color: var(--color-primary); } .imgWrap img { border-radius: var(--borderrad); } /* localPage --------------------------------------- */ .localPage { /* character --------------------------------------- */ /* num --------------------------------------- */ /* section --------------------------------------- */ } .localPage .SectionContainer { margin-top: 160px; } .localPage .pageHeader { text-align: right; } .localPage .pageHeaderImgWrap { position: relative; aspect-ratio: 1.8/1; overflow: hidden; width: calc(100% - 20px); height: auto; border-radius: 5px; margin-right: auto; margin-left: auto; z-index: 2; } .localPage .pageHeaderImgWrap img { width: 100%; height: 100%; -o-object-fit: cover; object-fit: cover; position: absolute; top: 0; left: 0; right: 0; bottom: 0; } .localPage .pageHeaderScroll { border-bottom: 1px solid rgba(0, 0, 0, 0.1); } .localPage .pageHeaderScroll .scroll__list { list-style: none; display: -webkit-box; display: -ms-flexbox; display: flex; -ms-flex-wrap: wrap; flex-wrap: wrap; margin: 5px 0; } .localPage .pageHeaderScroll .scroll__item { list-style: none; display: inline-block; padding: 0; margin-right: 5px; } .localPage .pageHeaderScroll .scroll__item:before { content: none; } .localPage .pageHeaderScroll .scroll__item .more__ico { padding: 0; margin: 0; } .localPage .pageHeaderScroll .scroll__item .more__ico svg { width: 24px; height: 24px; } .localPage .pageHeaderScroll .scroll__anchor { padding: 5px; text-decoration: none; display: inline-block; } .localPage .pageHeaderTtlWrap { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; gap: clamp(0.625rem, 0.4807692308rem + 0.641025641vw, 1.25rem); padding-bottom: 160px; position: relative; } .localPage .pageHeaderMainTtl { font-size: clamp(2.5rem, 1.6346153846rem + 3.8461538462vw, 6.25rem); font-weight: 500; position: relative; z-index: 2; } .localPage .pageHeaderBreadList { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; list-style: none; -webkit-box-pack: end; -ms-flex-pack: end; justify-content: flex-end; margin-top: 0; position: relative; z-index: 2; } .localPage .pageHeaderBreadItem { display: inline-block; padding-right: 2.5em; position: relative; font-size: 13px; list-style: none; padding-left: 0; } .localPage .pageHeaderBreadItem:before { content: none; } .localPage .pageHeaderBreadItem:after { content: ""; display: block; width: 14px; height: 14px; background-image: url("data:image/svg+xml;charset=utf8,%3C%3Fxml%20version%3D%221.0%22%20encoding%3D%22UTF-8%22%3F%3E%3Csvg%20id%3D%22_%E3%83%AC%E3%82%A4%E3%83%A4%E3%83%BC_1%22%20data-name%3D%22%E3%83%AC%E3%82%A4%E3%83%A4%E3%83%BC_1%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20version%3D%221.1%22%20viewBox%3D%220%200%2024%2024%22%3E%20%3Cpath%20d%3D%22M7.7%2C7.8c-5.5%2C5.4-5.7%2C14.1-5.7%2C14.1%2C0%2C0%2C8.7.5%2C14.3-5%2C5.5-5.4%2C5.7-14.8%2C5.7-14.8%2C0%2C0-8.8.2-14.3%2C5.6h0Z%22%20fill%3D%22%23FFEA00%22%2F%3E%3C%2Fsvg%3E"); background-repeat: no-repeat; background-size: 14px 14px; background-position: center right; position: absolute; right: 8px; top: 0; bottom: 0; margin: auto; } .localPage .pageHeaderBreadItem:last-child { padding-right: 0; } .localPage .pageHeaderBreadItem:last-child:after { content: none; } .localPage .pageHeaderBreadAnchor { text-decoration: none; color: var(--color-txt-weak); } @media (min-width: 80em) { .localPage .pageHeaderImgWrap { aspect-ratio: 2.2/1; } .localPage .pageHeaderScroll .scroll__list { margin: 10px 0; } .localPage .pageHeaderScroll .scroll__item { margin-right: 15px; } } .localPage .pageBody { margin-top: clamp(5rem, 3.8461538462rem + 5.1282051282vw, 10rem); width: 100%; } .localPage .chara__lower { position: absolute; -webkit-transition: all 0.2s cubic-bezier(0.17, 0.84, 0.44, 1); transition: all 0.2s cubic-bezier(0.17, 0.84, 0.44, 1); } .localPage .chara__mv { position: absolute; bottom: -30px; right: auto; left: auto; margin: auto; z-index: 0; -webkit-transform: translateY(100%); transform: translateY(100%); -webkit-transition: 1s cubic-bezier(0.075, 0.82, 0.165, 1) 0.8s; transition: 1s cubic-bezier(0.075, 0.82, 0.165, 1) 0.8s; } .localPage .chara__mv .chara__cmt { margin-top: -50px; margin-left: -5px; -webkit-transform: translateY(30px); transform: translateY(30px); opacity: 0; -webkit-transition: 1.5s cubic-bezier(0.075, 0.82, 0.165, 1) 1s; transition: 1.5s cubic-bezier(0.075, 0.82, 0.165, 1) 1s; -webkit-filter: blur(24px); filter: blur(24px); width: 2.5em; } .localPage .chara__wrap { position: relative; display: -webkit-box; display: -ms-flexbox; display: flex; gap: 0; -webkit-box-align: center; -ms-flex-align: center; align-items: center; } .localPage .chara__img img { width: clamp(110px, 98.4615384615px + 3.2051282051vw, 160px); height: clamp(110px, 98.4615384615px + 3.2051282051vw, 160px); } .localPage .chara__cmtTxt { margin: 0; font-size: 11px; font-weight: 500; color: var(--color-main); -webkit-transform: rotate(15deg); transform: rotate(15deg); line-height: 1.6; letter-spacing: 0.06rem; } .load .localPage .chara__mv { -webkit-transform: translateY(0); transform: translateY(0); } .load .localPage .chara__mv .chara__cmt { opacity: 1; -webkit-transform: translateY(0); transform: translateY(0); -webkit-filter: blur(0); filter: blur(0); } .localPage .pageBody .chara__cmtTxt span { opacity: 0; -webkit-transform-origin: left; transform-origin: left; display: block; -webkit-transition: 0.6s cubic-bezier(0.075, 0.82, 0.165, 1) 0.6s; transition: 0.6s cubic-bezier(0.075, 0.82, 0.165, 1) 0.6s; -webkit-transform: translate3d(0, 20%, 0); transform: translate3d(0, 20%, 0); -webkit-filter: blur(24px); filter: blur(24px); } .localPage .pageBody .chara__lower.-show .chara__cmtTxt span { opacity: 1; -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); -webkit-filter: blur(0); filter: blur(0); } @media (min-width: 80em) { .localPage .chara__mv { left: 0; right: auto; bottom: -30px; } .localPage .chara__cmtTxt { font-size: clamp(0.75rem, 0.7355769231rem + 0.0641025641vw, 0.8125rem); } } .localPage .num { position: absolute; z-index: 2; font-family: var(--font-secondary); font-size: clamp(3.125rem, 2.6923076923rem + 1.9230769231vw, 5rem); color: var(--color-primary); line-height: 1; padding: 5px; -webkit-box-sizing: border-box; box-sizing: border-box; background-color: var(--color-bg); } .localPage .num small { font-size: clamp(1.875rem, 1.4423076923rem + 1.9230769231vw, 3.75rem); } @media (min-width: 80em) { .localPage .num { padding: 10px; } } .localPage .-sticky .sectionInner { gap: 8vw; } .localPage .-sticky .sectionHeader { width: 100%; text-align: center; } .localPage .-sticky .sectionHeader .mainTtl { background-position: bottom center; } .localPage .-sticky .sectionBody { width: 100%; } @media (min-width: 80em) { .localPage .-sticky .sectionInner { gap: 4vw; } .localPage .-sticky .sectionHeader { position: sticky; top: 120px; width: calc(32% - 4vw); text-align: left; } .localPage .-sticky .sectionHeader .mainTtl { background-position: bottom left; } .localPage .-sticky .sectionBody { width: 68%; } } .localPage .section__txtWrap { margin-bottom: clamp(20px, 15.3846153846px + 1.2820512821vw, 40px); } .localPage .section__txtWrap > * { margin-top: 0; } .localPage .section__subTtl { font-size: clamp(0.875rem, 0.8605769231rem + 0.0641025641vw, 0.9375rem); font-weight: 500; color: var(--color-txt-weak); position: relative; display: -webkit-box; display: -ms-flexbox; display: flex; margin-bottom: clamp(20px, 17.6923076923px + 0.641025641vw, 30px); } .localPage .section__subTtl .petal__ico { display: inline-block; margin-right: 10px; } .localPage .section__subTtl .petal__ico svg { -webkit-transform: scale(-1, 1); transform: scale(-1, 1); } .localPage .section__catch { font-size: clamp(1.125rem, 1.0384615385rem + 0.3846153846vw, 1.5rem); font-weight: 500; margin-bottom: 10px; } .chara__wrap { opacity: 0; -webkit-transition: 0.6s ease 0.8s !important; transition: 0.6s ease 0.8s !important; } .-show .chara__wrap { opacity: 1; } .scroll-hint-icon { height: 90px !important; } /* blog --------------------------------------- */ .blogHeadline { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0; padding-bottom: 30px; margin-top: 0; -webkit-box-sizing: border-box; box-sizing: border-box; } .blogHeadline__item { width: 33.333%; padding: 0; } .blogHeadline__item:before { content: none; } .blogHeadline__item--empty { padding: 0; list-style: none; } .blogHeadline__item--empty:before { content: none; } .blogHeadline__anchor { cursor: pointer; text-decoration: none; } .blogHeadline__anchor .new { position: absolute; top: 5px; left: 5px; font-weight: 600; font-size: clamp(0.625rem, 0.5961538462rem + 0.1282051282vw, 0.75rem); z-index: 2; background-color: var(--color-primary); color: var(--color-bg); padding: 5px; line-height: 1; border-radius: 100px; text-align: center; } .blogHeadline__thumb { border-radius: var(--borderrad); aspect-ratio: 1/1; overflow: hidden; position: relative; width: 100%; height: auto; } .blogHeadline__thumb img { width: 100%; height: 100%; -o-object-fit: cover; object-fit: cover; position: absolute; top: 0; left: 0; right: 0; bottom: 0; -webkit-transform: scale(1); transform: scale(1); -webkit-transition: 0.8s cubic-bezier(0.17, 0.84, 0.44, 1); transition: 0.8s cubic-bezier(0.17, 0.84, 0.44, 1); opacity: 1; } .blogHeadline__account { margin-top: 5px; display: -webkit-box; display: -ms-flexbox; display: flex; gap: 10px; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-sizing: border-box; box-sizing: border-box; } .blogHeadline__accountIcon { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; padding: 3px; border: 1px solid rgba(0, 0, 0, 0.1); border-radius: 100px; background-color: var(--color-bg); } .blogHeadline__accountIcon .icon { width: 18px; height: 18px; } .blogHeadline__catList { display: -webkit-box; display: -ms-flexbox; display: flex; gap: 10px; -ms-flex-wrap: wrap; flex-wrap: wrap; list-style: none; } .blogHeadline__catItem { padding: 0; } .blogHeadline__catItem:before { content: none; } .blogHeadline__date { color: var(--color-txt-weak); } @media (min-width: 80em) { .blogHeadline__anchor:hover .blogHeadline__thumb img { -webkit-transform: scale(1.05); transform: scale(1.05); -webkit-filter: blur(5px); filter: blur(5px); } .blogHeadline__anchor .new { top: 10px; left: 10px; padding: 10px; } } .include--meta.blog .sectionInner { display: block; } .include--meta.blog .sectionHeader { margin-bottom: 60px; } .include--meta.blog .sectionHeader .ttlWrap { margin-bottom: 0 !important; } .include--meta.blog .sectionHeader .mainTtl { text-align: left; margin-bottom: 10px; } .include--meta.blog .sectionHeader .subTtl { text-transform: uppercase; font-size: clamp(2.1875rem, 1.9711538462rem + 0.9615384615vw, 3.125rem); font-weight: 400; line-height: 1.2; letter-spacing: -0.02rem; margin-top: 0; } @media (min-width: 80em) { .include--meta.blog .sectionHeader { margin-bottom: 0; } .include--meta.blog .sectionHeader .mainTtl { position: relative; } } .include--meta.blog .blogHeadline { width: calc(100% + 40px); -webkit-transform: translateX(-20px); transform: translateX(-20px); -ms-scroll-snap-type: x mandatory; scroll-snap-type: x mandatory; overflow-x: scroll; padding-left: 20px; } .include--meta.blog .blogHeadline__item { width: auto; min-width: 280px; border-right: 1px solid rgba(0, 0, 0, 0.15); scroll-snap-align: center; } .include--meta.blog .blogHeadline__item:last-child { border-right: 0; } .include--meta.blog .blogHeadline__item:first-child { border-left: 1px solid rgba(0, 0, 0, 0.15); } .include--meta.blog .blogHeadline__item--empty { text-align: center; font-size: 0.9em; } .include--meta.blog .blogHeadline__anchor { padding: 20px; height: 100%; -webkit-box-sizing: border-box; box-sizing: border-box; display: block; text-decoration: none; cursor: pointer; -webkit-transition: 0.4s ease; transition: 0.4s ease; } .include--meta.blog .blogHeadline__anchor:hover .blogHeadline__thumb img { -webkit-filter: brightness(1.2); filter: brightness(1.2); } .include--meta.blog .blogHeadline__itemHeader { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: start; -ms-flex-align: start; align-items: flex-start; gap: 15px; margin-bottom: 20px; } .include--meta.blog .blogHeadline__areaIcon { font-size: 12px; border-radius: var(--borderrad); background-color: var(--color-bg); text-align: center; -webkit-writing-mode: vertical-rl; -ms-writing-mode: tb-rl; writing-mode: vertical-rl; padding: 5px; line-height: 1; letter-spacing: 0.14rem; } .include--meta.blog .blogHeadline .item--nagasu .blogHeadline__areaIcon { background-color: var(--color-nagasu); } .include--meta.blog .blogHeadline .item--nankan .blogHeadline__areaIcon { background-color: var(--color-nankan); } .include--meta.blog .blogHeadline .item--kikusui .blogHeadline__areaIcon { background-color: var(--color-kikusui); } .include--meta.blog .blogHeadline__ttl { margin-top: 0; margin-bottom: 5px; line-height: 1.2; font-weight: 500; } .include--meta.blog .blogHeadline__meta { display: -webkit-box; display: -ms-flexbox; display: flex; -ms-flex-wrap: wrap; flex-wrap: wrap; gap: 10px; } .include--meta.blog .blogHeadline__meta > * { font-size: clamp(0.8125rem, 0.7980769231rem + 0.0641025641vw, 0.875rem); margin-top: 0; line-height: 1.2; } .include--meta.blog .blogHeadline__accountName { font-size: 13px; font-weight: 500; color: rgba(68, 68, 68, 0.4); letter-spacing: 0.05rem; } @media (min-width: 46.25em) { .include--meta.blog .blogHeadline { width: calc(100% + 60px); } .include--meta.blog .blogHeadline__item { min-width: 320px; } } @media (min-width: 80em) { .include--meta.blog .sectionInner { display: -webkit-box; display: -ms-flexbox; display: flex; } .include--meta.blog .sectionBody { width: 100%; } .include--meta.blog .blogHeadline { overflow: hidden; width: 100%; -webkit-transform: translateX(0); transform: translateX(0); -ms-scroll-snap-type: none; scroll-snap-type: none; overflow-x: auto; padding-left: 0; } .include--meta.blog .blogHeadline__item { scroll-snap-align: none; min-width: auto; } .include--meta.blog .blogHeadline__item:first-child { border-left: none; } } @media (min-width: 100em) { .include--meta.blog .blog__anchor { padding: 0 40px; } } /* document-container --------------------------------------- */ .document-container a[rel=tag] { text-decoration: none; font-size: clamp(0.875rem, 0.8173076923rem + 0.2564102564vw, 1.125rem); } .document-container a[rel=tag]:hover { color: var(--color-main) !important; text-decoration: underline; } .document-container .area__tag { margin-top: 0.5em; } .single__nagasu .document-container a[rel=tag] { color: var(--color-nagasu); } .single__nankan .document-container a[rel=tag] { color: var(--color-nankan); } .single__kikusui .document-container a[rel=tag] { color: var(--color-kikusui); } /* remodal --------------------------------------- */ .remodal { padding: 0 !important; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: start; -ms-flex-align: start; align-items: flex-start; -webkit-box-sizing: border-box; box-sizing: border-box; overflow: hidden; } .remodal-close { right: 0 !important; left: auto !important; } .remodal .article__inner { padding: 80px 15px 40px; width: 100%; -webkit-box-sizing: border-box; box-sizing: border-box; position: relative; max-width: 750px; margin: 0 auto; } .remodal .article__eyecatch img { border-radius: var(--borderrad); } .remodal .pageHeader, .remodal .contentsBody { width: 100%; } .remodal .pageHeader { -webkit-box-sizing: border-box; box-sizing: border-box; text-align: left; display: -webkit-box; display: -ms-flexbox; display: flex; gap: 20px; margin-bottom: 5em; } .remodal .pageHeader__info { width: 100%; margin: 0; position: relative; z-index: 2; } .remodal .pageHeader .blogHeadline__account { margin: auto; position: absolute; left: -40px; top: 0; bottom: auto; padding: 0; opacity: 0.4; z-index: 1; } .remodal .pageHeader .blogHeadline__accountIcon { border: none; background-color: transparent; border-radius: none; padding: 0; } .remodal .pageHeader .blogHeadline__accountIcon .icon { width: clamp(220px, 183.0769230769px + 10.2564102564vw, 380px); height: clamp(220px, 183.0769230769px + 10.2564102564vw, 380px); } .remodal .pageHeader .blogHeadline__accountName { font-size: clamp(0.8125rem, 0.7836538462rem + 0.1282051282vw, 0.9375rem); font-weight: 600; } .remodal .pageHeader .blogHeadline__ttl { font-size: clamp(1.25rem, 1.1057692308rem + 0.641025641vw, 1.875rem); font-weight: 600; color: var(--color-main); margin: 0; } .remodal .pageHeader .blogHeadline__meta { display: -webkit-box; display: -ms-flexbox; display: flex; gap: 3px; -webkit-box-pack: start; -ms-flex-pack: start; justify-content: flex-start; font-size: clamp(0.75rem, 0.7211538462rem + 0.1282051282vw, 0.875rem); } .remodal .pageHeader .blogHeadline__date { padding-right: 1em; position: relative; display: inline-block; } .remodal .pageHeader .blogHeadline__date:after { content: "／"; position: absolute; right: 0; margin: auto; font-size: 12px; color: var(-color-border-weak); } .remodal .pageHeader .blogHeadline__catItem { color: var(--color-txt-weak); } .remodal .contentsBody { text-align: left; margin-bottom: 3em; position: relative; z-index: 4; } @media (min-width: 80em) { .remodal { max-width: 900px !important; } .remodal .article__inner { padding: 100px 40px 60px; } .remodal .pageHeader { -webkit-box-align: center; -ms-flex-align: center; align-items: center; } .remodal .pageHeader .blogHeadline__account { left: -40px; } } /* recruit --------------------------------------- */ .recruit { width: calc(100% - 20px); max-width: none; margin-right: auto; margin-left: auto; } .recruit .sectionInner { display: block; width: 100%; text-align: left; } .recruit .sectionHeader { width: 100%; position: relative; top: auto; } .recruit__anchor { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; overflow: hidden; position: relative; width: 100%; border-radius: var(--borderrad); aspect-ratio: 2/3; text-decoration: none; } .recruit__anchor:hover .recruit__img { -webkit-filter: blur(10px) brightness(65%); filter: blur(10px) brightness(65%); } .recruit__anchor:hover .btnWrap .btn { background-color: var(--color-primary); color: var(--color-bg); } .recruit__anchor:hover .btnWrap .btn .more__ico { color: var(--color-bg); } .recruit__img { -o-object-fit: cover; object-fit: cover; width: 100%; height: 100%; position: absolute; top: 0; right: 0; bottom: 0; left: 0; z-index: 1; -webkit-filter: blur(0) brightness(65%); filter: blur(0) brightness(65%); -webkit-transition: -webkit-filter 0.5s ease; transition: -webkit-filter 0.5s ease; transition: filter 0.5s ease; transition: filter 0.5s ease, -webkit-filter 0.5s ease; will-change: filter; } .recruit__txt { position: relative; z-index: 3; padding: 20px; } .recruit__txt .ttlWrap > * { color: #fff; } .recruit__txt .mainTtl { font-size: clamp(1.5rem, 1.2692307692rem + 1.0256410256vw, 2.5rem) !important; } .recruit .btnWrap .btn { padding: 10px 20px; border-radius: 3px; background-color: var(--color-bg); border-bottom: none; font-weight: 500; } .recruit .btnWrap .btn svg { stroke-width: 1 !important; } .recruit .btnWrap .btn:after { display: none; } @media (min-width: 46.25em) { .recruit__anchor { aspect-ratio: 4/3; } } @media (min-width: 80em) { .recruit__anchor { aspect-ratio: 4.5/2; } .recruit__anchor:hover .recruit__img { -webkit-filter: blur(10px) brightness(85%); filter: blur(10px) brightness(85%); } .recruit__img { -webkit-filter: blur(0px) brightness(70%); filter: blur(0px) brightness(70%); } .recruit__txt { padding-right: 120px; padding-left: 120px; } .recruit .btnWrap .btn .more__ico { width: 40px !important; height: 40px !important; } } /* contact --------------------------------------- */ .contact__telWrap { gap: 5px; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; } .contact__telWrap > * { margin: 0; } .contact__name { font-size: clamp(1rem, 0.8846153846rem + 0.5128205128vw, 1.5rem); font-weight: 500; } .contact__telNum { font-size: clamp(2.5rem, 2.2115384615rem + 1.2820512821vw, 3.75rem); line-height: 1; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; gap: 10px; letter-spacing: -0.02rem; margin-top: 5px; } .contact .tel__ico { width: 48px; height: 48px; display: inline-block; } .contact__supply { font-size: clamp(0.8125rem, 0.7980769231rem + 0.0641025641vw, 0.875rem); color: var(--color-txt-weak); letter-spacing: 0.02rem; } @media (min-width: 80em) { .contact .tel__ico { width: 56px; height: 56px; } } .slider { position: relative; height: 250px; } .slider .sliderWrap { position: absolute; left: 0; top: 0; width: 100%; height: 250px; overflow: hidden; z-index: 10; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; } .slider__list { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-animation: imgLoop 40s linear infinite 1s both; animation: imgLoop 40s linear infinite 1s both; list-style: none; margin-top: 0; } .slider__item { position: relative; margin-right: 10px; list-style: none; padding: 0; } .slider__item:before { content: none; } .slider__item.size--s { width: 250px; } .slider__item.size--m { width: 300px; } .slider__item.size--l { width: 350px; } .slider__item img { border-radius: var(--borderrad); } @media (min-width: 80em) { .slider { height: 490px; } .slider .sliderWrap { height: 490px; } .slider__list { -webkit-animation: imgLoop 80s linear infinite 1s both; animation: imgLoop 80s linear infinite 1s both; } .slider__item { margin-right: 20px; } .slider__item.size--s { width: 400px; } .slider__item.size--m { width: 550px; } .slider__item.size--l { width: 700px; } } @-webkit-keyframes imgLoop { 0% { -webkit-transform: translateX(0); transform: translateX(0); } 100% { -webkit-transform: translateX(-100%); transform: translateX(-100%); } } @keyframes imgLoop { 0% { -webkit-transform: translateX(0); transform: translateX(0); } 100% { -webkit-transform: translateX(-100%); transform: translateX(-100%); } } /* animation --------------------------------------- */ .chara--anmFloating { -webkit-animation: chara--anmFloating 5.5s ease-in-out infinite; animation: chara--anmFloating 5.5s ease-in-out infinite; } @-webkit-keyframes chara--anmFloating { 0% { -webkit-transform: translateY(0); transform: translateY(0); } 50% { -webkit-transform: translateY(-20px); transform: translateY(-20px); } 100% { -webkit-transform: translateY(0); transform: translateY(0); } } @keyframes chara--anmFloating { 0% { -webkit-transform: translateY(0); transform: translateY(0); } 50% { -webkit-transform: translateY(-20px); transform: translateY(-20px); } 100% { -webkit-transform: translateY(0); transform: translateY(0); } } .chara--anmStep4 { -webkit-animation: chara--anmStep4 5s cubic-bezier(1, 0, 0, 1) infinite forwards 3s; animation: chara--anmStep4 5s cubic-bezier(1, 0, 0, 1) infinite forwards 3s; } @-webkit-keyframes chara--anmStep4 { 0% { -webkit-transform: translate(0, 0) rotate(0); transform: translate(0, 0) rotate(0); } 5% { -webkit-transform: translate(0, -6px) rotate(-10deg); transform: translate(0, -6px) rotate(-10deg); } 10% { -webkit-transform: translate(0, 10px) rotate(0); transform: translate(0, 10px) rotate(0); } 15% { -webkit-transform: translate(0, -12px) rotate(12deg); transform: translate(0, -12px) rotate(12deg); } 20% { -webkit-transform: translate(0, 8px) rotate(0); transform: translate(0, 8px) rotate(0); } 25% { -webkit-transform: translate(0, 0) rotate(0); transform: translate(0, 0) rotate(0); } 100% { -webkit-transform: translate(0, 0) rotate(0); transform: translate(0, 0) rotate(0); } } @keyframes chara--anmStep4 { 0% { -webkit-transform: translate(0, 0) rotate(0); transform: translate(0, 0) rotate(0); } 5% { -webkit-transform: translate(0, -6px) rotate(-10deg); transform: translate(0, -6px) rotate(-10deg); } 10% { -webkit-transform: translate(0, 10px) rotate(0); transform: translate(0, 10px) rotate(0); } 15% { -webkit-transform: translate(0, -12px) rotate(12deg); transform: translate(0, -12px) rotate(12deg); } 20% { -webkit-transform: translate(0, 8px) rotate(0); transform: translate(0, 8px) rotate(0); } 25% { -webkit-transform: translate(0, 0) rotate(0); transform: translate(0, 0) rotate(0); } 100% { -webkit-transform: translate(0, 0) rotate(0); transform: translate(0, 0) rotate(0); } } .chara--anmStep3 { -webkit-animation: chara--anmStep3 8s cubic-bezier(1, 0, 0, 1) infinite forwards 2s; animation: chara--anmStep3 8s cubic-bezier(1, 0, 0, 1) infinite forwards 2s; } @-webkit-keyframes chara--anmStep3 { 0% { -webkit-transform: rotate(-8deg) translate3d(0, 0, 0); transform: rotate(-8deg) translate3d(0, 0, 0); } 5% { -webkit-transform: rotate(6deg) translate3d(0, 0, 0); transform: rotate(6deg) translate3d(0, 0, 0); } 10% { -webkit-transform: rotate(-5deg) translate3d(0, 0, 0); transform: rotate(-5deg) translate3d(0, 0, 0); } 15% { -webkit-transform: rotate(6deg) translate3d(0, 0, 0); transform: rotate(6deg) translate3d(0, 0, 0); } 20% { -webkit-transform: rotate(-12deg) translate3d(0, 0, 0); transform: rotate(-12deg) translate3d(0, 0, 0); } 25% { -webkit-transform: rotate(6deg) translate3d(0, 0, 0); transform: rotate(6deg) translate3d(0, 0, 0); } 30% { -webkit-transform: rotate(-5deg) translate3d(0, 0, 0); transform: rotate(-5deg) translate3d(0, 0, 0); } 35% { -webkit-transform: rotate(10deg) translate3d(0, 0, 0); transform: rotate(10deg) translate3d(0, 0, 0); } 40% { -webkit-transform: rotate(-8deg) translate3d(0, 0, 0); transform: rotate(-8deg) translate3d(0, 0, 0); } 100% { -webkit-transform: rotate(-8deg) translate3d(0, 0, 0); transform: rotate(-8deg) translate3d(0, 0, 0); } } @keyframes chara--anmStep3 { 0% { -webkit-transform: rotate(-8deg) translate3d(0, 0, 0); transform: rotate(-8deg) translate3d(0, 0, 0); } 5% { -webkit-transform: rotate(6deg) translate3d(0, 0, 0); transform: rotate(6deg) translate3d(0, 0, 0); } 10% { -webkit-transform: rotate(-5deg) translate3d(0, 0, 0); transform: rotate(-5deg) translate3d(0, 0, 0); } 15% { -webkit-transform: rotate(6deg) translate3d(0, 0, 0); transform: rotate(6deg) translate3d(0, 0, 0); } 20% { -webkit-transform: rotate(-12deg) translate3d(0, 0, 0); transform: rotate(-12deg) translate3d(0, 0, 0); } 25% { -webkit-transform: rotate(6deg) translate3d(0, 0, 0); transform: rotate(6deg) translate3d(0, 0, 0); } 30% { -webkit-transform: rotate(-5deg) translate3d(0, 0, 0); transform: rotate(-5deg) translate3d(0, 0, 0); } 35% { -webkit-transform: rotate(10deg) translate3d(0, 0, 0); transform: rotate(10deg) translate3d(0, 0, 0); } 40% { -webkit-transform: rotate(-8deg) translate3d(0, 0, 0); transform: rotate(-8deg) translate3d(0, 0, 0); } 100% { -webkit-transform: rotate(-8deg) translate3d(0, 0, 0); transform: rotate(-8deg) translate3d(0, 0, 0); } } .chara--anmShake { -webkit-animation: chara--anmShake 3s ease infinite; animation: chara--anmShake 3s ease infinite; } @-webkit-keyframes chara--anmShake { 0% { -webkit-transform: rotate(0) scale(1); transform: rotate(0) scale(1); } 6% { -webkit-transform: rotate(5deg) scale(1.05); transform: rotate(5deg) scale(1.05); } 12% { -webkit-transform: rotate(-5deg) scale(1.1); transform: rotate(-5deg) scale(1.1); } 18% { -webkit-transform: rotate(5deg) scale(1.15); transform: rotate(5deg) scale(1.15); } 24% { -webkit-transform: rotate(-5deg) scale(1.2); transform: rotate(-5deg) scale(1.2); } 30% { -webkit-transform: rotate(5deg) scale(1.15); transform: rotate(5deg) scale(1.15); } 36% { -webkit-transform: rotate(-5deg) scale(1.1); transform: rotate(-5deg) scale(1.1); } 42% { -webkit-transform: rotate(5deg) scale(1.05); transform: rotate(5deg) scale(1.05); } 48% { -webkit-transform: rotate(0) scale(1); transform: rotate(0) scale(1); } 100% { -webkit-transform: rotate(0) scale(1); transform: rotate(0) scale(1); } } @keyframes chara--anmShake { 0% { -webkit-transform: rotate(0) scale(1); transform: rotate(0) scale(1); } 6% { -webkit-transform: rotate(5deg) scale(1.05); transform: rotate(5deg) scale(1.05); } 12% { -webkit-transform: rotate(-5deg) scale(1.1); transform: rotate(-5deg) scale(1.1); } 18% { -webkit-transform: rotate(5deg) scale(1.15); transform: rotate(5deg) scale(1.15); } 24% { -webkit-transform: rotate(-5deg) scale(1.2); transform: rotate(-5deg) scale(1.2); } 30% { -webkit-transform: rotate(5deg) scale(1.15); transform: rotate(5deg) scale(1.15); } 36% { -webkit-transform: rotate(-5deg) scale(1.1); transform: rotate(-5deg) scale(1.1); } 42% { -webkit-transform: rotate(5deg) scale(1.05); transform: rotate(5deg) scale(1.05); } 48% { -webkit-transform: rotate(0) scale(1); transform: rotate(0) scale(1); } 100% { -webkit-transform: rotate(0) scale(1); transform: rotate(0) scale(1); } } @-webkit-keyframes animationTransform { 0% { -webkit-transform: scale(1.2) translateY(-30px); transform: scale(1.2) translateY(-30px); } 100% { -webkit-transform: scale(1) translateY(0); transform: scale(1) translateY(0); } } @keyframes animationTransform { 0% { -webkit-transform: scale(1.2) translateY(-30px); transform: scale(1.2) translateY(-30px); } 100% { -webkit-transform: scale(1) translateY(0); transform: scale(1) translateY(0); } } @-webkit-keyframes kvTxtFilter1 { 0%, 40% { -webkit-filter: brightness(1); filter: brightness(1); } 20%, 70% { -webkit-filter: brightness(1.4); filter: brightness(1.4); } 100% { -webkit-filter: brightness(1); filter: brightness(1); } } @keyframes kvTxtFilter1 { 0%, 40% { -webkit-filter: brightness(1); filter: brightness(1); } 20%, 70% { -webkit-filter: brightness(1.4); filter: brightness(1.4); } 100% { -webkit-filter: brightness(1); filter: brightness(1); } } @-webkit-keyframes kvTxtFilter2 { 0%, 60% { -webkit-filter: brightness(1); filter: brightness(1); } 40%, 90% { -webkit-filter: brightness(1.4); filter: brightness(1.4); } 100% { -webkit-filter: brightness(1); filter: brightness(1); } } @keyframes kvTxtFilter2 { 0%, 60% { -webkit-filter: brightness(1); filter: brightness(1); } 40%, 90% { -webkit-filter: brightness(1.4); filter: brightness(1.4); } 100% { -webkit-filter: brightness(1); filter: brightness(1); } } @-webkit-keyframes ftTxtFilter1 { 0% { -webkit-filter: brightness(1); filter: brightness(1); } 3% { -webkit-filter: brightness(1.4); filter: brightness(1.4); } 4% { -webkit-filter: brightness(1); filter: brightness(1); } 69% { -webkit-filter: brightness(1); filter: brightness(1); } 70% { -webkit-filter: brightness(1.4); filter: brightness(1.4); } 71% { -webkit-filter: brightness(1); filter: brightness(1); } 100% { -webkit-filter: brightness(1); filter: brightness(1); } } @keyframes ftTxtFilter1 { 0% { -webkit-filter: brightness(1); filter: brightness(1); } 3% { -webkit-filter: brightness(1.4); filter: brightness(1.4); } 4% { -webkit-filter: brightness(1); filter: brightness(1); } 69% { -webkit-filter: brightness(1); filter: brightness(1); } 70% { -webkit-filter: brightness(1.4); filter: brightness(1.4); } 71% { -webkit-filter: brightness(1); filter: brightness(1); } 100% { -webkit-filter: brightness(1); filter: brightness(1); } } @-webkit-keyframes ftTxtFilter2 { 0% { -webkit-filter: brightness(1); filter: brightness(1); } 55% { -webkit-filter: brightness(1); filter: brightness(1); } 56% { -webkit-filter: brightness(1.4); filter: brightness(1.4); } 58% { -webkit-filter: brightness(1); filter: brightness(1); } 89% { -webkit-filter: brightness(1); filter: brightness(1); } 90% { -webkit-filter: brightness(1.4); filter: brightness(1.4); } 92% { -webkit-filter: brightness(1); filter: brightness(1); } 100% { -webkit-filter: brightness(1); filter: brightness(1); } } @keyframes ftTxtFilter2 { 0% { -webkit-filter: brightness(1); filter: brightness(1); } 55% { -webkit-filter: brightness(1); filter: brightness(1); } 56% { -webkit-filter: brightness(1.4); filter: brightness(1.4); } 58% { -webkit-filter: brightness(1); filter: brightness(1); } 89% { -webkit-filter: brightness(1); filter: brightness(1); } 90% { -webkit-filter: brightness(1.4); filter: brightness(1.4); } 92% { -webkit-filter: brightness(1); filter: brightness(1); } 100% { -webkit-filter: brightness(1); filter: brightness(1); } } .pageHeaderTtlWrap { -webkit-filter: blur(24px); filter: blur(24px); -webkit-transform: translateY(60px); transform: translateY(60px); -webkit-transition: -webkit-filter 1.2s cubic-bezier(0.65, 0.2, 0.5, 1) 0.5s, -webkit-transform 1.8s cubic-bezier(0.65, 0.2, 0.5, 1) 0.15s !important; transition: -webkit-filter 1.2s cubic-bezier(0.65, 0.2, 0.5, 1) 0.5s, -webkit-transform 1.8s cubic-bezier(0.65, 0.2, 0.5, 1) 0.15s !important; transition: filter 1.2s cubic-bezier(0.65, 0.2, 0.5, 1) 0.5s, transform 1.8s cubic-bezier(0.65, 0.2, 0.5, 1) 0.15s !important; transition: filter 1.2s cubic-bezier(0.65, 0.2, 0.5, 1) 0.5s, transform 1.8s cubic-bezier(0.65, 0.2, 0.5, 1) 0.15s, -webkit-filter 1.2s cubic-bezier(0.65, 0.2, 0.5, 1) 0.5s, -webkit-transform 1.8s cubic-bezier(0.65, 0.2, 0.5, 1) 0.15s !important; } .pageHeaderTtlWrap .pageTtlAnimation .txtAnm { -webkit-transition: 1.4s cubic-bezier(0.65, 0.2, 0.5, 1) 0.2s; transition: 1.4s cubic-bezier(0.65, 0.2, 0.5, 1) 0.2s; } .pageHeaderTtlWrap .pageTtlAnimation .txtAnm:first-child { -webkit-transition-delay: 0.05s; transition-delay: 0.05s; -webkit-transform: translate(-80px, 100px) scale(1.4, 0.8) rotate(110deg); transform: translate(-80px, 100px) scale(1.4, 0.8) rotate(110deg); } .pageHeaderTtlWrap .pageTtlAnimation .txtAnm:nth-child(2) { -webkit-transition-delay: 0.1s; transition-delay: 0.1s; -webkit-transform: translate(-105px, -105px) scale(1.2, 1.4) rotate(60deg); transform: translate(-105px, -105px) scale(1.2, 1.4) rotate(60deg); } .pageHeaderTtlWrap .pageTtlAnimation .txtAnm:nth-child(3) { -webkit-transition-delay: 0.16s; transition-delay: 0.16s; -webkit-transform: translate(-90px, 100px) scale(0.6, 1.5) rotate(-80deg); transform: translate(-90px, 100px) scale(0.6, 1.5) rotate(-80deg); } .pageHeaderTtlWrap .pageTtlAnimation .txtAnm:nth-child(4) { -webkit-transition-delay: 0.22s; transition-delay: 0.22s; -webkit-transform: translate(-60px, -90px) scale(1.6, 0.7) rotate(25deg); transform: translate(-60px, -90px) scale(1.6, 0.7) rotate(25deg); } .pageHeaderTtlWrap .pageTtlAnimation .txtAnm:nth-child(5) { -webkit-transition-delay: 0.28s; transition-delay: 0.28s; -webkit-transform: translate(-60px, 70px) scale(0.8, 1.5) rotate(40deg); transform: translate(-60px, 70px) scale(0.8, 1.5) rotate(40deg); } .pageHeaderTtlWrap .pageTtlAnimation .txtAnm:nth-child(6) { -webkit-transition-delay: 0.34s; transition-delay: 0.34s; -webkit-transform: translate(-70px, -80px) scale(1.2, 0.6) rotate(-95deg); transform: translate(-70px, -80px) scale(1.2, 0.6) rotate(-95deg); } .pageHeaderTtlWrap .pageTtlAnimation .txtAnm:nth-child(7) { -webkit-transition-delay: 0.4s; transition-delay: 0.4s; -webkit-transform: translate(-80px, 70px) scale(0.6, 1.3) rotate(25deg); transform: translate(-80px, 70px) scale(0.6, 1.3) rotate(25deg); } .pageHeaderTtlWrap .pageTtlAnimation .txtAnm:nth-child(8) { -webkit-transition-delay: 0.46s; transition-delay: 0.46s; -webkit-transform: translate(-55px, -95px) scale(1.2, 0.8) rotate(-45deg); transform: translate(-55px, -95px) scale(1.2, 0.8) rotate(-45deg); } .pageHeaderTtlWrap .pageTtlAnimation .txtAnm:nth-child(9) { -webkit-transition-delay: 0.52s; transition-delay: 0.52s; -webkit-transform: translate(-60px, 60px) scale(0.9, 1.2) rotate(60deg); transform: translate(-60px, 60px) scale(0.9, 1.2) rotate(60deg); } .pageHeaderTtlWrap .pageTtlAnimation .txtAnm:nth-child(10) { -webkit-transition-delay: 0.58s; transition-delay: 0.58s; -webkit-transform: translate(-70px, -70px) scale(1.6, 0.7) rotate(30deg); transform: translate(-70px, -70px) scale(1.6, 0.7) rotate(30deg); } .pageHeaderTtlWrap .pageTtlAnimation .txtAnm:nth-child(11) { -webkit-transition-delay: 0.64s; transition-delay: 0.64s; -webkit-transform: translate(-65px, 70px) scale(0.4, 0.8) rotate(20deg); transform: translate(-65px, 70px) scale(0.4, 0.8) rotate(20deg); } .pageHeaderTtlWrap .pageTtlAnimation .txtAnm:nth-child(12) { -webkit-transition-delay: 0.7s; transition-delay: 0.7s; -webkit-transform: translate(-60px, -105px) scale(0.6, 1.3) rotate(25deg); transform: translate(-60px, -105px) scale(0.6, 1.3) rotate(25deg); } .txtAnimation { -webkit-filter: blur(32px); filter: blur(32px); } .-show .pageHeaderTtlWrap { -webkit-filter: blur(0); filter: blur(0); -webkit-transform: translateY(0); transform: translateY(0); } .-show .pageTtlAnimation .txtAnm { display: inline-block; -webkit-transform: translate(0px, 0px) scale(1, 1) rotate(0deg) !important; transform: translate(0px, 0px) scale(1, 1) rotate(0deg) !important; -webkit-animation-duration: 3s, 5s; animation-duration: 3s, 5s; -webkit-animation-timing-function: linear, cubic-bezier(0.65, 0.2, 0.5, 1); animation-timing-function: linear, cubic-bezier(0.65, 0.2, 0.5, 1); -webkit-animation-iteration-count: 1; animation-iteration-count: 1; -webkit-animation-fill-mode: both; animation-fill-mode: both; -webkit-animation-delay: 0s; animation-delay: 0s; } .-show .pageTtlAnimation .txtAnm:first-child { -webkit-animation-delay: 0.15s; animation-delay: 0.15s; } .-show .pageTtlAnimation .txtAnm:nth-child(2) { -webkit-animation-delay: 0.2s; animation-delay: 0.2s; } .-show .pageTtlAnimation .txtAnm:nth-child(3) { -webkit-animation-delay: 0.25s; animation-delay: 0.25s; } .-show .pageTtlAnimation .txtAnm:nth-child(4) { -webkit-animation-delay: 0.3s; animation-delay: 0.3s; } .-show .pageTtlAnimation .txtAnm:nth-child(5) { -webkit-animation-delay: 0.35s; animation-delay: 0.35s; } .-show .pageTtlAnimation .txtAnm:nth-child(6) { -webkit-animation-delay: 0.4s; animation-delay: 0.4s; } .-show .pageTtlAnimation .txtAnm:nth-child(7) { -webkit-animation-delay: 0.45s; animation-delay: 0.45s; } .-show .pageTtlAnimation .txtAnm:nth-child(8) { -webkit-animation-delay: 0.5s; animation-delay: 0.5s; } .-show .pageTtlAnimation .txtAnm:nth-child(9) { -webkit-animation-delay: 0.55s; animation-delay: 0.55s; } .-show .pageTtlAnimation .txtAnm:nth-child(10) { -webkit-animation-delay: 0.6s; animation-delay: 0.6s; } .-show .pageTtlAnimation .txtAnm:nth-child(11) { -webkit-animation-delay: 0.65s; animation-delay: 0.65s; } .-show .pageTtlAnimation .txtAnm:nth-child(12) { -webkit-animation-delay: 0.7s; animation-delay: 0.7s; } .-show .pageSubTtlAnimation { -webkit-animation-duration: 3s; animation-duration: 3s; -webkit-animation-timing-function: linear; animation-timing-function: linear; -webkit-animation-iteration-count: 1; animation-iteration-count: 1; -webkit-animation-fill-mode: both; animation-fill-mode: both; -webkit-animation-delay: 0s; animation-delay: 0s; } .-show .txtAnimation { -webkit-transition: -webkit-filter 1s ease; transition: -webkit-filter 1s ease; transition: filter 1s ease; transition: filter 1s ease, -webkit-filter 1s ease; -webkit-filter: blur(0); filter: blur(0); -webkit-animation-duration: 1.8s; animation-duration: 1.8s; -webkit-animation-timing-function: linear; animation-timing-function: linear; -webkit-animation-iteration-count: 1; animation-iteration-count: 1; -webkit-animation-fill-mode: both; animation-fill-mode: both; -webkit-animation-delay: 0.3s; animation-delay: 0.3s; } .-show .txtAnimation.pt1-1 { -webkit-animation-name: animationColor1-1; animation-name: animationColor1-1; } .-show .txtAnimation.pt1-2 { -webkit-animation-name: animationColor1-2; animation-name: animationColor1-2; } .-show .txtAnimation.pt2 { -webkit-animation-name: animationColor6; animation-name: animationColor6; } .-show .txtAnimation.pt3 { -webkit-animation-name: animationColor4; animation-name: animationColor4; } @-webkit-keyframes animationOpacity { 0% { opacity: 0; } 100% { opacity: 1; } } @keyframes animationOpacity { 0% { opacity: 0; } 100% { opacity: 1; } } @-webkit-keyframes animationColor1-1 { 0% { color: rgba(0, 0, 0, 0.3); fill: rgba(0, 0, 0, 0.3); } 20% { color: var(--color-nankan); fill: var(--color-nankan); } 40% { color: var(--color-port); fill: var(--color-port); } 60% { color: var(--color-kikusui); fill: var(--color-kikusui); } 80% { color: var(--color-jack); fill: var(--color-jack); } 100% { color: var(--color-primary); fill: var(--color-primary); } } @keyframes animationColor1-1 { 0% { color: rgba(0, 0, 0, 0.3); fill: rgba(0, 0, 0, 0.3); } 20% { color: var(--color-nankan); fill: var(--color-nankan); } 40% { color: var(--color-port); fill: var(--color-port); } 60% { color: var(--color-kikusui); fill: var(--color-kikusui); } 80% { color: var(--color-jack); fill: var(--color-jack); } 100% { color: var(--color-primary); fill: var(--color-primary); } } @-webkit-keyframes animationColor1-2 { 0% { color: rgba(0, 0, 0, 0.3); fill: rgba(0, 0, 0, 0.3); } 20% { color: var(--color-doctor); fill: var(--color-doctor); } 40% { color: var(--color-nagasu); fill: var(--color-nagasu); } 60% { color: var(--color-jack); fill: var(--color-jack); } 80% { color: var(--color-nankan); fill: var(--color-nankan); } 100% { color: var(--color-primary); fill: var(--color-primary); } } @keyframes animationColor1-2 { 0% { color: rgba(0, 0, 0, 0.3); fill: rgba(0, 0, 0, 0.3); } 20% { color: var(--color-doctor); fill: var(--color-doctor); } 40% { color: var(--color-nagasu); fill: var(--color-nagasu); } 60% { color: var(--color-jack); fill: var(--color-jack); } 80% { color: var(--color-nankan); fill: var(--color-nankan); } 100% { color: var(--color-primary); fill: var(--color-primary); } } @-webkit-keyframes animationColor2 { 0% { color: rgba(0, 0, 0, 0.3); fill: rgba(0, 0, 0, 0.3); } 20% { color: var(--color-toncho); fill: var(--color-toncho); } 40% { color: var(--color-nagasu); fill: var(--color-nagasu); } 60% { color: var(--color-jack); fill: var(--color-jack); } 80% { color: var(--color-neos); fill: var(--color-neos); } 100% { color: var(--color-secondary); fill: var(--color-secondary); } } @keyframes animationColor2 { 0% { color: rgba(0, 0, 0, 0.3); fill: rgba(0, 0, 0, 0.3); } 20% { color: var(--color-toncho); fill: var(--color-toncho); } 40% { color: var(--color-nagasu); fill: var(--color-nagasu); } 60% { color: var(--color-jack); fill: var(--color-jack); } 80% { color: var(--color-neos); fill: var(--color-neos); } 100% { color: var(--color-secondary); fill: var(--color-secondary); } } @-webkit-keyframes animationColor3 { 0% { color: rgba(0, 0, 0, 0.3); fill: rgba(0, 0, 0, 0.3); } 20% { color: var(--color-nankan); fill: var(--color-nankan); } 40% { color: var(--color-port); fill: var(--color-port); } 60% { color: var(--color-neos); fill: var(--color-neos); } 80% { color: var(--color-kikusui); fill: var(--color-kikusui); } 100% { color: var(--color-secondary); fill: var(--color-secondary); } } @keyframes animationColor3 { 0% { color: rgba(0, 0, 0, 0.3); fill: rgba(0, 0, 0, 0.3); } 20% { color: var(--color-nankan); fill: var(--color-nankan); } 40% { color: var(--color-port); fill: var(--color-port); } 60% { color: var(--color-neos); fill: var(--color-neos); } 80% { color: var(--color-kikusui); fill: var(--color-kikusui); } 100% { color: var(--color-secondary); fill: var(--color-secondary); } } @-webkit-keyframes animationColor4 { 0% { color: rgba(0, 0, 0, 0.3); fill: rgba(0, 0, 0, 0.3); } 20% { color: var(--color-kikusui); fill: var(--color-kikusui); } 40% { color: var(--color-primary); fill: var(--color-primary); } 60% { color: var(--color-nankan); fill: var(--color-nankan); } 80% { color: var(--color-nagasu); fill: var(--color-nagasu); } 100% { color: var(--color-secondary); fill: var(--color-secondary); } } @keyframes animationColor4 { 0% { color: rgba(0, 0, 0, 0.3); fill: rgba(0, 0, 0, 0.3); } 20% { color: var(--color-kikusui); fill: var(--color-kikusui); } 40% { color: var(--color-primary); fill: var(--color-primary); } 60% { color: var(--color-nankan); fill: var(--color-nankan); } 80% { color: var(--color-nagasu); fill: var(--color-nagasu); } 100% { color: var(--color-secondary); fill: var(--color-secondary); } } @-webkit-keyframes animationColor5 { 0% { color: rgba(0, 0, 0, 0.3); fill: rgba(0, 0, 0, 0.3); } 20% { color: var(--color-doctor); fill: var(--color-doctor); } 40% { color: var(--color-primary); fill: var(--color-primary); } 60% { color: var(--color-kikusui); fill: var(--color-kikusui); } 80% { color: var(--color-doctor); fill: var(--color-doctor); } 100% { color: var(--color-secondary); fill: var(--color-secondary); } } @keyframes animationColor5 { 0% { color: rgba(0, 0, 0, 0.3); fill: rgba(0, 0, 0, 0.3); } 20% { color: var(--color-doctor); fill: var(--color-doctor); } 40% { color: var(--color-primary); fill: var(--color-primary); } 60% { color: var(--color-kikusui); fill: var(--color-kikusui); } 80% { color: var(--color-doctor); fill: var(--color-doctor); } 100% { color: var(--color-secondary); fill: var(--color-secondary); } } @-webkit-keyframes animationColor6 { 0% { color: rgba(0, 0, 0, 0.3); fill: rgba(0, 0, 0, 0.3); } 20% { color: var(--color-jack); fill: var(--color-jack); } 40% { color: var(--color-port); fill: var(--color-port); } 60% { color: var(--color-nagasu); fill: var(--color-nagasu); } 80% { color: var(--color-parma); fill: var(--color-parma); } 100% { color: var(--color-secondary); fill: var(--color-secondary); } } @keyframes animationColor6 { 0% { color: rgba(0, 0, 0, 0.3); fill: rgba(0, 0, 0, 0.3); } 20% { color: var(--color-jack); fill: var(--color-jack); } 40% { color: var(--color-port); fill: var(--color-port); } 60% { color: var(--color-nagasu); fill: var(--color-nagasu); } 80% { color: var(--color-parma); fill: var(--color-parma); } 100% { color: var(--color-secondary); fill: var(--color-secondary); } } @-webkit-keyframes animationColor7 { 0% { color: rgba(0, 0, 0, 0.3); fill: rgba(0, 0, 0, 0.3); } 20% { color: var(--color-toncho); fill: var(--color-toncho); } 40% { color: var(--color-port); fill: var(--color-port); } 60% { color: var(--color-jack); fill: var(--color-jack); } 80% { color: var(--color-port); fill: var(--color-port); } 100% { color: var(--color-secondary); fill: var(--color-secondary); } } @keyframes animationColor7 { 0% { color: rgba(0, 0, 0, 0.3); fill: rgba(0, 0, 0, 0.3); } 20% { color: var(--color-toncho); fill: var(--color-toncho); } 40% { color: var(--color-port); fill: var(--color-port); } 60% { color: var(--color-jack); fill: var(--color-jack); } 80% { color: var(--color-port); fill: var(--color-port); } 100% { color: var(--color-secondary); fill: var(--color-secondary); } } @-webkit-keyframes animationColor8 { 0% { color: rgba(0, 0, 0, 0.3); fill: rgba(0, 0, 0, 0.3); } 20% { color: var(--color-nagasu); fill: var(--color-nagasu); } 40% { color: var(--color-toncho); fill: var(--color-toncho); } 60% { color: var(--color-doctor); fill: var(--color-doctor); } 80% { color: var(--color-nankan); fill: var(--color-nankan); } 100% { color: var(--color-secondary); fill: var(--color-secondary); } } @keyframes animationColor8 { 0% { color: rgba(0, 0, 0, 0.3); fill: rgba(0, 0, 0, 0.3); } 20% { color: var(--color-nagasu); fill: var(--color-nagasu); } 40% { color: var(--color-toncho); fill: var(--color-toncho); } 60% { color: var(--color-doctor); fill: var(--color-doctor); } 80% { color: var(--color-nankan); fill: var(--color-nankan); } 100% { color: var(--color-secondary); fill: var(--color-secondary); } } @-webkit-keyframes animationColorYellow1 { 0% { color: rgba(0, 0, 0, 0.3); fill: rgba(0, 0, 0, 0.3); } 20% { color: var(--color-primary); fill: var(--color-primary); } 60% { color: var(--color-secondary); fill: var(--color-secondary); } 100% { color: var(--color-primary); fill: var(--color-primary); } } @keyframes animationColorYellow1 { 0% { color: rgba(0, 0, 0, 0.3); fill: rgba(0, 0, 0, 0.3); } 20% { color: var(--color-primary); fill: var(--color-primary); } 60% { color: var(--color-secondary); fill: var(--color-secondary); } 100% { color: var(--color-primary); fill: var(--color-primary); } } @-webkit-keyframes animationColorYellow2 { 0% { color: rgba(0, 0, 0, 0.3); fill: rgba(0, 0, 0, 0.3); } 20% { color: var(--color-secondary); fill: var(--color-secondary); } 60% { color: var(--color-jack); fill: var(--color-jack); } 100% { color: var(--color-primary); fill: var(--color-primary); } } @keyframes animationColorYellow2 { 0% { color: rgba(0, 0, 0, 0.3); fill: rgba(0, 0, 0, 0.3); } 20% { color: var(--color-secondary); fill: var(--color-secondary); } 60% { color: var(--color-jack); fill: var(--color-jack); } 100% { color: var(--color-primary); fill: var(--color-primary); } } @-webkit-keyframes animationColorBrown1 { 0% { color: rgba(0, 0, 0, 0.3); fill: rgba(0, 0, 0, 0.3); } 20% { color: var(--color-jack); fill: var(--color-jack); } 60% { color: var(--color-primary); fill: var(--color-primary); } 100% { color: var(--color-secondary); fill: var(--color-secondary); } } @keyframes animationColorBrown1 { 0% { color: rgba(0, 0, 0, 0.3); fill: rgba(0, 0, 0, 0.3); } 20% { color: var(--color-jack); fill: var(--color-jack); } 60% { color: var(--color-primary); fill: var(--color-primary); } 100% { color: var(--color-secondary); fill: var(--color-secondary); } } @-webkit-keyframes animationColorBrown2 { 0% { color: rgba(0, 0, 0, 0.3); fill: rgba(0, 0, 0, 0.3); } 20% { color: var(--color-primary); fill: var(--color-primary); } 60% { color: var(--color-jack); fill: var(--color-jack); } 100% { color: var(--color-secondary); fill: var(--color-secondary); } } @keyframes animationColorBrown2 { 0% { color: rgba(0, 0, 0, 0.3); fill: rgba(0, 0, 0, 0.3); } 20% { color: var(--color-primary); fill: var(--color-primary); } 60% { color: var(--color-jack); fill: var(--color-jack); } 100% { color: var(--color-secondary); fill: var(--color-secondary); } } .about .-show .pageTtlAnimation .txtAnm { -webkit-animation-name: pageTtlAnimation-neos, kvTxtFilter1; animation-name: pageTtlAnimation-neos, kvTxtFilter1; } @-webkit-keyframes pageTtlAnimation-neos { 0% { color: rgba(0, 0, 0, 0.3); fill: rgba(0, 0, 0, 0.3); } 20% { color: var(--color-primary); fill: var(--color-primary); } 40% { color: var(--color-jack); fill: var(--color-jack); } 60% { color: var(--color-neos); fill: var(--color-neos); } 100% { color: var(--color-main); fill: var(--color-main); } } @keyframes pageTtlAnimation-neos { 0% { color: rgba(0, 0, 0, 0.3); fill: rgba(0, 0, 0, 0.3); } 20% { color: var(--color-primary); fill: var(--color-primary); } 40% { color: var(--color-jack); fill: var(--color-jack); } 60% { color: var(--color-neos); fill: var(--color-neos); } 100% { color: var(--color-main); fill: var(--color-main); } } .introduction .-show .pageTtlAnimation .txtAnm { -webkit-animation-name: pageTtlAnimation-port, kvTxtFilter1; animation-name: pageTtlAnimation-port, kvTxtFilter1; } .introduction.nagasu .-show .pageTtlAnimation .txtAnm { -webkit-animation-name: pageTtlAnimation-nagasu, kvTxtFilter1; animation-name: pageTtlAnimation-nagasu, kvTxtFilter1; } .introduction.nankan .-show .pageTtlAnimation .txtAnm { -webkit-animation-name: pageTtlAnimation-nankan, kvTxtFilter1; animation-name: pageTtlAnimation-nankan, kvTxtFilter1; } .introduction.kikusui .-show .pageTtlAnimation .txtAnm { -webkit-animation-name: pageTtlAnimation-kikusui, kvTxtFilter1; animation-name: pageTtlAnimation-kikusui, kvTxtFilter1; } @-webkit-keyframes pageTtlAnimation-port { 0% { color: rgba(0, 0, 0, 0.3); fill: rgba(0, 0, 0, 0.3); } 10% { color: var(--color-jack); fill: var(--color-jack); } 20% { color: var(--color-primary); fill: var(--color-primary); } 60% { color: var(--color-port); fill: var(--color-port); } 100% { color: var(--color-main); fill: var(--color-main); } } @keyframes pageTtlAnimation-port { 0% { color: rgba(0, 0, 0, 0.3); fill: rgba(0, 0, 0, 0.3); } 10% { color: var(--color-jack); fill: var(--color-jack); } 20% { color: var(--color-primary); fill: var(--color-primary); } 60% { color: var(--color-port); fill: var(--color-port); } 100% { color: var(--color-main); fill: var(--color-main); } } @-webkit-keyframes pageTtlAnimation-nagasu { 0% { color: rgba(0, 0, 0, 0.3); fill: rgba(0, 0, 0, 0.3); } 10% { color: var(--color-primary); fill: var(--color-primary); } 20% { color: var(--color-port); fill: var(--color-port); } 60% { color: var(--color-nagasu); fill: var(--color-nagasu); } 100% { color: var(--color-main); fill: var(--color-main); } } @keyframes pageTtlAnimation-nagasu { 0% { color: rgba(0, 0, 0, 0.3); fill: rgba(0, 0, 0, 0.3); } 10% { color: var(--color-primary); fill: var(--color-primary); } 20% { color: var(--color-port); fill: var(--color-port); } 60% { color: var(--color-nagasu); fill: var(--color-nagasu); } 100% { color: var(--color-main); fill: var(--color-main); } } @-webkit-keyframes pageTtlAnimation-nankan { 0% { color: rgba(0, 0, 0, 0.3); fill: rgba(0, 0, 0, 0.3); } 10% { color: var(--color-primary); fill: var(--color-primary); } 20% { color: var(--color-port); fill: var(--color-port); } 60% { color: var(--color-nankan); fill: var(--color-nankan); } 100% { color: var(--color-main); fill: var(--color-main); } } @keyframes pageTtlAnimation-nankan { 0% { color: rgba(0, 0, 0, 0.3); fill: rgba(0, 0, 0, 0.3); } 10% { color: var(--color-primary); fill: var(--color-primary); } 20% { color: var(--color-port); fill: var(--color-port); } 60% { color: var(--color-nankan); fill: var(--color-nankan); } 100% { color: var(--color-main); fill: var(--color-main); } } @-webkit-keyframes pageTtlAnimation-kikusui { 0% { color: rgba(0, 0, 0, 0.3); fill: rgba(0, 0, 0, 0.3); } 10% { color: var(--color-primary); fill: var(--color-primary); } 20% { color: var(--color-port); fill: var(--color-port); } 60% { color: var(--color-kikusui); fill: var(--color-kikusui); } 100% { color: var(--color-main); fill: var(--color-main); } } @keyframes pageTtlAnimation-kikusui { 0% { color: rgba(0, 0, 0, 0.3); fill: rgba(0, 0, 0, 0.3); } 10% { color: var(--color-primary); fill: var(--color-primary); } 20% { color: var(--color-port); fill: var(--color-port); } 60% { color: var(--color-kikusui); fill: var(--color-kikusui); } 100% { color: var(--color-main); fill: var(--color-main); } } .education .-show .pageTtlAnimation .txtAnm { -webkit-animation-name: pageTtlAnimation-doctor, kvTxtFilter1; animation-name: pageTtlAnimation-doctor, kvTxtFilter1; } @-webkit-keyframes pageTtlAnimation-doctor { 0% { color: rgba(0, 0, 0, 0.3); fill: rgba(0, 0, 0, 0.3); } 10% { color: var(--color-jack); fill: var(--color-jack); } 20% { color: var(--color-primary); fill: var(--color-primary); } 60% { color: var(--color-doctor); fill: var(--color-doctor); } 100% { color: var(--color-main); fill: var(--color-main); } } @keyframes pageTtlAnimation-doctor { 0% { color: rgba(0, 0, 0, 0.3); fill: rgba(0, 0, 0, 0.3); } 10% { color: var(--color-jack); fill: var(--color-jack); } 20% { color: var(--color-primary); fill: var(--color-primary); } 60% { color: var(--color-doctor); fill: var(--color-doctor); } 100% { color: var(--color-main); fill: var(--color-main); } } .blog .-show .pageTtlAnimation .txtAnm { -webkit-animation-name: pageTtlAnimation-toncho, kvTxtFilter1; animation-name: pageTtlAnimation-toncho, kvTxtFilter1; } .blog .-show .pageSubTtlAnimation { -webkit-animation-name: pageTtlAnimation-tonchoSub; animation-name: pageTtlAnimation-tonchoSub; } @-webkit-keyframes pageTtlAnimation-toncho { 0% { color: rgba(0, 0, 0, 0.3); fill: rgba(0, 0, 0, 0.3); } 10% { color: var(--color-jack); fill: var(--color-jack); } 20% { color: var(--color-primary); fill: var(--color-primary); } 60% { color: var(--color-toncho); fill: var(--color-toncho); } 100% { color: var(--color-main); fill: var(--color-main); } } @keyframes pageTtlAnimation-toncho { 0% { color: rgba(0, 0, 0, 0.3); fill: rgba(0, 0, 0, 0.3); } 10% { color: var(--color-jack); fill: var(--color-jack); } 20% { color: var(--color-primary); fill: var(--color-primary); } 60% { color: var(--color-toncho); fill: var(--color-toncho); } 100% { color: var(--color-main); fill: var(--color-main); } } @-webkit-keyframes pageTtlAnimation-tonchoSub { 0% { color: rgba(0, 0, 0, 0.3); fill: rgba(0, 0, 0, 0.3); } 10% { color: var(--color-primary); fill: var(--color-primary); } 20% { color: var(--color-toncho); fill: var(--color-toncho); } 60% { color: var(--color-primary); fill: var(--color-primary); } 100% { color: var(--color-main); fill: var(--color-main); } } @keyframes pageTtlAnimation-tonchoSub { 0% { color: rgba(0, 0, 0, 0.3); fill: rgba(0, 0, 0, 0.3); } 10% { color: var(--color-primary); fill: var(--color-primary); } 20% { color: var(--color-toncho); fill: var(--color-toncho); } 60% { color: var(--color-primary); fill: var(--color-primary); } 100% { color: var(--color-main); fill: var(--color-main); } } .training .-show .pageTtlAnimation .txtAnm { -webkit-animation-name: pageTtlAnimation-parma, kvTxtFilter1; animation-name: pageTtlAnimation-parma, kvTxtFilter1; } @-webkit-keyframes pageTtlAnimation-parma { 0% { color: rgba(0, 0, 0, 0.3); fill: rgba(0, 0, 0, 0.3); } 10% { color: var(--color-jack); fill: var(--color-jack); } 20% { color: var(--color-primary); fill: var(--color-primary); } 60% { color: var(--color-parma); fill: var(--color-parma); } 100% { color: var(--color-main); fill: var(--color-main); } } @keyframes pageTtlAnimation-parma { 0% { color: rgba(0, 0, 0, 0.3); fill: rgba(0, 0, 0, 0.3); } 10% { color: var(--color-jack); fill: var(--color-jack); } 20% { color: var(--color-primary); fill: var(--color-primary); } 60% { color: var(--color-parma); fill: var(--color-parma); } 100% { color: var(--color-main); fill: var(--color-main); } }