/* ========================================================= YUKINON OFFICIAL LOGO v3.1 ========================================================= */ .brand, .voice-brand{ position:relative; display:flex; align-items:center; justify-content:center; margin:0; padding:0 !important; background:none !important; border:0 !important; border-radius:0 !important; box-shadow:none !important; filter:none !important; backdrop-filter:none !important; } .yukinon-logo-switch{ position:relative; display:block; width:100%; height:auto; line-height:0; } .yukinon-logo-image{ display:block; width:100%; height:auto; margin:0; padding:0; object-fit:contain; background:none !important; border:0 !important; box-shadow:none !important; filter:none !important; opacity:1; transition: opacity .25s ease; } /* NIGHT画像をDAY画像と完全に重ねる */ .yukinon-logo-night{ position:absolute; top:0; left:0; width:100%; height:100%; opacity:0; pointer-events:none; } /* ========================================================= MAIN SITE SIZE ========================================================= */ .site-header .brand{ width: clamp( 160px, 13vw, 215px ); } /* ========================================================= MAIN DAY ========================================================= */ html:not([data-theme="night"]) .site-header .yukinon-logo-day, html[data-theme="day"] .site-header .yukinon-logo-day{ opacity:1 !important; } html:not([data-theme="night"]) .site-header .yukinon-logo-night, html[data-theme="day"] .site-header .yukinon-logo-night{ opacity:0 !important; } /* ========================================================= MAIN NIGHT ========================================================= */ html[data-theme="night"] .site-header .yukinon-logo-day{ opacity:0 !important; } html[data-theme="night"] .site-header .yukinon-logo-night{ opacity:1 !important; } /* ========================================================= VOICE SIZE ========================================================= */ .voice-header .voice-brand{ width: clamp( 170px, 14vw, 225px ); } /* ========================================================= VOICE DAY ========================================================= */ body:not([data-theme="night"]) .voice-header .yukinon-logo-day, body[data-theme="day"] .voice-header .yukinon-logo-day{ opacity:1 !important; } body:not([data-theme="night"]) .voice-header .yukinon-logo-night, body[data-theme="day"] .voice-header .yukinon-logo-night{ opacity:0 !important; } /* ========================================================= VOICE NIGHT ========================================================= */ body[data-theme="night"] .voice-header .yukinon-logo-day{ opacity:0 !important; } body[data-theme="night"] .voice-header .yukinon-logo-night{ opacity:1 !important; } /* ========================================================= MOBILE ========================================================= */ @media(max-width:780px){ .site-header .brand{ width: clamp( 135px, 36vw, 170px ); } .voice-header .voice-brand{ width: clamp( 140px, 38vw, 175px ); } } /* ========================================================= NO ANIMATION ========================================================= */ @media( prefers-reduced-motion: reduce ){ .yukinon-logo-image{ transition:none; } } /* ========================================================= MAIN SITE LOGO FINAL OVERRIDE v3.2 VOICEページと同じ見え方へ統一 ========================================================= */ /* * 旧 style.css の * * .brand { * overflow:hidden; * border-radius:18px; * } * * を無効化 */ .site-header .brand{ width: clamp( 170px, 14vw, 225px ) !important; height:auto !important; display:flex !important; align-items:center !important; justify-content:center !important; overflow:visible !important; border-radius:0 !important; background: transparent !important; border:0 !important; box-shadow: none !important; filter: none !important; mix-blend-mode: normal !important; } /* * 旧 style.css の * * .brand img { * height:74px; * object-fit:cover; * mix-blend-mode:multiply; * } * * を完全無効化 */ .site-header .brand .yukinon-logo-image{ width:100% !important; height:auto !important; max-width:100% !important; max-height:76px !important; object-fit: contain !important; object-position: center center !important; mix-blend-mode: normal !important; filter: none !important; background: transparent !important; border:0 !important; border-radius:0 !important; box-shadow: none !important; } /* * スクロール時に旧CSSが * height:60px を強制するのも解除 */ .site-header.is-scrolled .brand .yukinon-logo-image{ width:100% !important; height:auto !important; max-height:62px !important; object-fit: contain !important; mix-blend-mode: normal !important; filter: none !important; } /* ========================================================= DAY ========================================================= */ html:not([data-theme="night"]) .site-header .yukinon-logo-day, html[data-theme="day"] .site-header .yukinon-logo-day{ opacity:1 !important; mix-blend-mode: normal !important; filter: none !important; } html:not([data-theme="night"]) .site-header .yukinon-logo-night, html[data-theme="day"] .site-header .yukinon-logo-night{ opacity:0 !important; } /* ========================================================= NIGHT ========================================================= */ html[data-theme="night"] .site-header .yukinon-logo-day{ opacity:0 !important; } html[data-theme="night"] .site-header .yukinon-logo-night{ opacity:1 !important; mix-blend-mode: normal !important; filter: none !important; } /* ========================================================= NIGHT画像の絶対配置 DAY画像と完全に同じ位置 ========================================================= */ .site-header .yukinon-logo-switch{ position:relative !important; display:block !important; width:100% !important; height:auto !important; line-height:0 !important; overflow:visible !important; } .site-header .yukinon-logo-night{ position:absolute !important; top:0 !important; right:0 !important; bottom:auto !important; left:0 !important; } /* ========================================================= MOBILE ========================================================= */ @media(max-width:780px){ .site-header .brand{ width: clamp( 140px, 37vw, 175px ) !important; } .site-header .brand .yukinon-logo-image{ max-height: 62px !important; } } /* ========================================================= YUKINON FOOTER LOGO V3.3 New official logo ========================================================= */ .site-footer .footer-logo, .site-footer-v8 .footer-logo{ display:block !important; width: clamp( 210px, 20vw, 285px ) !important; height:auto !important; margin: 0 auto 24px !important; padding:0 !important; overflow:visible !important; border:0 !important; border-radius:0 !important; background: transparent !important; box-shadow: none !important; filter: none !important; backdrop-filter: none !important; mix-blend-mode: normal !important; } .site-footer .footer-logo-image, .site-footer-v8 .footer-logo-image, .site-footer .footer-logo img, .site-footer-v8 .footer-logo img{ display:block !important; width:100% !important; height:auto !important; max-width:100% !important; max-height:none !important; object-fit: contain !important; object-position: center center !important; margin:0 !important; padding:0 !important; background: transparent !important; border:0 !important; border-radius:0 !important; box-shadow: none !important; filter: none !important; mix-blend-mode: normal !important; opacity:1 !important; } /* * 旧モバイルCSS * .footer-logo img { height:69px } * も完全に無効化 */ @media(max-width:780px){ .site-footer .footer-logo, .site-footer-v8 .footer-logo{ width: clamp( 190px, 56vw, 245px ) !important; } .site-footer .footer-logo img, .site-footer-v8 .footer-logo img{ height:auto !important; } }