@charset "UTF-8";
:root {
  --akagi-white: white;
  --akagi-black: black;
  --akagi-lime: #F0FF8D;
  --akagi-orange: #FF3D07;
  --base: #2C2C2C;
  --link: #1CA8FF;
  --layer-1: 1;
  --layer-2: 2;
  --layer-3: 3;
  --layer-4: 4;
  --layer-5: 5;
}

.svg-symbol {
  display: none;
}

html,
body {
  height: 100%;
  overflow: auto;
  scrollbar-gutter: stable;
}

body {
  color: var(--base);
  font-family: "Zen Kaku Gothic New", sans-serif;
  font-weight: 500;
  line-height: 2;
  overflow-x: hidden;
}

/*
A modern CSS reset 2023 / 9 / 18
https://github.com/Andy-set-studio/modern-css-reset
*/
*, *::before, *::after {
  box-sizing: border-box;
}

html {
  -moz-text-size-adjust: none;
  -webkit-text-size-adjust: none;
  text-size-adjust: none;
}

body, h1, h2, h3, h4, p, figure, blockquote, dl, dd {
  margin: 0;
}

ul[role=list], ol[role=list] {
  list-style: none;
}

body {
  min-height: 100vh; /*line-height:1.5*/
} /*h1,h2,h3,h4,button,input,label{line-height:1.1}h1,h2,h3,h4{text-wrap:balance}*/
a:not([class]) {
  text-decoration-skip-ink: auto;
  color: currentColor;
}

img, picture {
  max-width: 100%;
  display: block;
}

input, button, textarea, select {
  font: inherit;
}

textarea:not([rows]) {
  min-height: 10em;
}

:target {
  scroll-margin-block: 5ex;
}

/**  base  **/
p,
ul,
ol,
h1,
h2,
h3,
figure,
dl,
dd,
button,
pre {
  margin: 0;
  padding: 0;
}

h1, h2, h3, h4, h5, h6 {
  font-weight: normal;
}

ul,
ol {
  list-style: none;
}

img,
video {
  max-width: 100%;
  vertical-align: bottom;
  line-height: 1;
}

button {
  background-color: transparent;
  border: none;
  cursor: pointer;
  outline: none;
  appearance: none;
}

a {
  color: currentColor;
  text-decoration: none;
  transition: all 0.25s ease;
}
@media (hover: hover) {
  a:hover {
    filter: brightness(1.1);
  }
}

*:focus {
  outline: none;
}

body {
  overflow-wrap: anywhere; /* 収まらない場合に折り返す */
  word-break: normal; /* 単語の分割はデフォルトに依存 */
  line-break: strict; /* 禁則処理を厳格に適用 */
}

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

a:not([class])[target=_blank]::after {
  margin: 0 3px 0 1px;
  font-family: "Hobonichi-Icons";
  content: "\e914";
  font-size: 85%;
  position: relative;
  top: -3px;
}

.cover {
  position: relative;
  background-color: #032C2C;
}
.cover .en,
.cover .ja {
  position: absolute;
  top: 0;
  left: 0;
}
.cover .en {
  display: grid;
  grid-template-areas: "word";
}
.cover .en > * {
  grid-area: word;
  height: auto;
}
.cover .en {
  width: 50.2659574468%;
  aspect-ratio: 189/140;
  margin: 5.585106383% 0 0 4.5212765957%;
}
.cover .w-you-u {
  --a-delay: 0s;
  width: 21.6931216931%;
  aspect-ratio: 41/16;
  margin: 0% 0 0 0%;
}
.cover .w-can {
  --a-delay: 0.25s;
  width: 21.164021164%;
  aspect-ratio: 40/12;
  margin: 2.1164021164% 0 0 43.9153439153%;
}
.cover .w-go {
  --a-delay: 0.5s;
  width: 13.7566137566%;
  aspect-ratio: 26/16;
  margin: 2.1164021164% 0 0 86.2433862434%;
}
.cover .w-anywhere {
  --a-delay: 0.75s;
  width: 61.3756613757%;
  aspect-ratio: 116/22;
  margin: 31.2169312169% 0 0 0%;
}
.cover .w-you-l {
  --a-delay: 1s;
  width: 21.6931216931%;
  aspect-ratio: 41/16;
  margin: 65.6084656085% 0 0 0%;
}
.cover .w-wish {
  --a-delay: 1.25s;
  width: 29.1005291005%;
  aspect-ratio: 55/18;
  margin: 62.962962963% 0 0 43.3862433862%;
}
.cover .w-full-stop {
  --a-delay: 1.5s;
  width: 2.6455026455%;
  aspect-ratio: 5/4;
  margin: 69.8412698413% 0 0 76.7195767196%;
}
.cover [class^=w-],
.cover .ja span {
  opacity: 0;
  transform: skewX(10deg) scaleY(0.5);
  animation: word 1s var(--a-delay) ease-in-out forwards;
}
.cover .ja {
  margin: 52.6595744681% 0 0 3.9893617021%;
  color: var(--akagi-lime);
  font-size: 3.9893617021cqi;
  line-height: 1.86667;
  letter-spacing: 0.05em;
  font-weight: 700;
}
.cover .ja span {
  display: block;
}
.cover .ja span:first-of-type {
  --a-delay: calc(0.25s * 9) ;
}
.cover .ja span:last-of-type {
  --a-delay: calc(0.25s * 10) ;
}
.cover .logo {
  position: absolute;
  right: 0;
  bottom: 0;
  width: 54.7872340426%;
  height: auto;
  margin: 0 calc(50% - 27.3936170213%) 7.4468085106% 0;
}
@media (width > 48rem) {
  .cover .en {
    width: 17.5%;
    aspect-ratio: 252/179;
    margin: 5.3472222222% 0 0 3.75%;
  }
  .cover .w-you-u {
    --a-delay: 0s;
    width: 21.8253968254%;
    aspect-ratio: 55/22;
    margin: 0% 0 0 0%;
  }
  .cover .w-can {
    --a-delay: 0.25s;
    width: 21.0317460317%;
    aspect-ratio: 53/17;
    margin: 2.380952381% 0 0 43.6507936508%;
  }
  .cover .w-go {
    --a-delay: 0.5s;
    width: 13.8888888889%;
    aspect-ratio: 35/22;
    margin: 2.380952381% 0 0 86.1111111111%;
  }
  .cover .w-anywhere {
    --a-delay: 0.75s;
    width: 61.1111111111%;
    aspect-ratio: 154/28;
    margin: 29.7619047619% 0 0 0%;
  }
  .cover .w-you-l {
    --a-delay: 1s;
    width: 21.8253968254%;
    aspect-ratio: 55/22;
    margin: 62.6984126984% 0 0 0%;
  }
  .cover .w-wish {
    --a-delay: 1.25s;
    width: 29.3650793651%;
    aspect-ratio: 74/24;
    margin: 59.9206349206% 0 0 43.253968254%;
  }
  .cover .w-full-stop {
    --a-delay: 1.5s;
    width: 2.380952381%;
    aspect-ratio: 6/5;
    margin: 67.0634920635% 0 0 76.5873015873%;
  }
  .cover .ja {
    margin: 24.375% 0 0 3.5416666667%;
    font-size: 1.25cqi;
    line-height: 1.77778;
  }
  .cover .logo {
    width: 21.5277777778%;
    margin: 0 3.75% 3.9583333333% 0;
  }
}

@keyframes word {
  0% {
    transform: skewX(10deg) scaleY(0.5);
    opacity: 0;
    filter: blur(10px);
  }
  30% {
    opacity: 1;
  }
  100% {
    transform: skewX(0deg) scaleY(1);
    opacity: 1;
    filter: blur(0);
  }
}
@keyframes reveal-left-to-right {
  to {
    clip-path: rect(0% 100% 100% 0%);
  }
}
.slide {
  --duration: 12s;
  --slide-play-state: paused;
  display: grid;
  grid-template-areas: "slide";
  aspect-ratio: 376/600;
}
.cover.active .slide {
  --slide-play-state: running;
}
.slide > * {
  grid-area: slide;
}
.slide picture {
  position: relative;
  z-index: 0;
  opacity: 0;
  animation: cover var(--duration) var(--delay) linear infinite;
  animation-play-state: var(--slide-play-state);
  backface-visibility: hidden;
}
.slide picture:nth-of-type(1) {
  --delay: 0s;
}
.slide picture:nth-of-type(2) {
  --delay: 4s;
}
.slide picture:nth-of-type(3) {
  --delay: 8s;
}
.slide img {
  width: 100%;
  height: auto;
  backface-visibility: hidden;
}
@media (width > 48rem) {
  .slide {
    aspect-ratio: 1440/904;
  }
}

@keyframes cover {
  0% {
    opacity: 0;
  }
  16.67% {
    opacity: 1;
  }
  33.33% {
    opacity: 1;
  }
  50.00% {
    opacity: 0;
  }
  100% {
    opacity: 0;
  }
}
.yodogawa {
  position: relative;
  z-index: var(--layer-3);
  min-height: 100svh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 1.5rem 0;
  padding-block: 1.5rem;
  color: var(--akagi-white);
  background-color: rgba(0, 0, 0, 0.4);
}
.yodogawa .para {
  width: min(89.3617021277%, 26.25rem);
}
.yodogawa p {
  font-size: 0.9375rem;
  text-align: justify;
}
.yodogawa p + p {
  margin-top: 2em;
}
@media (width > 48rem) {
  .yodogawa {
    gap: 4rem 0;
  }
  .yodogawa p {
    white-space: pre-line;
  }
  .yodogawa img {
    width: 12.25rem;
    height: auto;
  }
}

.main {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.section {
  --section-pad: 2.5rem;
  position: relative;
  z-index: var(--layer-3);
  display: grid;
  justify-items: center;
  width: 100%;
  padding-block: var(--section-pad);
  font-size: 0.9375rem;
  line-height: 2;
  background-color: var(--akagi-white);
}
.section-content {
  width: min(89.3617021277%, 62.5rem);
}
@media (width > 48rem) {
  .section {
    --section-pad: 4rem;
  }
  .section-content {
    width: fit-content;
  }
}

.lime {
  width: 100%;
  background-color: var(--akagi-lime);
}

.stick {
  position: sticky;
  top: 0;
  z-index: var(--layer-1);
  width: 100%;
  height: 100svh;
}
.stick.layer-top {
  z-index: var(--layer-2);
}
.stick picture {
  height: 100%;
}
.stick img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center center;
}
.stick figcaption {
  position: absolute;
}
.stick figcaption.fig-akagi {
  top: 2.0625rem;
  left: 1.25rem;
}
.stick figcaption.fig-picnic {
  top: 2rem;
  left: 1.25rem;
}
.stick figcaption {
  color: var(--akagi-white);
  font-size: 1.125rem;
  font-weight: 900;
}
.stick figcaption small {
  display: block;
  font-size: 0.9375rem;
  font-weight: 500;
}
@media (height <= 500px) {
  .stick {
    position: relative;
    height: 200svh;
  }
}
@media (width > 48rem) {
  .stick figcaption {
    font-size: 1.5rem;
    transform: translateY(-50%);
  }
  .stick figcaption.fig-akagi {
    top: 50%;
    left: min(5.5555555556cqi, 5rem);
  }
  .stick figcaption.fig-picnic {
    top: 50%;
    left: unset;
    right: min(5.5555555556cqi, 5rem);
  }
}

.non-stick {
  position: relative;
  z-index: 5;
}

.split {
  position: relative;
  z-index: var(--layer-3);
  width: 100%;
  height: 100svh;
  display: grid;
  grid-template-rows: 77.3333333333% auto;
  background-color: var(--akagi-white);
}
.split img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.split div {
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}
.split h2 {
  font-weight: 700;
}
.split span,
.split small {
  display: block;
}
.split span {
  font-size: 0.9375rem;
  line-height: 1.6;
}
.split span:last-of-type {
  text-indent: 6ch;
}
.split small {
  margin-top: 0.5rem;
  font-size: 0.9375rem;
  line-height: 1.4666666667;
  text-align: center;
}
@media (height <= 500px) {
  .split {
    position: relative;
    height: 150dvh;
  }
}
@media (width > 48rem) {
  .split {
    grid-template-rows: 53.0973451327% auto;
  }
  .split span {
    font-size: 1rem;
    line-height: 2;
  }
  .split small {
    font-size: 0.8125rem;
    line-height: 1.4615384615;
  }
}

.decker {
  position: relative;
  z-index: var(--layer-3);
  width: 100%;
  min-height: 37.5rem;
  display: grid;
  align-items: center;
  justify-items: center;
  gap: 1rem;
  padding-block: 1.25rem;
  background-color: var(--akagi-lime);
}
@media (width > 48rem) {
  .decker {
    height: 42.5rem;
  }
}

.cards {
  --card-gap: 1rem;
  display: grid;
  justify-items: center;
  gap: 1rem min(4%, 2.5rem);
}
@media (width > 48rem) {
  .cards {
    width: min(90%, 62.5rem);
    grid-template-columns: repeat(2, 1fr);
  }
  .cards .card {
    width: 100%;
  }
}

.card {
  display: grid;
  gap: var(--card-gap, 1.5rem) 0;
  width: min(74.4680851064%, 30rem);
}
.card img {
  width: 100%;
  height: auto;
}
.card-title {
  position: relative;
  color: var(--akagi-orange);
  text-align: left;
  transition: filter 0.6s cubic-bezier(0.165, 0.84, 0.44, 1);
}
.card-title:active, .card-title:focus, .card-title:hover {
  filter: brightness(1.25);
}
.card-title:active::after, .card-title:focus::after, .card-title:hover::after {
  transform: rotate(90deg);
}
.card-title > * {
  display: block;
}
.card-title span {
  margin-bottom: 0.25rem;
  font-size: 1.125rem;
  line-height: 1.6111111111;
}
.card-title small {
  font-size: 0.8125rem;
  line-height: 1.4615384615;
}
.card-title::after {
  content: "";
  position: absolute;
  top: 0;
  right: 0;
  display: block;
  width: 2rem;
  height: 2rem;
  background-color: currentColor;
  mask: url('data:image/svg+xml,<svg viewBox="0 0 32 32" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M31.5 16C31.5 24.5604 24.5604 31.5 16 31.5C7.43959 31.5 0.5 24.5604 0.5 16C0.5 7.43959 7.43959 0.5 16 0.5C24.5604 0.5 31.5 7.43959 31.5 16Z" stroke="black"/><path d="M6.66667 15.3333H25.3333" stroke-width="1.33333" stroke-linecap="round" stroke="black"/><path d="M15.9997 6.66667L15.9997 25.3333" stroke-width="1.33333" stroke-linecap="round" stroke="black"/></svg>') center/100% no-repeat;
  transition: transform 0.6s cubic-bezier(0.075, 0.82, 0.165, 1);
}
@media (width > 48rem) {
  .card-title span {
    margin-block: 0.5rem 0.25rem;
    font-size: 1.5rem;
    line-height: 1.2083333333;
  }
}

.has-dialog {
  overflow: hidden;
}

.dialog {
  max-width: unset;
  max-height: unset;
  padding: 0;
  border: none;
  background-color: transparent;
}
.dialog[open] {
  animation: dialogOpen 0.2s ease;
}
.dialog[open] .segment {
  animation: dialogUp 0.6s cubic-bezier(0.165, 0.84, 0.44, 1) forwards;
}
.dialog.close-dialog .segment {
  animation: dialogDown 0.6s cubic-bezier(0.165, 0.84, 0.44, 1);
}

@keyframes dialogUp {
  0% {
    opacity: 0;
    transform: translateY(100%);
  }
  10% {
    opacity: 1;
  }
  100% {
    opacity: 1;
    transform: translateY(0%);
  }
}
@keyframes dialogDown {
  0% {
    opacity: 1;
    transform: translateY(0%);
  }
  90% {
    opacity: 0;
  }
  100% {
    opacity: 0;
    transform: translateY(100%);
  }
}
.segment {
  position: fixed;
  inset: 0;
  overflow-y: auto;
  display: grid;
  justify-items: center;
  gap: 1rem 0;
  padding-block: 1.5rem;
  font-weight: 400;
  background-color: var(--akagi-white);
}
.segment .action {
  position: sticky;
  top: 0;
  z-index: 5;
}
.segment .action,
.segment .content {
  width: min(89.3617021277%, 27.5rem);
}
.segment .close {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 3rem;
  height: 3rem;
  margin-left: auto;
  color: var(--akagi-orange);
  font-size: 0;
  background-color: rgba(255, 255, 255, 0.16);
  backdrop-filter: blur(1px);
  border: 2px solid currentColor;
  border-radius: 50%;
  transition: filter 0.6s cubic-bezier(0.165, 0.84, 0.44, 1);
}
.segment .close:active, .segment .close:focus, .segment .close:hover {
  filter: brightness(1.25);
}
.segment .close:active::before, .segment .close:focus::before, .segment .close:hover::before {
  transform: rotate(90deg);
}
.segment .close::before {
  content: "";
  display: block;
  flex: none;
  width: 1.5rem;
  height: 1.375rem;
  background-color: currentColor;
  mask: url('data:image/svg+xml,<svg viewBox="0 0 24 22" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M21.5059 0.292969C21.8964 -0.0975551 22.5294 -0.0975543 22.9199 0.292969C23.3104 0.683493 23.3104 1.31651 22.9199 1.70703L13.0205 11.6064L21.5059 20.0918C21.8964 20.4823 21.8964 21.1153 21.5059 21.5059C21.1153 21.8964 20.4823 21.8964 20.0918 21.5059L11.6064 13.0205L3.12109 21.5059C2.73057 21.8964 2.09756 21.8964 1.70703 21.5059C1.31651 21.1153 1.31651 20.4823 1.70703 20.0918L10.1924 11.6064L0.292969 1.70703C-0.0975556 1.31651 -0.0975555 0.683493 0.292969 0.292969C0.683493 -0.0975556 1.31651 -0.0975555 1.70703 0.292969L11.6064 10.1924L21.5059 0.292969Z" fill="black"/></svg>') center/100% no-repeat;
  transition: transform 0.6s cubic-bezier(0.165, 0.84, 0.44, 1);
}
.segment a {
  color: var(--link);
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-thickness: 0.5px;
}
.segment-header {
  display: grid;
  grid-template-columns: 7.5rem auto;
  gap: 0 1rem;
  margin-bottom: 1rem;
}
.segment h3 {
  color: var(--akagi-orange);
  font-weight: 500;
}
.segment h3 span,
.segment h3 small {
  display: block;
}
.segment h3 small {
  font-size: 0.8125rem;
  line-height: 1.4615384615;
}
.segment h3 span {
  margin-block: 0.5rem 0.25rem;
  font-size: 1.5rem;
  line-height: 1.2083333333;
}
.segment .blocks {
  display: grid;
  gap: 2.5rem;
  margin-bottom: 2.5rem;
}
.segment .block {
  display: grid;
  grid-template-rows: auto 1fr;
  gap: 1rem 0;
  font-size: 0.9375rem;
  container: block/inline-size;
}
.segment .block h4 {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 6.5rem;
  padding-inline: 1rem;
  line-height: 1.4666666667;
  font-weight: 700;
  background-color: var(--akagi-lime);
}
.segment .block br {
  display: none;
}
@container block (width >= 440px) {
  .segment .block br {
    display: block;
  }
}
.segment .profile {
  display: grid;
  gap: 1rem 0;
  container: profile/inline-size;
  font-size: 0.8125rem;
}
.segment .profile img {
  display: none;
}
.segment .profile h4 {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 12.5rem;
  height: 1.5rem;
  color: var(--akagi-orange);
  font-weight: 500;
  border: 1px solid currentColor;
}
.segment .profile br {
  display: none;
}
.segment .profile .para + .para,
.segment .profile .para + dl,
.segment .profile dl + dl {
  margin-top: 2em;
}
.segment .profile .links.marb {
  margin-bottom: 2em;
}
@container profile (width >= 336px) {
  .segment .profile br {
    display: block;
  }
}
.segment p {
  text-align: justify;
}
@media (width > 48rem) {
  .segment .action,
  .segment .content {
    width: min(90%, 51.5rem);
  }
  .segment .content {
    display: grid;
    grid-template-areas: "profile header" "profile blocks";
    grid-template-columns: 40.7766990291% 53.3980582524%;
    gap: 0 5.8252427184%;
  }
  .segment-header {
    grid-area: header;
    grid-template-columns: 1fr;
    height: fit-content;
  }
  .segment-header img {
    display: none;
  }
  .segment .blocks {
    grid-area: blocks;
    height: fit-content;
  }
  .segment .profile {
    grid-area: profile;
    height: fit-content;
  }
  .segment .profile img {
    display: block;
    height: auto;
  }
}
@media (width > 75rem) {
  .segment {
    padding-block: 5rem;
  }
  .segment .action {
    position: fixed;
    top: 5rem;
  }
  .segment .action,
  .segment .content {
    width: min(90%, 81.5rem);
  }
  .segment .content {
    grid-template-columns: 25.7668711656% 70.5521472393%;
    grid-template-rows: max-content 1fr;
    gap: 2.5rem 3.6809815951%;
  }
  .segment-header {
    margin-bottom: 0;
  }
  .segment .blocks {
    grid-template-columns: repeat(2, 1fr);
  }
}

.products {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;
  background-color: var(--akagi-white);
}
.product-list {
  display: grid;
  gap: 2.5rem;
  grid-template-columns: repeat(auto-fill, minmax(18.75rem, 1fr));
  width: min(89.3617021277%, 25rem);
}
@media (width > 48rem) {
  .product-list {
    width: min(90%, 68rem);
  }
}

.item {
  display: grid;
  justify-items: center;
  grid-template-rows: max-content max-content max-content auto;
  gap: 1.5rem 0;
}
.item-header {
  display: grid;
  gap: 1rem 0;
  justify-items: center;
}
.item h3 {
  font-weight: 700;
}
.item .underline {
  color: var(--link);
  font-size: 0.875rem;
  line-height: 1.7142857143;
  text-decoration: underline;
  text-underline-position: from-font;
}
.item .underline:active, .item .underline:focus, .item .underline:hover {
  text-decoration: none;
}
.item-button {
  padding: 0.1428571429em 0.9285714286em;
  color: #3D3D3D;
  font-size: 0.875rem;
  line-height: 1.2857142857;
  border: 1px solid currentColor;
  border-radius: 1em;
}
.item ul {
  width: 100%;
}
.item-description {
  padding-top: 2rem;
}
.item p {
  text-align: justify;
}
.item a {
  width: fit-content;
  transition: all 0.25s ease;
}
.item a:active, .item a:focus, .item a:hover {
  opacity: 1;
  color: var(--link);
}
@media (hover: hover) {
  .item a:hover img {
    filter: brightness(1.1);
  }
}

.info {
  margin-block: 4rem;
}
.info .section-content {
  display: grid;
  gap: 2.5rem 0;
  padding-block: 2.5rem;
}
.info h2,
.info h3 {
  font-size: 1.125rem;
  font-weight: 700;
}
.info h2 {
  text-align: center;
}
.info h3 {
  margin-bottom: 1rem;
}
.info h3 small {
  display: block;
  font-size: 83.3333333333%;
  font-weight: 500;
}
.info .note {
  display: block;
  font-size: inherit;
}
.info .lime {
  display: grid;
  justify-items: center;
  padding-block: 2.5rem;
  container: bnr-box/inline-size;
}
.info .lime ul {
  display: grid;
  gap: 1.5rem 5rem;
  width: min(89.3617021277%, 25rem);
  margin-top: 1.5rem;
}
@container bnr-box (width > 56.25rem) {
  .info .lime ul {
    width: min(90%, 55rem);
    grid-template-columns: repeat(2, calc(50% - min(4.5454545455cqi, 2.5rem)));
  }
}
@media (width > 48rem) {
  .info h3 {
    margin-bottom: 1.5rem;
  }
  .info .lime {
    padding-block: 3.5rem;
  }
  .info .lime ul {
    margin-top: 2.5rem;
  }
}

.credit {
  --section-pad: 2.5rem;
}
.credit li {
  display: flex;
}

.footer {
  position: relative;
  z-index: var(--layer-3);
  display: flex;
  flex-direction: column;
  align-items: center;
  margin-top: 4rem;
  padding-block: 2.5rem 1.5rem;
  color: #252525;
  font-family: "Shuei MaruGo L", sans-serif;
  font-weight: normal;
  background-color: var(--akagi-white);
}
.footer-share {
  display: grid;
  grid-template-columns: repeat(3, 2.5rem);
  gap: 0 1.9375rem;
}
.footer-share svg {
  display: block;
}
.footer-wrapper {
  display: grid;
  gap: 2.3125rem 0;
  width: min(90%, 62.5rem);
  margin-block: 2.5rem 1.5625rem;
}
.footer-hobo {
  display: grid;
  gap: 1.25rem 0;
}
.footer-hobo li {
  margin-inline: auto;
}
.footer-hobo a {
  display: flex;
  align-items: center;
  justify-content: center;
  width: fit-content;
  height: 2.5rem;
  min-width: 9.375rem;
  padding-inline: 1.625rem;
  font-size: 0.875rem;
  border: 1px solid currentColor;
  border-radius: 1.5rem;
}
.footer-store {
  justify-self: center;
}
.footer-store a {
  font-size: 0.75rem;
  letter-spacing: 0.05em;
}
@media (width > 53rem) {
  .footer {
    padding-block: 2.1875rem;
  }
  .footer-wrapper {
    grid-template-columns: max-content max-content;
    justify-content: space-between;
  }
  .footer-hobo {
    grid-template-columns: auto auto;
    gap: 1.25rem 2.375rem;
  }
  .footer-hobo li {
    margin-inline: 0;
  }
  .footer-hobo li:first-of-type {
    order: 1;
  }
  .footer-hobo li:nth-of-type(2) {
    order: 3;
  }
  .footer-hobo li:nth-of-type(3) {
    order: 2;
  }
  .footer-hobo li:last-of-type {
    order: 4;
  }
}

[data-anim=fade-in] {
  opacity: 0;
}
[data-anim=fade-in].in-view {
  animation: fadein 0.6s linear forwards;
}

@keyframes fadein {
  to {
    opacity: 1;
  }
}
[data-anim=blur-in] {
  opacity: 0;
  filter: blur(10px);
}
[data-anim=blur-in].in-view {
  animation: blurin 0.6s linear forwards;
}

@keyframes blurin {
  to {
    opacity: 1;
    filter: blur(0);
  }
}