@charset "UTF-8"; /*==============================*/ /* Web font */ /*==============================*/ @import url("https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@100..900&display=swap"); @import url("https://fonts.googleapis.com/css2?family=Shippori+Mincho&family=Shippori+Mincho+B1:wght@400;500&display=swap"); /* e.g. .shippori-mincho-regular { font-family: "Shippori Mincho", serif; font-weight: 400; font-style: normal; } .shippori-mincho-b1-regular { font-family: "Shippori Mincho B1", serif; font-weight: 400; font-style: normal; } https://albalunaweb.net/memo-font/8609.html 無印とB1の違いは？ B1のBは「ボケ足」のB。無印とB1では、このボケ足、もしくは墨だまり処理とも言いますが、これが入っているかどうか、が異なります。大きい文字サイズであるほどはっきりと墨だまりの丸みが分かります。 B1を使う時は是非大きい文字サイズで使ってみてください。 */ @import url("https://fonts.googleapis.com/css2?family=Klee+One&display=swap"); /*==============================*/ /* @import */ /*==============================*/ @import url("util.css?v=20250306-01"); /*==============================*/ /* <:root> */ /*==============================*/ :root { --bs-body-font-size: 1.125rem; --bs-body-font-family: "Noto Sans JP", var(--bs-font-sans-serif); --logo-font-family: "Shippori Mincho B1", serif; --bs-link-opacity: 1; --bs-link-color: $link-color; --bs-link-color-rgb: 8, 27, 148; --bs-link-hover-color: #1030f9; --bs-link-hover-color-rgb: 16, 48, 249; } @media (max-width: 575px) { :root { --bs-body-font-size: 1rem; } } /* .klee-one-regular { //font-family: "Klee One", cursive; font-family: "Klee One", serif; font-weight: 400; font-style: normal; } */ /*==============================*/ /* */ /*==============================*/ #body-wrapper { margin: 0 auto; width: 100%; display: flex; flex-direction: column; min-height: 100vh; } /*==============================*/ /* */ /*==============================*/ p { margin: 0 0 0.5rem; } /*==============================*/ /* */ /*==============================*/ a { text-decoration: none; } a:hover { text-decoration: underline; } a.silent { color: inherit; } a.silent:hover { color: inherit; text-decoration: none; cursor: auto; } a.quiet { color: inherit; } a.quiet:hover { color: inherit; text-decoration: none; } /*==============================*/ /*

*/ /*==============================*/ header#top { margin: 0 0 0; width: 100%; height: 400px; color: #fff; background: #000; position: relative; } header#top div.env { position: absolute; left: 2%; bottom: 6px; display: inline-block; padding: 2px 8px; background: #f43; opacity: 0.8; color: #fff; border-radius: 4px; font-size: smaller; line-height: 1.2; opacity: 0.78; z-index: 10; } div#site-header > div.wrapper { position: absolute; z-index: 5; width: 100%; top: 28px; left: 2%; } div#site-header a { text-decoration: none; color: #fff; } div#site-header h1 { font-family: var(--logo-font-family); font-weight: 400; font-style: normal; color: #fff; text-shadow: 1px 1px 4px rgba(0, 0, 0, 0.3); font-size: 2rem; paint-order: stroke; text-stroke: 1px #356; -webkit-text-stroke: 1px #356; } @media (max-width: 414px) { div#site-header h1 { font-size: 1.625rem; text-shadow: 1px 1px 4px rgba(0, 0, 0, 0.4); } } div#site-sub-title > div.wrapper { position: absolute; z-index: 5; width: 100%; top: 50%; transform: translateY(-50%); text-align: center; } div#site-sub-title h2 { font-family: var(--logo-font-family); font-weight: 400; font-style: normal; font-size: 3.75rem; color: #fff; text-shadow: 1px 1px 4px rgba(0, 0, 0, 0.6); } @media (max-width: 991px) { div#site-sub-title h2 { font-size: 2.875rem; } } @media (max-width: 414px) { div#site-sub-title h2 { font-size: 1.875rem; } } div#site-copy > div.wrapper { position: absolute; z-index: 5; width: 100%; bottom: 30px; font-size: 1.375rem; display: flex; justify-content: space-between; } @media (max-width: 575px) { div#site-copy > div.wrapper { display: block; font-size: 1.125rem; text-align: center; } } div#site-copy p { margin: 0; padding: 0 1em; font-family: "Zen Antique", serif; } div#main-visual { height: 100%; overflow: hidden; } div#main-visual img { width: 100%; height: 400px; object-fit: cover; } body#home div#main-visual img { height: 100vh; } div#nav-inner { margin: 0 0 20px; background: #f6f6f6; } div#nav-inner.fixed { width: 100%; position: fixed; top: 0; z-index: 10; box-shadow: 0 2px 6px rgba(0, 0, 0, 0.2666666667); } div#nav-inner nav.navbar { font-size: 1.125rem; --bs-navbar-toggler-border-color: #fff; --bs-navbar-toggler-focus-width: 0; --bs-dropdown-min-width: 5rem; } div#nav-inner nav.navbar a.nav-link, div#nav-inner nav.navbar a.nav-link.show, div#nav-inner nav.navbar a.dropdown-item { color: #333; } div#nav-inner nav.navbar ul.navbar-nav > .nav-item { margin-left: 1rem; } @media (max-width: 1199px) { div#nav-inner nav.navbar ul.navbar-nav > .nav-item { margin-left: 0.4rem; } } div#nav-inner nav.navbar ul.navbar-nav > .nav-item ul.dropdown-menu { background: #eee; opacity: 0.9; --bs-dropdown-min-width: 9rem; } div#nav-inner nav.navbar ul.navbar-nav > .nav-item ul.dropdown-menu.music_work { --bs-dropdown-min-width: 18rem; } div#nav-inner nav.navbar ul.navbar-nav > .nav-item ul.dropdown-menu.company { --bs-dropdown-min-width: 7rem; } div#nav-inner nav.navbar ul.navbar-nav > .nav-item ul.dropdown-menu a.dropdown-item:hover { background: white; } @media (max-width: 991px) { div#nav-inner nav.navbar { position: absolute; top: 20px; right: 0; z-index: 20; } } @media (min-width: 992px) { div#nav-inner nav.navbar { padding: 2px 10px 2px 2px; } div#nav-inner nav.navbar .dropdown .dropdown-menu { transition: all 0.3s; overflow: hidden; transform-origin: top center; transform: scale(1, 0); display: block; } div#nav-inner nav.navbar .dropdown:hover .dropdown-menu { transform: scale(1); } } .navbar-toggler { background-color: rgba(0, 0, 0, 0.4); } .navbar-toggler-icon { background-image: none !important; background-color: #fff; height: 3px; width: 25px; margin: 10px 0; position: relative; transition: all 0.35s ease-out; transform-origin: center; } .navbar-toggler-icon::before { display: block; background-color: #fff; height: 3px; content: ""; position: relative; top: -7px; transition: all 0.15s ease-out; /*taken down to hide quicker*/ transform-origin: center; } .navbar-toggler-icon::after { display: block; background-color: #fff; height: 3px; content: ""; position: relative; top: 4px; transition: all 0.35s ease-out; transform-origin: center; } .navbar-dark .navbar-toggler-icon, .navbar-dark .navbar-toggler-icon::before, .navbar-dark .navbar-toggler-icon::after { background-color: #fff; } .navbar-toggler:not(.collapsed) .navbar-toggler-icon { transform: rotate(45deg); } .navbar-toggler:not(.collapsed) .navbar-toggler-icon::before { opacity: 0; } .navbar-toggler:not(.collapsed) .navbar-toggler-icon::after { transform: rotate(-90deg) translateX(7px); } .modal-fullscreen-menu { background-color: #000; opacity: 0.9; } .modal-fullscreen-menu .close { --bs-navbar-toggler-border-color: #fff; --bs-navbar-toggler-border-radius: 0.375rem; color: white; background: transparent; border-width: 2px; opacity: 1; padding: 0.25rem 0.75rem; font-size: 1.25rem; position: absolute; top: 28px; right: 19px; z-index: 1; } .modal-fullscreen-menu .modal-dialog { margin: 0 auto; width: 100%; max-width: 768px; display: flex; height: 100%; min-height: 800px; align-items: center; } .modal-fullscreen-menu .modal-content { background-color: transparent; box-shadow: none; border: none; } .modal-fullscreen-menu .list-group { text-align: center; margin: 0 auto; width: 100%; } .modal-fullscreen-menu .list-group a { font-size: 1.4em; border: none; transition: all 0.25s ease; background-color: transparent; color: white; } .modal-fullscreen-menu .list-group a:before { content: ""; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: #fff; z-index: -1; opacity: 0; transform: scale3d(0.7, 1, 1); transition: transform 0.4s, opacity 0.4s; } .modal-fullscreen-menu .list-group a:hover { color: black; text-decoration: none; } .modal-fullscreen-menu .list-group a:hover:before { transform: translate3d(0, 0, 0); opacity: 1; } .modal-backdrop.in { opacity: 1; } div.divider { margin: 0.5em auto; padding: 5px 0; width: 80%; border-top: 1px solid #666; border-bottom: 1px solid #666; } /*==============================*/ /*