@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; font-family: 'Noto Sans JP', 'Lucida Grande', 'Hiragino Kaku Gothic ProN', Meiryo, sans-serif; font-weight: 200; 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, .nav, h1, h2, ._readmore > a { font-family: 'Noto Serif JP','游明朝', YuMincho, 'Hiragino Mincho ProN W3', 'ヒラギノ明朝 ProN W3', 'Hiragino Mincho ProN', 'HG明朝E', 'ＭＳＰ明朝', 'ＭＳ明朝', serif; line-height: 1.2; } h1, h2, h3, h4 { font-weight: inherit; } .lower-page .heading-1 { background-color: #e0ecff; color: #172f55; font-size: min(7vw, 2.5em); padding: 1em 0; text-align: center; } .lower-page .heading-2 { color: #172f55; font-size: min(5.5vw, 2em); margin-bottom: 3rem; text-align: center; } .lower-page .heading-2 span { padding: 0.25em 0.5em; position: relative; } .lower-page .heading-2 span::before { content: ''; border-left: solid 2px #172f55; border-top: solid 2px #172f55; display: block; position: absolute; top: 0; left: 0; width: 1em; height: 0.5em; } .lower-page .heading-2 span::after { content: ''; border-bottom: solid 2px #172f55; border-right: solid 2px #172f55; display: block; position: absolute; bottom: 0; right: 0; width: 1em; height: 0.5em; } .home .heading-2, .lower-page h1, .page h2 { margin-bottom: 1rem; } .home .sec-lv-2, .page .sec-lv-2 { padding-top: 4rem; } ._btn { margin: 4em auto; } 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 { background-color: #fff; border-radius: 100px; box-shadow: 0 0 0 2px #172f55, 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; } .footer .inner-footer ._form > a, ._btn > p > input, p > button { width: 14em; } .footer .inner-footer ._form > a > i { color: #172f55; margin-right: 1em; } .footer .inner-footer ._form > a > p, ._btn > p > input, p > button { position: relative; } .footer .inner-footer ._form > a > p::before { content: ''; display: block; animation: rotateAnime 15s linear infinite; -webkit-animation: rotateAnime 15s linear infinite; border: dashed 2px #172f55; border-radius: 50%; margin-right: 0.5em; position: absolute; top: -0.15em; left: -2.54em; width: 1.75em; height: 1.75em; } @keyframes rotateAnime { 0%{ transform:rotate(0);} 100%{ transform:rotate(360deg); } } @media (max-width: 833px) { .inner-nav, .inner-breadcrumbs, .inner-footer, .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: 64px; } .home h2, .lower-page h1, .page h2 { font-size: min(6.2vw, 2em); } } @media (min-width: 834px) { .inner-nav, .inner-breadcrumbs, .inner-footer, .sec-lv-2 > .inner-sec > .inner-sec_contents, .sec-contact > .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, .page .sec-lv-2 > .inner-sec > .inner-sec_contents, .sec-contact > .inner-sec > .inner-sec_contents, .archive .sec-archi > .inner-sec, .single .sec-sing > .inner-sec { padding-left: 1rem; padding-right: 1rem; } .contact .sec-lv-1 > .inner-sec > .inner-sec_contents { box-sizing: border-box; margin-left: auto; margin-right: auto; padding-left: 1rem; padding-right: 1rem; width: 100%; max-width: 756px; } .lower-page { margin-top: 96px; } } @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: #172f55; } } @media (hover: none) { /* hoverが使えないタッチ端末を想定した装飾 */ .footer .inner-footer ._form > a:active { background-color: rgba( 0, 0, 0, 0.6); } ._btn > p:active, { background-color: #172f55; } } /* wrapper ----------------------------------------------- */ @media (max-width: 833px) { } @media (min-width: 834px) { } /* header ----------------------------------------------- */ /* nav ----------------------------------------------- */ .nav { background-color: rgba( 255, 255, 255, 0.9); color: #333; box-shadow: 0px 2px 4px rgba(0, 0, 0, 0.2); position: fixed; top: 0; transition: .2s; width: 100%; z-index: 99; } .nav.change-color { background-color: rgba( 255, 255, 255, 0); color: #fff; box-shadow: 0px 2px 4px rgba(0, 0, 0, 0); } .nav > svg { fill: #333; } .nav.change-color ._navLogo > svg { fill: #fff; } .nav .nav-g a:hover { color: #172f55; } .nav ._navLogo > svg { position: relative; width: 144px; z-index: 99; } @media (max-width: 833px) { .nav { font-size: min(4vw,14px); height: 64px; } .nav ._navLogo > svg { width: 50vw; max-width: 96px; } ._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: -640px; transition: .4s; width: 100%; z-index: 30; } ._nav_hamburger-menu .nav_list .nav-g > li > a { border-bottom: solid 1px #ddd; color: #333; 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(640px) } ._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-radius: 4px; width: calc(50% - 4px); } .nav ._nav_contact ul > li > a { background-color: #999; border-radius: 4px; color: #fff; display: flex; align-items: center; justify-content: center; padding: 0.75em 4px; width: 100%; } .nav ._nav_contact ul > li > a i { display: block; font-size: min( 6vw, 2em); } .nav ._nav_contact ul > li > a p { display: block; font-size: min(4vw, 1em); 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: #172f55; 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: rgb(23, 47, 85); color: #fff; padding-bottom: 0.5em; padding-top: 3em; } .footer .sec-footer_contact { background-color: #fff; padding: 1em 0; } .footer .sec-footer_contact .heading-2 { color: rgb(23, 47, 85); font-size: min( 5.5vw, 1.5em); text-align: center; } .footer .sec-footer_contact ._contact_list { display: flex; flex-wrap: wrap; justify-content: space-evenly; } .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) { .footer .inner-footer ._nav > ul { display: flex; } .footer .inner-footer ._nav > ul > li { padding-right: 1em; padding-top: 1em; } .footer .inner-footer ._nav > ul > li::after { content: '|'; padding-left: 1em; } } @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: #172f55; border: solid 1px #fff; border-radius: 50%; box-shadow: 0 0 0 1px #FFF, 0 0 0 5px #172f55, 0 0 4px 6px rgba(0, 0, 0, 0.1) ; display: flex; flex-direction: column; align-items: center; justify-content: center; } .go_top { display: none; } .go_top > a { background-color: rgba(255, 255, 255, 0.6); border: thick double #172f55; 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 */