@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 ========================================================= */ :root { /* 色の定義 */ --base-color: #fff; /* 背景色（薄いグレー） */ --main-color: #003d88; /* イメージカラー（濃紺） */ --a1-color: #009440; /* アクセント（緑） */ --a2-color: #ec6325; /* アクセント（オレンジ） */ --a3-color: #ffdd00; /* アクセント（黄色） */ --text-color: #333; /* 文字色 */ } /* template ----------------------------------------------- */ @media (max-width: 833px) { } @media (min-width: 834px) { } @media (hover: hover) { /* hover指定できるPCを想定したスタイル */ } @media (hover: none) { /* hoverが使えないタッチ端末を想定した装飾 */ } /* ----------------------------------------------- */ body { font-family: 'Noto Sans JP', 'Lucida Grande', 'Hiragino Kaku Gothic ProN', Meiryo, sans-serif; line-height: 1.5; } /* common ----------------------------------------------- */ em { font-style: normal; } a { color: inherit; box-sizing: border-box; text-decoration: none; transition: .4s; } .futura, ._pt { font-family: "Futura", "Trebuchet MS", Arial, sans-serif; font-weight: bold; font-style: normal; } ._pt { display: block; } .lower-page { margin-top: 64px; } .lower-page h1, .lower-page h2, .lower-page h3, .lower-page h4 { font-weight: normal; } 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; } .privacypolicy .sec-lv-2 > .inner-sec > .inner-sec_contents, .company .sec-lv-2 > .inner-sec > .inner-sec_contents, .thanks .sec-lv-2 > .inner-sec > .inner-sec_contents, .contact .sec-contact > .inner-sec > .inner-sec_contents { margin-left: auto; margin-right: auto; width: 100%; max-width: 800px; } @media (max-width: 833px) { .inner-nav, .inner-footer, .sec-lv-2 > .inner-sec > .inner-sec_contents, .contact .sec-contact > .inner-sec > .inner-sec_contents, .sec-job_info .job-sidebar { box-sizing: border-box; padding-left: 0.5rem; padding-right: 0.5rem; } } @media (min-width: 834px) { .inner-nav, .inner-footer, .sec-lv-2 > .inner-sec > .inner-sec_contents { box-sizing: border-box; margin-left: auto; margin-right: auto; width: 100%; max-width: 1152px; } .sec-lv-2 > .inner-sec > .inner-sec_contents.text_sec { max-width: 800px; } .inner-nav, .inner-footer, .sec-lv-2 > .inner-sec > .inner-sec_contents, .contact .sec-contact > .inner-sec > .inner-sec_contents { padding-left: 1rem; padding-right: 1rem; } } @media (hover: hover) { a:hover { opacity: 0.7; transition: opacity 0.2s ease; } } @media (hover: none) { a:active { opacity: 0.7; transition: opacity 0.1s ease; } } /* wrapper ----------------------------------------------- */ @media (max-width: 833px) { .wrapper { font-size: 14px; } } @media (min-width: 834px) { } /* header ----------------------------------------------- */ /* nav ----------------------------------------------- */ .nav { position: fixed; top: 0; width: 100%; height: 64px; z-index: 99; } .nav .inner-nav { display: flex; } .nav ._navLogo { padding-bottom: 8px; padding-top: 8px; width: 210px; height: 48px; } .nav ._navLogo img { object-fit: contain; width: 100%; height: 100%; } .nav ._nav_line { background-color: var(--a2-color); border-radius: 100%; box-shadow: 0px 0px 4px rgba(255, 255, 255, 0.5); margin-left: auto; padding: 8px; width: 48px; height: 48px; } .nav ._nav_line img { object-fit: contain; width: 100%; height: 100%; } .nav .hamburger { background-color: var(--main-color); border-radius: 100%; box-shadow: 0px 0px 4px #fff; color: #fff; margin-left: 1em; text-align: center; width: 48px; } ._nav_hamburger-menu { display: flex; align-items: center; line-height: 1; } ._nav_hamburger-menu .nav_list { background-color: var(--main-color); color: #fff; border-bottom: solid 1px #666; border-radius: 0px 0px 0px 8px; font-size: 14px; line-height: 3; padding: 64px 1em 2px; position: fixed; right: 0; top: -800px; transition: .4s; width: 100%; max-width: 560px; 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: 32px; line-height: 48px; opacity: 1; 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(800px) } ._nav_hamburger-menu .menu-btn-check:checked ~ .menu-background-color { display: block; background-color: rgba(0, 0, 0, 0.4); opacity: 1; margin-top: -48px; position: fixed; top: 48px; left: 0; height: 100vh; width: 100%; z-index: 30; } .nav ._nav_contact ul { display: grid; grid-template-columns: repeat(2, 1fr); grid-gap: 1em; } .nav ._nav_contact ul > li { border-radius: 4px; margin-bottom: 1em; margin-top: 1em; } .nav ._nav_contact ul > li:nth-child(1) { background-color: var(--a2-color); } .nav ._nav_contact ul > li:nth-child(2) { background-color: var(--a1-color); } .nav ._nav_contact ul > li > a { color: #fff; display: flex; align-items: center; justify-content: center; padding: 4px; width: 100%; } .nav ._nav_contact ul > li > a > img { display: block; width: 32px; } .nav ._nav_contact ul > li > a p { display: block; font-size: min(3vw, 14px); line-height: 1.5; padding-left: 0.5em; } @media (max-width: 833px) { .nav { font-size: min(4vw,14px); } } @media (min-width: 834px) { .nav { font-size: 16px; } } /* page ----------------------------------------------- */ /* breadcrumbs ----------------------------------------------- */ /* contents ----------------------------------------------- */ /* main ----------------------------------------------- */ /* sub ----------------------------------------------- */ @media (max-width: 833px) { } @media (min-width: 834px) { } /* footer ----------------------------------------------- */ .footer { background-color: var(--main-color); color: #fff; padding-top: 3em; } .footer ._nav .footer_navlist > li { line-height: 2; } .footer ._footerfix .footer_contactlist > li > a { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; } .footer ._copyright { padding: 1em 0 0.5em; text-align: center; font-size: 0.75em; } @media (max-width: 833px) { .footer ._nav .footer_navlist { columns: 2; column-gap: 1em; margin: 0 auto 2em; width: 22em; } .footer ._footerfix { width: 100%; } .footer ._footerfix .footer_contactlist { margin-top: 1em; display: flex; flex-wrap: wrap; } .footer ._footerfix .footer_contactlist > li { color: #fff; box-shadow: -2px -2px 8px #333; width: 50%; height: 40px; } .footer ._footerfix .footer_contactlist > li > a > img { margin-right: 8px; margin-top: 12px; object-fit: contain; width: 16px; height: 16px; } .footer ._footerfix .footer_contactlist > li:nth-child(1) { background-color: #333; } .footer ._footerfix .footer_contactlist > li:nth-child(2) { background-color: var(--a1-color); } .footer ._footerfix .footer_contactlist > li:nth-child(1) a > p { margin-top: 8px; } } @media (min-width: 834px) { .footer { margin-top: 0em; } .footer ._nav { display: flex; flex-wrap: wrap; } .footer ._nav .footer_navlist { columns: 3; column-gap: 1em; } .footer ._nav .footer_snslist { margin-left: auto; } .footer ._footerfix { display: none; } } /* other ----------------------------------------------- */ .go_top { display: none; background-color: var(--a3-color); color: #fff; opacity: 0.9; text-align: center; text-shadow: 0px 2px 2px #aaa; } @media (max-width: 833px) { .go_top { border-radius: 100%; font-size: 20px; line-height: 40px; position: fixed; bottom: 56px; right: 16px; width: 40px; height: 40px; } .go_top img { width: 40px; } } @media (min-width: 834px) { .go_top { border-radius: 100%; font-size: 28px; line-height: 48px; position: fixed; bottom: 16px; right: 32px; width: 48px; height: 48px; } .go_top img { width: 64px; } } /* temporary ----------------------------------------------- */ /* end of file */