@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が使えないタッチ端末を想定した装飾 */ } /* ----------------------------------------------- */ body { background-color: #f7f5f1; color: #333; font-family: "M PLUS Rounded 1c", 'Lucida Grande', 'Hiragino Kaku Gothic ProN', Meiryo, sans-serif; line-height: 1.25; font-weight: 400; } /* common ----------------------------------------------- */ em { font-style: normal; } a { color: inherit; box-sizing: border-box; text-decoration: none; transition: .4s; } h1, h2, h3, h4 { font-weight: inherit; } .emoji { font-family: "Noto Color Emoji", sans-serif; font-weight: 400; font-style: normal; } .inner-header > ._title { display: none; } .home .sec-lv-2, .page .sec-lv-2 { padding-top: 4em; } 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; } .recruiting input[type=submit]:hover { background-position: 99% 50%; } .recruiting input[type=submit] { color: #666; background-image: linear-gradient(45deg, #ff7a5a, #ffde8b 48%, #ff8b2d); background-position: 1% 50%; background-size: 200% auto; border-radius: 32px; border: solid 1px #666; display: block; font-size: 1.125em; line-height: 3; margin: 2em auto; text-align: center; transition: .4s; width: 240px; } @media (max-width: 833px) { .sec-lv-1 { margin-top: 64px; } .inner-header, .inner-nav, .inner-breadcrumbs, .inner-footer, .sec-lv-2 > .inner-sec { box-sizing: border-box; padding-left: 0.5rem; padding-right: 0.5rem; } } @media (min-width: 834px) { .sec-lv-1 { margin-top: 96px; } .inner-header, .inner-nav, .inner-footer, .sec-lv-2 > .inner-sec { box-sizing: border-box; margin-left: auto; margin-right: auto; width: 100%; max-width: 1152px; } .home .sec-news > .inner-sec, .sec-recruiting-list > .inner-sec { max-width: 768px; } .inner-header, .inner-nav, .inner-breadcrumbs, .inner-footer, .sec-lv-2 > .inner-sec { padding-left: 1rem; padding-right: 1rem; } } /* wrapper ----------------------------------------------- */ @media (max-width: 833px) { .wrapper { font-size: 14px; } } @media (min-width: 834px) { } /* header ----------------------------------------------- */ /* nav ----------------------------------------------- */ .nav { background-color: #f7f5f1; font-size: min(4vw,14px); position: fixed; top: 0; width: 100%; z-index: 99; } .nav ._navLogo > a { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; margin-left: auto; margin-right: auto; position: relative; width: calc( 100% - 64px ); z-index: 100; } .nav ._navLogo ._wakuwakulogo { display: block; } .nav ._navLogo ._kodomologo { display: block; } .nav ._navLogo ._date { color: #e95532; font-weight: bold; text-align: center; } .nav ._navLogo img { display: inline-block; height: 100%; } ._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; top: 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: 100%; } .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; } .nav ._navLogo ._date { font-weight: bold; } @media (max-width: 833px) { .nav { height: 64px; } .nav ._navLogo { margin-top: 16px; } .nav ._navLogo ._wakuwakulogo { width: 96px; } .nav ._navLogo ._kodomologo { width: 32px; } .nav ._navLogo ._date { width: 8em; } .nav ._navLogo ._date > ._mmdd { font-size: 1.25em; } .nav ._navLogo ._date > ._sab { font-size: 0.75em; } } @media (min-width: 834px) { .nav { height: 96px; } .nav ._navLogo { margin-top: 16px; } .nav ._navLogo ._wakuwakulogo { width: 168px; } .nav ._navLogo ._kodomologo { width: 52px; } .nav ._navLogo ._date { width: 12em; } .nav ._navLogo ._date > ._mmdd { font-size: 1.5em; } .nav ._navLogo ._date > ._sab { font-size: 1em; } ._nav_hamburger-menu .menu-btn { right: 16px; top: 16px; } } /* page ----------------------------------------------- */ /* breadcrumbs ----------------------------------------------- */ /* contents ----------------------------------------------- */ /* main ----------------------------------------------- */ /* sub ----------------------------------------------- */ /* footer ----------------------------------------------- */ .footer { background-color: #ec9e24; padding-bottom: 0.5em; padding-top: 3em; } .footer .inner-footer ._nav > ul > li { line-height: 2; } .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 { display: flex; flex-direction: column; } .footer .inner-footer ._map { margin-top: 2em; margin-left: auto; margin-right: auto; width: 80%; } .footer .inner-footer ._gmap { height: 240px; } } @media (min-width: 834px) { .footer .inner-footer { display: flex; justify-content: space-around; width: 100%; } .footer .inner-footer ._nav { width: calc(100% - 600px); } .footer .inner-footer ._map { width: 60%; min-width: 240px; max-width: 600px; } .footer .inner-footer ._gmap { height: 320px; } } @media (hover: hover) { /* hover指定できるPCを想定したスタイル */ } @media (hover: none) { /* hoverが使えないタッチ端末を想定した装飾 */ } /* other ----------------------------------------------- */ .go_top { display: none; } @media (max-width: 833px) { .go_top { position: fixed; bottom: 16px; right: 16px; } .go_top img { width: 40px; } } @media (min-width: 834px) { .go_top { position: fixed; bottom: 16px; right: 32px; } .go_top img { width: 64px; } } /* temporary ----------------------------------------------- */ /* end of file */