@charset "UTF-8";
@font-face { font-family: "KiwiMaru"; src: url("/static/fonts/KiwiMaru-Medium_subset.42d8330cc942.woff2") format("woff2"); font-weight: 500; font-style: normal; }

:root { --font: KiwiMaru, "Kiwi Maru", "Yu Gothic", "Hiragino Sans", "Noto Sans CJK JP", system-ui,
        sans-serif; --font-icon: "Material Symbols Rounded"; --weight-light: 500; --weight-normal: 500; --weight-bold: 500; --line-height: 2; --color-white: white; --color-background: var(--color-white); --color-black: hsl(0, 0%, 12%); --color-muted: hsl(0, 0%, 39%); --color-faint: hsl(0, 0%, 66%); --color-thin: hsl(35, 15%, 90%); --color-primary: hsl(124, 16%, 50%); --color-primary-alt: hsl(120, 38%, 94%); --color-red: hsl(14, 91%, 65%); --color-red-alt: hsl(10, 91%, 92%); --color-important: hsl(44, 94%, 40%); --color-important-alt: hsl(44, 94%, 94%); --color-safe: hsl(236, 100%, 76%); --color-safe-alt: hsl(236, 100%, 96%); --color-link: blue; --color-link-alt: hsl(240, 100%, 95%); --color-link-hover: var(--color-primary); --border-style: solid; --border-width: 1px; --border-strong: 2px; --border-color: var(--color-black); --border-alt-style: dashed; --border-alt-width: var(--border-width); --border: var(--border-color) var(--border-style) var(--border-width); --divider-style: solid; --divider-width: var(--border-width); --divider-color: var(--color-thin); --divider: var(--divider-color) var(--divider-style) var(--divider-width); --divider-strong: var(--divider-color) var(--border-alt-style) var(--border-strong); --radius-xs: 2px; --radius-s: 4px; --radius-m: 8px; --radius-l: 20px; --font-xs: 0.85rem; --font-s: 0.9rem; --font-m: 1rem; --font-l: 1.2rem; --font-xl: 2rem; --font-2xl: 2.5rem; }

:root { --size-4-1: 0.25rem; --size-4-2: 0.5rem; --size-4-3: 0.75rem; --size-4-4: 1rem; --size-4-5: 1.25rem; --size-4-6: 1.5rem; --size-4-7: 1.75rem; --size-4-8: 2rem; --size-4-9: 2.25rem; --size-4-10: 2.5rem; --size-4-11: 2.75rem; --size-4-12: 3rem; --size-4-13: 3.25rem; --size-4-14: 3.5rem; --size-4-15: 3.75rem; --size-4-16: 4rem; --size-4-17: 4.25rem; --size-4-18: 4.5rem; --size-4-19: 4.75rem; --size-4-20: 5rem; --size-4-21: 5.25rem; --size-4-22: 5.5rem; --size-4-23: 5.75rem; --size-4-24: 6rem; --size-4-25: 6.25rem; --size-4-26: 6.5rem; --size-4-27: 6.75rem; --size-4-28: 7rem; --size-4-29: 7.25rem; --size-4-30: 7.5rem; --size-4-31: 7.75rem; --size-4-32: 8rem; }

html { font-size: 18px; scroll-padding: 50px; scroll-behavior: smooth; }

body { letter-spacing: 0.05em; line-height: var(--line-height); font-family: var(--font); -webkit-font-smoothing: antialiased; color: var(--color-black); font-weight: var(--weight-normal); text-underline-offset: 0.2em; background-image: url("/static/image/bg.4c6528303528.png"); background-size: 200px auto; background-position: 0 0; background-repeat: repeat; background-color: var(--color-background); }

.i-after-mid-xl::after, .i-after-mid-xl:hover::after, .i-after-mid-l::after, .i-after-mid-l:hover::after, .i-after-mid-0::after, .i-after-mid-0:hover::after, .i-after-mid::after, .i-after-mid:hover::after, .i-after-bottom-xl::after, .i-after-bottom-l::after, .i-after-bottom-0::after, .i-after-bottom::after, .i-after-top-xl::after, .i-after-top-l::after, .banner::after, .card-link::after, .i-after-top-0::after, .i-after-top::after, .i-before-mid-xl::before, .i-before-mid-xl:hover::before, .i-before-mid-l::before, .i-before-mid-l:hover::before, .i-before-mid-0::before, .i-before-mid-0:hover::before, .i-before-mid::before, .i-before-mid:hover::before, .i-before-bottom-xl::before, .i-before-bottom-l::before, .i-before-bottom-0::before, .i-before-bottom::before, .i-before-top-xl::before, .i-before-top-l::before, .i-before-top-0::before, .i-before-top::before { line-height: 1; display: inline-block; position: absolute; }

:root { --icon-music: "music_note"; --icon-right: "line_end_arrow"; --icon-right-up: "arrow_outward"; --icon-outlink: "arrow_outward"; --icon-down: "stat_minus_2"; --icon-news: "newsmode"; --icon-updated-at: "update"; --icon-created-at: "add_ad"; --icon-hash: "tag"; --icon-tuning: "airwave"; --icon-repair: "tools_pliers_wire_stripper"; --icon-transport: "deployed_code"; --icon-purchase: "sell"; --icon-silent: "bedtime"; --icon-avant: "serif"; --icon-auto: "toll"; --icon-caution: "priority_high"; --icon-info: "info_i"; }

.icon-before-music, [icon-before="music"] { position: relative; --icon-before-color: var(--color-primary); --icon-before-size: var(--font-m); --icon-before-content: var(--icon-music); }

.icon-before-music::before, [icon-before="music"]::before { content: var(--icon-before-content); font-family: var(--font-icon); color: var(--icon-before-color); font-size: var(--icon-before-size); display: block; }

.icon-before-music:hover::before, [icon-before="music"]:hover::before { content: var(--icon-music); }

.icon-before-right, [icon-before="right"] { position: relative; --icon-before-color: var(--color-primary); --icon-before-size: var(--font-m); --icon-before-content: var(--icon-right); }

.icon-before-right::before, [icon-before="right"]::before { content: var(--icon-before-content); font-family: var(--font-icon); color: var(--icon-before-color); font-size: var(--icon-before-size); display: block; }

.icon-before-right:hover::before, [icon-before="right"]:hover::before { content: var(--icon-music); }

.icon-before-right-up, [icon-before="right-up"] { position: relative; --icon-before-color: var(--color-primary); --icon-before-size: var(--font-m); --icon-before-content: var(--icon-right-up); }

.icon-before-right-up::before, [icon-before="right-up"]::before { content: var(--icon-before-content); font-family: var(--font-icon); color: var(--icon-before-color); font-size: var(--icon-before-size); display: block; }

.icon-before-right-up:hover::before, [icon-before="right-up"]:hover::before { content: var(--icon-music); }

.icon-before-outlink, [icon-before="outlink"] { position: relative; --icon-before-color: var(--color-primary); --icon-before-size: var(--font-m); --icon-before-content: var(--icon-outlink); }

.icon-before-outlink::before, [icon-before="outlink"]::before { content: var(--icon-before-content); font-family: var(--font-icon); color: var(--icon-before-color); font-size: var(--icon-before-size); display: block; }

.icon-before-outlink:hover::before, [icon-before="outlink"]:hover::before { content: var(--icon-music); }

.icon-before-down, [icon-before="down"] { position: relative; --icon-before-color: var(--color-primary); --icon-before-size: var(--font-m); --icon-before-content: var(--icon-down); }

.icon-before-down::before, [icon-before="down"]::before { content: var(--icon-before-content); font-family: var(--font-icon); color: var(--icon-before-color); font-size: var(--icon-before-size); display: block; }

.icon-before-down:hover::before, [icon-before="down"]:hover::before { content: var(--icon-music); }

.icon-before-news, [icon-before="news"] { position: relative; --icon-before-color: var(--color-primary); --icon-before-size: var(--font-m); --icon-before-content: var(--icon-news); }

.icon-before-news::before, [icon-before="news"]::before { content: var(--icon-before-content); font-family: var(--font-icon); color: var(--icon-before-color); font-size: var(--icon-before-size); display: block; }

.icon-before-news:hover::before, [icon-before="news"]:hover::before { content: var(--icon-music); }

.icon-before-updated-at, [icon-before="updated-at"] { position: relative; --icon-before-color: var(--color-primary); --icon-before-size: var(--font-m); --icon-before-content: var(--icon-updated-at); }

.icon-before-updated-at::before, [icon-before="updated-at"]::before { content: var(--icon-before-content); font-family: var(--font-icon); color: var(--icon-before-color); font-size: var(--icon-before-size); display: block; }

.icon-before-updated-at:hover::before, [icon-before="updated-at"]:hover::before { content: var(--icon-music); }

.icon-before-created-at, [icon-before="created-at"] { position: relative; --icon-before-color: var(--color-primary); --icon-before-size: var(--font-m); --icon-before-content: var(--icon-created-at); }

.icon-before-created-at::before, [icon-before="created-at"]::before { content: var(--icon-before-content); font-family: var(--font-icon); color: var(--icon-before-color); font-size: var(--icon-before-size); display: block; }

.icon-before-created-at:hover::before, [icon-before="created-at"]:hover::before { content: var(--icon-music); }

.icon-before-hash, [icon-before="hash"] { position: relative; --icon-before-color: var(--color-primary); --icon-before-size: var(--font-m); --icon-before-content: var(--icon-hash); }

.icon-before-hash::before, [icon-before="hash"]::before { content: var(--icon-before-content); font-family: var(--font-icon); color: var(--icon-before-color); font-size: var(--icon-before-size); display: block; }

.icon-before-hash:hover::before, [icon-before="hash"]:hover::before { content: var(--icon-music); }

.icon-before-tuning, [icon-before="tuning"] { position: relative; --icon-before-color: var(--color-primary); --icon-before-size: var(--font-m); --icon-before-content: var(--icon-tuning); }

.icon-before-tuning::before, [icon-before="tuning"]::before { content: var(--icon-before-content); font-family: var(--font-icon); color: var(--icon-before-color); font-size: var(--icon-before-size); display: block; }

.icon-before-tuning:hover::before, [icon-before="tuning"]:hover::before { content: var(--icon-music); }

.icon-before-repair, [icon-before="repair"] { position: relative; --icon-before-color: var(--color-primary); --icon-before-size: var(--font-m); --icon-before-content: var(--icon-repair); }

.icon-before-repair::before, [icon-before="repair"]::before { content: var(--icon-before-content); font-family: var(--font-icon); color: var(--icon-before-color); font-size: var(--icon-before-size); display: block; }

.icon-before-repair:hover::before, [icon-before="repair"]:hover::before { content: var(--icon-music); }

.icon-before-transport, [icon-before="transport"] { position: relative; --icon-before-color: var(--color-primary); --icon-before-size: var(--font-m); --icon-before-content: var(--icon-transport); }

.icon-before-transport::before, [icon-before="transport"]::before { content: var(--icon-before-content); font-family: var(--font-icon); color: var(--icon-before-color); font-size: var(--icon-before-size); display: block; }

.icon-before-transport:hover::before, [icon-before="transport"]:hover::before { content: var(--icon-music); }

.icon-before-purchase, [icon-before="purchase"] { position: relative; --icon-before-color: var(--color-primary); --icon-before-size: var(--font-m); --icon-before-content: var(--icon-purchase); }

.icon-before-purchase::before, [icon-before="purchase"]::before { content: var(--icon-before-content); font-family: var(--font-icon); color: var(--icon-before-color); font-size: var(--icon-before-size); display: block; }

.icon-before-purchase:hover::before, [icon-before="purchase"]:hover::before { content: var(--icon-music); }

.icon-before-silent, [icon-before="silent"] { position: relative; --icon-before-color: var(--color-primary); --icon-before-size: var(--font-m); --icon-before-content: var(--icon-silent); }

.icon-before-silent::before, [icon-before="silent"]::before { content: var(--icon-before-content); font-family: var(--font-icon); color: var(--icon-before-color); font-size: var(--icon-before-size); display: block; }

.icon-before-silent:hover::before, [icon-before="silent"]:hover::before { content: var(--icon-music); }

.icon-before-avant, [icon-before="avant"] { position: relative; --icon-before-color: var(--color-primary); --icon-before-size: var(--font-m); --icon-before-content: var(--icon-avant); }

.icon-before-avant::before, [icon-before="avant"]::before { content: var(--icon-before-content); font-family: var(--font-icon); color: var(--icon-before-color); font-size: var(--icon-before-size); display: block; }

.icon-before-avant:hover::before, [icon-before="avant"]:hover::before { content: var(--icon-music); }

.icon-before-auto, [icon-before="auto"] { position: relative; --icon-before-color: var(--color-primary); --icon-before-size: var(--font-m); --icon-before-content: var(--icon-auto); }

.icon-before-auto::before, [icon-before="auto"]::before { content: var(--icon-before-content); font-family: var(--font-icon); color: var(--icon-before-color); font-size: var(--icon-before-size); display: block; }

.icon-before-auto:hover::before, [icon-before="auto"]:hover::before { content: var(--icon-music); }

.icon-before-caution, [icon-before="caution"] { position: relative; --icon-before-color: var(--color-primary); --icon-before-size: var(--font-m); --icon-before-content: var(--icon-caution); }

.icon-before-caution::before, [icon-before="caution"]::before { content: var(--icon-before-content); font-family: var(--font-icon); color: var(--icon-before-color); font-size: var(--icon-before-size); display: block; }

.icon-before-caution:hover::before, [icon-before="caution"]:hover::before { content: var(--icon-music); }

.icon-before-info, [icon-before="info"] { position: relative; --icon-before-color: var(--color-primary); --icon-before-size: var(--font-m); --icon-before-content: var(--icon-info); }

.icon-before-info::before, [icon-before="info"]::before { content: var(--icon-before-content); font-family: var(--font-icon); color: var(--icon-before-color); font-size: var(--icon-before-size); display: block; }

.icon-before-info:hover::before, [icon-before="info"]:hover::before { content: var(--icon-music); }

.i-before-top { position: relative; }

.i-before-top::before { top: var(--size-4-1); left: var(--size-4-1); }

.i-before-top-0 { position: relative; }

.i-before-top-0::before { top: 0px; left: 0px; }

.i-before-top-l { position: relative; }

.i-before-top-l::before { top: var(--size-4-4); left: var(--size-4-4); }

.i-before-top-xl { position: relative; }

.i-before-top-xl::before { top: var(--size-4-8); left: var(--size-4-8); }

.i-before-bottom { position: relative; }

.i-before-bottom::before { bottom: var(--size-4-1); left: var(--size-4-1); }

.i-before-bottom-0 { position: relative; }

.i-before-bottom-0::before { bottom: 0px; left: 0px; }

.i-before-bottom-l { position: relative; }

.i-before-bottom-l::before { bottom: var(--size-4-4); left: var(--size-4-4); }

.i-before-bottom-xl { position: relative; }

.i-before-bottom-xl::before { bottom: var(--size-4-8); left: var(--size-4-8); }

.i-before-mid { position: relative; padding-left: calc((var(--size-4-1) + 1em) + 2px); }

.i-before-mid::before, .i-before-mid:hover::before { left: var(--size-4-1); top: calc(50% + 1px); transform: translateY(-50%); -webkit-transform: translateY(-50%); -ms-transform: translateY(-50%); }

.i-before-mid-0 { position: relative; padding-left: calc((0px + 1em) + 2px); }

.i-before-mid-0::before, .i-before-mid-0:hover::before { left: 0px; top: calc(50% + 1px); transform: translateY(-50%); -webkit-transform: translateY(-50%); -ms-transform: translateY(-50%); }

.i-before-mid-l { position: relative; padding-left: calc((var(--size-4-4) + 1em) + 2px); }

.i-before-mid-l::before, .i-before-mid-l:hover::before { left: var(--size-4-4); top: calc(50% + 1px); transform: translateY(-50%); -webkit-transform: translateY(-50%); -ms-transform: translateY(-50%); }

.i-before-mid-xl { position: relative; padding-left: calc((var(--size-4-8) + 1em) + 2px); }

.i-before-mid-xl::before, .i-before-mid-xl:hover::before { left: var(--size-4-8); top: calc(50% + 1px); transform: translateY(-50%); -webkit-transform: translateY(-50%); -ms-transform: translateY(-50%); }

.i-before-size-xs::before { font-size: var(--font-xs); }

.i-before-size-s::before { font-size: var(--font-s); }

.i-before-size-m::before { font-size: var(--font-m); }

.i-before-size-l::before { font-size: var(--font-l); }

.i-before-size-xl::before { font-size: var(--font-xl); }

.i-before-size-2xl::before { font-size: var(--font-2xl); }

.i-before-color-black::before { color: var(--color-black); }

.i-before-color-white::before { color: var(--color-wthie); }

.i-before-color-gray::before { color: var(--color-muted); }

.i-before-color-primary::before { color: var(--color-primary); }

.i-before-color-red::before { color: var(--color-red); }

.i-before-color-important::before { color: var(--color-important); }

.i-before-color-link::before { color: var(--color-link); }

.icon-after-music, [icon-after="music"] { position: relative; --icon-after-color: var(--color-primary); --icon-after-size: var(--font-m); --icon-after-content: var(--icon-music); }

.icon-after-music::after, [icon-after="music"]::after { content: var(--icon-after-content); font-family: var(--font-icon); color: var(--icon-after-color); font-size: var(--icon-after-size); display: block; }

.icon-after-music:hover::after, [icon-after="music"]:hover::after { content: var(--icon-music); }

.icon-after-right, .banner, [icon-after="right"] { position: relative; --icon-after-color: var(--color-primary); --icon-after-size: var(--font-m); --icon-after-content: var(--icon-right); }

.icon-after-right::after, .banner::after, [icon-after="right"]::after { content: var(--icon-after-content); font-family: var(--font-icon); color: var(--icon-after-color); font-size: var(--icon-after-size); display: block; }

.icon-after-right:hover::after, .banner:hover::after, [icon-after="right"]:hover::after { content: var(--icon-music); }

.icon-after-right-up, .card-link, [icon-after="right-up"] { position: relative; --icon-after-color: var(--color-primary); --icon-after-size: var(--font-m); --icon-after-content: var(--icon-right-up); }

.icon-after-right-up::after, .card-link::after, [icon-after="right-up"]::after { content: var(--icon-after-content); font-family: var(--font-icon); color: var(--icon-after-color); font-size: var(--icon-after-size); display: block; }

.icon-after-right-up:hover::after, .card-link:hover::after, [icon-after="right-up"]:hover::after { content: var(--icon-music); }

.icon-after-outlink, [icon-after="outlink"] { position: relative; --icon-after-color: var(--color-primary); --icon-after-size: var(--font-m); --icon-after-content: var(--icon-outlink); }

.icon-after-outlink::after, [icon-after="outlink"]::after { content: var(--icon-after-content); font-family: var(--font-icon); color: var(--icon-after-color); font-size: var(--icon-after-size); display: block; }

.icon-after-outlink:hover::after, [icon-after="outlink"]:hover::after { content: var(--icon-music); }

.icon-after-down, [icon-after="down"] { position: relative; --icon-after-color: var(--color-primary); --icon-after-size: var(--font-m); --icon-after-content: var(--icon-down); }

.icon-after-down::after, [icon-after="down"]::after { content: var(--icon-after-content); font-family: var(--font-icon); color: var(--icon-after-color); font-size: var(--icon-after-size); display: block; }

.icon-after-down:hover::after, [icon-after="down"]:hover::after { content: var(--icon-music); }

.icon-after-news, [icon-after="news"] { position: relative; --icon-after-color: var(--color-primary); --icon-after-size: var(--font-m); --icon-after-content: var(--icon-news); }

.icon-after-news::after, [icon-after="news"]::after { content: var(--icon-after-content); font-family: var(--font-icon); color: var(--icon-after-color); font-size: var(--icon-after-size); display: block; }

.icon-after-news:hover::after, [icon-after="news"]:hover::after { content: var(--icon-music); }

.icon-after-updated-at, [icon-after="updated-at"] { position: relative; --icon-after-color: var(--color-primary); --icon-after-size: var(--font-m); --icon-after-content: var(--icon-updated-at); }

.icon-after-updated-at::after, [icon-after="updated-at"]::after { content: var(--icon-after-content); font-family: var(--font-icon); color: var(--icon-after-color); font-size: var(--icon-after-size); display: block; }

.icon-after-updated-at:hover::after, [icon-after="updated-at"]:hover::after { content: var(--icon-music); }

.icon-after-created-at, [icon-after="created-at"] { position: relative; --icon-after-color: var(--color-primary); --icon-after-size: var(--font-m); --icon-after-content: var(--icon-created-at); }

.icon-after-created-at::after, [icon-after="created-at"]::after { content: var(--icon-after-content); font-family: var(--font-icon); color: var(--icon-after-color); font-size: var(--icon-after-size); display: block; }

.icon-after-created-at:hover::after, [icon-after="created-at"]:hover::after { content: var(--icon-music); }

.icon-after-hash, [icon-after="hash"] { position: relative; --icon-after-color: var(--color-primary); --icon-after-size: var(--font-m); --icon-after-content: var(--icon-hash); }

.icon-after-hash::after, [icon-after="hash"]::after { content: var(--icon-after-content); font-family: var(--font-icon); color: var(--icon-after-color); font-size: var(--icon-after-size); display: block; }

.icon-after-hash:hover::after, [icon-after="hash"]:hover::after { content: var(--icon-music); }

.icon-after-tuning, [icon-after="tuning"] { position: relative; --icon-after-color: var(--color-primary); --icon-after-size: var(--font-m); --icon-after-content: var(--icon-tuning); }

.icon-after-tuning::after, [icon-after="tuning"]::after { content: var(--icon-after-content); font-family: var(--font-icon); color: var(--icon-after-color); font-size: var(--icon-after-size); display: block; }

.icon-after-tuning:hover::after, [icon-after="tuning"]:hover::after { content: var(--icon-music); }

.icon-after-repair, [icon-after="repair"] { position: relative; --icon-after-color: var(--color-primary); --icon-after-size: var(--font-m); --icon-after-content: var(--icon-repair); }

.icon-after-repair::after, [icon-after="repair"]::after { content: var(--icon-after-content); font-family: var(--font-icon); color: var(--icon-after-color); font-size: var(--icon-after-size); display: block; }

.icon-after-repair:hover::after, [icon-after="repair"]:hover::after { content: var(--icon-music); }

.icon-after-transport, [icon-after="transport"] { position: relative; --icon-after-color: var(--color-primary); --icon-after-size: var(--font-m); --icon-after-content: var(--icon-transport); }

.icon-after-transport::after, [icon-after="transport"]::after { content: var(--icon-after-content); font-family: var(--font-icon); color: var(--icon-after-color); font-size: var(--icon-after-size); display: block; }

.icon-after-transport:hover::after, [icon-after="transport"]:hover::after { content: var(--icon-music); }

.icon-after-purchase, [icon-after="purchase"] { position: relative; --icon-after-color: var(--color-primary); --icon-after-size: var(--font-m); --icon-after-content: var(--icon-purchase); }

.icon-after-purchase::after, [icon-after="purchase"]::after { content: var(--icon-after-content); font-family: var(--font-icon); color: var(--icon-after-color); font-size: var(--icon-after-size); display: block; }

.icon-after-purchase:hover::after, [icon-after="purchase"]:hover::after { content: var(--icon-music); }

.icon-after-silent, [icon-after="silent"] { position: relative; --icon-after-color: var(--color-primary); --icon-after-size: var(--font-m); --icon-after-content: var(--icon-silent); }

.icon-after-silent::after, [icon-after="silent"]::after { content: var(--icon-after-content); font-family: var(--font-icon); color: var(--icon-after-color); font-size: var(--icon-after-size); display: block; }

.icon-after-silent:hover::after, [icon-after="silent"]:hover::after { content: var(--icon-music); }

.icon-after-avant, [icon-after="avant"] { position: relative; --icon-after-color: var(--color-primary); --icon-after-size: var(--font-m); --icon-after-content: var(--icon-avant); }

.icon-after-avant::after, [icon-after="avant"]::after { content: var(--icon-after-content); font-family: var(--font-icon); color: var(--icon-after-color); font-size: var(--icon-after-size); display: block; }

.icon-after-avant:hover::after, [icon-after="avant"]:hover::after { content: var(--icon-music); }

.icon-after-auto, [icon-after="auto"] { position: relative; --icon-after-color: var(--color-primary); --icon-after-size: var(--font-m); --icon-after-content: var(--icon-auto); }

.icon-after-auto::after, [icon-after="auto"]::after { content: var(--icon-after-content); font-family: var(--font-icon); color: var(--icon-after-color); font-size: var(--icon-after-size); display: block; }

.icon-after-auto:hover::after, [icon-after="auto"]:hover::after { content: var(--icon-music); }

.icon-after-caution, [icon-after="caution"] { position: relative; --icon-after-color: var(--color-primary); --icon-after-size: var(--font-m); --icon-after-content: var(--icon-caution); }

.icon-after-caution::after, [icon-after="caution"]::after { content: var(--icon-after-content); font-family: var(--font-icon); color: var(--icon-after-color); font-size: var(--icon-after-size); display: block; }

.icon-after-caution:hover::after, [icon-after="caution"]:hover::after { content: var(--icon-music); }

.icon-after-info, [icon-after="info"] { position: relative; --icon-after-color: var(--color-primary); --icon-after-size: var(--font-m); --icon-after-content: var(--icon-info); }

.icon-after-info::after, [icon-after="info"]::after { content: var(--icon-after-content); font-family: var(--font-icon); color: var(--icon-after-color); font-size: var(--icon-after-size); display: block; }

.icon-after-info:hover::after, [icon-after="info"]:hover::after { content: var(--icon-music); }

.i-after-top { position: relative; }

.i-after-top::after { top: var(--size-4-1); right: var(--size-4-1); }

.i-after-top-0 { position: relative; }

.i-after-top-0::after { top: 0px; right: 0px; }

.i-after-top-l, .banner, .card-link { position: relative; }

.i-after-top-l::after, .banner::after, .card-link::after { top: var(--size-4-4); right: var(--size-4-4); }

.i-after-top-xl { position: relative; }

.i-after-top-xl::after { top: var(--size-4-8); right: var(--size-4-8); }

.i-after-bottom { position: relative; }

.i-after-bottom::after { bottom: var(--size-4-1); right: var(--size-4-1); }

.i-after-bottom-0 { position: relative; }

.i-after-bottom-0::after { bottom: 0px; right: 0px; }

.i-after-bottom-l { position: relative; }

.i-after-bottom-l::after { bottom: var(--size-4-4); right: var(--size-4-4); }

.i-after-bottom-xl { position: relative; }

.i-after-bottom-xl::after { bottom: var(--size-4-8); right: var(--size-4-8); }

.i-after-mid { position: relative; padding-right: calc((var(--size-4-1) + 1em) + 2px); }

.i-after-mid::after, .i-after-mid:hover::after { right: var(--size-4-1); top: calc(50% + 1px); transform: translateY(-50%); -webkit-transform: translateY(-50%); -ms-transform: translateY(-50%); }

.i-after-mid-0 { position: relative; padding-right: calc((0px + 1em) + 2px); }

.i-after-mid-0::after, .i-after-mid-0:hover::after { right: 0px; top: calc(50% + 1px); transform: translateY(-50%); -webkit-transform: translateY(-50%); -ms-transform: translateY(-50%); }

.i-after-mid-l { position: relative; padding-right: calc((var(--size-4-4) + 1em) + 2px); }

.i-after-mid-l::after, .i-after-mid-l:hover::after { right: var(--size-4-4); top: calc(50% + 1px); transform: translateY(-50%); -webkit-transform: translateY(-50%); -ms-transform: translateY(-50%); }

.i-after-mid-xl { position: relative; padding-right: calc((var(--size-4-8) + 1em) + 2px); }

.i-after-mid-xl::after, .i-after-mid-xl:hover::after { right: var(--size-4-8); top: calc(50% + 1px); transform: translateY(-50%); -webkit-transform: translateY(-50%); -ms-transform: translateY(-50%); }

.i-after-size-xs::after { font-size: var(--font-xs); }

.i-after-size-s::after { font-size: var(--font-s); }

.i-after-size-m::after { font-size: var(--font-m); }

.i-after-size-l::after, .card-link::after { font-size: var(--font-l); }

.i-after-size-xl::after { font-size: var(--font-xl); }

.i-after-size-2xl::after { font-size: var(--font-2xl); }

.i-after-color-black::after { color: var(--color-black); }

.i-after-color-white::after { color: var(--color-wthie); }

.i-after-color-gray::after { color: var(--color-muted); }

.i-after-color-primary::after { color: var(--color-primary); }

.i-after-color-red::after { color: var(--color-red); }

.i-after-color-important::after { color: var(--color-important); }

.i-after-color-link::after { color: var(--color-link); }

.container .container { padding-left: 0; padding-right: 0; }

@media (max-width: 992px) { .container { max-width: 100%; } }

h1, h2, h3, h4 { margin: 0; padding: 0; font-weight: var(--weight-bold); letter-spacing: 0.1em; }

h3 { font-size: var(--font-l); }

h4 { font-size: var(--font-m); }

a { text-decoration: none; color: var(--color-black); }

@media (min-width: 768px) { a:hover, a:hover * { text-decoration-style: wavy !important; text-underline-offset: 2px !important; text-decoration-thickness: 2px !important; text-decoration-color: var(--color-link-hover) !important; } }

p, ul, blockquote, ol, table, dl, dd, dt { margin: 0; padding: 0; }

dl dt { font-weight: var(--weight-bold); }

dl dd { font-weight: var(--weight-normal); }

ul { list-style: none; }

button { border: none; background: transparent; padding: 0; width: fit-content; height: fit-content; cursor: pointer; }

.table { margin-top: 0; margin-bottom: 0; }

table { --bs-table-bg: var(--color-background) !important; --bs-table-border-color: var(--border-color) !important; }

table:not(:has(thead)) tbody th { background-color: var(--color-thin) !important; }

table th, table td { font-size: var(--font-xs); font-weight: var(--weight-bold); text-align: center; }

table thead th { background-color: var(--color-thin) !important; white-space: nowrap; }

.dotter { display: flex; align-items: center; width: fit-content; padding: 0 var(--size-4-2); border: var(--divider); border-radius: var(--radius-m); background-color: var(--color-white); font-size: var(--font-xs); font-weight: var(--weight-light); text-transform: uppercase; text-align: center; white-space: nowrap; }

.dot { --dot-color: var(--color-primary); --dot-left: 0; --dot-size: 6px; position: relative; font-size: var(--font-xs); padding-left: calc(var(--dot-size) + 0.4em); }

.dot::before { content: " "; position: absolute; background-color: var(--dot-color); width: var(--dot-size); height: var(--dot-size); left: var(--dot-left); top: calc(50%); transform: translateY(-50%); -webkit-transform: translateY(-50%); -ms-transform: translateY(-50%); border-radius: 50%; }

.dot-normal { font-size: var(--font-m); }

.dot-safe { --dot-color: var(--color-safe); }

.dot-gray { --dot-color: var(--color-muted); }

.tag, .tag-safe, .tag-important, .tag-primary { --tag-text-color: var(--color-black); --tag-background-color: var(--color-thin); --tag-border-color: var(--border-color); --tag-border-style: var(--border-alt-style); display: inline-block; font-size: var(--font-xs); color: var(--tag-text-color); padding: 0 var(--size-4-3); background-color: var(--tag-background-color); border: 1px var(--tag-border-style) var(--tag-border-color); border-radius: var(--radius-m); }

.tag-primary { --tag-text-color: var(--color-primary); --tag-background-color: var(--color-primary-alt); --tag-border-color: var(--color-primary); }

.tag-important { --tag-text-color: var(--color-important); --tag-background-color: var(--color-important-alt); --tag-border-color: var(--color-important); }

.tag-safe { --tag-text-color: var(--color-safe); --tag-background-color: var(--color-safe-alt); --tag-border-color: var(--color-safe); }

.caution, .info { position: relative; --icon-color: var(--color-important); --icon-background-color: var(--color-important-alt); --icon-border-color: var(--color-important); --icon-border-style: var(--border-alt-style); --icon-text-line: underline; text-decoration: var(--icon-text-line); text-decoration-color: var(--icon-color); text-underline-offset: 4px; text-decoration-thickness: 2px; }

.caution::before, .info::before { content: var(--icon-caution); font-family: var(--font-icon); background-color: var(--icon-background-color); border-radius: var(--radius-s); border: var(--icon-border-style) 1px var(--icon-border-color); color: var(--icon-color); display: inline-block; line-height: 1; padding: 0.1em; font-size: 0.95em; margin-right: 0.2em; }

.info { --icon-color: var(--color-safe); --icon-background-color: var(--color-safe-alt); --icon-border-color: var(--color-safe); }

.info::before { content: var(--icon-info); }

mark, marker { text-decoration: underline; text-decoration-color: var(--color-important); text-underline-offset: 4px; text-decoration-thickness: 1px; color: var(--color-important); background-color: var(--color-important-alt); padding: 0; }

.mark-primary { color: var(--color-primary); background-color: var(--color-primary-alt); }

.mark-gray { color: var(--color-muted); background-color: var(--color-thin); }

.link { color: var(--color-link); text-decoration: underline; font-weight: var(--weight-light); }

.link::before { content: var(--icon-info); font-family: var(--font-icon); display: inline-block; line-height: 1; padding: 0.1em; font-size: var(--font-xs); margin-right: 0.2em; background-color: var(--color-link-alt); border-radius: var(--radius-s); }

.hover-outline, .accordion .accordion__item, .banner, .btn, .btn-important, .btn-important-fill, .btn-link, .btn-link-fill, .btn-safe, .btn-safe-fill, .btn-gray, .btn-gray-fill, .btn-red, .btn-red-fill, .btn-primary, .btn-primary-fill, .btn-size-m, .card-link, .dotter { --hover-outline-color: var(--color-muted); --hover-outline-width: 2px; --hover-outline-offset: 2px; }

@media (min-width: 768px) { .hover-outline:hover, .accordion .accordion__item:hover, .banner:hover, .btn:hover, .btn-important:hover, .btn-important-fill:hover, .btn-link:hover, .btn-link-fill:hover, .btn-safe:hover, .btn-safe-fill:hover, .btn-gray:hover, .btn-gray-fill:hover, .btn-red:hover, .btn-red-fill:hover, .btn-primary:hover, .btn-primary-fill:hover, .btn-size-m:hover, .card-link:hover, .dotter:hover { outline: var(--hover-outline-width) dashed var(--hover-outline-color) !important; outline-offset: var(--hover-outline-offset) !important; } }

.active-outline { --active-outline-color: var(--color-safe); --active-outline-width: 2px; --active-outline-offset: 2px; }

.active-outline.is-active { outline: var(--active-outline-width) dashed var(--active-outline-color) !important; outline-offset: var(--active-outline-offset) !important; }

.yen::after { content: "円(税別)"; font-size: 0.8em; font-weight: 400; }

.yen-tax::after { content: "円(税込)"; font-size: 0.8em; font-weight: 400; }

.border-box { padding: var(--size-4-6); border: var(--divider-strong); border-radius: var(--radius-s); }

@media (max-width: 768px) { .border-box { padding: var(--size-4-5); } }

.card, .card-link { background-color: var(--color-white); border: var(--border); border-width: var(--border-strong); border-radius: var(--radius-m); font-size: var(--font-m); overflow: hidden; display: grid; height: 100%; }

.card .card__thumb, .card-link .card__thumb { border-bottom: var(--border); overflow: hidden; }

.card .card__thumb img, .card-link .card__thumb img { aspect-ratio: 16/8; object-fit: cover; width: 100%; height: 100%; transition: scale 0.1s ease-in-out; }

.card .card__body, .card-link .card__body { padding: var(--size-4-5) var(--size-4-5) var(--size-4-5) var(--size-4-5); display: grid; grid-template-rows: min-content 1fr; }

.card .card__body:has(.card__meta), .card-link .card__body:has(.card__meta) { padding-bottom: var(--size-4-4); }

.card .card__body > *:not(:last-child), .card-link .card__body > *:not(:last-child) { margin-bottom: var(--size-4-2); }

.card .card__body .card__title, .card-link .card__body .card__title, .card .card__body .card__title *, .card-link .card__body .card__title * { font-size: var(--font-m) !important; text-decoration: underline; font-weight: var(--weight-bold); line-height: 1.2; }

.card .card__body .card__desc, .card-link .card__body .card__desc { font-size: var(--font-s); }

.card .card__body .card__meta, .card-link .card__body .card__meta { display: flex; justify-content: space-between; gap: var(--size-4-2); font-size: var(--font-xs); color: var(--color-primary); margin-top: auto; }

.card .card__body .card__meta .dot::before, .card-link .card__body .card__meta .dot::before { background-color: var(--color-primary); }

.card-link:hover .card__thumb img { scale: 1.05; }

.btn, .btn-important, .btn-important-fill, .btn-link, .btn-link-fill, .btn-safe, .btn-safe-fill, .btn-gray, .btn-gray-fill, .btn-red, .btn-red-fill, .btn-primary, .btn-primary-fill, .btn-size-m { --btn-color: var(--color-black); --btn-bg: var(--color-thin); --btn-border-color: var(--btn-color); --btn-border-style: var(--border-style); --btn-border-width: var(--border-width); --btn-padding: var(--size-4-2) var(--size-4-4) var(--size-4-2) var(--size-4-4); --btn-text-align: center; --btn-min-width: fit-content; display: flex; text-align: var(--btn-text-align); align-items: center; justify-content: var(--btn-text-align); min-width: var(--btn-min-width); color: var(--btn-color); background: var(--btn-bg); border: var(--btn-border-color) var(--btn-border-style) var(--btn-border-width); font-size: var(--font-s); padding: var(--btn-padding); font-weight: 500; border-radius: var(--radius-m); }

.btn-size-m { width: 175px; }

.btn-primary, .btn-primary-fill { --btn-color: var(--color-primary); --btn-bg: var(--color-primary-alt); }

.btn-primary-fill { --btn-color: var(--color-white); --btn-bg: var(--color-primary); --btn-border-color: var(--color-primary); }

.btn-red, .btn-red-fill { --btn-color: var(--color-red); --btn-bg: var(--color-red-alt); }

.btn-red-fill { --btn-color: var(--color-white); --btn-bg: var(--color-red); --btn-border-color: var(--color-red); }

.btn-gray, .btn-gray-fill { --btn-color: var(--color-muted); --btn-bg: var(--color-thin); --btn-border-color: var(--color-faint); }

.btn-gray-fill { --btn-color: var(--color-white); --btn-bg: var(--color-muted); --btn-border-color: var(--color-muted); }

.btn-safe, .btn-safe-fill { --btn-color: var(--color-safe); --btn-bg: var(--color-safe-alt); }

.btn-safe-fill { --btn-color: var(--color-white); --btn-bg: var(--color-safe); --btn-border-color: var(--color-safe); }

.btn-link, .btn-link-fill { --btn-color: var(--color-link); --btn-bg: var(--color-link-alt); }

.btn-link-fill { --btn-color: var(--color-white); --btn-bg: var(--color-link); --btn-border-color: var(--color-link); }

.btn-important, .btn-important-fill { --btn-color: var(--color-important); --btn-bg: var(--color-important-alt); }

.btn-important-fill { --btn-color: var(--color-white); --btn-bg: var(--color-important); --btn-border-color: var(--color-important); }

.banner { --banner-color: var(--color-muted); --banner-bg: var(--color-thin); --banner-border: var(--color-muted); --banner-border-style: var(--border-style); --icon-after-size: var(--font-l); --icon-after-color: var(--banner-color); display: block; border: var(--banner-border) var(--banner-border-style) var(--border-strong); border-radius: var(--radius-m); background-color: var(--banner-bg); padding: var(--size-4-8); }

.banner .banner__header { text-decoration: underline; }

.banner .banner__header, .banner .banner__header * { font-size: var(--font-m); text-decoration: underline; font-weight: var(--weight-bold); }

.banner:hover { border-style: solid; }

.divide-flex { display: flex; flex-wrap: wrap; }

.divide-flex > *:not(:last-child)::after { content: "|"; margin-left: var(--size-4-2); margin-right: var(--size-4-2); color: var(--divider-color); }

:root { --section-spacing-top: var(--size-4-12); --section-spacing-bottom: var(--size-4-12); --section-head-spacing: var(--size-4-8); --section-body-spacing: var(--size-4-6); --section-nest-spacing: calc(var(--section-head-spacing) + var(--size-4-1)) 0 0 0; --section-nest-head-spacing: calc(var(--section-head-spacing) - var(--size-4-1)); }

@media (max-width: 768px) { :root { --section-spacing-top: var(--size-4-10); --section-spacing-bottom: var(--size-4-10); } }

section, .section { padding-top: var(--section-spacing-top); padding-bottom: var(--section-spacing-bottom); }

section .section__header, .section .section__header { margin-bottom: var(--section-head-spacing); }

section .section__header__info, .section .section__header__info { padding-top: var(--size-4-4); display: flex; flex-direction: column; gap: var(--section-body-spacing); }

section .section__body > *:not(:last-child), .section .section__body > *:not(:last-child) { margin-bottom: var(--section-body-spacing); }

@media (max-width: 768px) { section .section__body > *:not(:last-child), .section .section__body > *:not(:last-child) { margin-bottom: var(--section-body-spacing); } }

section section, .section section { padding: var(--section-nest-spacing); --section-head-spacing: var(--section-nest-head-spacing); }

main { counter-reset: section-header-counter; }

main [header-alt-text]::before, main [header-alt]::before { content: "● " counter(section-header-counter, decimal-leading-zero) " / " attr(header-alt-text) attr(header-alt); counter-increment: section-header-counter; font-size: var(--font-xs); text-transform: uppercase !important; text-align: left; line-height: 1; letter-spacing: 0; color: var(--color-primary); margin-bottom: var(--size-4-2); display: block; }

.accordion { --accordion-icon-color: var(--color-safe); --accordion-icon-color-active: var(--color-important); --accordion-background-color: var(--color-white); display: flex; flex-direction: column; gap: var(--size-4-2); }

.accordion .accordion__item { cursor: pointer; background-color: var(--accordion-background-color); font-size: var(--font-s); border-radius: var(--radius-m); border: var(--border); }

.accordion .accordion__item .accordion__title { padding: var(--size-4-3) var(--size-4-4) var(--size-4-3) var(--size-4-4); font-weight: var(--weight-normal); display: flex; align-items: center; line-height: 1.9 !important; }

.accordion .accordion__item .accordion__title:hover { text-decoration: underline; }

.accordion .accordion__item .accordion__title::after { content: var(--icon-down); font-family: var(--font-icon); color: var(--accordion-icon-color); margin-left: auto; }

.accordion .accordion__item .accordion__body { display: none; padding: 0 var(--size-4-4) var(--size-4-4) var(--size-4-4); }

.accordion .accordion__item .accordion__body__in { display: flex; flex-direction: column; gap: var(--size-4-4); }

.accordion .accordion__item.is-active .accordion__title { --accordion-icon-color: var(--accordion-icon-color-active); text-decoration: underline; }

.accordion .accordion__item.is-active .accordion__body { display: block; }

#footer-contact { background-color: var(--color-primary); color: var(--color-white); border-radius: var(--radius-l); margin: 0 var(--size-4-3); }

@media (max-width: 998px) { #footer-contact { border-radius: var(--radius-m); } }

#footer-contact h2 { text-align: start; }

#footer-contact h2::before { content: "contact"; display: block; margin-bottom: var(--size-4-2); color: var(--color-white); font-size: var(--font-xs); text-transform: uppercase; }

#footer-contact .footer-contact__ul { margin: var(--size-4-6) 0; padding-left: var(--size-4-6); }

#footer-contact .footer-contact__ul li { position: relative; font-size: var(--font-s); list-style-type: disc; }

@media (max-width: 998px) { #footer-contact h2 { text-align: center !important; font-size: var(--font-l) !important; margin-bottom: var(--size-4-6) !important; } #footer-contact h2::before { font-size: var(--font-xs) !important; margin-bottom: var(--size-4-2) !important; } #footer-contact .footer-contact__ul { display: none; } }

#footer-contact .footer-contact__btn-container { display: flex; justify-content: space-between; }

#footer-contact .footer-contact__btn-container .footer-contact__line { height: 1px; flex: 0.9; background-color: var(--color-white); margin: auto auto auto 0; }

#footer-contact .footer-contact__btn-container a { color: inherit; border: var(--color-white) solid 1px; padding: var(--size-4-4) var(--size-4-14); border-radius: var(--radius-m); transition: background-color 0.1s; }

#footer-contact .footer-contact__btn-container a:hover { color: var(--color-primary); background-color: var(--color-white); }

@media (max-width: 998px) { #footer-contact .footer-contact__btn-container { justify-content: center; } #footer-contact .footer-contact__btn-container .footer-contact__line { display: none; } #footer-contact .footer-contact__btn-container a { padding: var(--size-4-2) var(--size-4-10); font-size: var(--font-s); border: var(--color-white) solid 1px; } }

#footer-bottom section { padding-top: var(--size-4-12); padding-bottom: var(--size-4-8); }

#footer-bottom section .footer-bottom__company a { margin-bottom: var(--size-4-10); }

#footer-bottom section .footer-bottom__company a:hover { opacity: 0.8; }

#footer-bottom section .footer-bottom__company a::after { content: attr(footer-company-name-sub); font-size: var(--font-xs); display: block; color: var(--color-primary); padding-top: var(--size-4-2); }

#footer-bottom .footer-bottom__list { border-top: 2px dashed var(--divider-color); display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); font-size: var(--font-xs); gap: var(--size-4-4); margin-top: var(--size-4-10); padding-top: var(--size-4-10); }

@media (max-width: 768px) { #footer-bottom .footer-bottom__list { display: block; } }

#footer-bottom .footer-bottom__list a { display: block; text-decoration: underline; }

#footer-bottom .footer-bottom__list .footer-bottom__title { color: var(--color-primary); margin-bottom: var(--size-4-1); }

#footer-bottom .footer-bottom__list .footer-bottom__links { padding-left: var(--size-4-1); display: flex; flex-direction: column; gap: var(--size-4-1); }

#footer-copyright { font-size: 13px; text-align: end; padding-top: var(--size-4-10); }

#footer-breadcrumb { border-top: var(--divider); }

#footer-breadcrumb nav { justify-content: end; }

.breadcrumb { --breadcrumb-color: var(--color-black); --breadcrumn-divider-color: var(--color-faint); font-size: 13px; padding-top: var(--size-4-1); padding-bottom: var(--size-4-1); padding-left: var(--section-spacing-left); padding-right: var(--section-spacing-right); margin-bottom: 0; }

@media (max-width: 768px) { .breadcrumb { font-size: 13px; } }

.breadcrumb ol { display: flex; flex-wrap: nowrap; margin-bottom: 0; white-space: nowrap; overflow-x: hidden; }

.breadcrumb ol li { display: inline-flex; }

.breadcrumb ol li a { color: var(--breadcrumb-color); }

.breadcrumb ol li a:hover { opacity: 0.75; }

.breadcrumb ol .breadcrumb__divider { color: var(--breadcrumn-divider-color); margin-right: var(--size-4-2); margin-left: var(--size-4-2); }

#nav { position: sticky; top: 0; left: 0; right: 0; z-index: 999; border-bottom: var(--divider); background: var(--color-background); background-image: url("/static/image/bg.4c6528303528.png"); background-size: 200px auto; background-position: 0 0; background-repeat: repeat; background-color: var(--color-background); }

#nav .nav__in { justify-content: space-between; display: flex; align-items: center; flex-wrap: wrap; padding-top: var(--size-4-2); padding-bottom: var(--size-4-2); }

#nav .nav__brand a { font-size: var(--font-s); line-height: 0.5; }

#nav .nav__brand a::after { content: attr(nav-company-name-alt); font-size: 0.6em; color: var(--color-primary); display: block; padding-bottom: var(--size-4-2); opacity: 0.75; }

#nav .nav__list { display: flex; justify-content: center; align-items: center; gap: var(--size-4-12); margin-left: auto; }

#nav .nav__item a { text-align: center; text-decoration: underline; color: var(--color-black); font-weight: 500; font-size: var(--font-s); }

#nav .nav__btn-area { display: flex; align-items: center; gap: var(--size-4-2); }

#nav .nav__btn-area .nav__contact-btn { --btn-padding: var(--size-4-1) var(--size-4-4); --btn-min-width: 150px; }

@media (max-width: 768px) { #nav .nav__btn-area .nav__contact-btn { --btn-padding: var(--size-4-1) var(--size-4-2); --btn-min-width: fit-content; font-size: var(--font-xs); height: var(--size-4-10); } }

@media (max-width: 400px) { #nav .nav__btn-area .nav__contact-btn { font-size: 13px; } }

#nav #hamburger { display: flex; flex-direction: column; justify-content: center; align-items: center; width: var(--size-4-10); height: var(--size-4-10); cursor: pointer; gap: var(--size-4-1); background: var(--color-white); border-radius: var(--radius-m); padding: var(--size-4-3); border: var(--divider); }

#nav #hamburger span { width: 100%; height: 2px; background: var(--color-muted); }

#nav #hamburger.active { outline: 2px dashed var(--color-muted); outline-offset: var(--hover-outline-offset); }

#nav #hamburger.active span { background: var(--color-black); }

@media (max-width: 1400px) { #nav .nav__brand a { font-size: var(--font-xs); } #nav .nav__list { gap: var(--size-4-6); } }

@media (max-width: 1024px) { #nav .nav__item { display: none; } }

@media (max-width: 768px) { #nav .nav__btn-area button { --btn-min-width: 100px; --btn-padding: var(--size-4-2) var(--size-4-4); --btn-icon-display: none; } }

body:has(#fullnav.on) { overflow: hidden; }

#fullnav { display: none; opacity: 0; transition: opacity 0.7s ease; top: var(--size-4-6); bottom: var(--size-4-6); right: var(--size-4-6); left: var(--size-4-6); z-index: 9999; position: fixed; box-shadow: 0 4px 32px rgba(0, 0, 0, 0.18); }

#fullnav.on { display: block; opacity: 1; }

@media (max-width: 1280px) { #fullnav { top: 0; bottom: 0; right: 0; left: 0; } }

#fullnav .fullnav__in { width: 100%; height: 100%; background: var(--color-background); overflow-y: auto; }

#fullnav .fullnav__btns { display: flex; gap: var(--size-4-2); justify-content: end; margin-top: var(--size-4-6); }

#fullnav .fullnav__btns .fullnav__btn-home, #fullnav .fullnav__btns .fullnav__btn-contact { height: 48px; border: var(--divider); display: flex; align-items: center; justify-content: center; padding: var(--size-4-2) var(--size-4-4); border-radius: var(--radius-m); font-size: var(--font-s); box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04); }

#fullnav .fullnav__btns .fullnav__btn-home { border-color: var(--color-faint); background: var(--color-thin); color: var(--color-muted); }

#fullnav .fullnav__btns .fullnav__btn-contact { border-color: var(--color-primary); background: var(--color-primary); color: var(--color-white); }

@media (max-width: 1200px) { #fullnav .fullnav__btns { top: var(--size-4-4); right: var(--size-4-4); } }

#fullnav #hamburger-close-btn { width: 48px; height: 48px; display: flex; align-items: center; justify-content: center; background: var(--color-white); border: var(--divider); border-radius: var(--radius-m); cursor: pointer; transition: background 0.2s, box-shadow 0.2s; box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04); }

#fullnav #hamburger-close-btn span { position: relative; width: 24px; height: 24px; display: inline-block; }

#fullnav #hamburger-close-btn span::before, #fullnav #hamburger-close-btn span::after { content: ""; position: absolute; left: 11px; top: 2px; width: 2px; height: 20px; background: var(--color-muted); border-radius: 1px; transition: background 0.2s; }

#fullnav #hamburger-close-btn span::before { transform: rotate(45deg); }

#fullnav #hamburger-close-btn span::after { transform: rotate(-45deg); }

.sidebar { --sidebar-item-color: var(--color-black); --sidebar-icon-color: var(--color-primary); width: 250px; flex-shrink: 0; color: var(--sidebar-item-color); }

.sidebar > *:not(:last-child) { border-bottom: var(--divider); border-bottom-width: 2px; margin-bottom: var(--size-4-4); padding-bottom: var(--size-4-4); }

.sidebar .sidebar__item-head { font-size: var(--font-s); padding-bottom: var(--size-4-2); font-weight: var(--weight-bold); }

.sidebar .sidebar__item-body { font-size: var(--font-xs); }

.sidebar .sidebar__item-body ul, .sidebar .sidebar__item-body ol { display: flex; flex-direction: column; gap: var(--size-4-4); line-height: 1.5; margin-left: var(--size-4-2); }

.sidebar .sidebar__item-body a:hover { text-decoration: underline; }

.sidebar__toc [toc] { max-height: 150px; min-height: 150px; overflow-y: auto; }

.sidebar__toc [toc] ol { counter-reset: number; list-style: decimal; }

.sidebar__toc [toc] ol li { padding-bottom: 0; }

.sidebar__toc [toc] ol li.toc__h3 { padding-left: var(--size-4-4); }

.sidebar__toc [toc] ol li::before { content: counter(number) ". "; counter-increment: number; color: var(--sidebar-icon-color); }

.sidebar__service li a { --icon-before-color: var(--sidebar-icon-color); }

.sidebar__company .sidebar__company-name { display: flex; align-items: center; gap: var(--size-4-2); text-decoration: underline; }

.sidebar__company .sidebar__company-name img { border-radius: var(--radius-s); border: var(--divider); }

.sidebar__company .sidebar__company-desc { padding-top: var(--size-4-4); }

.sidebar__articles li a { --icon-before-color: var(--sidebar-icon-color); }

.sidebar__articles a { display: block; }

.sidebar__articles .sidebar__articles-show-all { text-align: right; padding-right: var(--size-4-6); text-decoration: underline; }

.fheader { height: 400px; margin-top: 12px; margin-right: 12px; margin-left: 12px; position: relative; --fheader-text-shadow: 0px 1px 2px var(--color-faint); }

@media (max-width: 960px), (max-height: 768px) { .fheader { height: 200px; } }

.fheader .fheader__mask, .fheader .fheader__bg { position: absolute; width: 100%; height: 100%; border-radius: var(--radius-l); overflow: hidden; }

.fheader .fheader__mask { z-index: -1; background-color: rgba(75, 75, 75, 0.1); }

.fheader .fheader__bg { z-index: -2; object-fit: cover; }

.fheader .fheader__typography { position: relative; z-index: 2; text-align: end; text-shadow: var(--fheader-text-shadow); height: 100%; }

.fheader .fheader__typography .fheader__typography-in { position: absolute; top: 50%; transform: translateY(-50%); width: 100%; }

.fheader .fheader__typography .fheader__typography-in h1 { font-size: 4.5rem; font-weight: var(--weight-light); }

.fheader .fheader__typography .fheader__typography-in p { margin-top: var(--size-4-1); }

@media (max-width: 960px), (max-height: 768px) { .fheader .fheader__typography h1 { font-size: calc(max(6vmin, 2.5rem)) !important; font-weight: var(--weight-normal); text-align: center; } .fheader .fheader__typography p { display: none; } }

@media (max-width: 468px) { .fheader .fheader__typography h1 { font-size: var(--font-xl) !important; font-weight: var(--weight-bold); } }

.fheader .fheader__data { position: absolute; left: 1em; bottom: 1em; display: flex; gap: 1em; font-size: var(--font-xs); text-shadow: var(--fheader-text-shadow); }

.fheader .fheader__data li { padding-left: var(--size-4-8); --icon-before-color: var(--color-black); }

.fheader .fheader__scroll { display: inline-block; position: absolute; right: 40px; bottom: -50px; z-index: 2; padding: 10px 10px 110px; color: var(--color-important); font-size: 14px; line-height: 1; letter-spacing: 0em; text-transform: uppercase; text-decoration: none; writing-mode: vertical-lr; transition: 0.2s; overflow: hidden; }

@media (max-width: 468px) { .fheader .fheader__scroll { display: none !important; } }

.fheader .fheader__scroll::before { content: ""; position: absolute; bottom: 0; left: 50%; width: 1px; height: 100px; background: var(--color-important); }

.fheader .fheader__scroll::after { content: ""; position: absolute; bottom: 0; left: 50%; width: 1px; height: 25px; background: var(--color-background); animation: sdl07 1.5s ease infinite; }

.fheader .fheader__scroll:hover { opacity: 0.5; }

@keyframes sdl07 { 0% { transform: translateY(-70px); }
  50%, 100% { transform: translateY(30px); } }

#toc .toc__head { font-size: var(--font-s); font-weight: var(--weight-bold); }

#toc ol { display: flex; flex-direction: column; gap: var(--size-4-1); list-style: none; white-space: nowrap; overflow: auto; }

#toc ol a { font-size: var(--font-s); text-decoration: underline; }

#toc ol a::before { content: var(--icon-down); font-family: var(--font-icon); color: var(--color-link); }

#toc ol a:hover::before { content: var(--icon-music); }

@media (max-width: 1200px) { #toc ol { flex-direction: column; gap: var(--size-4-1); } }

#toc ol .toc__h3 { padding-left: var(--size-4-4); }

.contact-medium-banner.banner .banner__header { margin-bottom: var(--size-4-2); }

.contact-medium-banner.banner p { font-size: var(--font-xs); color: var(--banner-color); }