.footer { background-color: var(--color-primary); color:#fff; } .footer__inner { display: grid; grid-template-areas: "logo" "sns" "menu" ; gap: var(--gap); padding: var(--y-gap) var(--x-gap); } .footer__inner--no-sns { grid-template-areas: "logo" "menu" ; } .footer__inner--no-menu { grid-template-areas: "logo" "sns" ; } .footer__inner--no-sns.footer__inner--no-menu { grid-template-areas: "logo"; } .footer__label { font-weight: bold; margin-bottom: 5px; } .footer__title {--heading:23;text-decoration:underline;text-underline-offset: 7px;} .footer__logo { grid-area: logo; margin:0 auto; } .footer__logo img { width: 186px; } .policy__menu { display: flex; align-items: center; justify-content:center; margin-top: .5rem; flex-wrap:wrap; gap:1rem; } .policy__menu .menu__item { font-size: 12px; } .policy__menu button.menu__link { padding: 0; color: inherit; line-height: inherit; text-decoration: none; text-underline-offset: 0.4em; cursor: pointer; } .policy__menu button.menu__link:hover, .policy__menu button.menu__link:focus { text-decoration: underline; } .footer__sns { grid-area: sns; display:flex; align-items:center; justify-content:flex-end; margin:0 auto; } .footer__menu-container { grid-area: menu; text-align: center; } .footer__bottom { display: flex; justify-content: center; align-items:flex-end; flex-wrap: wrap; font-size: 12px; line-height: 1; padding: 1rem var(--x-gap); color: #fff; } .footer__bottom-logo img {max-width:75px;display:block;margin:1rem auto;} @media(min-width: 512px) { .footer__inner { grid-template-areas: "logo sns" "menu ." ; grid-template-columns: 1fr auto; } .footer__inner--no-sns { grid-template-areas: "logo menu"; } .footer__inner--no-menu { grid-template-areas: "logo sns"; } .footer__inner--no-sns.footer__inner--no-menu { grid-template-areas: "logo"; grid-template-columns: 1fr; } .footer__menu-container { text-align: left; } .footer__inner--no-sns .footer__menu-container { text-align: right; } .footer__logo, .footer__sns { margin:0; } .footer__bottom { justify-content: space-between; } .footer__bottom-logo img {margin:0 0 1rem auto;} .policy__menu {gap:0;} .policy__menu .menu__item:not(:last-child)::after { content: ''; display: inline-block; margin: 0 .5rem; background-color: currentColor; width: 1px; height: 1em; } } @media(min-width: 992px) { .footer__inner { grid-template-areas: "logo sns" "menu ." ; grid-template-columns: auto 1fr; } .footer__inner--no-sns { grid-template-areas: "logo menu"; grid-template-columns: auto 1fr; } .footer__inner--no-menu { grid-template-areas: "logo sns"; grid-template-columns: auto 1fr; } .footer__inner--no-sns.footer__inner--no-menu { grid-template-areas: "logo"; grid-template-columns: 1fr; } }  .copyright {background-color: #121212;} .copyright-wrapper { display: flex; justify-content: center; text-align:center; flex-wrap: wrap; font-size: 12px; line-height: 1; padding: 1rem var(--x-gap); color: #fff; } .copyright img { height: 1.1em; vertical-align: middle; }