@charset "UTF-8";
/*
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;
  text-wrap: initial;
}

ul,
ol {
  list-style: none;
}

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

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

a {
  color: currentColor;
  text-decoration: none;
  transition: all 0.5s cubic-bezier(0.075, 0.82, 0.165, 1);
}
@media (hover: hover) {
  a:hover {
    filter: brightness(1.1);
  }
}

html {
  scroll-behavior: smooth;
}

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

:root {
  --chikyu-green: #57A400;
  --chikyu-yellow: #FFDA09;
  --chikyu-cream: #FFFDE6;
  --chikyu-white: white;
  --chikyu-black: black;
}

html {
  scrollbar-gutter: stable;
}

body {
  color: var(--chikyu-black);
  font-family: "Shuei MaruGo B", sans-serif;
  background-color: var(--chikyu-cream);
}

.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;
}

:root {
  --header-height: 54px;
  --header-background-color: rgba(255, 255, 255, 0.75);
  --navbar-burger-color: #2B2B2B;
  --hobo-logo-width: 34px;
}
@media (width >= 600px) {
  :root {
    --header-height: 80px;
  }
}
@media (min-width: 48rem) {
  :root {
    --hobo-logo-width: 60px;
  }
}

.hbr-header {
  background-color: var(--header-background-color);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  position: fixed;
  width: 100%;
  z-index: 11;
  top: 0;
  transition: opacity 0.25s ease;
  opacity: 0;
  pointer-events: none;
  font-family: "Shuei MaruGo L", sans-serif;
  font-size: 1rem;
  letter-spacing: 0.1em;
}
.hbr-header.is-visible {
  opacity: 1;
  z-index: 15;
  pointer-events: auto;
}

.navbar {
  background-color: initial;
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: stretch;
  justify-content: space-between;
  height: var(--header-height);
}

.navbar > div {
  /* width: 282px;
  flex: 1; */
}

.navbar-menu {
  display: flex;
  flex-grow: 1;
  background-color: initial;
  box-shadow: none;
}

.navbar-center-logo {
  padding: 0.75rem;
  display: flex;
  justify-content: center;
  align-items: center;
  max-width: 282px;
  width: 44vw;
}

.navbar > .navbar-center-logo img {
  /* height: 74px; */
  width: auto;
}

.navbar-end {
  justify-content: flex-end;
  margin-left: 0;
  align-items: stretch;
  display: flex;
}

.hbr-header .hbr-navbar-item {
  margin: 0;
}

.navbar-brand {
  display: flex;
  align-items: flex-start;
  flex-direction: column;
  justify-content: center;
  padding: 0.75rem;
}

.navbar-burger {
  display: block;
  height: var(--header-height);
  aspect-ratio: 1;
  color: #4a4a4a;
  cursor: pointer;
  position: relative;
  margin-left: auto;
}
.navbar-burger:hover {
  background-color: unset;
}
@media (hover: hover) {
  .navbar-burger:hover {
    background-color: rgba(0, 0, 0, 0.05);
  }
}
.navbar-burger span {
  display: block;
  position: absolute;
  left: calc(50% - 12px);
  width: 24px;
  height: 2px;
  background-color: var(--navbar-burger-color);
  border-radius: 4px;
  transform-origin: center;
  transition-duration: 86ms;
  transition-property: background-color, opacity, transform;
  transition-timing-function: ease-out;
}
.navbar-burger span:nth-child(1) {
  top: calc(50% - 10px);
}
.navbar-burger span:nth-child(2) {
  top: calc(50% - 1px);
}
.navbar-burger span:nth-child(3) {
  top: calc(50% + 8px);
}
.navbar-burger.is-active span:nth-child(1) {
  transform: translateY(9px) rotate(45deg);
}
.navbar-burger.is-active span:nth-child(2) {
  opacity: 0;
}
.navbar-burger.is-active span:nth-child(3) {
  transform: translateY(-9px) rotate(-45deg);
}

.navbar-menu {
  display: none;
  opacity: 0;
  position: absolute;
  top: var(--header-height);
  left: 0;
  width: 100%;
  height: 100vh;
  z-index: 100;
  padding: 40px 12px;
  background-color: rgba(29, 55, 54, 0.9019607843);
  transition: opacity 0.25s ease;
}

.navmenu-inner {
  width: fit-content;
  margin: 0 auto;
}

.navmenu-inner .navbar-item {
  color: #ffffff;
  padding: 0.65rem 2rem;
  display: flex;
}

.navbar-menu .navbar-item:hover {
  background-color: unset;
  color: #ffffff;
}

.navbar-menu .navbar-item-icon {
  padding-right: 1rem;
}

.navbar-menu.is-visible {
  opacity: 1;
}

.navbar-menu.is-active {
  display: block;
}

.navbar-brand img {
  width: var(--hobo-logo-width);
}

.navbar-menu .navbar-divider {
  background-color: #B4B4B4;
  margin: 1.5rem 0;
  height: 1px;
  display: block;
}

.navbar a:link, .navbar a:visited {
  color: #808080;
  transition: all 0.3s;
}

.device-pointer .hbr-navbar a:hover, .device-pointer .hbr-navbar a:active {
  opacity: 0.5;
}

.hbr-header .hbr-icon-label {
  display: block;
  letter-spacing: 0.025em;
}

@media (min-width: 1200px) {
  .navbar {
    max-width: 1200px;
    margin: 0 auto;
  }
}
@media screen and (min-width: 768px) {
  .hbr-header .hbr-navbar-item {
    margin: 0 4px;
  }
  .navbar-burger {
    width: 5rem;
  }
  .navbar-burger span {
    width: 44px;
    left: calc(50% - 22px);
    height: 4px;
  }
  .navbar-burger span:nth-child(1) {
    top: calc(50% - 14px);
  }
  .navbar-burger span:nth-child(3) {
    top: calc(50% + 12px);
  }
  .navbar-burger.is-active span:nth-child(1) {
    transform: translateY(14px) rotate(45deg);
  }
  .navbar-burger.is-active span:nth-child(3) {
    transform: translateY(-12px) rotate(-45deg);
  }
}
.cover {
  --bg-h: 7.3125rem;
  --bg-w: auto;
  --r-deg: 0deg;
  position: relative;
  width: 100%;
  aspect-ratio: 390/633;
  overflow: hidden;
  background-color: var(--chikyu-yellow);
  background-image: url("../img/cover/tile.webp");
  background-size: var(--bg-w) var(--bg-h);
}
@media (min-width: 48rem) {
  .cover {
    --bg-h: 10.25rem;
  }
}
.cover .h1,
.cover .c-chikyuchan,
.cover .c-moon {
  position: absolute;
  left: 0;
  top: 0;
  width: var(--width);
  margin: var(--top, 0) 0 0 var(--left, 0);
}
.cover .c-chikyuchan {
  --width: 87.6923076923%;
  --top: 48.2051282051%;
  --left: 6.1538461538%;
}
.cover .c-moon {
  --width: 14.8717948718%;
  --top: 140%;
  --left: 82.3076923077%;
}
.cover .h1 {
  --width: 88.9743589744%;
  --top: 19.7435897436%;
  --left: 5.8974358974%;
}
@media (min-width: 48rem) {
  .cover {
    aspect-ratio: 1440/614;
  }
  .cover .c-moon {
    --r-deg: -8.795deg;
  }
  .cover .c-chikyuchan {
    --width: 33.8888888889%;
    --top: 2.4305555556%;
    --left: 51.5277777778%;
  }
  .cover .c-moon {
    --width: 6.1111111111%;
    --top: 24.6527777778%;
    --left: 86.875%;
  }
  .cover .h1 {
    --width: 43.6805555556%;
    --top: 13.0277777778%;
    --left: 12.0138888889%;
  }
}

.intro {
  display: grid;
  gap: 3.25rem 0;
  padding-block: 1.5rem 3.3125rem;
}
@media (min-width: 48rem) {
  .intro {
    gap: 4.0625rem 0;
    padding-block: 2.5rem;
  }
}

.products {
  --bg-size: auto 7.3125rem;
  padding-block: 2.5rem;
  background-color: #FEFEFE;
  background-image: url("../img/products/tile.webp");
  background-size: var(--bg-size);
}
@media (min-width: 48rem) {
  .products {
    --bg-size: auto 10.25rem;
    padding-block: 4.25rem;
  }
}

.item-list {
  display: grid;
  gap: 2rem;
  width: 85.641025641%;
  max-width: 84.75rem;
  margin-inline: auto;
}
@media (min-width: 48rem) {
  .item-list {
    grid-template-columns: repeat(2, 1fr);
    gap: 2.125rem 2.9498525074%;
    width: 95%;
  }
}

.reading {
  display: grid;
  justify-items: center;
  padding-block: 3rem;
  background-color: var(--chikyu-cream);
}
.reading-list {
  display: grid;
  gap: 1.75rem 1.7404129794%;
  width: min(79.4871794872%, 84.75rem);
}
.reading-item:nth-of-type(1) {
  --a-delay: 0s;
}
.reading-item:nth-of-type(2) {
  --a-delay: 0.25s;
}
.reading-item:nth-of-type(3) {
  --a-delay: 0.5s;
}
.reading-item:nth-of-type(4) {
  --a-delay: 0.75s;
}
.reading-item:nth-of-type(5) {
  --a-delay: 1s;
}
.reading-item picture {
  border-radius: 0.5625rem;
  border: 1.5px solid var(--chikyu-black);
  overflow: hidden;
}
@media (min-width: 40rem) {
  .reading-list {
    grid-template-columns: repeat(3, 1fr);
  }
}
@media (min-width: 64rem) {
  .reading {
    padding-block: 5.6875rem 4.3125rem;
  }
  .reading-list {
    width: min(90%, 84.75rem);
    grid-template-columns: repeat(5, 1fr);
  }
}

.reading-header {
  position: relative;
  display: flex;
  align-items: center;
  width: min(61.2820512821%, 26.25rem);
  margin-bottom: 1.5rem;
}
.reading-header [class^=c-] {
  position: absolute;
  height: auto;
}
.reading-header .c-uranus {
  left: -20.6694560669%;
  width: 16.3179916318%;
}
.reading-header .c-chikyuchan {
  right: -22.7615062762%;
  width: 18.410041841%;
}
@media (min-width: 64rem) {
  .reading-header {
    width: 43.8125rem;
    margin-bottom: 3.5rem;
  }
  .reading-header .c-uranus {
    left: -10.9129814551%;
    width: 8.6305278174%;
  }
  .reading-header .c-chikyuchan {
    right: -12.1255349501%;
    width: 9.8430813124%;
  }
}

.footer {
  position: relative;
  display: grid;
  justify-items: center;
  padding-block: 2.5rem 1.75rem;
  color: var(--chikyu-white);
  text-align: center;
  background-color: var(--chikyu-green);
}
.footer svg {
  display: block;
}
.footer-social-hobo {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1rem 3rem;
  margin-bottom: 2.5rem;
}
.footer-social {
  display: flex;
  gap: 0 0.5rem;
}
.footer-hobo {
  display: flex;
  flex-direction: column;
  gap: 1rem 1.5rem;
  font-size: 0.9375rem;
  line-height: 1.81;
  letter-spacing: 0.0417333333em;
}
.footer-hobo a:has(svg) {
  display: flex;
  align-items: center;
  gap: 0 0.75rem;
}
.footer-policy {
  display: flex;
  flex-direction: column;
  gap: 0.75rem 2.25rem;
  margin-bottom: 3rem;
  font-family: "Shuei MaruGo L", sans-serif;
  font-size: 0.75rem;
}
@media (min-width: 48rem) {
  .footer-hobo, .footer-policy {
    flex-direction: row;
  }
}
@media (min-width: 64rem) {
  .footer {
    justify-items: start;
    padding: 2.5rem 2.4375rem;
    text-align: left;
  }
  .footer-social-hobo {
    flex-direction: row;
    margin-bottom: 2.25rem;
  }
  .footer-social {
    gap: 0 1rem;
  }
  .footer-policy {
    margin-bottom: 0;
    font-size: 0.875rem;
  }
  .footer small {
    position: absolute;
    right: 2.4375rem;
    bottom: 2.5rem;
  }
}

.h1 {
  position: relative;
  aspect-ratio: 595/188;
}
.h1 [class^=l-] {
  position: absolute;
  top: 0;
  left: 0;
}
.h1 .l-1 {
  --a-delay: 0s;
  width: 15.9663865546%;
  margin: 0.487394958% 0 0 0%;
}
.h1 .l-2 {
  --a-delay: 0.15s;
  width: 13.2100840336%;
  margin: 0% 0 0 18.0672268908%;
}
.h1 .l-3 {
  --a-delay: 0.3s;
  width: 10.2521008403%;
  margin: 7.5294117647% 0 0 32.7226890756%;
}
.h1 .l-4 {
  --a-delay: 0.45s;
  width: 10.2521008403%;
  margin: 0.6050420168% 0 0 44.5378151261%;
}
.h1 .l-5 {
  --a-delay: 0.6s;
  width: 9.0756302521%;
  margin: 6.1848739496% 0 0 57.1092436975%;
}
.h1 .l-6 {
  --a-delay: 0.75s;
  width: 8.5714285714%;
  margin: 11.0924369748% 0 0 68.0672268908%;
}
.h1 .l-7 {
  --a-delay: 0.9s;
  width: 9.5462184874%;
  margin: 7.512605042% 0 0 77.8151260504%;
}
.h1 .l-8 {
  --a-delay: 1.05s;
  width: 4.5378151261%;
  margin: 14.4537815126% 0 0 89.0756302521%;
}
.h1 .l-s-1 {
  --a-delay: 1.2s;
  width: 10.0840336134%;
  margin: 22.5210084034% 0 0 53.4453781513%;
}
.h1 .l-s-2 {
  --a-delay: 1.35s;
  width: 9.7478991597%;
  margin: 21.4285714286% 0 0 65.7142857143%;
}
.h1 .l-s-3 {
  --a-delay: 1.5s;
  width: 10.5378151261%;
  margin: 22.0168067227% 0 0 77.3109243697%;
}
.h1 .l-s-4 {
  --a-delay: 1.65s;
  width: 11.025210084%;
  margin: 21.7983193277% 0 0 88.9075630252%;
}
.h1 .l-s-en {
  --a-delay: 1.8s;
  width: 38.7731092437%;
  margin: 24.974789916% 0 0 8.1848739496%;
}

.cover {
  animation: bg 2s steps(2) infinite;
}
.cover .h1 [class^=l-] {
  opacity: 0;
}
.cover .h1 .l-s-en {
  transform-origin: right bottom;
}
.cover .c-chikyuchan,
.cover .c-moon {
  opacity: 0;
}
.cover.in-view .h1 [class^=l-] {
  animation: letters 1s var(--a-delay, 0s) cubic-bezier(0.25, 1, 0.5, 1) forwards;
}
.cover.in-view .c-chikyuchan {
  animation: pop 0.7s 1.5s cubic-bezier(0.83, 0, 0.17, 1) forwards;
}
.cover.in-view .c-moon {
  animation: pop 0.7s 2s cubic-bezier(0.83, 0, 0.17, 1) forwards;
}

@keyframes letters {
  0% {
    opacity: 0;
    transform: skew(-10deg, 10deg) translateY(10px);
    filter: drop-shadow(0 0 0 rgba(255, 255, 255, 0));
  }
  10% {
    opacity: 1;
    filter: drop-shadow(0 10px 0 rgba(0, 0, 0, 0.15));
  }
  100% {
    opacity: 1;
    transform: skew(0deg, 0deg) tranlateY(0px);
    filter: drop-shadow(0 0 0 rgba(255, 255, 255, 0));
  }
}
@keyframes bg {
  from {
    background-position: 0% 0%;
  }
  to {
    background-position: 100% 0%;
  }
}
@keyframes pop {
  0% {
    opacity: 0;
    transform: scale(0.7) rotate(var(--r-deg));
    filter: drop-shadow(0 0 0 rgba(0, 0, 0, 0));
  }
  30% {
    opacity: 1;
    filter: drop-shadow(0 2px 0 rgba(0, 0, 0, 0.15));
  }
  70% {
    transform: scale(1.1) rotate(var(--r-deg));
    filter: drop-shadow(0 10px 0 rgba(0, 0, 0, 0.15));
  }
  100% {
    opacity: 1;
    transform: scale(1) rotate(var(--r-deg));
    filter: drop-shadow(0 0 0 rgba(255, 255, 255, 0));
  }
}
@keyframes floating {
  from {
    transform: translateY(0%) rotate(var(--r-deg));
  }
  to {
    transform: translateY(-15%) rotate(var(--r-deg));
  }
}
.yodogawa {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1rem 0;
}
.yodogawa p {
  font-size: 1rem;
  line-height: 2.25;
  text-align: center;
}
.yodogawa small {
  font-size: 0.75rem;
  line-height: 2.5;
}
.yodogawa .y-chikyuchan {
  width: 3.75rem;
  aspect-ratio: 60/73;
}
.yodogawa .y-chikyuchan img {
  width: 100%;
  height: auto;
}
@media (min-width: 48rem) {
  .yodogawa {
    gap: 1.125rem 0;
  }
  .yodogawa .y-chikyuchan {
    width: 4.8125rem;
    aspect-ratio: 77/93;
  }
}

.yodogawa {
  --screen-w: 100vw;
  --px-width: tan(atan2(var(--screen-w), 1px));
  --passing-duration: calc(var(--px-width) / 78 * 1s);
  overflow: hidden;
}
.yodogawa .y-chikyuchan {
  visibility: hidden;
}
.yodogawa .y-chikyuchan.in-view {
  animation: ytoz var(--a-duration, 5s) linear forwards;
}
.yodogawa .y-chikyuchan.in-view img {
  transform-origin: center bottom;
  animation: skipping 1s linear infinite;
}
@media (min-width: 48rem) {
  .yodogawa {
    --y-start: 50vw;
    --y-end: -50vw;
    --a-duration: 7s;
  }
}

@keyframes ytoz {
  0% {
    visibility: hidden;
    transform: translateX(var(--y-start, 60vw));
  }
  0.5% {
    visibility: visible;
  }
  55% {
    transform: translateX(var(--y-end, -60vw));
  }
  55.1% {
    visibility: hidden;
    transform: translateX(var(--y-end, -60vw));
  }
  60% {
    visibility: hidden;
    transform: translateX(var(--y-start, 60vw));
  }
  60.1% {
    visibility: visible;
  }
  100% {
    visibility: visible;
    transform: translateX(0);
  }
}
@keyframes skipping {
  0% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(20px);
  }
  80% {
    transform: translateY(5px);
  }
  100% {
    transform: translateY(0);
  }
}
.rotation {
  --duration: 16s;
  --space: 1.25rem;
  width: 100%;
  overflow: hidden;
}
.rotation .anr {
  display: flex;
  width: max-content;
  animation: go-go var(--duration) linear infinite;
}
.rotation .r {
  display: flex;
  gap: 0 var(--space);
  padding-inline: calc(var(--space) / 2);
}
.rotation figure {
  position: relative;
}
.rotation .clip {
  position: relative;
  width: min(39.4871794872vw, 14.875rem);
  aspect-ratio: 238/164;
  clip-path: ellipse(50% 50%);
}
@media (min-width: 48rem) {
  .rotation {
    --space: 2.5rem;
  }
}
.rotation [class^=rc-] {
  position: absolute;
  top: 0;
  left: 0;
  width: var(--c-width);
  height: auto;
  margin: var(--c-top) 0 0 var(--c-left);
  transform: var(--c-rotate);
}
.rotation .rc-1 {
  --c-width: 24.7899159664%;
  --c-left: 1.6806722689%;
  --c-top: -3.3613445378%;
  --c-rotate: rotate(-26.43deg);
}
.rotation .rc-3 {
  --c-width: 26.4705882353%;
  --c-left: 71.0084033613%;
  --c-top: 5.0420168067%;
  --c-rotate: rotate(-31.47deg);
}
.rotation .rc-4 {
  --c-width: 27.3109243697%;
  --c-left: 76.6806722689%;
  --c-top: 34.8739495798%;
  --c-rotate: rotate(-27.92deg);
}
.rotation .rc-5 {
  --c-width: 26.0504201681%;
  --c-left: 68.487394958%;
  --c-top: -3.3613445378%;
  --c-rotate: rotate(24.27deg);
}
.rotation .rc-3 {
  transform: translate(100%, -100%) var(--c-rotate);
  animation: rc-3 10s linear infinite;
}
.rotation .rc-4 {
  transform: translate(100%, 100%) var(--c-rotate);
  animation: rc-4 10s linear infinite;
}

@keyframes go-go {
  to {
    transform: translateX(-50%);
  }
}
@keyframes rc-3 {
  0% {
    transform: translate(100%, -100%) var(--c-rotate);
  }
  10% {
    transform: translate(0%) var(--c-rotate);
  }
  50% {
    transform: translate(0%) var(--c-rotate);
  }
  60% {
    transform: translate(100%, -100%) var(--c-rotate);
  }
  100% {
    transform: translate(100%, -100%) var(--c-rotate);
  }
}
@keyframes rc-4 {
  0% {
    transform: translate(100%, 100%) var(--c-rotate);
  }
  10% {
    transform: translate(100%, 100%) var(--c-rotate);
  }
  20% {
    transform: translate(0%) var(--c-rotate);
  }
  60% {
    transform: translate(0%) var(--c-rotate);
  }
  70% {
    transform: translate(100%, 100%) var(--c-rotate);
  }
  100% {
    transform: translate(100%, 100%) var(--c-rotate);
  }
}
[data-anim=fade-in] {
  opacity: 0;
}
[data-anim=fade-in].in-view {
  animation: fade-in 0.6s var(--a-delay, 0s) cubic-bezier(0.37, 0, 0.63, 1) forwards;
}

@keyframes fade-in {
  0% {
    opacity: 0;
    transform: translateY(20px);
  }
  30% {
    opacity: 1;
  }
  100% {
    opacity: 1;
    transform: translateY(0px);
  }
}
.item {
  container: item/inline-size;
  background-color: var(--chikyu-white);
  border: 2px solid var(--chikyu-yellow);
  border-radius: 1rem;
  overflow: hidden;
}
.item:nth-of-type(1) {
  --a-delay: 0s;
}
.item:nth-of-type(2) {
  --a-delay: 0.25s;
}
.item:nth-of-type(3) {
  --a-delay: 0.5s;
}
.item:nth-of-type(4) {
  --a-delay: 0.75s;
}
.item-layout {
  display: grid;
  gap: 1rem;
  width: 100%;
  padding: 8.3832335329cqi;
}
.item figure {
  width: 100%;
  aspect-ratio: 1;
  overflow: hidden;
  border-radius: 0.6375rem;
}
.item h2 {
  display: grid;
  gap: 0.375rem 0;
  margin-bottom: 0.5rem;
  font-size: 1.25rem;
}
.item-name {
  line-height: 1.4;
  letter-spacing: -0.02em;
}
.item-name small {
  display: block;
  font-size: 0.65em;
  line-height: 2.1538461538;
  letter-spacing: -0.0092857143em;
}
.item-price {
  line-height: 2;
}
.item-price small {
  font-size: 0.65em;
}
.item-price .yen {
  letter-spacing: -0.35em;
}
.item p {
  margin-bottom: 1.625rem;
  font-size: 0.8125rem;
  line-height: 1.8461538462;
  letter-spacing: -0.01em;
}
@container item (width >= 520px) {
  .item-layout {
    grid-template-columns: 51.5297906602% auto;
    align-items: center;
    padding: 3.0441400304cqi;
  }
}

.button {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 2.8em;
  container: button/inline-size;
  color: var(--chikyu-white);
  font-size: 1.25rem;
  background-color: var(--chikyu-green);
  border-radius: 2.5em;
}
.button .t {
  display: flex;
  align-items: center;
  gap: 0 0.4em;
}
.button .t::after {
  content: "";
  width: 0.5em;
  height: 0.75em;
  background-color: currentColor;
  mask: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 10 15" fill="none"><path d="M9.35916 7.05072C9.55948 7.21085 9.55948 7.51546 9.35916 7.6756L0.649766 14.638C0.387838 14.8473 2.41279e-07 14.6609 2.55937e-07 14.3255L8.64606e-07 0.400795C8.79264e-07 0.0654597 0.387837 -0.12103 0.649766 0.0883579L9.35916 7.05072Z" fill="black"/></svg>') center/100% no-repeat;
}
.button [class^=c] {
  position: absolute;
  top: 0;
  right: 0;
}
.button .c-sit {
  height: 128.5714285714%;
  aspect-ratio: 53/72;
  margin-top: -0.5rem;
  margin-right: -1.0625rem;
}
.button .c-moon {
  height: 96.4285714286%;
  aspect-ratio: 47/54;
  margin-top: 0rem;
  margin-right: -0.875rem;
}
.button .c-sleep {
  height: 112.5%;
  aspect-ratio: 76/63;
  margin-top: -0.25rem;
  margin-right: -1.6875rem;
}
.button .c-blush {
  height: 128.5714285714%;
  aspect-ratio: 53/72;
  margin-top: -0.5rem;
  margin-right: -1.0625rem;
}
@media (min-width: 48rem) {
  .button {
    width: min(100%, 15.875rem);
    height: 2.75rem;
  }
  .button .c-sit {
    height: 152.2727272727%;
    aspect-ratio: 49/67;
    margin-top: -0.65625rem;
    margin-right: -1.15625rem;
  }
  .button .c-moon {
    height: 113.6363636364%;
    aspect-ratio: 43/50;
    margin-top: -0.15625rem;
    margin-right: -1rem;
  }
  .button .c-sleep {
    height: 134.0909090909%;
    aspect-ratio: 71/59;
    margin-top: -0.4375rem;
    margin-right: -1.75rem;
  }
  .button .c-blush {
    height: 152.2727272727%;
    aspect-ratio: 49/67;
    margin-top: -0.65625rem;
    margin-right: -1.15625rem;
  }
}