@charset "utf-8"; /* Theme Name: Theme URI: Description: This is our original theme. Author: Author URI: Version: 1.0 */ /* CSS Information ========================================= style.css ========================================================= */ /* ========================================================= style.css ========================================================= */ /* index =================================================== template common wrapper header nav page breadcrumbs contents main sub footer other temporary ========================================================= */ /* template ----------------------------------------------- */ @media (max-width: 480px) { } @media (min-width: 481px) { } @media (max-width: 833px) { } @media (min-width: 834px) { } @media (min-width: 1152px) { } /* ----------------------------------------------- */ body { font-family: 'Noto Sans Japanese', 'Lucida Grande', 'Hiragino Kaku Gothic ProN', Meiryo, sans-serif; line-height: 1.5; } /* common ----------------------------------------------- */ em { font-style: normal; } a { text-decoration: none; } .inner-header, .inner-nav, .inner-breadcrumbs, .inner-footer, .sec-lv-2 > .inner-sec { box-sizing: border-box; } @media (max-width: 833px) { .inner-header, .inner-nav, .inner-breadcrumbs, .inner-footer, .sec-lv-2 > .inner-sec { padding-left: 0.5rem; padding-right: 0.5rem; } } @media (min-width: 834px) { .inner-header, .inner-nav, .inner-breadcrumbs, .inner-footer, .sec-lv-2 > .inner-sec { padding-left: 1rem; padding-right: 1rem; width: auto; max-width: 1152px; } } @media (min-width: 1152px) { .inner-header, .inner-nav, .inner-breadcrumbs, .inner-footer, .sec-lv-2 > .inner-sec { margin-left: auto; margin-right: auto; } } /* wrapper ----------------------------------------------- */ .wrapper { color: #333; } input[id="menu_button"] { display: none; } @media (max-width: 833px) { .wrapper { font-size: 14px; } } @media (min-width: 834px) { .wrapper { font-size: 16px; } } /* header ----------------------------------------------- */ @media (max-width: 833px) { .header > .inner-header { height: 64px; } .header ._title { padding-top: 12px; width: 72px; } .header ._menu_btn { background-color: rgba( 255, 255, 255, 0.6 ); color: #e47910; font-size: 28px; position: fixed; top: 10px; right: 8px; text-align: center; width: 40px; z-index: 11; } input[id="menu_button"]:checked ~ .header ._menu_btn .menu_btn_open { display: none; } .header ._menu_btn .menu_btn_close { display: none; } input[id="menu_button"]:checked ~ .header ._menu_btn .menu_btn_close { display: inline; } } @media (min-width: 834px) { .header > .inner-header { height: 96px; } .header ._title { padding-top: 16px; width: 120px; } .header ._menu_btn { display: none; } } /* nav ----------------------------------------------- */ .nav ._nav_main > ul > li > a { color: #e47910; } @media (max-width: 833px) { .nav { background-color: rgba( 233, 223, 210, 0.9 ); position: fixed; top: -100%; left: 0; transition: 0.5s; width: 100%; z-index: 10; } input[id="menu_button"]:checked ~ .nav { position: fixed; top: 64px; left: 0; } .inner-nav { padding-left: 0; padding-right: 0; } .nav ._nav_main > ul > li { border-bottom: 1px dotted #000; } .nav ._nav_main > ul > li > a { display: block; padding: 1.25em 1em; position: relative; } .nav ._nav_main > ul > li > a::after { content: "＞"; position: absolute; top: calc( 50% - 0.75em ); right: 1em; } } @media (min-width: 834px) { .nav ._nav_main { float: right; margin-top: -80px; } .nav ._nav_main > ul { display: flex; justify-content: space-between; } .nav ._nav_main > ul > li:not(:last-child) { margin-right: 1.5em; } .nav ._nav_main > ul > li > a { display: block; padding: 1.25em; text-align: center; width: 6em; } .nav ._nav_main > ul > li > a:hover, .home .nav ._nav_main .nav-home a, .company .nav ._nav_main .nav-company a, .case .nav ._nav_main .nav-case a, .contact .nav ._nav_main .nav-contact a { background-color: #e47910; border-radius: 1.25em; color: #fff; } } /* page ----------------------------------------------- */ /* breadcrumbs ----------------------------------------------- */ .breadcrumbs { display: none; } /* contents ----------------------------------------------- */ /* main ----------------------------------------------- */ /* sub ----------------------------------------------- */ /* footer ----------------------------------------------- */ .footer { background: radial-gradient( circle at center, rgba( 255, 168, 54, 0.8 ) 0%, #fe9121 90% ); } .footer ._contents { margin-bottom: 1em; } .footer ._contents ._nav > ._list a { color: #fff; } .footer ._contents ._nav > ._list > ul > li:not(:last-child) { margin-bottom: 1em; } .footer ._contents ._sns > ._list > ul { display: flex; } .footer ._contents ._sns > ._list > ul > li:not(:last-child) { margin-right: 1em; } .footer ._contents ._sns ._icon { width: 40px; } .footer ._contents ._sns ._icon._x { padding: 4px; width: 40px; } .footer ._copyright { color: #fff; padding-top: 0.5em; padding-bottom: 0.5em; text-align: center; } @media (max-width: 833px) { .footer .inner-footer { padding-top: 1.5em; } .footer ._contents { display: flex; align-items: flex-end; flex-wrap: wrap; justify-content: space-between; } .footer ._contents ._banners { margin-bottom: 1.5em; width: 100%; } .footer ._contents ._banners > ._list > ul { display: grid; gap: 0.5em; grid-template-columns: repeat( auto-fit, minmax( clamp( 148px, 20vw, 160px ), 1fr ) ); } .footer ._contents ._nav { margin-left: 0.5em; } .footer ._contents ._sns { margin-right: 0.5em; } .footer ._copyright { font-size: 10px; } } @media (min-width: 834px) { .footer .inner-footer { padding-top: 2.5em; } .footer ._contents { overflow: hidden; position: relative; } .footer ._contents ._banners { float: right; width: 55%; } .footer ._contents ._banners > ._list > ul { display: grid; gap: 0.5em; grid-template-columns: repeat( 3, 1fr ); } .footer ._contents ._nav { float: left; } .footer ._contents ._sns { position: absolute; bottom: 0; left: 0; } .footer ._copyright { font-size: 12px; } } /* other ----------------------------------------------- */ .go_top { display: none; } @media (max-width: 480px) { .go_top { position: fixed; bottom: 16px; right: 16px; } .go_top img { width: 40px; } } @media (min-width: 481px) { .go_top { display: none; position: fixed; bottom: 16px; right: 32px; } .go_top img { width: 64px; } } /* temporary ----------------------------------------------- */ /* end of file */