@charset "utf-8"; /* ============================================================ REI HAYAKAWA — site.css 仕様書v3 / 完成イメージ（1920x1080）実測値にもとづく 色は #1b1b1b と #ffffff の2色のみ。階層は白の不透明度で表現する（仕様5.1） ============================================================ */ /* ---------- 1. トークン ---------- */ :root{ --bg:#1b1b1b; --fg:255 255 255; /* 白の不透明度による階層（仕様5.1） */ --o-strong:1; /* 見出し・現在地 */ --o-body:.72; /* 本文・通常のメニュー項目 */ --o-mute:.35; /* 制作年・キャプション */ --o-line:.15; /* 罫線 */ --logo-ink:#eee; /* ロゴ類の支給SVGは rgb(238,238,238) */ /* 余白・寸法（1920px時の実測値をvwに換算し、上下をclampで固定） */ --gutter:clamp(20px, 2.708vw, 68px); /* 左インデント 52px */ --logo-h:clamp(18px, 1.335vw, 34px); /* REI HAYAKAWA 25.6px */ --menu-h:clamp(11px, .750vw, 19px); /* メニュー字高 14.4px */ --menu-pitch:calc(var(--menu-h) * 2.083); /* 行送り 30px */ --lang-h:clamp(8px, .552vw, 14px); /* EN / JP 10.6px */ --sig-h:clamp(18px, 1.343vw, 34px); /* 88110x 25.8px */ --sns-h:clamp(18px, 1.354vw, 34px); /* SNSアイコン 26px */ --copy-h:clamp(8px, .556vw, 14px); /* © REI HAYAKAWA 10.7px */ --col-w:25.99vw; /* 左カラム幅 499/1920 */ --stage-top:9.44dvh;/* ビジュアル上端 102/1080 */ --stage-right:var(--gutter); /* 右余白＝左メニューのインデントと同じ（左右対称） */ --stage-bottom:5dvh;/* 下余白 54/1080 */ --stage-ar:3 / 2; /* ビジュアル枠の縦横比（完成イメージ実測 1386:924） */ --grid-gap:clamp(8px,.83vw,16px); /* WORKS各カテゴリで共通の隙間 */ --ease:cubic-bezier(.2,.7,.3,1); } /* ---------- 2. リセット ---------- */ *,*::before,*::after{box-sizing:border-box} html{-webkit-text-size-adjust:100%} body{ margin:0; min-height:100dvh; /* 100vhだとアドレスバーで下端が切れる（仕様3.3） */ background:var(--bg); color:rgb(var(--fg) / var(--o-body)); /* 本文書体（候補Cを採用）。差し替えるときはこの1行と、各HTMLの にある fonts.googleapis.com の1行を変えるだけ。 */ font-family:"Jost","Zen Kaku Gothic New","Hiragino Kaku Gothic ProN", "Yu Gothic Medium",system-ui,sans-serif; font-size:clamp(13.5px,.86vw,18px); line-height:1.9; font-feature-settings:"palt" 1; -webkit-font-smoothing:antialiased; overflow-wrap:anywhere; } img{display:block;max-width:100%;height:auto} a{color:inherit;text-decoration:none;transition:color .25s var(--ease),opacity .25s var(--ease)} ul,ol{margin:0;padding:0;list-style:none} h1,h2,h3,p{margin:0} button{font:inherit;color:inherit;background:none;border:0;padding:0;cursor:pointer} :focus-visible{outline:1px solid rgb(var(--fg) / .8);outline-offset:3px} /* スクリーンリーダー専用テキスト（SVG文字の代替 / 仕様5.3） */ .vh{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden; clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap;border:0} .skip{position:fixed;top:-100px;left:var(--gutter);z-index:100;padding:.6em 1em; background:#000;color:#fff;transition:top .2s} .skip:focus{top:12px} /* ---------- 3. SVG文字（マスクで描画＝CSSから色を変えられる / 仕様5.3） ---------- */ .mark{ display:block; width:calc(var(--mh) * var(--ar)); height:var(--mh); background-color:currentColor; -webkit-mask:var(--src) no-repeat center / 100% 100%; mask:var(--src) no-repeat center / 100% 100%; flex:none; } /* mask未対応環境ではSVGを隠し、隠しテキストを本文として見せる */ @supports not ((-webkit-mask-image:url(#a)) or (mask-image:url(#a))){ .mark{display:none} .vh{position:static;width:auto;height:auto;margin:0;overflow:visible; clip:auto;clip-path:none;white-space:normal;letter-spacing:.14em} } /* >>> SVG埋め込み（tools/embed-svg.py が書き換えます。手で編集しないこと） */ .m-logo{--ar:14.3667; --mh:var(--logo-h); --src:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20862%2060%22%20fill%3D%22currentColor%22%20aria-hidden%3D%22true%22%20focusable%3D%22false%22%3E%3Cpath%20fill-rule%3D%22evenodd%22%20d%3D%22M853.555%2C59.609%20L845.723%2C46.259%20L797.129%2C46.259%20L789.297%2C59.609%20L781.376%2C59.609%20L816.353%2C0.246%20L826.410%2C0.246%20L861.387%2C59.609%20L853.555%2C59.609%20ZM821.426%2C5.230%20L800.511%2C40.652%20L842.341%2C40.652%20L821.426%2C5.230%20ZM746.933%2C59.609%20L722.191%2C7.188%20L697.360%2C59.609%20L688.638%2C59.609%20L660.603%2C0.246%20L668.435%2C0.246%20L693.088%2C53.112%20L718.097%2C0.246%20L726.463%2C0.246%20L751.472%2C53.112%20L776.214%2C0.246%20L783.690%2C0.246%20L755.655%2C59.609%20L746.933%2C59.609%20ZM655.174%2C59.609%20L647.342%2C46.259%20L598.748%2C46.259%20L590.916%2C59.609%20L586.555%2C59.609%20L582.995%2C59.609%20L574.629%2C59.609%20L533.333%2C31.752%20L522.742%2C31.752%20L522.742%2C59.609%20L515.622%2C59.609%20L515.622%2C0.246%20L522.742%2C0.246%20L522.742%2C26.145%20L533.511%2C26.145%20L572.315%2C0.246%20L584.330%2C0.246%20L540.987%2C28.993%20L584.004%2C57.896%20L617.972%2C0.246%20L628.029%2C0.246%20L663.006%2C59.609%20L655.174%2C59.609%20ZM623.045%2C5.230%20L602.130%2C40.652%20L643.960%2C40.652%20L623.045%2C5.230%20ZM493.461%2C46.259%20L444.867%2C46.259%20L437.035%2C59.609%20L429.114%2C59.609%20L464.091%2C0.246%20L474.148%2C0.246%20L509.125%2C59.609%20L501.293%2C59.609%20L493.461%2C46.259%20ZM469.164%2C5.230%20L448.249%2C40.652%20L490.079%2C40.652%20L469.164%2C5.230%20ZM398.231%2C59.609%20L391.111%2C59.609%20L391.111%2C34.689%20L356.668%2C0.246%20L366.369%2C0.246%20L394.671%2C28.815%20L422.884%2C0.246%20L432.674%2C0.246%20L398.231%2C34.689%20L398.231%2C59.609%20ZM352.396%2C59.609%20L344.564%2C46.259%20L295.970%2C46.259%20L288.138%2C59.609%20L280.217%2C59.609%20L315.194%2C0.246%20L325.251%2C0.246%20L360.228%2C59.609%20L352.396%2C59.609%20ZM320.267%2C5.230%20L299.352%2C40.652%20L341.182%2C40.652%20L320.267%2C5.230%20ZM266.511%2C31.841%20L210.886%2C31.841%20L210.886%2C59.609%20L203.766%2C59.609%20L203.766%2C0.246%20L210.886%2C0.246%20L210.886%2C26.234%20L266.511%2C26.234%20L266.511%2C0.246%20L273.631%2C0.246%20L273.631%2C59.609%20L266.511%2C59.609%20L266.511%2C31.841%20ZM157.753%2C0.246%20L164.873%2C0.246%20L164.873%2C59.609%20L157.753%2C59.609%20L157.753%2C0.246%20ZM84.862%2C0.246%20L143.958%2C0.246%20L143.958%2C6.209%20L91.982%2C6.209%20L91.982%2C26.056%20L142.089%2C26.056%20L142.089%2C31.663%20L91.982%2C31.663%20L91.982%2C53.646%20L144.403%2C53.646%20L144.403%2C59.609%20L84.862%2C59.609%20L84.862%2C0.246%20ZM68.397%2C44.212%20L68.397%2C59.609%20L61.277%2C59.609%20L61.277%2C48.306%20C61.455%2C38.071%2058.874%2C35.579%2048.550%2C35.668%20L7.788%2C35.668%20L7.788%2C59.609%20L0.668%2C59.609%20L0.668%2C0.246%20L49.618%2C0.246%20C58.607%2C0.246%2062.790%2C1.403%2065.905%2C4.785%20C68.308%2C7.455%2069.554%2C11.994%2069.554%2C18.402%20C69.554%2C28.014%2067.329%2C31.396%2060.031%2C33.087%20C66.083%2C34.244%2068.397%2C37.359%2068.397%2C44.212%20ZM62.167%2C18.046%20C62.167%2C8.612%2058.963%2C6.209%2046.414%2C6.209%20L7.788%2C6.209%20L7.788%2C30.061%20L46.859%2C30.061%20C59.052%2C30.061%2062.167%2C27.658%2062.167%2C18.046%20Z%22%2F%3E%3C%2Fsvg%3E")} .m-sig{--ar:5.3143; --mh:var(--sig-h); --src:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20558%20105%22%20fill%3D%22currentColor%22%20aria-hidden%3D%22true%22%20focusable%3D%22false%22%3E%3Cpath%20fill-rule%3D%22evenodd%22%20d%3D%22M557.763%2C102.889%20L556.097%2C102.889%20L509.700%2C64.705%20L463.301%2C102.889%20L461.637%2C102.889%20L508.812%2C64.039%20L465.854%2C28.630%20L467.520%2C28.630%20L509.700%2C63.373%20L551.880%2C28.630%20L553.544%2C28.630%20L510.477%2C64.039%20L557.763%2C102.889%20ZM401.471%2C104.539%20C366.221%2C104.539%20348.521%2C88.489%20348.521%2C52.639%20C348.521%2C16.789%20366.221%2C0.889%20401.471%2C0.889%20C436.572%2C0.889%20454.272%2C16.789%20454.272%2C52.639%20C454.272%2C88.489%20436.572%2C104.539%20401.471%2C104.539%20ZM401.471%2C2.239%20C367.271%2C2.239%20349.871%2C17.689%20349.871%2C52.639%20C349.871%2C87.589%20367.271%2C103.189%20401.471%2C103.189%20C435.522%2C103.189%20452.772%2C87.589%20452.772%2C52.639%20C452.772%2C17.689%20435.522%2C2.239%20401.471%2C2.239%20ZM332.922%2C3.889%20L327.971%2C3.889%20L310.271%2C28.639%20L308.471%2C28.639%20L327.221%2C2.539%20L334.422%2C2.539%20L334.422%2C102.889%20L332.922%2C102.889%20L332.922%2C3.889%20ZM296.921%2C3.889%20L291.971%2C3.889%20L274.271%2C28.639%20L272.471%2C28.639%20L291.221%2C2.539%20L298.421%2C2.539%20L298.421%2C102.889%20L296.921%2C102.889%20L296.921%2C3.889%20ZM260.922%2C3.889%20L255.971%2C3.889%20L238.271%2C28.639%20L236.471%2C28.639%20L255.221%2C2.539%20L262.422%2C2.539%20L262.422%2C102.889%20L260.922%2C102.889%20L260.922%2C3.889%20ZM197.171%2C102.889%20L152.471%2C102.889%20C129.821%2C102.889%20120.371%2C90.889%20120.371%2C76.339%20C120.371%2C61.339%20130.871%2C53.089%20139.871%2C51.289%20C132.071%2C49.789%20122.171%2C41.389%20122.171%2C28.789%20C122.171%2C12.139%20132.971%2C2.539%20151.571%2C2.539%20L198.071%2C2.539%20C216.522%2C2.539%20227.321%2C12.139%20227.321%2C28.789%20C227.321%2C41.389%20217.421%2C49.789%20209.771%2C51.289%20C218.771%2C53.089%20229.271%2C61.339%20229.271%2C76.339%20C229.271%2C90.889%20219.671%2C102.889%20197.171%2C102.889%20ZM225.971%2C28.789%20C225.971%2C13.039%20216.221%2C3.889%20198.071%2C3.889%20L151.571%2C3.889%20C133.421%2C3.889%20123.671%2C13.039%20123.671%2C28.789%20C123.671%2C40.939%20134.171%2C50.689%20144.521%2C50.689%20L205.121%2C50.689%20C215.471%2C50.689%20225.971%2C40.939%20225.971%2C28.789%20ZM205.121%2C52.039%20L144.521%2C52.039%20C132.971%2C52.039%20121.721%2C61.939%20121.721%2C76.339%20C121.721%2C89.539%20130.721%2C101.539%20152.471%2C101.539%20L197.171%2C101.539%20C218.921%2C101.539%20227.772%2C89.539%20227.772%2C76.339%20C227.772%2C61.939%20216.522%2C52.039%20205.121%2C52.039%20ZM77.021%2C102.889%20L32.321%2C102.889%20C9.671%2C102.889%200.221%2C90.889%200.221%2C76.339%20C0.221%2C61.339%2010.721%2C53.089%2019.721%2C51.289%20C11.921%2C49.789%202.021%2C41.389%202.021%2C28.789%20C2.021%2C12.139%2012.821%2C2.539%2031.421%2C2.539%20L77.921%2C2.539%20C96.371%2C2.539%20107.171%2C12.139%20107.171%2C28.789%20C107.171%2C41.389%2097.271%2C49.789%2089.621%2C51.289%20C98.621%2C53.089%20109.121%2C61.339%20109.121%2C76.339%20C109.121%2C90.889%2099.521%2C102.889%2077.021%2C102.889%20ZM105.821%2C28.789%20C105.821%2C13.039%2096.071%2C3.889%2077.921%2C3.889%20L31.421%2C3.889%20C13.271%2C3.889%203.521%2C13.039%203.521%2C28.789%20C3.521%2C40.939%2014.021%2C50.689%2024.371%2C50.689%20L84.971%2C50.689%20C95.321%2C50.689%20105.821%2C40.939%20105.821%2C28.789%20ZM84.971%2C52.039%20L24.371%2C52.039%20C12.821%2C52.039%201.571%2C61.939%201.571%2C76.339%20C1.571%2C89.539%2010.571%2C101.539%2032.321%2C101.539%20L77.021%2C101.539%20C98.771%2C101.539%20107.621%2C89.539%20107.621%2C76.339%20C107.621%2C61.939%2096.371%2C52.039%2084.971%2C52.039%20Z%22%2F%3E%3C%2Fsvg%3E")} .m-copy{--ar:14.5231; --mh:var(--copy-h); --src:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20944%2065%22%20fill%3D%22currentColor%22%20aria-hidden%3D%22true%22%20focusable%3D%22false%22%3E%3Cpath%20fill-rule%3D%22evenodd%22%20d%3D%22M935.819%2C62.609%20L927.987%2C49.259%20L879.393%2C49.259%20L871.561%2C62.609%20L863.640%2C62.609%20L898.617%2C3.246%20L908.674%2C3.246%20L943.651%2C62.609%20L935.819%2C62.609%20ZM903.690%2C8.230%20L882.775%2C43.652%20L924.605%2C43.652%20L903.690%2C8.230%20ZM829.197%2C62.609%20L804.455%2C10.188%20L779.624%2C62.609%20L770.902%2C62.609%20L742.867%2C3.246%20L750.699%2C3.246%20L775.352%2C56.112%20L800.361%2C3.246%20L808.727%2C3.246%20L833.736%2C56.112%20L858.478%2C3.246%20L865.954%2C3.246%20L837.919%2C62.609%20L829.197%2C62.609%20ZM737.438%2C62.609%20L729.606%2C49.259%20L681.012%2C49.259%20L673.180%2C62.609%20L668.819%2C62.609%20L665.259%2C62.609%20L656.893%2C62.609%20L615.597%2C34.752%20L605.006%2C34.752%20L605.006%2C62.609%20L597.886%2C62.609%20L597.886%2C3.246%20L605.006%2C3.246%20L605.006%2C29.145%20L615.775%2C29.145%20L654.579%2C3.246%20L666.594%2C3.246%20L623.251%2C31.993%20L666.268%2C60.896%20L700.236%2C3.246%20L710.293%2C3.246%20L745.270%2C62.609%20L737.438%2C62.609%20ZM705.309%2C8.230%20L684.394%2C43.652%20L726.224%2C43.652%20L705.309%2C8.230%20ZM575.725%2C49.259%20L527.131%2C49.259%20L519.299%2C62.609%20L511.378%2C62.609%20L546.355%2C3.246%20L556.412%2C3.246%20L591.389%2C62.609%20L583.557%2C62.609%20L575.725%2C49.259%20ZM551.428%2C8.230%20L530.513%2C43.652%20L572.343%2C43.652%20L551.428%2C8.230%20ZM480.495%2C62.609%20L473.375%2C62.609%20L473.375%2C37.689%20L438.932%2C3.246%20L448.633%2C3.246%20L476.935%2C31.815%20L505.148%2C3.246%20L514.938%2C3.246%20L480.495%2C37.689%20L480.495%2C62.609%20ZM434.660%2C62.609%20L426.828%2C49.259%20L378.234%2C49.259%20L370.402%2C62.609%20L362.481%2C62.609%20L397.458%2C3.246%20L407.515%2C3.246%20L442.492%2C62.609%20L434.660%2C62.609%20ZM402.531%2C8.230%20L381.616%2C43.652%20L423.446%2C43.652%20L402.531%2C8.230%20ZM348.775%2C34.841%20L293.150%2C34.841%20L293.150%2C62.609%20L286.030%2C62.609%20L286.030%2C3.246%20L293.150%2C3.246%20L293.150%2C29.234%20L348.775%2C29.234%20L348.775%2C3.246%20L355.895%2C3.246%20L355.895%2C62.609%20L348.775%2C62.609%20L348.775%2C34.841%20ZM240.017%2C3.246%20L247.137%2C3.246%20L247.137%2C62.609%20L240.017%2C62.609%20L240.017%2C3.246%20ZM167.126%2C3.246%20L226.222%2C3.246%20L226.222%2C9.209%20L174.246%2C9.209%20L174.246%2C29.056%20L224.353%2C29.056%20L224.353%2C34.663%20L174.246%2C34.663%20L174.246%2C56.646%20L226.667%2C56.646%20L226.667%2C62.609%20L167.126%2C62.609%20L167.126%2C3.246%20ZM150.661%2C47.212%20L150.661%2C62.609%20L143.541%2C62.609%20L143.541%2C51.306%20C143.719%2C41.071%20141.138%2C38.579%20130.814%2C38.668%20L90.052%2C38.668%20L90.052%2C62.609%20L82.932%2C62.609%20L82.932%2C3.246%20L131.882%2C3.246%20C140.871%2C3.246%20145.054%2C4.403%20148.169%2C7.785%20C150.572%2C10.455%20151.818%2C14.994%20151.818%2C21.402%20C151.818%2C31.014%20149.593%2C34.396%20142.295%2C36.087%20C148.347%2C37.244%20150.661%2C40.359%20150.661%2C47.212%20ZM144.431%2C21.046%20C144.431%2C11.612%20141.227%2C9.209%20128.678%2C9.209%20L90.052%2C9.209%20L90.052%2C33.061%20L129.123%2C33.061%20C141.316%2C33.061%20144.431%2C30.658%20144.431%2C21.046%20ZM34.249%2C64.923%20C20.543%2C64.923%2013.245%2C62.876%207.638%2C57.358%20C2.476%2C52.285%200.073%2C44.631%200.073%2C32.883%20C0.073%2C21.135%202.387%2C13.570%207.638%2C8.497%20C13.245%2C2.979%2020.543%2C0.932%2034.783%2C0.932%20C49.112%2C0.932%2056.143%2C2.890%2061.928%2C8.497%20C67.090%2C13.570%2069.493%2C21.224%2069.493%2C32.883%20C69.493%2C44.631%2067.090%2C52.285%2061.928%2C57.358%20C56.143%2C63.054%2049.112%2C64.923%2034.249%2C64.923%20ZM58.101%2C11.790%20C53.206%2C7.073%2046.976%2C5.293%2034.783%2C5.293%20C22.501%2C5.293%2016.360%2C6.984%2011.465%2C11.790%20C7.015%2C16.151%204.968%2C22.826%204.968%2C32.883%20C4.968%2C43.029%207.015%2C49.704%2011.465%2C54.065%20C16.271%2C58.782%2022.590%2C60.562%2034.338%2C60.562%20C47.065%2C60.562%2053.117%2C58.871%2058.101%2C54.065%20C62.551%2C49.704%2064.598%2C43.029%2064.598%2C32.883%20C64.598%2C22.826%2062.551%2C16.240%2058.101%2C11.790%20ZM35.050%2C51.128%20C22.234%2C51.128%2019.119%2C50.594%2016.449%2C47.835%20C14.135%2C45.432%2013.601%2C42.584%2013.601%2C32.972%20C13.601%2C23.271%2014.135%2C20.512%2016.449%2C18.109%20C19.297%2C15.172%2021.789%2C14.816%2037.631%2C14.816%20C47.154%2C14.816%2050.002%2C15.172%2052.316%2C16.863%20C54.808%2C18.554%2055.609%2C20.868%2055.698%2C26.742%20L50.981%2C26.742%20L50.981%2C25.674%20L50.981%2C25.051%20C50.892%2C19.711%2049.290%2C19.088%2035.228%2C19.088%20C18.585%2C19.088%2018.585%2C19.088%2018.585%2C32.972%20C18.585%2C46.856%2018.674%2C46.856%2034.338%2C46.856%20C49.824%2C46.856%2051.337%2C46.322%2051.337%2C40.715%20L51.337%2C38.401%20L55.965%2C38.401%20L55.965%2C40.181%20C55.965%2C45.966%2054.897%2C48.458%2051.515%2C49.882%20C49.468%2C50.772%2044.662%2C51.128%2035.050%2C51.128%20Z%22%2F%3E%3C%2Fsvg%3E")} .m-news{--ar:4.2745; --mh:var(--menu-h); --src:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20436%20102%22%20fill%3D%22currentColor%22%20aria-hidden%3D%22true%22%20focusable%3D%22false%22%3E%3Cpath%20fill-rule%3D%22evenodd%22%20d%3D%22M395.863%2C9.882%20C379.353%2C10.173%20367.962%2C16.157%20368.095%2C27.090%20C368.211%2C36.519%20375.961%2C41.220%20391.671%2C44.906%20L405.634%2C48.148%20C425.869%2C52.833%20435.232%2C59.705%20435.342%2C73.741%20C435.471%2C89.739%20419.875%2C99.791%20397.795%2C99.902%20L397.795%2C99.900%20C381.883%2C99.984%20365.752%2C95.636%20354.454%2C88.436%20L359.152%2C81.665%20C370.066%2C88.364%20384.598%2C92.163%20398.127%2C92.006%20C414.700%2C91.797%20426.442%2C85.278%20426.463%2C73.838%20C426.492%2C63.539%20419.331%2C59.688%20402.531%2C55.715%20L389.089%2C52.556%20C369.439%2C47.967%20359.065%2C40.599%20358.947%2C26.867%20C358.816%2C11.655%20373.926%2C2.208%20395.148%2C1.995%20C408.759%2C1.862%20422.056%2C5.927%20432.033%2C12.230%20L427.543%2C19.001%20C418.393%2C13.221%20407.299%2C9.704%20395.863%2C9.882%20ZM273.526%2C19.684%20L241.090%2C101.851%20L202.632%2C2.987%20L212.028%2C2.987%20L241.123%2C81.836%20L273.526%2C0.839%20L305.821%2C81.836%20L335.469%2C2.987%20L344.745%2C2.987%20L305.854%2C101.851%20L273.526%2C19.684%20ZM116.995%2C2.938%20L191.125%2C2.938%20L191.125%2C10.787%20L125.592%2C10.787%20L125.592%2C43.074%20L174.456%2C43.108%20L174.456%2C50.840%20L125.592%2C50.840%20L125.592%2C90.978%20L191.167%2C90.978%20L191.167%2C98.937%20L116.995%2C98.937%20L116.995%2C2.938%20ZM8.935%2C15.188%20L8.935%2C98.947%20L0.295%2C98.947%20L0.295%2C2.969%20L9.036%2C2.969%20L78.697%2C86.918%20L78.697%2C2.938%20L87.295%2C2.938%20L87.295%2C98.947%20L78.493%2C98.947%20L8.935%2C15.188%20Z%22%2F%3E%3C%2Fsvg%3E")} .m-bio{--ar:8.6667; --mh:var(--menu-h); --src:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20884%20102%22%20fill%3D%22currentColor%22%20aria-hidden%3D%22true%22%20focusable%3D%22false%22%3E%3Cpath%20fill-rule%3D%22evenodd%22%20d%3D%22M839.856%2C56.283%20L839.856%2C99.895%20L831.151%2C99.895%20L831.151%2C56.283%20L787.795%2C3.938%20L798.328%2C3.938%20L835.551%2C48.246%20L872.676%2C3.938%20L883.191%2C3.938%20L839.856%2C56.283%20ZM763.860%2C52.101%20L697.585%2C52.101%20L697.585%2C99.937%20L688.945%2C99.937%20L688.945%2C3.938%20L697.585%2C3.938%20L697.585%2C44.121%20L763.945%2C44.121%20L763.945%2C3.938%20L772.585%2C3.938%20L772.585%2C99.937%20L763.945%2C99.937%20L763.860%2C52.101%20ZM631.591%2C63.333%20L596.785%2C63.333%20L596.785%2C99.937%20L588.145%2C99.937%20L588.145%2C3.938%20L631.164%2C3.938%20C650.856%2C3.938%20664.873%2C14.697%20664.873%2C33.751%20C664.873%2C53.215%20651.325%2C63.333%20631.591%2C63.333%20ZM631.230%2C11.865%20L596.785%2C11.865%20L596.785%2C55.560%20L631.230%2C55.560%20C645.916%2C55.560%20655.987%2C48.103%20655.987%2C33.751%20C655.987%2C19.688%20645.916%2C11.865%20631.230%2C11.865%20ZM551.176%2C76.037%20L488.929%2C76.037%20L476.092%2C100.124%20L466.495%2C100.126%20L520.254%2C0.433%20L573.063%2C100.116%20L563.695%2C100.116%20L551.176%2C76.037%20ZM520.168%2C16.965%20L492.793%2C68.694%20L547.291%2C68.694%20L520.168%2C16.965%20ZM443.503%2C99.937%20L387.685%2C55.790%20L387.685%2C99.937%20L379.045%2C99.937%20L379.045%2C3.938%20L423.043%2C3.938%20C442.735%2C3.938%20456.807%2C13.164%20456.807%2C31.206%20C456.807%2C49.627%20443.365%2C58.404%20423.631%2C58.404%20L403.519%2C58.404%20L457.096%2C99.937%20L443.503%2C99.937%20ZM423.642%2C50.485%20C437.796%2C50.485%20447.922%2C44.598%20447.922%2C31.206%20C447.922%2C18.081%20437.796%2C11.854%20423.642%2C11.854%20L387.685%2C11.854%20L387.685%2C50.485%20L423.642%2C50.485%20ZM309.792%2C101.586%20C280.273%2C101.586%20258.595%2C79.337%20258.595%2C52.076%20C258.595%2C24.622%20279.886%2C2.319%20309.405%2C2.319%20C325.693%2C2.319%20339.351%2C8.557%20348.840%2C18.435%20L342.276%2C23.745%20C334.320%2C15.514%20322.890%2C10.470%20309.385%2C10.470%20C284.908%2C10.470%20267.181%2C28.948%20267.181%2C52.062%20C267.181%2C74.982%20285.295%2C93.460%20309.772%2C93.460%20C321.421%2C93.460%20334.617%2C88.810%20344.553%2C77.402%20L344.553%2C51.094%20L353.193%2C51.094%20L353.193%2C80.273%20C343.323%2C92.946%20327.651%2C101.586%20309.792%2C101.586%20ZM188.592%2C101.682%20C159.073%2C101.682%20137.395%2C79.380%20137.395%2C52.023%20C137.395%2C24.473%20159.073%2C2.223%20188.592%2C2.223%20C218.305%2C2.223%20239.983%2C24.473%20239.983%2C52.023%20C239.983%2C79.380%20218.305%2C101.682%20188.592%2C101.682%20ZM188.572%2C10.347%20C164.193%2C10.347%20145.981%2C28.826%20145.981%2C52.036%20C145.981%2C75.054%20164.193%2C93.533%20188.572%2C93.533%20C213.145%2C93.533%20231.357%2C75.054%20231.357%2C52.036%20C231.357%2C28.826%20213.145%2C10.347%20188.572%2C10.347%20ZM104.545%2C3.938%20L113.185%2C3.938%20L113.185%2C99.937%20L104.545%2C99.937%20L104.545%2C3.938%20ZM50.865%2C99.937%20L0.295%2C99.937%20L0.295%2C3.938%20L46.473%2C3.938%20C65.778%2C3.938%2076.005%2C11.881%2076.005%2C27.231%20C76.005%2C38.398%2069.205%2C45.192%2059.955%2C47.586%20C72.465%2C49.666%2080.667%2C58.767%2080.667%2C73.128%20C80.667%2C91.152%2070.318%2C99.937%2050.865%2C99.937%20ZM67.483%2C28.134%20C67.483%2C17.001%2060.453%2C11.787%2046.258%2C11.787%20L8.679%2C11.787%20L8.679%2C44.092%20L47.010%2C44.092%20C59.595%2C44.092%2067.483%2C38.023%2067.483%2C28.134%20ZM48.672%2C51.840%20L8.679%2C51.840%20L8.679%2C91.977%20L50.608%2C91.977%20C64.801%2C91.977%2072.190%2C85.336%2072.198%2C71.984%20C72.240%2C59.433%2064.320%2C51.840%2048.672%2C51.840%20Z%22%2F%3E%3C%2Fsvg%3E")} .m-works{--ar:5.4020; --mh:var(--menu-h); --src:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20551%20102%22%20fill%3D%22currentColor%22%20aria-hidden%3D%22true%22%20focusable%3D%22false%22%3E%3Cpath%20fill-rule%3D%22evenodd%22%20d%3D%22M510.863%2C9.882%20C494.353%2C10.173%20482.962%2C16.157%20483.095%2C27.090%20C483.211%2C36.519%20490.961%2C41.220%20506.671%2C44.906%20L520.634%2C48.148%20C540.869%2C52.833%20550.232%2C59.705%20550.342%2C73.741%20C550.471%2C89.739%20534.875%2C99.791%20512.795%2C99.902%20L512.795%2C99.900%20C496.883%2C99.984%20480.752%2C95.636%20469.454%2C88.436%20L474.152%2C81.665%20C485.066%2C88.364%20499.598%2C92.163%20513.127%2C92.006%20C529.700%2C91.797%20541.442%2C85.278%20541.463%2C73.838%20C541.492%2C63.539%20534.331%2C59.688%20517.531%2C55.715%20L504.089%2C52.556%20C484.439%2C47.967%20474.065%2C40.599%20473.947%2C26.867%20C473.816%2C11.655%20488.926%2C2.208%20510.148%2C1.995%20C523.759%2C1.862%20537.056%2C5.927%20547.033%2C12.230%20L542.543%2C19.001%20C533.393%2C13.221%20522.299%2C9.704%20510.863%2C9.882%20ZM451.670%2C98.937%20L391.685%2C47.798%20L391.685%2C98.937%20L383.045%2C98.937%20L383.045%2C2.938%20L391.685%2C2.938%20L391.685%2C44.566%20L443.677%2C2.938%20L456.700%2C2.938%20L401.951%2C46.184%20L464.600%2C98.937%20L451.670%2C98.937%20ZM345.503%2C98.937%20L289.685%2C54.790%20L289.685%2C98.937%20L281.045%2C98.937%20L281.045%2C2.938%20L325.043%2C2.938%20C344.735%2C2.938%20358.807%2C12.164%20358.807%2C30.206%20C358.807%2C48.627%20345.365%2C57.404%20325.631%2C57.404%20L305.519%2C57.404%20L359.096%2C98.937%20L345.503%2C98.937%20ZM325.642%2C49.485%20C339.796%2C49.485%20349.922%2C43.598%20349.922%2C30.206%20C349.922%2C17.081%20339.796%2C10.854%20325.642%2C10.854%20L289.685%2C10.854%20L289.685%2C49.485%20L325.642%2C49.485%20ZM205.492%2C100.682%20C175.973%2C100.682%20154.295%2C78.380%20154.295%2C51.023%20C154.295%2C23.473%20175.973%2C1.223%20205.492%2C1.223%20C235.205%2C1.223%20256.883%2C23.473%20256.883%2C51.023%20C256.883%2C78.380%20235.205%2C100.682%20205.492%2C100.682%20ZM205.472%2C9.347%20C181.093%2C9.347%20162.881%2C27.826%20162.881%2C51.037%20C162.881%2C74.054%20181.093%2C92.533%20205.472%2C92.533%20C230.045%2C92.533%20248.257%2C74.054%20248.257%2C51.037%20C248.257%2C27.826%20230.045%2C9.347%20205.472%2C9.347%20ZM71.576%2C19.684%20L39.140%2C101.851%20L0.682%2C2.987%20L10.078%2C2.987%20L39.173%2C81.836%20L71.576%2C0.839%20L103.871%2C81.836%20L133.519%2C2.987%20L142.795%2C2.987%20L103.904%2C101.851%20L71.576%2C19.684%20Z%22%2F%3E%3C%2Fsvg%3E")} .m-shop{--ar:4.1700; --mh:var(--menu-h); --src:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20417%20100%22%20fill%3D%22currentColor%22%20aria-hidden%3D%22true%22%20focusable%3D%22false%22%3E%3Cpath%20fill-rule%3D%22evenodd%22%20d%3D%22M382.799%2C61.255%20L347.993%2C61.255%20L347.993%2C97.859%20L339.353%2C97.859%20L339.353%2C1.859%20L382.372%2C1.859%20C402.064%2C1.859%20416.081%2C12.619%20416.081%2C31.673%20C416.081%2C51.137%20402.533%2C61.255%20382.799%2C61.255%20ZM382.438%2C9.787%20L347.993%2C9.787%20L347.993%2C53.482%20L382.438%2C53.482%20C397.124%2C53.482%20407.195%2C46.025%20407.195%2C31.673%20C407.195%2C17.609%20397.124%2C9.787%20382.438%2C9.787%20ZM263.800%2C99.604%20C234.281%2C99.604%20212.603%2C77.302%20212.603%2C49.945%20C212.603%2C22.394%20234.281%2C0.145%20263.800%2C0.145%20C293.513%2C0.145%20315.191%2C22.394%20315.191%2C49.945%20C315.191%2C77.302%20293.513%2C99.604%20263.800%2C99.604%20ZM263.780%2C8.269%20C239.401%2C8.269%20221.189%2C26.747%20221.189%2C49.958%20C221.189%2C72.976%20239.401%2C91.454%20263.780%2C91.454%20C288.353%2C91.454%20306.565%2C72.976%20306.565%2C49.958%20C306.565%2C26.747%20288.353%2C8.269%20263.780%2C8.269%20ZM179.668%2C50.023%20L113.393%2C50.023%20L113.393%2C97.859%20L104.753%2C97.859%20L104.753%2C1.859%20L113.393%2C1.859%20L113.393%2C42.043%20L179.753%2C42.043%20L179.753%2C1.859%20L188.393%2C1.859%20L188.393%2C97.859%20L179.753%2C97.859%20L179.668%2C50.023%20ZM52.142%2C47.069%20C72.377%2C51.755%2081.740%2C58.627%2081.850%2C72.662%20C81.979%2C88.661%2066.383%2C98.713%2044.303%2C98.824%20L44.303%2C98.822%20C28.391%2C98.906%2012.260%2C94.558%200.962%2C87.358%20L5.660%2C80.587%20C16.574%2C87.286%2031.106%2C91.085%2044.635%2C90.928%20C61.208%2C90.719%2072.950%2C84.200%2072.971%2C72.760%20C72.1000%2C62.461%2065.839%2C58.610%2049.039%2C54.637%20L35.597%2C51.478%20C15.947%2C46.889%205.573%2C39.521%205.455%2C25.789%20C5.324%2C10.577%2020.434%2C1.130%2041.656%2C0.917%20C55.267%2C0.784%2068.564%2C4.849%2078.541%2C11.152%20L74.051%2C17.923%20C64.901%2C12.143%2053.807%2C8.626%2042.371%2C8.804%20C25.861%2C9.095%2014.470%2C15.079%2014.603%2C26.012%20C14.719%2C35.441%2022.469%2C40.142%2038.179%2C43.828%20L52.142%2C47.069%20Z%22%2F%3E%3C%2Fsvg%3E")} .m-contact{--ar:7.0882; --mh:var(--menu-h); --src:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20723%20102%22%20fill%3D%22currentColor%22%20aria-hidden%3D%22true%22%20focusable%3D%22false%22%3E%3Cpath%20fill-rule%3D%22evenodd%22%20d%3D%22M685.809%2C11.894%20L685.809%2C99.937%20L677.190%2C99.937%20L677.190%2C11.894%20L640.620%2C11.894%20L640.576%2C3.938%20L722.272%2C3.938%20L722.272%2C11.894%20L685.809%2C11.894%20ZM591.288%2C93.173%20C603.873%2C93.173%20614.562%2C88.920%20623.862%2C80.088%20L630.507%2C85.206%20C619.516%2C95.895%20606.586%2C101.295%20591.309%2C101.295%20L591.309%2C101.297%20C562.371%2C101.297%20540.595%2C79.725%20540.595%2C51.883%20C540.595%2C24.237%20562.467%2C2.612%20591.309%2C2.612%20C605.974%2C2.612%20619.518%2C8.049%20630.024%2C18.432%20L623.425%2C23.745%20C614.410%2C15.039%20603.288%2C10.762%20591.288%2C10.762%20C567.393%2C10.762%20549.181%2C28.465%20549.181%2C51.870%20C549.181%2C75.468%20567.393%2C93.173%20591.288%2C93.173%20ZM509.176%2C76.037%20L446.929%2C76.037%20L434.092%2C100.124%20L424.495%2C100.126%20L478.254%2C0.433%20L531.063%2C100.116%20L521.695%2C100.116%20L509.176%2C76.037%20ZM478.168%2C16.965%20L450.793%2C68.694%20L505.291%2C68.694%20L478.168%2C16.965%20ZM383.859%2C99.937%20L375.240%2C99.937%20L375.240%2C11.894%20L338.670%2C11.894%20L338.626%2C3.938%20L420.322%2C3.938%20L420.322%2C11.894%20L383.859%2C11.894%20L383.859%2C99.937%20ZM241.585%2C16.188%20L241.585%2C99.947%20L232.945%2C99.947%20L232.945%2C3.969%20L241.686%2C3.969%20L311.347%2C87.918%20L311.347%2C3.938%20L319.945%2C3.938%20L319.945%2C99.947%20L311.143%2C99.947%20L241.585%2C16.188%20ZM157.392%2C101.682%20C127.873%2C101.682%20106.195%2C79.380%20106.195%2C52.023%20C106.195%2C24.473%20127.873%2C2.223%20157.392%2C2.223%20C187.105%2C2.223%20208.783%2C24.473%20208.783%2C52.023%20C208.783%2C79.380%20187.105%2C101.682%20157.392%2C101.682%20ZM157.372%2C10.347%20C132.993%2C10.347%20114.781%2C28.826%20114.781%2C52.036%20C114.781%2C75.054%20132.993%2C93.533%20157.372%2C93.533%20C181.945%2C93.533%20200.157%2C75.054%20200.157%2C52.036%20C200.157%2C28.826%20181.945%2C10.347%20157.372%2C10.347%20ZM51.438%2C93.173%20C64.023%2C93.173%2074.712%2C88.920%2084.012%2C80.088%20L90.657%2C85.206%20C79.666%2C95.895%2066.736%2C101.295%2051.459%2C101.295%20L51.459%2C101.297%20C22.521%2C101.297%200.745%2C79.725%200.745%2C51.883%20C0.745%2C24.237%2022.617%2C2.612%2051.459%2C2.612%20C66.124%2C2.612%2079.668%2C8.049%2090.174%2C18.432%20L83.575%2C23.745%20C74.560%2C15.039%2063.438%2C10.762%2051.438%2C10.762%20C27.543%2C10.762%209.331%2C28.465%209.331%2C51.870%20C9.331%2C75.468%2027.543%2C93.173%2051.438%2C93.173%20Z%22%2F%3E%3C%2Fsvg%3E")} .m-films{--ar:4.3030; --mh:var(--menu-h); --src:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20426%2099%22%20fill%3D%22currentColor%22%20aria-hidden%3D%22true%22%20focusable%3D%22false%22%3E%3Cpath%20fill-rule%3D%22evenodd%22%20d%3D%22M386.263%2C7.882%20C369.753%2C8.173%20358.362%2C14.157%20358.495%2C25.090%20C358.611%2C34.519%20366.361%2C39.220%20382.071%2C42.906%20L396.034%2C46.148%20C416.269%2C50.833%20425.632%2C57.705%20425.742%2C71.741%20C425.871%2C87.739%20410.275%2C97.791%20388.195%2C97.902%20L388.195%2C97.900%20C372.283%2C97.984%20356.152%2C93.636%20344.854%2C86.436%20L349.552%2C79.665%20C360.466%2C86.364%20374.998%2C90.163%20388.527%2C90.006%20C405.100%2C89.797%20416.842%2C83.278%20416.863%2C71.838%20C416.892%2C61.539%20409.731%2C57.688%20392.931%2C53.715%20L379.489%2C50.556%20C359.839%2C45.967%20349.465%2C38.599%20349.347%2C24.867%20C349.216%2C9.655%20364.326%2C0.208%20385.548%2C-0.005%20C399.159%2C-0.138%20412.456%2C3.927%20422.433%2C10.230%20L417.943%2C17.001%20C408.793%2C11.221%20397.699%2C7.704%20386.263%2C7.882%20ZM313.933%2C17.925%20L270.630%2C98.799%20L227.292%2C17.848%20L227.292%2C96.937%20L218.695%2C96.937%20L218.695%2C0.960%20L227.310%2C0.960%20L270.544%2C82.391%20L314.109%2C0.951%20L322.530%2C0.951%20L322.530%2C96.928%20L313.933%2C96.928%20L313.933%2C17.925%20ZM130.945%2C0.937%20L139.585%2C0.937%20L139.542%2C88.981%20L199.099%2C88.981%20L199.099%2C96.937%20L130.945%2C96.937%20L130.945%2C0.937%20ZM92.545%2C0.937%20L101.185%2C0.937%20L101.185%2C96.937%20L92.545%2C96.937%20L92.545%2C0.937%20ZM8.892%2C41.074%20L54.549%2C41.108%20L54.549%2C48.840%20L8.892%2C48.840%20L8.892%2C96.937%20L0.295%2C96.937%20L0.295%2C0.937%20L71.470%2C0.937%20L71.470%2C8.883%20L8.892%2C8.883%20L8.892%2C41.074%20Z%22%2F%3E%3C%2Fsvg%3E")} .m-youtube{--ar:7.2600; --mh:var(--menu-h); --src:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20726%20100%22%20fill%3D%22currentColor%22%20aria-hidden%3D%22true%22%20focusable%3D%22false%22%3E%3Cpath%20fill-rule%3D%22evenodd%22%20d%3D%22M725.417%2C89.978%20L725.417%2C97.937%20L651.245%2C97.937%20L651.245%2C1.937%20L725.375%2C1.937%20L725.375%2C9.787%20L659.842%2C9.787%20L659.842%2C42.074%20L708.706%2C42.108%20L708.706%2C49.840%20L659.842%2C49.840%20L659.842%2C89.978%20L725.417%2C89.978%20ZM597.565%2C97.937%20L546.995%2C97.937%20L546.995%2C1.937%20L593.173%2C1.937%20C612.478%2C1.937%20622.705%2C9.881%20622.705%2C25.231%20C622.705%2C36.398%20615.905%2C43.192%20606.655%2C45.586%20C619.165%2C47.666%20627.367%2C56.767%20627.367%2C71.128%20C627.367%2C89.152%20617.018%2C97.937%20597.565%2C97.937%20ZM614.183%2C26.134%20C614.183%2C15.001%20607.153%2C9.787%20592.958%2C9.787%20L555.379%2C9.787%20L555.379%2C42.092%20L593.710%2C42.092%20C606.295%2C42.092%20614.183%2C36.023%20614.183%2C26.134%20ZM595.372%2C49.840%20L555.379%2C49.840%20L555.379%2C89.977%20L597.308%2C89.977%20C611.501%2C89.977%20618.890%2C83.336%20618.898%2C69.984%20C618.940%2C57.433%20611.020%2C49.840%20595.372%2C49.840%20ZM475.799%2C98.966%20C447.022%2C98.966%20432.545%2C81.953%20432.545%2C52.705%20L432.545%2C1.937%20L441.292%2C1.937%20L441.292%2C52.705%20C441.292%2C77.464%20452.540%2C90.881%20475.799%2C90.881%20C499.100%2C90.881%20510.305%2C77.464%20510.305%2C52.747%20L510.305%2C1.937%20L519.139%2C1.937%20L519.139%2C52.747%20C519.139%2C81.803%20504.533%2C98.966%20475.799%2C98.966%20ZM379.159%2C97.937%20L370.540%2C97.937%20L370.540%2C9.894%20L333.970%2C9.894%20L333.926%2C1.937%20L415.622%2C1.937%20L415.622%2C9.894%20L379.159%2C9.894%20L379.159%2C97.937%20ZM273.749%2C98.966%20C244.972%2C98.966%20230.495%2C81.953%20230.495%2C52.705%20L230.495%2C1.937%20L239.242%2C1.937%20L239.242%2C52.705%20C239.242%2C77.464%20250.490%2C90.881%20273.749%2C90.881%20C297.050%2C90.881%20308.255%2C77.464%20308.255%2C52.747%20L308.255%2C1.937%20L317.089%2C1.937%20L317.089%2C52.747%20C317.089%2C81.803%20302.483%2C98.966%20273.749%2C98.966%20ZM156.742%2C99.682%20C127.223%2C99.682%20105.545%2C77.380%20105.545%2C50.023%20C105.545%2C22.473%20127.223%2C0.223%20156.742%2C0.223%20C186.455%2C0.223%20208.133%2C22.473%20208.133%2C50.023%20C208.133%2C77.380%20186.455%2C99.682%20156.742%2C99.682%20ZM156.722%2C8.347%20C132.343%2C8.347%20114.131%2C26.826%20114.131%2C50.037%20C114.131%2C73.054%20132.343%2C91.533%20156.722%2C91.533%20C181.295%2C91.533%20199.507%2C73.054%20199.507%2C50.037%20C199.507%2C26.826%20181.295%2C8.347%20156.722%2C8.347%20ZM52.606%2C97.895%20L43.901%2C97.895%20L43.901%2C54.283%20L0.545%2C1.937%20L11.078%2C1.937%20L48.301%2C46.246%20L85.426%2C1.937%20L95.941%2C1.937%20L52.606%2C54.283%20L52.606%2C97.895%20Z%22%2F%3E%3C%2Fsvg%3E")} .m-photo{--ar:5.2300; --mh:var(--menu-h); --src:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20523%20100%22%20fill%3D%22currentColor%22%20aria-hidden%3D%22true%22%20focusable%3D%22false%22%3E%3Cpath%20fill-rule%3D%22evenodd%22%20d%3D%22M470.742%2C99.682%20C441.223%2C99.682%20419.545%2C77.380%20419.545%2C50.023%20C419.545%2C22.473%20441.223%2C0.223%20470.742%2C0.223%20C500.455%2C0.223%20522.133%2C22.473%20522.133%2C50.023%20C522.133%2C77.380%20500.455%2C99.682%20470.742%2C99.682%20ZM470.722%2C8.347%20C446.343%2C8.347%20428.131%2C26.826%20428.131%2C50.037%20C428.131%2C73.054%20446.343%2C91.533%20470.722%2C91.533%20C495.295%2C91.533%20513.507%2C73.054%20513.507%2C50.037%20C513.507%2C26.826%20495.295%2C8.347%20470.722%2C8.347%20ZM369.909%2C97.937%20L361.290%2C97.937%20L361.290%2C9.894%20L324.720%2C9.894%20L324.676%2C1.937%20L406.372%2C1.937%20L406.372%2C9.894%20L369.909%2C9.894%20L369.909%2C97.937%20ZM260.142%2C99.682%20C230.623%2C99.682%20208.945%2C77.380%20208.945%2C50.023%20C208.945%2C22.473%20230.623%2C0.223%20260.142%2C0.223%20C289.855%2C0.223%20311.533%2C22.473%20311.533%2C50.023%20C311.533%2C77.380%20289.855%2C99.682%20260.142%2C99.682%20ZM260.122%2C8.347%20C235.743%2C8.347%20217.531%2C26.826%20217.531%2C50.037%20C217.531%2C73.054%20235.743%2C91.533%20260.122%2C91.533%20C284.695%2C91.533%20302.907%2C73.054%20302.907%2C50.037%20C302.907%2C26.826%20284.695%2C8.347%20260.122%2C8.347%20ZM176.010%2C50.101%20L109.735%2C50.101%20L109.735%2C97.937%20L101.095%2C97.937%20L101.095%2C1.937%20L109.735%2C1.937%20L109.735%2C42.121%20L176.095%2C42.121%20L176.095%2C1.937%20L184.735%2C1.937%20L184.735%2C97.937%20L176.095%2C97.937%20L176.010%2C50.101%20ZM43.741%2C61.333%20L8.935%2C61.333%20L8.935%2C97.937%20L0.295%2C97.937%20L0.295%2C1.937%20L43.314%2C1.937%20C63.006%2C1.937%2077.023%2C12.697%2077.023%2C31.751%20C77.023%2C51.215%2063.475%2C61.333%2043.741%2C61.333%20ZM43.380%2C9.865%20L8.935%2C9.865%20L8.935%2C53.560%20L43.380%2C53.560%20C58.066%2C53.560%2068.137%2C46.103%2068.137%2C31.751%20C68.137%2C17.688%2058.066%2C9.865%2043.380%2C9.865%20Z%22%2F%3E%3C%2Fsvg%3E")} .m-en{--ar:1.8878; --mh:var(--lang-h); --src:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%22-1%200%20185%2098%22%20fill%3D%22currentColor%22%20aria-hidden%3D%22true%22%20focusable%3D%22false%22%3E%3Cpath%20fill-rule%3D%22evenodd%22%20d%3D%22M465.369%2C57.975%20L425.545%2C57.975%20L425.545%2C96.937%20L423.145%2C96.937%20L423.145%2C0.938%20L465.331%2C0.938%20C483.754%2C0.938%20497.847%2C10.677%20497.847%2C29.623%20C497.847%2C49.077%20483.795%2C57.975%20465.369%2C57.975%20ZM465.337%2C3.401%20L425.545%2C3.401%20L425.545%2C55.681%20L465.337%2C55.681%20C482.637%2C55.681%20495.288%2C47.215%20495.288%2C29.623%20C495.288%2C12.370%20482.637%2C3.401%20465.337%2C3.401%20ZM363.432%2C97.842%20C348.219%2C97.834%20336.007%2C89.441%20331.930%2C74.943%20L334.138%2C74.314%20C337.987%2C87.532%20349.635%2C95.498%20363.394%2C95.498%20C383.176%2C95.498%20391.636%2C83.340%20391.636%2C58.110%20L391.636%2C0.938%20L394.048%2C0.938%20L394.051%2C58.086%20C394.054%2C85.112%20384.894%2C97.849%20363.432%2C97.842%20ZM242.845%2C96.866%20L279.435%2C0.972%20L281.722%2C0.972%20L245.145%2C96.866%20L242.845%2C96.866%20ZM100.195%2C4.339%20L100.195%2C96.951%20L97.795%2C96.951%20L97.795%2C0.985%20L100.453%2C0.985%20L180.619%2C93.831%20L180.619%2C0.938%20L183.016%2C0.938%20L183.016%2C96.951%20L180.159%2C96.951%20L100.195%2C4.339%20ZM-0.005%2C0.938%20L72.448%2C0.938%20L72.448%2C3.132%20L2.391%2C3.132%20L2.391%2C43.185%20L55.605%2C43.188%20L55.605%2C45.508%20L2.391%2C45.508%20L2.391%2C94.598%20L72.451%2C94.598%20L72.451%2C96.937%20L-0.005%2C96.937%20L-0.005%2C0.938%20Z%22%2F%3E%3C%2Fsvg%3E")} .m-sep{--ar:0.4082; --mh:var(--lang-h); --src:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%22242%200%2040%2098%22%20fill%3D%22currentColor%22%20aria-hidden%3D%22true%22%20focusable%3D%22false%22%3E%3Cpath%20fill-rule%3D%22evenodd%22%20d%3D%22M465.369%2C57.975%20L425.545%2C57.975%20L425.545%2C96.937%20L423.145%2C96.937%20L423.145%2C0.938%20L465.331%2C0.938%20C483.754%2C0.938%20497.847%2C10.677%20497.847%2C29.623%20C497.847%2C49.077%20483.795%2C57.975%20465.369%2C57.975%20ZM465.337%2C3.401%20L425.545%2C3.401%20L425.545%2C55.681%20L465.337%2C55.681%20C482.637%2C55.681%20495.288%2C47.215%20495.288%2C29.623%20C495.288%2C12.370%20482.637%2C3.401%20465.337%2C3.401%20ZM363.432%2C97.842%20C348.219%2C97.834%20336.007%2C89.441%20331.930%2C74.943%20L334.138%2C74.314%20C337.987%2C87.532%20349.635%2C95.498%20363.394%2C95.498%20C383.176%2C95.498%20391.636%2C83.340%20391.636%2C58.110%20L391.636%2C0.938%20L394.048%2C0.938%20L394.051%2C58.086%20C394.054%2C85.112%20384.894%2C97.849%20363.432%2C97.842%20ZM242.845%2C96.866%20L279.435%2C0.972%20L281.722%2C0.972%20L245.145%2C96.866%20L242.845%2C96.866%20ZM100.195%2C4.339%20L100.195%2C96.951%20L97.795%2C96.951%20L97.795%2C0.985%20L100.453%2C0.985%20L180.619%2C93.831%20L180.619%2C0.938%20L183.016%2C0.938%20L183.016%2C96.951%20L180.159%2C96.951%20L100.195%2C4.339%20ZM-0.005%2C0.938%20L72.448%2C0.938%20L72.448%2C3.132%20L2.391%2C3.132%20L2.391%2C43.185%20L55.605%2C43.188%20L55.605%2C45.508%20L2.391%2C45.508%20L2.391%2C94.598%20L72.451%2C94.598%20L72.451%2C96.937%20L-0.005%2C96.937%20L-0.005%2C0.938%20Z%22%2F%3E%3C%2Fsvg%3E")} .m-jp{--ar:1.7041; --mh:var(--lang-h); --src:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%22331%200%20167%2098%22%20fill%3D%22currentColor%22%20aria-hidden%3D%22true%22%20focusable%3D%22false%22%3E%3Cpath%20fill-rule%3D%22evenodd%22%20d%3D%22M465.369%2C57.975%20L425.545%2C57.975%20L425.545%2C96.937%20L423.145%2C96.937%20L423.145%2C0.938%20L465.331%2C0.938%20C483.754%2C0.938%20497.847%2C10.677%20497.847%2C29.623%20C497.847%2C49.077%20483.795%2C57.975%20465.369%2C57.975%20ZM465.337%2C3.401%20L425.545%2C3.401%20L425.545%2C55.681%20L465.337%2C55.681%20C482.637%2C55.681%20495.288%2C47.215%20495.288%2C29.623%20C495.288%2C12.370%20482.637%2C3.401%20465.337%2C3.401%20ZM363.432%2C97.842%20C348.219%2C97.834%20336.007%2C89.441%20331.930%2C74.943%20L334.138%2C74.314%20C337.987%2C87.532%20349.635%2C95.498%20363.394%2C95.498%20C383.176%2C95.498%20391.636%2C83.340%20391.636%2C58.110%20L391.636%2C0.938%20L394.048%2C0.938%20L394.051%2C58.086%20C394.054%2C85.112%20384.894%2C97.849%20363.432%2C97.842%20ZM242.845%2C96.866%20L279.435%2C0.972%20L281.722%2C0.972%20L245.145%2C96.866%20L242.845%2C96.866%20ZM100.195%2C4.339%20L100.195%2C96.951%20L97.795%2C96.951%20L97.795%2C0.985%20L100.453%2C0.985%20L180.619%2C93.831%20L180.619%2C0.938%20L183.016%2C0.938%20L183.016%2C96.951%20L180.159%2C96.951%20L100.195%2C4.339%20ZM-0.005%2C0.938%20L72.448%2C0.938%20L72.448%2C3.132%20L2.391%2C3.132%20L2.391%2C43.185%20L55.605%2C43.188%20L55.605%2C45.508%20L2.391%2C45.508%20L2.391%2C94.598%20L72.451%2C94.598%20L72.451%2C96.937%20L-0.005%2C96.937%20L-0.005%2C0.938%20Z%22%2F%3E%3C%2Fsvg%3E")} /* <<< SVG埋め込みここまで */ /* ---------- 4. 左カラム（PC） ---------- */ /* DOM順は header.head → nav.side → main → .side-foot PCでは3つとも position:fixed で左カラムに置き、 モバイルでは .side だけをオーバーレイ、.side-foot は本文末尾に流す。 */ .head{position:fixed; top:5.46dvh; left:var(--gutter); z-index:30} .brand{display:block; color:var(--logo-ink)} .brand:hover{color:#fff} .burger{display:none} .side{ position:fixed; inset:0 auto 0 0; width:var(--col-w); padding-left:var(--gutter); z-index:20; pointer-events:none; /* 空きスペースは下のクリックを邪魔しない */ } .side > *{pointer-events:auto} .nav{position:absolute; top:15.74dvh; left:var(--gutter)} .nav li + li{margin-top:calc(var(--menu-pitch) - var(--menu-h))} .nav a{display:block; width:max-content; color:rgb(var(--fg) / var(--o-body))} .nav a:hover, .nav a:focus-visible, .nav a[aria-current="page"]{color:rgb(var(--fg) / var(--o-strong))} .lang{position:absolute; top:35.65dvh; left:var(--gutter); display:flex; align-items:center; gap:calc(var(--lang-h) * .56)} .lang a{display:block; color:rgb(var(--fg) / .5)} .lang a:hover{color:rgb(var(--fg) / 1)} .lang a[aria-current="true"]{color:rgb(var(--fg) / 1)} .lang .m-sep{color:rgb(var(--fg) / .35)} .side-foot{position:fixed; left:var(--gutter); bottom:4.72dvh; z-index:20; display:flex; flex-direction:column; gap:calc(var(--sns-h) * .746)} .sig{display:block; color:var(--logo-ink); width:max-content} /* リンクではない（2-1） */ .copy{color:var(--logo-ink); opacity:.9} .sns{display:flex; align-items:flex-end; gap:calc(var(--sns-h) * .577)} .sns a{display:block; opacity:.85; transition:opacity .25s var(--ease)} .sns a:hover{opacity:1} .sns img{height:var(--sns-h); width:auto} .sns .yt img{height:calc(var(--sns-h) * .885)} .sns .x img{height:calc(var(--sns-h) * .904)} /* ---------- 6. トップページ ---------- */ .is-home, .is-home body{height:100%; overflow:hidden} /* 縦横ともスクロールなし（仕様3.2） */ .stage{ position:fixed; left:var(--col-w); top:var(--stage-top); right:var(--stage-right); bottom:var(--stage-bottom); } .stage__frame{ /* 枠＝左カラムの右端から右余白までの領域そのもの。画像の比率が変わっても 枠は動かず、画像はこの中で上下左右の中央に収まる（仕様4.1 / 2-2） */ position:relative; width:100%; height:100%; background:var(--bg); } .stage__frame img{ position:absolute; inset:0; width:100%; height:100%; object-fit:contain; /* 全体を収める＝切れない（仕様4.1） */ object-position:center; transition:opacity 1.2s var(--ease); } /* JSが読み込まれなくても1枚目は表示される */ .stage__frame img ~ img{opacity:0} .stage__frame.js-on img{opacity:0} .stage__frame.js-on img.is-on{opacity:1} /* ---------- 7. 下層ページ ---------- */ .page{ margin-left:var(--col-w); padding:var(--stage-top) var(--stage-right) 14dvh 0; max-width:1385px; } .page__head{margin-bottom:clamp(28px,4vw,72px)} .page__title{color:rgb(var(--fg) / var(--o-strong)); margin-bottom:.6em} .page__lead{color:rgb(var(--fg) / var(--o-body)); max-width:46em} /* WORKS 第二階層メニュー（仕様2） */ .subnav{display:flex; flex-wrap:wrap; align-items:center; gap:clamp(20px,2.6vw,54px); padding-bottom:clamp(16px,2vw,32px); border-bottom:1px solid rgb(var(--fg) / var(--o-line)); margin-bottom:clamp(24px,3.4vw,64px)} .subnav a{display:block; color:rgb(var(--fg) / var(--o-body))} .subnav a:hover, .subnav a[aria-current="page"]{color:rgb(var(--fg) / var(--o-strong))} /* 見出し */ .sec{color:rgb(var(--fg) / var(--o-strong)); font-size:1.15em; font-weight:500; letter-spacing:.16em; margin:clamp(36px,4.5vw,80px) 0 1.4em} .sec:first-child{margin-top:0} .page__head .sec{margin:0 0 .6em} /* NEWS 一覧 */ .news{border-top:1px solid rgb(var(--fg) / var(--o-line))} .news li{border-bottom:1px solid rgb(var(--fg) / var(--o-line))} .news a,.news .row{display:flex; gap:clamp(14px,2vw,44px); padding:clamp(14px,1.6vw,28px) 0; align-items:baseline} .news time{flex:none; width:9em; color:rgb(var(--fg) / var(--o-mute)); font-variant-numeric:tabular-nums; letter-spacing:.08em} .news .ttl{color:rgb(var(--fg) / var(--o-body))} .news a:hover .ttl{color:rgb(var(--fg) / var(--o-strong))} /* プロフィール */ .profile{display:grid; gap:clamp(24px,3vw,56px); grid-template-columns:minmax(0,1fr)} @media (min-width:1100px){ .profile{grid-template-columns:minmax(0,320px) minmax(0,1fr)} } .profile .ph{aspect-ratio:3 / 4; background:rgb(var(--fg) / .05)} .profile .ph img{width:100%; height:100%; object-fit:cover} /* テキストリンク・ボタン */ .link{color:rgb(var(--fg) / var(--o-strong)); border-bottom:1px solid rgb(var(--fg) / .3); padding-bottom:.1em} .link:hover{border-bottom-color:rgb(var(--fg) / 1)} .btn{display:inline-block; padding:.9em 2.4em; letter-spacing:.16em; color:rgb(var(--fg) / var(--o-strong)); border:1px solid rgb(var(--fg) / .35); transition:border-color .25s,background-color .25s} .btn:hover{border-color:rgb(var(--fg) / .9); background:rgb(var(--fg) / .06)} .contact-block + .contact-block{margin-top:clamp(28px,3.4vw,64px)} .contact-block .label{color:rgb(var(--fg) / var(--o-mute)); letter-spacing:.14em; font-size:.88em; margin-bottom:.4em} /* ページ先頭へ戻る（仕様3.2） */ .to-top{display:inline-block; margin-top:clamp(48px,7vw,120px); color:rgb(var(--fg) / var(--o-mute)); letter-spacing:.2em; font-size:.86em} .to-top:hover{color:rgb(var(--fg) / var(--o-strong))} /* 未確定の差し込み箇所の目印。公開前に .todo ごと削除する */ .todo{color:rgb(var(--fg) / var(--o-mute)); font-size:.86em; letter-spacing:.06em} .todo::before{content:"［要素材］ "} /* ============================================================ WORKS の各カテゴリ 枠（左カラム・余白・書体・色）は全ページ共通のまま、 中身の組み方だけを内容の性質に合わせて変えている。 ============================================================ */ /* ---------- FILMS：1作品ずつ縦に読む ---------- キービジュアルの幅（--film-w）に、場面写真3×3と［フライヤー＋予告編］の幅を揃える。 場面写真の1マスもキービジュアルと同じ比率にしてあるので、 3×3ブロックの高さはキービジュアルの高さと（ほぼ）一致する。 */ .film{ --film-w:min(100%, 1040px); /* 中央に置くメディアの幅 */ --film-ar:2.39; /* 作品の縦横比。16:9の作品なら 1.7778 に変える */ --flyer-ar:.707; /* フライヤーの縦横比（A4・B5は .707） */ text-align:center; padding-bottom:clamp(56px,8vw,140px); } .film + .film{border-top:1px solid rgb(var(--fg) / var(--o-line)); padding-top:clamp(48px,7vw,120px)} .film > *{margin-inline:auto} .film__title{color:rgb(var(--fg) / var(--o-strong)); font-size:clamp(1.05rem,1.15vw,1.4rem); font-weight:400; letter-spacing:.1em; margin:0 auto} .film__meta{color:rgb(var(--fg) / var(--o-mute)); letter-spacing:.14em; font-size:.84em; margin:.5em auto 0; font-variant-numeric:tabular-nums} /* キービジュアル（シネスコ） */ .film__key{width:var(--film-w); margin:clamp(28px,3.4vw,60px) auto 0} .film__key img{width:100%; height:100%; aspect-ratio:var(--film-ar); object-fit:cover} .film__key figcaption{color:rgb(var(--fg) / var(--o-mute)); font-size:.82em; letter-spacing:.06em; padding-top:.8em} /* 場面写真 3×3 */ .stills{width:var(--film-w); display:grid; grid-template-columns:repeat(3,1fr); gap:var(--grid-gap); margin:var(--grid-gap) auto 0} .stills img{width:100%; aspect-ratio:var(--film-ar); object-fit:cover} /* 説明文 */ .film__text{width:min(100%,44em); margin:clamp(28px,3.4vw,56px) auto 0; text-align:center} .film__text p + p{margin-top:1em} /* フライヤー（縦）＋ 予告編（16:9）。合計幅がキービジュアルと揃い、高さも一致する */ .film__release{width:var(--film-w); display:flex; gap:var(--grid-gap); align-items:flex-start; margin:clamp(28px,3.4vw,56px) auto 0} .film__flyer{flex:var(--flyer-ar) 1 0; margin:0; aspect-ratio:var(--flyer-ar); background:rgb(var(--fg) / .05)} .film__flyer img{width:100%; height:100%; object-fit:contain} .film__release .ytbox{flex:1.7778 1 0; width:auto} /* ---------- YouTube の軽量埋め込み ---------- 最初はサムネイルだけ。押されて初めてプレーヤーを読み込む。 */ .ytbox{position:relative; display:block; width:100%; padding:0; border:0; aspect-ratio:16 / 9; background:rgb(var(--fg) / .06); overflow:hidden; cursor:pointer} .ytbox img{position:absolute; inset:0; width:100%; height:100%; object-fit:cover; transition:opacity .3s var(--ease)} .ytbox iframe{position:absolute; inset:0; width:100%; height:100%; border:0} .ytbox__play{position:absolute; left:50%; top:50%; transform:translate(-50%,-50%); /* 枠の幅に対する割合で決めるので、3列に縮んでも比率が崩れない */ width:clamp(22px,20%,56px); font-size:clamp(8px,.9vw,16px); aspect-ratio:1; border-radius:50%; border:1px solid rgb(var(--fg) / .65); display:grid; place-items:center; pointer-events:none; transition:background-color .25s var(--ease),border-color .25s var(--ease)} .ytbox__play::before{content:""; width:0; height:0; margin-left:.22em; border-left:.6em solid rgb(var(--fg) / .9); border-top:.38em solid transparent; border-bottom:.38em solid transparent} .ytbox:hover .ytbox__play{background:rgb(var(--fg) / .14); border-color:rgb(var(--fg) / 1)} .ytbox:hover img{opacity:.78} .ytbox__note{position:absolute; inset:auto 0 0 0; margin:0; padding:.7em 1em; background:rgb(0 0 0 / .72); color:rgb(var(--fg) / .8); font-size:.78em; letter-spacing:.04em} .ytbox__cap{color:rgb(var(--fg) / var(--o-body)); font-size:.88em; padding-top:.7em} .ytbox__cap .y{color:rgb(var(--fg) / var(--o-mute)); font-variant-numeric:tabular-nums} /* ---------- YOUTUBE：16:9 の 3×3 ---------- */ .tube{display:grid; grid-template-columns:repeat(3,1fr); gap:var(--grid-gap)} .tube li{margin:0} /* ---------- PHOTO：隙間なしで敷き詰める ---------- JSが縦横比を読んで行の高さを揃える（.is-justified）。 JSが動かない場合は下の格子で表示される。 */ .mosaic{display:grid; gap:0; grid-template-columns:repeat(auto-fill,minmax(min(100%,200px),1fr))} .mosaic li{margin:0; min-width:0} .mosaic button{display:block; width:100%; height:100%; padding:0; border:0; background:none; cursor:zoom-in; overflow:hidden} .mosaic img{display:block; width:100%; height:100%; object-fit:cover; aspect-ratio:1; vertical-align:bottom; transition:opacity .35s var(--ease)} .mosaic button:hover img{opacity:.72} .mosaic.is-justified{display:flex; flex-wrap:wrap; align-items:flex-start} .mosaic.is-justified li{flex:none} .mosaic.is-justified img{aspect-ratio:auto} /* ---------- 縦向きトップの Featured欄／NEWS欄 ---------- 横版のデザインは変えないため、既定では非表示。 縦向き（下のモバイル指定）でのみ表示される。 */ .featured, .home-news{display:none} .featured{--featured-ar:3 / 1} /* 高さを変えたいときはこの値を変える */ .featured a{display:block; overflow:hidden; background:rgb(var(--fg) / .05)} .featured img{width:100%; height:100%; aspect-ratio:var(--featured-ar); object-fit:cover; transition:opacity .35s var(--ease)} .featured a:hover img{opacity:.8} .featured figcaption{color:rgb(var(--fg) / var(--o-body)); font-size:.88em; padding-top:.8em; text-align:left} .home-news__head{display:block; width:max-content; color:rgb(var(--fg) / var(--o-body)); margin-bottom:1.2em} .home-news__head:hover{color:rgb(var(--fg) / var(--o-strong))} .home-news__head .mark{--mh:var(--menu-h)} .home-news ul{display:grid; grid-template-columns:repeat(3,1fr); gap:var(--grid-gap)} .home-news li{margin:0} .home-news a{display:block} .home-news .ph{display:block; overflow:hidden; background:rgb(var(--fg) / .05)} .home-news img{width:100%; height:100%; aspect-ratio:3 / 2; object-fit:cover; transition:opacity .35s var(--ease)} .home-news a:hover img{opacity:.78} .home-news .cap{display:block; padding-top:.6em; font-size:.82em; line-height:1.6; color:rgb(var(--fg) / var(--o-body)); text-align:left} .home-news .cap time{display:block; color:rgb(var(--fg) / var(--o-mute)); font-variant-numeric:tabular-nums; letter-spacing:.08em; font-size:.92em} /* ---------- 拡大表示（ライトボックス） ---------- */ .lb{position:fixed; inset:0; z-index:100; background:rgb(14 14 14 / .97); display:flex; align-items:center; justify-content:center; opacity:0; visibility:hidden; transition:opacity .3s var(--ease),visibility .3s} .lb.is-open{opacity:1; visibility:visible} .lb img{max-width:92vw; max-height:86dvh; width:auto; height:auto; object-fit:contain} .lb button{position:absolute; color:rgb(var(--fg) / .55); line-height:1; padding:.7em .9em; font-size:clamp(1.1rem,1.6vw,1.6rem); transition:color .2s var(--ease)} .lb button:hover{color:rgb(var(--fg) / 1)} .lb__close{top:.3em; right:.5em} .lb__prev{left:.2em; top:50%; transform:translateY(-50%)} .lb__next{right:.2em; top:50%; transform:translateY(-50%)} .lb__count{position:absolute; bottom:1.4em; left:50%; transform:translateX(-50%); color:rgb(var(--fg) / var(--o-mute)); font-size:.8em; letter-spacing:.18em; font-variant-numeric:tabular-nums} /* ---------- 8. モバイル（仕様3.3） ---------- */ @media (max-width:900px), (orientation:portrait) and (max-width:1100px){ :root{ --gutter:clamp(18px,4.6vw,40px); --logo-h:clamp(17px,4.6vw,26px); --menu-h:clamp(15px,3.9vw,22px); --menu-pitch:calc(var(--menu-h) * 2.4); --lang-h:clamp(11px,2.9vw,16px); --sig-h:clamp(19px,5vw,28px); --sns-h:clamp(20px,5.2vw,28px); --copy-h:clamp(10px,2.7vw,15px); --head-h:calc(var(--logo-h) + var(--gutter) * 1.6); } .is-home,.is-home body{height:auto; overflow:visible} /* ヘッダー：ロゴ（左）＋ハンバーガー（右）を常時表示 */ .head{ display:flex; align-items:center; justify-content:space-between; inset:0 0 auto 0; left:0; top:0; padding:calc(var(--gutter) * .8) var(--gutter); background:linear-gradient(var(--bg) 64%, rgb(27 27 27 / 0)); z-index:40; } .burger{display:block; position:relative; width:30px; height:20px; z-index:41; color:rgb(var(--fg) / .85)} .burger span{position:absolute; left:0; right:0; height:1px; background:currentColor; transition:transform .3s var(--ease)} .burger span:nth-child(1){top:4px} .burger span:nth-child(2){bottom:4px} .burger[aria-expanded="true"] span:nth-child(1){transform:translateY(6px) rotate(45deg)} .burger[aria-expanded="true"] span:nth-child(2){transform:translateY(-5px) rotate(-45deg)} /* サイドバー＝全画面オーバーレイ */ .side{ inset:0; width:100%; padding:0; background:var(--bg); z-index:39; opacity:0; visibility:hidden; transition:opacity .32s var(--ease),visibility .32s; display:flex; flex-direction:column; justify-content:center; } .side.is-open{opacity:1; visibility:visible; pointer-events:auto} .nav,.lang{position:static} .nav{padding:0 var(--gutter)} .lang{padding:calc(var(--menu-pitch) * 1.1) var(--gutter) 0} /* 下層ページ：88110x・SNS・© は本文の末尾に流す */ .side-foot{position:static; padding:0 var(--gutter); margin-top:clamp(56px,14vw,110px); margin-bottom:calc(var(--gutter) * 1.6); gap:calc(var(--sns-h) * .8)} /* ---- 縦向きのトップページ（修正3-2）---- ロゴ＋ハンバーガー → キービジュアル → Featured欄 → NEWS欄 → 88110x群（左下） すべてのパーツの左右端は --gutter で揃える。横版のデザインは変えない。 */ .is-home body{padding-top:var(--head-h)} .is-home .home-main{padding:0 var(--gutter)} .is-home .stage{position:static; display:block; padding:0} .is-home .stage__frame{width:100%; margin:0; height:auto; aspect-ratio:var(--stage-ar)} .featured{display:block; margin-top:clamp(28px,7vw,56px)} .home-news{display:block; margin-top:clamp(36px,9vw,72px)} .is-home .side-foot{margin-top:clamp(40px,10vw,88px); align-items:flex-start} /* スマホでは NEWS を 2×2（上から4件）にする */ @media (max-width:559px){ .home-news ul{grid-template-columns:repeat(2,1fr)} .home-news li:nth-child(n+5){display:none} } .page{margin-left:0; max-width:none; padding:calc(var(--head-h) + var(--gutter)) var(--gutter) 0} .news time{width:100%} .news a,.news .row{flex-direction:column; gap:.2em} /* 第二階層メニューは横並びのまま（4-2） */ .subnav{gap:clamp(18px,5vw,44px); flex-direction:row; flex-wrap:wrap; align-items:center} /* プロフィール写真を小さく（3-1） */ .profile .ph{max-width:min(52%,200px)} /* WORKS：縦画面でも 3×3 のまま（場面写真・YouTubeとも） */ .film__key img{max-height:62dvh} .lb button{font-size:1.4rem} } /* ---------- 9. 動きを減らす設定への配慮（仕様4.2） ---------- */ @media (prefers-reduced-motion:reduce){ *{animation-duration:.001ms !important; transition-duration:.001ms !important} }