8@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: 833px) { } @media (min-width: 834px) { } @media (hover: hover) { /* hover指定できるPCを想定したスタイル */ } @media (hover: none) { /* hoverが使えないタッチ端末を想定した装飾 */ } /* ----------------------------------------------- */ @media (max-width: 833px) { html { font-size: 14px; } } @media (min-width: 834px) { html { font-size: 16px; } } /* ----------------------------------------------- */ body { color: #333; --primary-color: #3399ff; font-family: 'Noto Sans JP', 'Lucida Grande', 'Hiragino Kaku Gothic ProN', Meiryo, sans-serif; font-weight: 400; line-height: 1.2; } /* common ----------------------------------------------- */ em { font-style: normal; } a { color: inherit; font-family: inherit; box-sizing: border-box; text-decoration: none; transition: .4s; } .allura { font-family: "Allura", cursive; font-weight: 400; font-style: normal; } .mincho { font-family: 'Noto Serif JP','游明朝', YuMincho, 'Hiragino Mincho ProN W3', 'ヒラギノ明朝 ProN W3', 'Hiragino Mincho ProN', 'HG明朝E', 'ＭＳＰ明朝', 'ＭＳ明朝', serif; line-height: 1.5; } h1, h2, h3, h4 { font-weight: inherit; } .home .sec-lv-2, .page .sec-lv-2 { padding-top: 4em; } ._btn { margin: 4em auto; } .lower-page.short { display: grid; height: calc(100vh - 84px); } input[type="submit"], button { margin: 0; padding: 0; background: none; border: none; border-radius: 0; outline: none; -webkit-appearance: none; -moz-appearance: none; appearance: none; } input, textarea { border: none; outline: none; } .footer .inner-footer ._form > a, ._btn > p > input, p > button, ._gotohome > a { background-color: #fff; border-radius: 100px; box-shadow: 0 0 0 2px #3399ff, 0 0 0 4px #FFF, 0 4px 5px 4px rgba(0, 0, 0, 0.2) ; display: flex; flex-wrap: wrap; justify-content: center; align-items: center; font-weight: normal; margin-top: 2em; margin-left: auto; margin-right: auto; padding: 1em; transition: .4s; width: 10em; } @media (max-width: 833px) { .inner-nav, .inner-breadcrumbs, .inner-footer, .lower-page .heading-1, .sec-lv-2 > .inner-sec, .sec-contact > .inner-sec > .inner-sec_contents, .archive .sec-archi > .inner-sec, .single .sec-sing > .inner-sec { box-sizing: border-box; padding-left: 0.5rem; padding-right: 0.5rem; } .lower-page { margin-top: 48px; } .home h2, .lower-page h1, .page h2 { font-size: 2em; } } @media (min-width: 834px) { .inner-nav, .inner-breadcrumbs, .inner-footer, .lower-page .heading-1, .sec-home ._top_image > ._top_textarea, .sec-lv-2 > .inner-sec, .sec-contact > .inner-sec > .inner-sec_contents, .sec-404 > .inner-sec > .inner-sec_contents, .archive .sec-archi > .inner-sec, .single .sec-sing > .inner-sec { box-sizing: border-box; margin-left: auto; margin-right: auto; width: 100%; max-width: 1152px; } .inner-nav, .inner-breadcrumbs, .inner-footer, .lower-page .heading-1, .page .sec-lv-2 > .inner-sec, .sec-home ._top_image > ._top_textarea, .sec-contact > .inner-sec > .inner-sec_contents, .archive .sec-archi > .inner-sec, .single .sec-sing > .inner-sec { padding-left: 1rem; padding-right: 1rem; } .lower-page { margin-top: 64px; } .lower-page h1 { font-size: 2.5em; } } @media (hover: hover) { /* hover指定できるPCを想定したスタイル */ .footer .inner-footer ._form > a:hover { background-color: rgba( 0, 0, 0, 0.6); } ._btn > p > input:hover, p > button:hover { background-color: #3399ff; } } @media (hover: none) { /* hoverが使えないタッチ端末を想定した装飾 */ .footer .inner-footer ._form > a:active { background-color: rgba( 0, 0, 0, 0.6); } ._btn > p:active, { background-color: #3399ff; } } /* wrapper ----------------------------------------------- */ @media (max-width: 833px) { } @media (min-width: 834px) { } /* header ----------------------------------------------- */ /* nav ----------------------------------------------- */ .nav { background-color: rgba( 255, 255, 255, 0.9); box-shadow: 0px 2px 4px rgba(0, 0, 0, 0.2); position: fixed; top: 0; width: 100%; z-index: 99; } .nav.change-color { background-color: rgba( 255, 255, 255, 0); box-shadow: 0px 2px 4px rgba(0, 0, 0, 0); position: fixed; top: 0; width: 100%; z-index: 99; } .nav .nav-g a:hover { color: #3399ff; } .nav ._navLogo img { position: relative; width: 96px; z-index: 99; } @media (max-width: 833px) { .nav { font-size: min(4vw,14px); height: 64px; } .nav ._navLogo img { width: 50vw; max-width: 64px; } ._nav_hamburger-menu { display: flex; flex-wrap: wrap; align-items: center; line-height: 1; height: 64px; } ._nav_hamburger-menu .hamburger ._navLogo { display: inline; } ._nav_hamburger-menu .nav_list { background-color: #fff; border-bottom: solid 1px #666; font-size: 14px; line-height: 3; padding: 64px 1em 2px; position: fixed; left: 0; top: -420px; transition: .4s; width: 100%; z-index: 30; } ._nav_hamburger-menu .nav_list .nav-g > li > a { border-bottom: solid 1px #ddd; display: flex; padding-left: 0.5em; } ._nav_hamburger-menu .nav_list .nav-g > li > a::after { align-items: flex-end; content: '＞'; margin-left: auto; padding-right: 0.5em; } ._nav_hamburger-menu .menu-btn-check { display: none; } ._nav_hamburger-menu .menu-btn { font-size: 40px; line-height: 48px; opacity: 1; position: absolute; right: 8px; transition: .4s; } ._nav_hamburger-menu .menu-btn .close { display: none; } ._nav_hamburger-menu .menu-btn-check:checked ~ .menu-btn .open { display: none; } ._nav_hamburger-menu .menu-btn-check:checked ~ .menu-btn .close { display: block; position: relative; z-index: 99; } ._nav_hamburger-menu .menu-btn-check:checked ~ .nav_list { transform:translateY(420px) } ._nav_hamburger-menu .menu-btn-check:checked ~ .menu-background-color { display: block; background-color: rgba(0, 0, 0, 0.4); opacity: 1; position: fixed; top: 48px; left: 0; height: 100vh; width: 100vw; z-index: 30; } .nav ._nav_contact ul { display: flex; flex-wrap: wrap; justify-content: space-between; margin-top: 4px; } .nav ._nav_contact ul > li { border-left: solid 2px #fff; border-right: solid 2px #fff; border-radius: 4px; width: 50%; } .nav ._nav_contact ul > li > a { background-color: #999; color: #fff; display: flex; align-items: center; justify-content: center; padding: 4px; width: 100%; } .nav ._nav_contact ul > li > a i { display: block; font-size: min( 10vw, 3em); } .nav ._nav_contact ul > li > a p { display: block; font-size: min(3vw, 14px); line-height: 1.5; padding-left: 0.5em; } } @media (min-width: 834px) { .nav { font-size: min(1.5vw,16px); height: 96px; } .nav ._nav_contact { display: none; } .inner-nav, .nav-contents { height: 100%; } .nav-contents{ display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; } .nav-g { display: flex; flex-wrap: wrap; } .nav-g > li { margin-left: min( 2.5vw, 32px); } .nav-g > li > a { padding-bottom: 4px; position: relative; } .nav-g > li > a::before { background: #3399ff; content: ''; display: block; margin: auto; position: absolute; left: 0; bottom: 0; transform-origin: right top; transform: scale(0, 1); transition: transform .3s; height: 2px; width: 100%; } .nav-g > li > a:hover::before { transform-origin: left top; transform: scale(1, 1); } .nav-g > li:first-child { margin-left: 2px; } .nav-contents .menu-btn-check, .nav-contents .menu-btn, .nav-contents .menu-background-color { display: none; } } /* page ----------------------------------------------- */ /* breadcrumbs ----------------------------------------------- */ /* contents ----------------------------------------------- */ /* main ----------------------------------------------- */ /* sub ----------------------------------------------- */ /* footer ----------------------------------------------- */ .footer { background-color: #e3f8ff; padding-bottom: 0.5em; padding-top: 3em; } .footer .inner-footer { display: flex; flex-wrap: wrap; justify-content: space-around; } .footer address ._sns { display: flex; flex-wrap: wrap; justify-content: center; } .footer address ._sns .sns { display: block; margin: 2em; } .footer address ._sns .sns.insta { width: 2em; height: 2em; } .footer address ._sns .sns.insta > img { object-fit: contain; width: 100%; height: 100%; } .footer .inner-footer ._nav > ul > li { line-height: 2; } .footer .inner-footer ._map { margin-bottom: 2em; width: 50%; min-width: 296px; } .footer .inner-footer ._gmap { height: 296px; } .footer .inner-footer ._map ._gmap > iframe { width: 100%; height: 100%; } .footer ._copyright { font-size: 0.8em; margin-top: 2em; text-align: center; } @media (max-width: 833px) { .footer .inner-footer ._nav { display: none; } } @media (min-width: 834px) { } @media (hover: hover) { /* hover指定できるPCを想定したスタイル */ } @media (hover: none) { /* hoverが使えないタッチ端末を想定した装飾 */ } /* other ----------------------------------------------- */ .contact .side_contact { display: none; } .side_contact { line-height: 1.2; position: relative; z-index: 5; } .side_contact > a { background-color: #3399ff; border: solid 1px #fff; border-radius: 50%; box-shadow: 0 0 0 1px #FFF, 0 0 0 5px #3399ff, 0 0 4px 6px rgba(0, 0, 0, 0.1) ; color: #fff; display: flex; flex-direction: column; align-items: center; justify-content: center; } .side_contact > a > i { font-size: 1.5em; } .go_top { display: none; } .go_top > a { background-color: rgba(255, 255, 255, 0.6); border: thick double #3399ff; border-radius: 8px; padding: 0.5em; } .go_top > a::after { content: '↑'; } @media (max-width: 833px) { .side_contact { position: fixed; right: 8px; top: 70%; } .side_contact > a { font-size: 0.75em; width: 40px; height: 40px; } .go_top { position: fixed; bottom: 16px; right: 8px; } } @media (min-width: 834px) { .side_contact { position: fixed; right: 32px; top: 70%; } .side_contact > a { font-size: 0.9em; width: 64px; height: 64px; } .go_top { position: fixed; bottom: 16px; right: 32px; } } /* temporary ----------------------------------------------- */ /* end of file */