@charset "utf-8";

:root {
  --mu: 10px;
  --mf-bg: #000;
  --mf-text: #c0c0c0;
  --mf-title: #fff;
  --mf-line: rgba(255, 255, 255, 0.2);
  --mf-hair: rgba(255, 255, 255, 0.05);
  --mf-box: rgba(255, 255, 255, 0.05);
}
@media (max-width: 1280px) { :root { --mu: 0.78125vw; } }
@media screen and (max-width: 959px) { :root { --mu: 10px; } }
@media (max-width: 375px) { :root { --mu: 2.66667vw; } }

.mf { background-color: var(--mf-bg); color: var(--mf-text); padding: calc(var(--mu) * 8) 0; font-family: var(--font-ja); font-feature-settings: "palt"; letter-spacing: 0.08em; line-height: 2; font-size: calc(var(--mu) * 1.6); -webkit-font-smoothing: antialiased; }
.mf, .mf * { box-sizing: border-box; }   
.mf a { color: inherit; text-decoration: none; transition: 0.2s ease-in-out; }
.mf img { display: block; max-width: 100%; }
.mf ul { list-style: none; margin: 0; padding: 0; }
.mf p { margin: 0; }
.mf .u-mobile { display: none; }
.mf__inner { max-width: calc(var(--mu) * 160); margin-inline: auto; padding: 0 calc(var(--mu) * 4.8); }

.mf__nav { display: flex; gap: calc(var(--mu) * 6.6); }
.mf__col { position: relative; width: calc(var(--mu) * 21.6); }
.mf__col:not(:last-child)::after { content: ""; width: calc(var(--mu) * 0.2); height: calc(var(--mu) * 3.2); background-color: var(--mf-hair); position: absolute; top: 0; right: calc(var(--mu) * -3.3); }
.mf__title { display: inline-block; font-size: calc(var(--mu) * 2); font-weight: 700; line-height: 1.4; letter-spacing: 0.08em; color: var(--mf-title); transition: color 0.2s ease-in-out; }
@media (any-hover: hover) { .mf__title:hover { color: var(--mf-text); } }
.mf .mf__list { display: flex; flex-direction: column; gap: calc(var(--mu) * 1.6); margin-top: calc(var(--mu) * 3.2); }
.mf .mf__sns { margin-top: calc(var(--mu) * 3.2); }
.mf__item { font-size: calc(var(--mu) * 1.4); font-weight: 700; line-height: 1.71429; letter-spacing: 0.08em; color: var(--mf-text); }
.mf__link[target="_blank"]::after { content: ""; display: inline-block; width: calc(var(--mu) * 1.1); height: calc(var(--mu) * 1); background-color: var(--mf-text); -webkit-mask: url("../img/icon-arrow.svg") center center / contain no-repeat; mask: url("../img/icon-arrow.svg") center center / contain no-repeat; rotate: -45deg; margin-left: calc(var(--mu) * 0.8); }

.mf__middle { display: flex; justify-content: space-between; align-items: center; margin-top: calc(var(--mu) * 8); }
.mf__social { display: flex; gap: calc(var(--mu) * 0.8); }
.mf__socialLink { position: relative; display: flex; align-items: center; justify-content: space-between; gap: calc(var(--mu) * 3); padding: calc(var(--mu) * 2.6) calc(var(--mu) * 2.4); background-color: var(--mf-box); border: 1px solid var(--mf-line); border-radius: calc(var(--mu) * 1.6); transition: 0.2s ease-in-out; }
.mf__socialLink--noText { padding: calc(var(--mu) * 3) calc(var(--mu) * 3.8); }
.mf__socialLogo { position: relative; flex-shrink: 0; }
.mf__socialLogo img { width: 100%; height: auto; object-fit: contain; transition: 0.2s ease-in-out; }
.mf__socialLogo img:last-child { position: absolute; top: 0; left: 0; opacity: 0; visibility: hidden; }
.mf__socialText { font-size: calc(var(--mu) * 1.4); font-weight: 700; line-height: 1.4; letter-spacing: 0.08em; color: var(--mf-title); transition: color 0.2s ease-in-out; }
.mf__socialIcon { position: absolute; right: calc(var(--mu) * 0.8); bottom: calc(var(--mu) * 0.8); display: block; flex-shrink: 0; width: calc(var(--mu) * 1.1); height: calc(var(--mu) * 1); background-color: var(--mf-title); -webkit-mask: url("../img/icon-arrow.svg") center center / contain no-repeat; mask: url("../img/icon-arrow.svg") center center / contain no-repeat; rotate: -45deg; transition: 0.2s ease-in-out; }
@media (any-hover: hover) {
  .mf__socialLink:hover { opacity: 1; background-color: #fff; }
  .mf__socialLink:hover .mf__socialText { color: #000; }
  .mf__socialLink:hover .mf__socialIcon { background-color: #000; }
  .mf__socialLink:hover .mf__socialLogo img:last-child { opacity: 1; visibility: visible; }
}
.mf__logoArea { display: flex; flex-wrap: wrap; align-items: center; gap: calc(var(--mu) * 5.6); }
.mf__logo img { width: calc(var(--mu) * 26.9); height: auto; object-fit: contain; }
@media (any-hover: hover) { .mf__logo:hover { opacity: 1; } }

.mf__sns { display: flex; flex-wrap: wrap; align-items: center; gap: calc(var(--mu) * 1.6); margin-top: calc(var(--mu) * 3.2); }
.mf__snsLink { display: block; }
.mf__snsLink img { height: auto; transition: transform 0.3s cubic-bezier(0.15, 0.07, 0, 1); }   
.mf__snsLink--linkedin img { width: calc(var(--mu) * 3.3); }
.mf__snsLink--facebook img { width: calc(var(--mu) * 3.2); }
@media (any-hover: hover) { .mf__snsLink:hover { opacity: 1; } .mf__snsLink:hover img { transform: scale(1.2); } }

.mf__bottom { padding-top: calc(var(--mu) * 3.2); margin-top: calc(var(--mu) * 5.6); border-top: 1px solid var(--mf-line); }
.mf__bottomInner { display: flex; align-items: center; justify-content: space-between; }
.mf__copyright { font-size: calc(var(--mu) * 1.4); line-height: 1; letter-spacing: 0.08em; font-family: "Roboto", var(--font-ja); }
.mf__bottomLinks { display: flex; align-items: center; gap: calc(var(--mu) * 4); }
.mf__bottomItem { position: relative; font-size: calc(var(--mu) * 1.4); font-weight: 700; line-height: 1.4; letter-spacing: 0.08em; }
.mf__bottomItem:not(:first-child)::before { content: ""; position: absolute; top: calc(50% - var(--mu) * 0.1); left: calc(var(--mu) * -2); width: 1px; height: calc(var(--mu) * 0.8); background-color: var(--mf-text); transform: translateY(-50%); }

@media screen and (max-width: 959px) {
  .mf { padding: calc(var(--mu) * 5.6) 0; line-height: 1.8; }
  .mf .u-mobile { display: block; }
  .mf__inner { padding: 0 calc(var(--mu) * 3); }
  .mf__nav { display: grid; grid-template-columns: repeat(2, 1fr); gap: calc(var(--mu) * 4) calc(var(--mu) * 1.2); }
  .mf__col { width: 100%; }
  .mf__col:not(:last-child)::after { display: none; }
  .mf__col--sns { grid-column: span 2; display: grid; grid-template-columns: 1fr 1fr; grid-template-rows: auto auto; gap: 0 calc(var(--mu) * 1.6); }
  .mf__col--sns .mf__title { grid-area: 1 / 1 / 2 / 2; }
  .mf__col--sns .mf__list { grid-area: 2 / 1 / 3 / 2; }
  .mf__col--sns .mf__sns { grid-area: 1 / 2 / 3 / 3; align-items: flex-end; justify-content: flex-end; margin-top: 0; }
  .mf__title { font-size: calc(var(--mu) * 1.6); }
  .mf .mf__list { gap: calc(var(--mu) * 1.2); margin-top: calc(var(--mu) * 1.6); }
  .mf__item { font-size: calc(var(--mu) * 1.2); }
  .mf__link[target="_blank"]::after { width: calc(var(--mu) * 0.9); height: calc(var(--mu) * 0.8); margin-left: calc(var(--mu) * 0.5); }
  .mf__middle { flex-direction: column; gap: calc(var(--mu) * 4.8); margin-top: calc(var(--mu) * 4.8); }
  .mf__social { display: grid; grid-template-columns: repeat(auto-fill, minmax(calc(var(--mu) * 31), 1fr)); gap: calc(var(--mu) * 0.8); width: 100%; }
  .mf__socialLink, .mf__socialLink--noText { width: 100%; min-height: calc(var(--mu) * 6.4); padding: calc(var(--mu) * 1.8) calc(var(--mu) * 2.4); justify-content: center; }
  .mf__logoArea { justify-content: center; gap: calc(var(--mu) * 3.2); }
  .mf__logo img { width: calc(var(--mu) * 22.5); }
  .mf__bottom { padding-top: calc(var(--mu) * 1.6); margin-top: calc(var(--mu) * 4.8); }
  .mf__bottomInner { flex-direction: column; gap: calc(var(--mu) * 2.4); align-items: center; }
  .mf__copyright { font-size: calc(var(--mu) * 1); order: 2; }
  .mf__bottomLinks { flex-direction: column; gap: calc(var(--mu) * 0.8); }
  .mf__bottomItem { font-size: calc(var(--mu) * 1.2); line-height: 2; }
  .mf__bottomItem:not(:first-child)::before { display: none; }
}