@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 {
  --color-white: white;
  --color-black: black;
  --color-navy: #152F63;
  --color-navy-dark: #001230;
  --color-blue: #CBF1F4;
  --color-mahogany: #A75710;
  --arrow-r: url('data:image/svg+xml,<svg viewBox="0 0 41 24" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M40.4141 11.707L28.707 23.4141L27.293 22L37.5859 11.707L27.293 1.41406L28.707 0L40.4141 11.707ZM28.5 12.707H0V10.707H28.5V12.707Z" fill="currentColor"/></svg>');
}

html {
  color: var(--color-navy);
  font-family: "A1 Gothic M", sans-serif;
}

body:has(dialog:open) {
  overflow-y: hidden;
}

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

.header {
  --header-height: 3.75rem;
  position: fixed;
  z-index: 5;
  width: 100%;
  top: 0;
  left: 0;
  opacity: 0;
  visibility: hidden;
  transition: all 0.25s ease-out;
  color: var(--color-navy-dark);
  font-family: "Midashi Go MB1", sans-serif;
}
.header.is-show {
  opacity: 1;
  visibility: visible;
}
@media (min-width: 600px) {
  .header {
    --header-height: 5rem;
  }
}
.header-bar {
  position: relative;
  z-index: 5;
  display: flex;
  justify-content: space-between;
  align-items: center;
  height: var(--header-height);
  padding-left: 1.5rem;
  box-shadow: 0px 0.625rem 1.1875rem 0px rgba(0, 0, 0, 0.08);
  background-color: #E7F3E2;
}
.header-bar svg {
  display: block;
}
.header-toggle {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 5rem;
  height: 100%;
  color: inherit;
  transition: all 0.1s ease-in-out;
}
.header-toggle::before {
  content: "";
  display: block;
  width: 2rem;
  height: 1.3125rem;
  background-color: currentColor;
  mask-image: url('data:image/svg+xml,<svg viewBox="0 0 52 34" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M1 1H51" stroke="currentColor" stroke-width="2" stroke-linecap="round"/><path d="M1 17H51" stroke="currentColor" stroke-width="2" stroke-linecap="round"/><path d="M1 33H51" stroke="currentColor" stroke-width="2" stroke-linecap="round"/></svg>');
  background-size: contain;
  background-repeat: no-repeat;
}
.header-toggle:hover {
  background-color: white;
}
.header:has([aria-expanded=true]) .header-menu {
  transform: translateX(0);
}
.header-menu {
  position: absolute;
  top: var(--header-height);
  right: 0;
  width: min(60%, 20.0625rem);
  background-color: #E7F3E2;
  z-index: 2;
  transform: translateX(100%);
  transition: transform 0.3s ease-in-out;
}
.header-menu li:not(:last-child) {
  border-bottom: 1px solid #001230;
}
.header-menu a {
  display: block;
  padding: 0.5rem 1.625rem;
  font-size: 0.9375rem;
  line-height: 1.62;
}
@media (min-width: 600px) {
  .header-menu a {
    padding: 1.25rem 1.5rem;
  }
}
.header-menu a:hover {
  opacity: 1;
  background-color: #fff;
}
.header-menu br {
  display: block;
}
@media (min-width: 600px) {
  .header-menu br {
    display: none;
  }
}

.cover {
  display: grid;
  gap: 1.875rem 0;
  padding-block: 1.75rem 4rem;
}
.cover .logo {
  width: fit-content;
  justify-self: end;
  margin-right: 6.1333333333%;
  color: #152F63;
}
.cover .layout {
  display: grid;
  justify-items: center;
  container: content/inline-size;
}
.cover .photo {
  width: min(85.3333333333%, 55.375rem);
  height: fit-content;
  margin-block: 1.1875rem 1.5625rem;
  border-radius: 1.875rem;
  overflow: hidden;
}
.cover .photo img {
  width: 100%;
  height: auto;
  opacity: 1;
  transition: opacity 1.25s cubic-bezier(0.455, 0.03, 0.515, 0.955);
}
.cover h2 span {
  font-size: 4.2666666667cqi;
  line-height: 1.75;
  letter-spacing: 0.07em;
}
.cover h2 img {
  display: none;
}
.cover h1 {
  width: 71.7333333333%;
}
.cover h1 img {
  width: 100%;
  height: auto;
}
@media (width >= 48rem) {
  .cover {
    grid-template-areas: "layout" "logo";
    justify-items: center;
    gap: 2.6875rem 0;
    padding-block: 6.0625rem 3.625rem;
  }
  .cover .layout {
    grid-area: layout;
    grid-template-areas: "h1 photo h2";
    grid-template-columns: max-content auto max-content;
    align-items: center;
    width: min(82.1428571429%, 77.625rem);
  }
  .cover .logo {
    grid-area: logo;
    justify-self: start;
    margin-inline: 6.5476190476% 0;
  }
  .cover h1 {
    grid-area: h1;
    width: min(4.6698872786cqi, 3.625rem);
  }
  .cover .photo {
    grid-area: photo;
    width: min(71.3365539452cqi, 55.375rem);
    margin: 0 0 0 min(1.6103059581cqi, 1.25rem);
  }
  .cover h2 {
    grid-area: h2;
  }
  .cover h2 span {
    display: none;
  }
  .cover h2 img {
    display: block;
    width: min(5.7971014493cqi, 4.5rem);
    height: auto;
  }
}

.covers {
  display: grid;
  grid-template-areas: "stack";
}
.covers > * {
  grid-area: stack;
}
.covers.in-view .cover-illust .full {
  opacity: 0;
}
.covers.in-view .cover h1,
.covers.in-view .cover h2,
.covers.in-view .cover .photo {
  opacity: 1;
}

.cover-illust .full {
  opacity: 1;
  transition: opacity 1.25s var(--delay, 0.75s) cubic-bezier(0.455, 0.03, 0.515, 0.955);
}

.cover {
  position: relative;
}
.cover h1,
.cover h2,
.cover .photo {
  opacity: 0;
  transition: opacity var(--duration, 1.25s) var(--delay, 0.75s) cubic-bezier(0.455, 0.03, 0.515, 0.955);
}
.cover h1 {
  --delay: 2s;
}
.cover h2 {
  --delay: 2.5s;
}
.cover .photo {
  --delay: 3.5s;
  --duration: 2s;
}
.cover {
  background-color: transparent;
}

.cover-illust {
  display: grid;
  grid-template-areas: "illust";
  background-color: var(--color-white);
}
.cover-illust > * {
  grid-area: illust;
}

.masked {
  position: relative;
  mask-image: url('data:image/svg+xml,<svg viewBox="0 0 141 390" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M108.526 49.5001C107.756 50.6801 107.336 52.8201 108.026 54.0001C109.566 57.1901 110.736 60.6601 110.526 62.5001C110.276 68.0201 110.136 83.6601 111.526 94.0001C112.876 108.04 116.066 120.24 120.026 134.5C129.186 159.01 139.976 192.91 140.026 213.5C139.906 229.68 138.616 343.6 138.526 349C138.216 361.61 134.416 363.73 135.026 363.5C135.636 363.27 134.666 365.77 136.026 368C137.826 370.78 135.136 377.19 132.026 379C128.916 380.81 115.166 388.92 71.0265 389.5C41.0265 388.22 18.6965 386.64 5.02648 378C-0.243517 374.3 0.146483 372.31 0.0264829 370.5C-0.0935171 368.69 0.186483 364.38 1.02648 363.5C1.86648 362.62 2.02648 362 2.02648 362C2.02648 362 0.966483 360.61 0.526483 359.5C0.0864829 358.39 1.09648 234.18 1.02648 228C0.966483 199.41 7.48648 172.04 16.5265 151.5C25.5665 130.96 33.6565 101.38 34.5265 85.0001C35.3865 73.6501 36.0265 66.5001 36.0265 66.5001C36.0265 66.5001 35.0365 64.4101 36.0265 62.5001C36.2865 60.8601 35.4965 59.8001 37.0265 56.5001C37.0265 56.5001 39.1165 53.3001 39.0265 49.0001C36.3265 47.5401 34.7765 45.9401 35.0265 43.0001C33.9765 41.8601 34.0865 40.0501 35.0265 39.5001C34.7665 37.8001 34.1465 36.8301 35.5265 36.0001C36.9065 35.1701 37.5965 34.2501 37.5265 33.0001C37.4565 31.7501 36.4965 30.7101 36.5265 29.5001C36.5565 28.2901 36.8365 27.1301 38.5265 26.0001C38.4965 25.6001 38.6365 24.6101 38.5265 24.0001C37.7265 23.2501 36.9865 22.6301 37.0265 20.0001C37.0265 18.4601 38.5265 18.0001 38.5265 18.0001C38.5265 18.0001 39.3065 16.8201 38.5265 16.0001C37.7465 15.1801 36.0265 12.4001 36.5265 9.5001C36.4665 7.8601 37.4665 5.3101 39.0265 4.5001C39.1965 2.6901 39.8865 1.3401 43.5265 1.0001C45.3665 0.830096 59.5065 -0.0499039 74.0265 9.60513e-05C88.1765 0.0500961 102.696 1.0101 105.526 2.0001C109.566 3.4101 109.526 5.5001 109.526 5.5001C109.526 5.5001 111.596 6.3601 111.526 10.5001C112.116 11.6401 112.016 19.6401 109.026 21.5001C108.846 23.1001 109.456 22.9601 110.026 23.5001C110.596 24.0401 111.206 28.8401 109.026 30.5001C109.086 31.7501 109.436 32.1301 110.026 32.5001C110.616 32.8701 111.116 34.6701 111.026 36.0001C111.206 35.8201 113.556 37.4301 112.026 40.0001C112.256 41.3401 113.056 42.7701 112.026 45.0001C111.586 46.6501 110.866 48.6901 108.526 49.5001Z" fill="black"/></svg>');
  mask-size: 24.5% auto;
  mask-position: 51% 57.5%;
  mask-repeat: no-repeat;
}
@media (width >= 48rem) {
  .masked {
    mask-size: 9.3% auto;
    mask-position: 49.17% 51%;
  }
}

.main {
  position: relative;
  overflow-x: hidden;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding-bottom: 3.875rem;
  background-color: var(--color-blue);
}
@media (width >= 48rem) {
  .main {
    padding-bottom: 12.5rem;
  }
}

.yodogawa {
  position: relative;
  width: 100%;
  padding-block: 2.125rem 3.1875rem;
}
.yodogawa picture {
  position: absolute;
  inset: 0;
}
.yodogawa picture img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.yodogawa .content {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 1.875rem 0;
  width: min(88%, 37.5rem);
  margin-inline: auto;
  padding: 2.875rem 6.4% 2.9375rem 6.9333333333%;
  background-color: rgb(from var(--color-white) r g b/70%);
  border-radius: 1.875rem;
}
.yodogawa .para {
  color: var(--color-black);
  font-size: 1rem;
  line-height: 1.75;
}
.yodogawa .contribution p {
  width: 17rem;
  padding: 1.5625rem 1.4375rem;
  color: var(--color-mahogany);
  font-size: 0.875rem;
  line-height: 1.5714285714;
  border: 2px solid currentColor;
  border-radius: 0.5rem;
}
@media (width >= 48rem) {
  .yodogawa {
    padding-block: 6.875rem 7.9375rem;
  }
  .yodogawa .content {
    align-items: center;
    gap: 3rem 0;
    padding: 5.375rem 0 3.6875rem;
  }
  .yodogawa .para p {
    white-space: pre-line;
  }
  .yodogawa .para p br {
    display: none;
  }
  .yodogawa .contribution {
    transform: translateX(-5%);
  }
  .yodogawa .contribution p {
    width: 21.125rem;
    padding: 1.5625rem 0 1.5625rem 1.875rem;
    border-width: 1px;
  }
  .yodogawa .contribution .s-only {
    display: none;
  }
}

.item {
  display: flex;
  flex-direction: column;
  gap: 1.875rem 10.7317073171%;
  width: min(82.6666666667%, 51.25rem);
  margin-block: 3rem 2.5rem;
  container: item/inline-size;
}
.item picture {
  flex: none;
  width: 100%;
}
.item img {
  width: 100%;
  aspect-ratio: 1;
  height: auto;
}
.item h3 {
  font-size: 2rem;
}
.item h3 .unit,
.item h3 .label {
  font-size: 0.5em;
  line-height: 1.75;
}
.item h3 .unit {
  margin-left: 0.625em;
}
.item h3 .label {
  display: block;
  text-indent: -0.75ch;
}
.item .price {
  margin-top: 0.7916666667em;
  font-size: 1.5rem;
}
.item .price .currency {
  letter-spacing: 0.17em;
}
.item .price .tax-inc {
  font-size: 0.5em;
}
@media (width >= 48rem) {
  .item {
    flex-direction: row;
    margin-block: 5.875rem 6.1875rem;
  }
  .item picture {
    width: 53.6585365854%;
  }
  .item .content {
    align-self: end;
  }
  .item h3 {
    font-size: min(4.8780487805cqi, 2.5rem);
  }
  .item h3 .unit,
  .item h3 .label {
    font-size: 0.6em;
    line-height: 1.1666666667;
  }
  .item h3 .label {
    margin-top: 0.4166666667em;
  }
  .item .price {
    margin-top: 1.3125em;
    font-size: min(3.9024390244cqi, 2rem);
  }
  .item .price .tax-inc {
    font-size: 0.59375em;
  }
}

.three {
  position: relative;
  width: min(82.6666666667%, 26.25rem);
  aspect-ratio: 310/1340;
  container: three/inline-size;
}
.three > * {
  position: absolute;
}
.three {
  background-color: var(--color-white);
  border-radius: 5.625rem;
}
.three [class*=title] img {
  width: 100%;
  height: auto;
}
.three p {
  font-size: min(6.4516129032cqi, 1.875rem);
  line-height: 1.5;
  text-align: center;
}
.three .katte-title {
  width: 17.4193548387%;
  aspect-ratio: 54/161;
  height: auto;
  top: 3.3582089552%;
  left: 18.3870967742%;
}
.three .katte-img {
  width: 78.3870967742%;
  aspect-ratio: 243/243;
  height: auto;
  top: 5.0746268657%;
  left: 24.5161290323%;
}
.three .katte-para {
  top: 24.1044776119%;
  width: 100%;
}
.three .nonde-title {
  width: 56.1290322581%;
  aspect-ratio: 174/63;
  height: auto;
  top: 32.7611940299%;
  left: 7.7419354839%;
}
.three .nonde-img {
  width: 90%;
  aspect-ratio: 279/279;
  height: auto;
  top: 30.7462686567%;
  left: 8.3870967742%;
}
.three .nonde-para {
  top: 50%;
  width: 100%;
}
.three .kihu-title {
  width: 41.6129032258%;
  aspect-ratio: 129/46;
  height: auto;
  top: 82.9850746269%;
  left: 48.3870967742%;
}
.three .kihu-img {
  width: 90.6451612903%;
  aspect-ratio: 281/281;
  height: auto;
  top: 60.8955223881%;
  left: 0%;
}
.three .kihu-para {
  top: 88.6567164179%;
  width: 100%;
}
@media (width >= 48rem) {
  .three {
    width: min(92.0634920635%, 87rem);
    aspect-ratio: 1392/551;
    border-radius: 20.65625rem;
  }
  .three p {
    font-size: min(1.4367816092cqi, 1.25rem);
  }
  .three .katte-title {
    width: 3.8793103448%;
    height: auto;
    top: 13.7931034483%;
    left: 17.6724137931%;
    aspect-ratio: 54/161;
  }
  .three .katte-img {
    width: 17.4568965517%;
    height: auto;
    top: 20.8711433757%;
    left: 18.8218390805%;
    aspect-ratio: 243/243;
  }
  .three .katte-para {
    width: 17.2413793103%;
    height: auto;
    top: 72.77676951%;
    left: 17.025862069%;
  }
  .three .nonde-title {
    width: 12.5%;
    height: auto;
    top: 16.1524500907%;
    left: 39.7988505747%;
    aspect-ratio: 174/63;
  }
  .three .nonde-img {
    width: 22.8448275862%;
    height: auto;
    top: 14.3375680581%;
    left: 38.5775862069%;
    aspect-ratio: 318/318;
  }
  .three .nonde-para {
    width: 18.6781609195%;
    height: auto;
    top: 72.77676951%;
    left: 40.6609195402%;
  }
  .three .kihu-title {
    width: 9.2672413793%;
    height: auto;
    top: 56.8058076225%;
    left: 76.0057471264%;
    aspect-ratio: 129/46;
  }
  .three .kihu-img {
    width: 20.1867816092%;
    height: auto;
    top: 4.1742286751%;
    left: 63.7212643678%;
    aspect-ratio: 281/281;
  }
  .three .kihu-para {
    width: 20.1149425287%;
    height: auto;
    top: 72.77676951%;
    left: 66.4511494253%;
  }
}

.three .katte-title,
.three .katte-img,
.three .katte-para {
  opacity: 0;
}
.three .katte-img {
  transform-origin: 20% 100%;
}
.three:has(.katte-para.in-view) .katte-title {
  animation: three-title 0.5s ease-in-out forwards;
}
.three:has(.katte-para.in-view) .katte-img {
  animation: katte-img 2s 0.5s ease forwards;
}
.three:has(.katte-para.in-view) .katte-para {
  animation: three-fade-in 0.5s 1s ease-out forwards;
}

@keyframes katte-img {
  0% {
    opacity: 0;
    transform: rotate(0deg);
  }
  5% {
    opacity: 1;
  }
  25% {
    transform: rotate(30deg);
  }
  50% {
    transform: rotate(0deg);
  }
  100% {
    opacity: 1;
    transform: rotate(0deg);
  }
}
@keyframes three-title {
  0% {
    opacity: 0;
    transform: scale(0.8);
  }
  50% {
    opacity: 1;
  }
  75% {
    transform: scale(1.1);
  }
  85% {
    transform: scale(0.98);
  }
  100% {
    transform: scale(1);
    opacity: 1;
  }
}
@keyframes three-fade-in {
  to {
    opacity: 1;
  }
}
.three .nonde-title,
.three .nonde-img,
.three .nonde-para {
  opacity: 0;
}
.three .nonde-img {
  transform-origin: 60% 80%;
}
.three:has(.nonde-para.in-view) .nonde-title {
  animation: three-title 0.5s var(--anim-delay, 0s) ease-in-out forwards;
}
.three:has(.nonde-para.in-view) .nonde-img {
  animation: nonde-img 1s calc(0.5s + var(--anim-delay, 0s)) ease forwards;
}
.three:has(.nonde-para.in-view) .nonde-para {
  animation: three-fade-in 0.5s calc(1s + var(--anim-delay, 0s)) ease-out forwards;
}
@media (width >= 48rem) {
  .three .nonde-img,
  .three .nonde-title,
  .three .nonde-para {
    --anim-delay: 1.5s;
  }
}

@keyframes nonde-img {
  0% {
    opacity: 0;
    transform: rotate(0deg);
  }
  5% {
    opacity: 1;
  }
  20% {
    transform: rotate(-5deg);
  }
  40% {
    transform: rotate(5deg);
  }
  60% {
    transform: rotate(-2.5deg);
  }
  80% {
    transform: rotate(0deg);
  }
  100% {
    opacity: 1;
  }
}
.three .kihu-title,
.three .kihu-img,
.three .kihu-para {
  opacity: 0;
}
.three .kihu-img {
  transform-origin: 60% 80%;
}
.three:has(.kihu-para.in-view) .kihu-title {
  animation: three-title 0.5s var(--anim-delay, 0s) ease-in-out forwards;
}
.three:has(.kihu-para.in-view) .kihu-img {
  animation: kihu-img 2s calc(0.5s + var(--anim-delay, 0s)) ease forwards;
}
.three:has(.kihu-para.in-view) .kihu-para {
  animation: three-fade-in 0.5s calc(1s + var(--anim-delay, 0s)) ease-out forwards;
}
@media (width >= 48rem) {
  .three .kihu-img,
  .three .kihu-title,
  .three .kihu-para {
    --anim-delay: 3.25s;
  }
}

@keyframes kihu-img {
  0% {
    opacity: 0;
    clip-path: circle(0%);
  }
  50% {
    opacity: 1;
  }
  100% {
    opacity: 1;
    clip-path: circle(100%);
  }
}
.article {
  width: min(88%, 28.125rem);
  margin-top: 4rem;
}
.article h3 {
  font-size: 1.5rem;
  line-height: 1.5;
  letter-spacing: 0.07em;
}
.article p {
  font-size: 0.9375rem;
  line-height: 1.8666666667;
}
.article .body {
  margin-bottom: 1.5rem;
}
.article .body h3 {
  margin-bottom: 1.5rem;
}
.article .illust {
  display: grid;
  justify-content: center;
}
.article .button {
  position: relative;
  display: flex;
  align-items: center;
  gap: 0 0.5555555556em;
  width: 18.3125rem;
  padding: 0.75em 0 0.75em 1.5em;
  color: var(--color-white);
  font-family: "A1 Gothic R", sans-serif;
  font-size: 1.5rem;
  line-height: 1.1666666667;
  background-color: #A75710;
  border-radius: 1.3333333333em;
}
.article .button::after {
  content: "";
  display: block;
  width: 2.5625rem;
  height: 1.5rem;
  color: currentColor;
  background-color: currentColor;
  mask: var(--arrow-r) center/cover no-repeat;
  transition: transform 0.25s ease-out;
}
.article .button:active::after, .article .button:focus::after, .article .button:hover::after {
  transform: translateX(25%);
}
@media (width >= 48rem) {
  .article {
    display: grid;
    grid-auto-flow: column;
    grid-template-columns: auto max-content;
    width: min(92%, 48.8125rem);
    margin-top: 4rem;
    container: article/inline-size;
  }
  .article .body {
    margin-bottom: 0;
  }
  .article .body h3 {
    margin-bottom: 2.5625rem;
  }
  .article h3 {
    font-size: min(4.0973111396cqi, 2rem);
    line-height: 1.375;
  }
  .article p {
    white-space: pre-line;
  }
  .article .illust {
    align-self: end;
    justify-content: end;
  }
}

.steps {
  margin-top: 3.0625rem;
}
.steps .title {
  display: flex;
  justify-content: space-between;
  width: min(86.0606060606%, 18.75rem);
  aspect-ratio: 284/246;
  margin: 0 auto 2rem;
  transform: translateX(-1.4084507042%);
}
.steps h3 {
  width: 50%;
  aspect-ratio: 142/244;
}
.steps h3 img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}
.steps .thinking {
  align-self: end;
  width: 37.5%;
  aspect-ratio: 106.5/194;
}
.steps .thinking img {
  height: auto;
}
.steps .thinking .mark {
  width: 41.3145539906%;
  margin-left: 31.9248826291%;
  transform-origin: 90% 95%;
  animation: thinking 1.5s steps(1) infinite;
}
.steps .thinking .ani {
  position: relative;
  width: 100%;
}
.steps .button {
  gap: 0 0.625em;
  margin: 2.625rem auto 0;
  padding-left: 1.7083333333em;
}
@media (width >= 48rem) {
  .steps {
    grid-template-areas: "body title";
    grid-template-columns: auto max-content;
    margin-top: 10.5625rem;
  }
  .steps .title {
    grid-area: title;
    width: 17.6875rem;
    aspect-ratio: 283/412;
    margin-bottom: 0;
  }
  .steps h3 {
    width: 69.964664311%;
  }
  .steps .thinking {
    width: 37.6325088339%;
  }
  .steps-body {
    grid-area: body;
  }
  .steps .button {
    margin: 4.375rem 0 0;
  }
}

@keyframes thinking {
  0% {
    transform: rotate(0deg);
  }
  50% {
    transform: rotate(15deg);
  }
}
.tsuchidasyuzo .illust .button {
  margin-top: -1.375rem;
}

.hogo .illust img {
  transform: translateX(2.0547945205%);
}
.hogo .illust .button {
  margin-top: -1.6875rem;
}

@media (width >= 48rem) {
  .tsuchidasyuzo {
    margin-top: 7.5rem;
  }
  .hogo {
    margin-top: 8.75rem;
  }
}
.aside {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6.25rem 0;
  padding-block: 2.875rem 2.5rem;
  background-color: var(--color-white);
}
@media (width >= 48rem) {
  .aside {
    gap: 8.5rem 0;
    padding-block: 4.6875rem 3.625rem;
  }
}

.notice {
  color: var(--color-black);
  text-align: center;
}
.notice h2 {
  margin-bottom: 0.9375rem;
  font-size: 2rem;
  line-height: 1;
  letter-spacing: 0.06em;
}
.notice a {
  color: var(--color-mahogany);
}
.notice a:active, .notice a:focus, .notice a:hover {
  text-decoration: underline;
}
.notice p,
.notice ul {
  font-size: 1rem;
  line-height: 1.875;
  letter-spacing: 0.06em;
}
.notice p {
  margin-block: 2.5rem 2em;
  white-space: pre-line;
}
.notice .bottle {
  margin-inline: auto;
}
@media (width >= 48rem) {
  .notice h2 {
    margin-bottom: 0.75rem;
    font-size: 2.5rem;
  }
  .notice p {
    margin-top: 2.1875rem;
  }
  .notice .s-only {
    display: none;
  }
}

.bottle {
  display: grid;
  grid-template-areas: "stack";
}
.bottle > * {
  grid-area: stack;
}
.bottle {
  width: fit-content;
}
.bottle img {
  --duration: 0.75s;
}
.bottle img:nth-of-type(n+2) {
  opacity: 0;
  animation: flicker calc(var(--duration) * 4) var(--delay) linear infinite;
}
.bottle img:nth-of-type(1) {
  --delay: calc(var(--duration) * 0);
}
.bottle img:nth-of-type(2) {
  --delay: calc(var(--duration) * 1);
}
.bottle img:nth-of-type(3) {
  --delay: calc(var(--duration) * 2);
}
.bottle img:nth-of-type(4) {
  --delay: calc(var(--duration) * 3);
}
.bottle img:nth-of-type(5) {
  --delay: calc(var(--duration) * 4);
}

@keyframes flicker {
  0% {
    opacity: 0;
  }
  15% {
    opacity: 0;
  }
  20% {
    opacity: 1;
  }
  50% {
    opacity: 1;
  }
  55% {
    opacity: 0;
  }
  100% {
    opacity: 0;
  }
}
.nav {
  color: var(--color-navy-dark);
}
.nav ul {
  display: grid;
  justify-items: center;
  gap: 0.75rem 0;
}
.nav a {
  font-family: "Midashi Go MB1", sans-serif;
  font-size: 0.9375rem;
  line-height: 1.8666666667;
  letter-spacing: 0.01em;
}

[data-anim=yodogawa] picture,
[data-anim=yodogawa] .content {
  opacity: 0;
}
[data-anim=yodogawa] picture {
  --anim-duration: 1s;
  opacity: 0;
  filter: brightness(1.2);
  transition: opacity var(--anim-duration) var(--anim-delay, 0s) cubic-bezier(0.55, 0.09, 0.5, 0.91);
}
[data-anim=yodogawa] .content {
  --anim-duration: 0.72s;
  --anim-delay: 1s;
  transition: opacity var(--anim-duration) var(--anim-delay, 0s) cubic-bezier(0.55, 0.09, 0.5, 0.91);
}
[data-anim=yodogawa].in-view picture {
  filter: brightness(1);
}
[data-anim=yodogawa].in-view picture,
[data-anim=yodogawa].in-view .content {
  opacity: 1;
}

[data-anim=show] {
  opacity: 0;
  transition: opacity 0.72s var(--anim-delay, 0s) cubic-bezier(0.55, 0.09, 0.5, 0.91);
}
[data-anim=show].in-view {
  opacity: 1;
}
[data-anim=show].content {
  --anim-delay: 0.25s;
}

/* footer */
.footer {
  position: relative;
  color: var(--color-navy-dark);
  font-family: "Midashi Go MB1", sans-serif;
  background-color: #E7F3E2;
}
.footer .wrapper {
  display: grid;
  grid-template-areas: "share" "hobo" "store" "copy";
  width: min(74.9333333333%, 79.5rem);
  margin-left: 16.5333333333%;
  padding-block: 3.4375rem;
}
.footer-share {
  grid-area: share;
  display: flex;
  align-items: center;
  gap: 0 2rem;
}
.footer-share svg {
  display: block;
}
.footer-share h3 svg {
  width: 3.9375rem;
  height: 2.3125rem;
}
.footer-share ul {
  display: flex;
  gap: 0 1.5rem;
}
.footer-share [data-platform=twitter] svg {
  width: 2.25rem;
  height: 2.3125rem;
}
.footer-share [data-platform=facebook] svg {
  width: 2.25rem;
  height: 2.25rem;
}
.footer-share [data-platform=line] svg {
  width: 2.375rem;
  height: 2.25rem;
}
.footer-hobo {
  grid-area: hobo;
  display: grid;
  gap: 0.375rem 0;
  margin-block: 2rem;
  font-size: 1rem;
  line-height: 1.75;
  letter-spacing: 0.01em;
}
.footer-store {
  display: flex;
  flex-wrap: wrap;
  grid-area: store;
  font-size: 0.75rem;
  line-height: 1.6666666667;
  letter-spacing: 0.01em;
}
.footer-store li:not(:last-of-type)::after {
  content: "/";
  display: inline-block;
  padding: 0 0.5em 0 0.2em;
}
.footer-copy {
  margin-top: 1rem;
  grid-area: copy;
  font-size: 0.875rem;
  line-height: 2;
  letter-spacing: 0.01em;
}
@media (width >= 75rem) {
  .footer .wrapper {
    margin-inline: auto;
    padding: 4.6875rem 0 6.0625rem;
    grid-template-areas: "share hobo ." "store hobo copy";
    grid-template-columns: 1fr auto auto;
  }
  .footer-share {
    gap: 2.5625rem;
  }
  .footer-share ul {
    gap: 1.25rem;
  }
  .footer-store {
    margin-block: 1.5rem 0;
    font-size: 0.875rem;
    line-height: 2;
    letter-spacing: 0.01em;
  }
  .footer-hobo {
    align-self: end;
    margin: 0 4rem 0 0;
  }
  .footer-copy {
    margin-top: 0;
    align-self: end;
  }
}