/*
* ============================================================
* 本サイト・キャリア採用サイト 共通フッタースタイル
* 両サイトのフッター修正はここに記述してください
* ============================================================
*/
:root {
--white: #FFFFFF;
--black: #212121;
--gray: #BEBFBF;
--base-color: #D9F1F4;
--main-color: #0774A4;
--shadow-primary: 0px 2px 8px rgb(0 0 0 / .04);
--shadow-secondary: 2px 2px 3px rgb(45 127 134 / .16);
--shadow-tertiary: 0px 17px 10px rgb(29 82 139 / .30);
--gradient-primary: linear-gradient(115deg,rgba(0, 177, 255, 1) 0%, rgba(7, 116, 164, 1) 55%, rgba(154, 219, 114, 1) 100%);
--gradient-primary-reverse: linear-gradient(115deg,rgba(154, 219, 114, 1) 0%, rgba(7, 116, 164, 1) 55%, rgba(0, 177, 255, 1) 100%);
--radius-sm: clamp(3px, 2.171px + 0.221vw, 5px);
--radius-md: clamp(5px, 2.928px + 0.552vw, 10px);
--radius-lg: clamp(8px, 5.099px + 0.773vw, 15px);
--radius-xl: clamp(15px, 8.785px + 1.657vw, 30px);
--radius-xxl: clamp(60px, 35.138px + 6.63vw, 120px);
--radius-full: calc(1px / 0);
--family-primary: "Noto Sans JP", sans-serif;
--family-secondary: "Helvetica Neue", arial, "Hiragino Kaku Gothic ProN", "Hiragino Sans", "Meiryo", sans-serif;
--line-height-tight: 1.2;
--line-height-snug: 1.4;
--line-height-default: 1.5;
--line-height-normal: 1.75;
--line-height-relaxed: 2;
--header-height: 100px;
--header-height-sm: 60px;
--spacing-gutter: clamp(15px, 0.497px + 3.867vw, 50px);
--spacing-gutter-outer: clamp(8px, 1.370px + 1.768vw, 24px);
--leading-trim: calc((1em - 1lh) / 2);
--text-box: trim-both cap alphabetic;
}
:root {
--icon-logo: url('data:image/svg+xml,');
--icon-logo-shape: url('data:image/svg+xml,');
--icon-arrow: url('data:image/svg+xml,');
--icon-arrow-circle-sm: url('data:image/svg+xml,');
--icon-arrow-circle-lg: url('data:image/svg+xml,');
--icon-next: url('data:image/svg+xml,');
--icon-prev: url('data:image/svg+xml,');
--icon-tel: url('data:image/svg+xml,');
}
.footer {
background-color: var(--white);
padding-top: clamp(5rem, 3.02rem + 8.13vw, 8.75rem);
padding-bottom: clamp(1.25rem, -4.03rem + 21.68vw, 11.25rem);
position: relative;
}
.footer__wrapper {
border-top: 2px solid #263770;
padding-top: 40px;
display: flex;
justify-content: space-between;
gap: 50px 40px;
}
@media (max-width: 1080px) {
.footer__wrapper {
display: grid;
grid-template-columns: 1fr;
}
}
.footer__meta address {
font-size: clamp(0.75rem, 0.65rem + 0.407vw, 0.9375rem);
font-weight: 700;
line-height: var(--line-height-normal);
margin-block: 1.5em;
}
@media (max-width: 1080px) {
.footer__meta address {
text-align: center;
}
}
.footer__meta ul a {
display: block;
transition: opacity 0.2s ease-in-out;
}
.footer__meta ul a:focus-visible {
opacity: 0.7;
}
@media (any-hover: hover) {
.footer__meta ul a:hover {
opacity: 0.7;
}
}
@media (max-width: 1080px) {
.footer__meta li {
width: -moz-fit-content;
width: fit-content;
margin-inline: auto;
}
}
.footer__logo a {
display: block;
transition: opacity 0.2s ease-in-out;
}
.footer__logo a:focus-visible {
opacity: 0.7;
}
@media (any-hover: hover) {
.footer__logo a:hover {
opacity: 0.7;
}
}
.footer__logo img {
width: clamp(10rem, 5.91rem + 6.504vw, 10.5rem);
}
@media (max-width: 1080px) {
.footer__logo{
text-align: center;
}
.footer__logo img {
margin-inline: auto;
}
}
.footer__nav {
display: flex;
justify-content: space-between;
gap: 40px;
}
@media (min-width: 1440px) {
.footer__nav {
justify-content: end;
gap: 5vw;
}
}
@media (max-width: 1180px) {
.footer__nav {
gap: 24px;
}
}
@media (max-width: 599px) {
.footer__nav {
display: block;
max-width: 380px;
width: 100%;
margin-inline: auto;
border-bottom: 1px solid #eee;
}
}
.f-nav a {
transition: color 0.2s ease-in;
}
.f-nav a:focus-visible {
color: var(--main-color);
}
@media (any-hover: hover) {
.f-nav a:hover {
color: var(--main-color);
}
}
@media (max-width: 599px) {
.f-nav__item {
border-top: 1px solid #eee;
}
}
.f-nav__item > a {
font-size: clamp(0.875rem, 0.81rem + 0.271vw, 1rem);
font-weight: 700;
}
@media (max-width: 599px) {
.f-nav__item > a {
display: grid;
grid-template-columns: max-content 1fr;
gap: 0.5em;
padding: 1.2em 1em;
}
}
.f-nav__item + .f-nav__item {
margin-top: 1em;
}
@media (max-width: 599px) {
.f-nav__item + .f-nav__item {
margin-top: 0;
}
}
@media (max-width: 599px) {
.f-nav__item br {
display: none;
}
}
.f-nav-child {
margin-top: 0.5em;
}
@media (max-width: 599px) {
.f-nav-child {
margin-top: 0;
margin-bottom: 1em;
padding-left: 1em;
}
}
.f-nav-child__item > a {
font-size: clamp(0.75rem, 0.72rem + 0.136vw, 0.8125rem);
font-weight: 400;
line-height: 1.85;
}
@media (max-width: 599px) {
.f-nav-child__item > a {
display: grid;
grid-template-columns: max-content 1fr;
align-items: center;
gap: 0.8em;
padding: 0.5em;
}
}
@media (max-width: 599px) {
.f-nav-child__item > a::before {
content: "";
display: inline-block;
width: 0.6em;
height: 1px;
background-color: var(--main-color);
opacity: 0.5;
translate: 0 0.1em;
}
}
.footer__pagetop {
position: absolute;
bottom: 24px;
right: 24px;
z-index: 100;
border-radius: 50%;
box-shadow: 0 2px 14px rgba(0, 0, 0, 0.24);
transition: opacity 0.2s ease-in-out;
}
.footer__pagetop:focus-visible {
opacity: 0.7;
}
@media (any-hover: hover) {
.footer__pagetop:hover {
opacity: 0.7;
}
}
@media (max-width: 979px) {
.footer__pagetop {
bottom: 20px;
right: 20px;
}
}
.footer__pagetop img {
width: clamp(2.5rem, 1.24rem + 5.149vw, 4.875rem);
height: clamp(2.5rem, 1.24rem + 5.149vw, 4.875rem);
}/*# sourceMappingURL=footer.css.map */
.footer__bottom{
margin-top: 40px;
border-bottom: 1px solid #263770;
padding-bottom: 20px;
display: flex;
}
.footer__under{
margin-top: 20px;
display: flex;
justify-content: space-between;
align-items: center;
}
.footer__logo-group a {
display: block;
transition: opacity 0.2s ease-in-out;
}
.footer__logo-group a:focus-visible {
opacity: 0.7;
}
.footer__copyright {
font-family: var(--family-secondary);
font-size: 1rem;
font-weight: bold;
text-align: right;
}
@media (any-hover: hover) {
.footer__logo-group a:hover {
opacity: 0.7;
}
}
@media (max-width: 1080px) {
.footer__bottom {
justify-content: center;
}
.footer__bottom__sns{
text-align: center;
}
.footer__logo-group img {
margin-inline: auto;
}
.footer__copyright {
text-align: center;
}
}
@media (max-width: 599px) {
.footer__under{
flex-direction: column;
}
.footer__logo-group{
margin-bottom: 50px;
}
.footer__copyright{
font-size: 12px;
}
}