@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  **/
@keyframes fadeIn {
  100% {
    opacity: 1;
  }
}
@keyframes fadeOut {
  100% {
    opacity: 0;
  }
}
@keyframes clipPath {
  100% {
    clip-path: inset(0);
  }
}
@keyframes clipPathCircle {
  100% {
    clip-path: circle(100% at 50% 50%);
  }
}
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;
  transition: opacity 0.35s ease-out;
}
@media (hover: hover) {
  button:hover {
    opacity: 0.72;
  }
}

a {
  color: currentColor;
  text-decoration: none;
  transition: opacity 0.35s ease-out;
}
@media (hover: hover) {
  a:hover {
    opacity: 0.72;
  }
}

[x-cloak],
[v-cloak] {
  display: none !important;
}

*:focus {
  outline: none;
}

@media (min-width: 600px) {
  .device-sp {
    display: none;
  }
}

.device-pc {
  display: none;
}
@media (min-width: 600px) {
  .device-pc {
    display: block;
  }
}

html {
  scroll-behavior: smooth;
}

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

:root {
  --base-font-size: 100%;
  --base-line-height: 200%;
  --white: #ffffff;
  --accent: #4DB8B0;
  --black: #053646;
  --green: #73AB30;
  --orange: #E3AE10;
  --red: #D52020;
  --paper: #F6F6D1;
  --wrap: min(100%, 50rem);
}

body {
  color: var(--black);
  font-family: "Koburina Gothic W6 JIS2004";
  font-size: var(--base-font-size);
  line-height: var(--base-line-height);
  background-color: #FEF060;
}
body img {
  width: 100%;
  height: auto;
}

.sr-only:not(:focus):not(:active) {
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  height: 1px;
  overflow: hidden;
  position: absolute;
  white-space: nowrap;
  width: 1px;
}

.bg {
  position: fixed;
  inset: 0;
  z-index: -1;
}
.bg img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.goat-mehh {
  cursor: pointer;
}

.header {
  width: var(--wrap);
  margin-inline: auto;
}
.header picture {
  width: 100%;
  aspect-ratio: 390/455;
  background-color: #fff558;
}
.header img {
  width: 100%;
  height: auto;
}
@media (min-width: 48rem) {
  .header picture {
    aspect-ratio: 800/801;
  }
}

.intro {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1.5rem 0;
  padding: 2.5rem 0;
  color: var(--white);
  background-color: var(--green);
}
.intro ul a {
  font-family: "Koburina Gothic W3 JIS2004";
}
.intro ul a[target=_blank]::after {
  margin: 0 3px 0 1px;
  font-family: "Hobonichi-Icons" !important;
  content: "\e914";
  font-size: 85%;
}

.yodogawa {
  width: min(84.6153846154vw, 22.5rem);
}

.mail-button-placeholder {
  position: relative;
  width: min(89.7435897436vw, 26.25rem);
  aspect-ratio: 350/78;
}

.mail-button {
  position: absolute;
  top: 0;
  width: min(89.7435897436vw, 26.25rem);
  display: block;
}
.mail-button.is-sticky {
  position: fixed;
}

@media (min-width: 48rem) {
  .yodogawa {
    white-space: pre-line;
  }
  .mail-button-placeholder,
  .mail-button {
    width: 21.875rem;
  }
}
.main {
  width: var(--wrap);
  margin-inline: auto;
}

.content {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1.5rem 0;
  padding: 2.5rem 0;
  background-color: var(--paper);
}
.content-title {
  width: min(89.7435897436vw, 34.375rem);
}
.content-title img {
  width: 100%;
  height: auto;
}
.content .goat {
  width: 100%;
}
.content .goat img {
  width: 100%;
  height: auto;
}
.content-image {
  width: min(89.7435897436vw, 43.75rem);
}
.content-body {
  display: grid;
  gap: 1.5rem 0;
  width: min(84.6153846154vw, 25.625rem);
  font-feature-settings: "halt" on;
}
.content-body strong {
  color: var(--accent);
  font-weight: normal;
}
@media (min-width: 35rem) {
  .content .goat {
    width: 20.625rem;
  }
  .content-body {
    font-feature-settings: unset;
  }
  .content-body p:not(.goat) {
    white-space: pre-line;
  }
}

.post-office {
  display: flex;
  flex-direction: column;
  gap: 1.5rem 0;
  align-items: center;
  padding: 2.5rem 0;
  background-color: var(--orange);
}
.post-office ul {
  display: grid;
  justify-content: center;
  gap: 1.5rem;
  width: min(89.7435897436vw, 45.25rem);
}
.post-office p {
  width: 84.6153846154vw;
  font-size: 0.875rem;
  line-height: 171.429%;
}
.post-office-note {
  margin-top: 1rem;
}
.post-office .modal-button {
  width: 69.2307692308vw;
}
@media (min-width: 48rem) {
  .post-office ul {
    grid-template-columns: repeat(auto-fill, 21.875rem);
  }
  .post-office p {
    width: fit-content;
  }
  .post-office-note {
    margin-top: 0;
  }
  .post-office .modal-button {
    width: 16.875rem;
  }
}

.dialog {
  width: min(89.7435897436vw, 46.875rem);
  height: 92vh;
  padding: 2.5rem 0 0;
  border: none;
  background-color: var(--paper);
  border-radius: 1.25rem;
  overflow: hidden;
}
.dialog::backdrop {
  background-color: rgba(0, 0, 0, 0.6);
}
.dialog-close {
  position: absolute;
  right: 1rem;
  top: 1rem;
  width: 1rem;
  height: 1.0625rem;
  font-size: 0;
  background-image: url('data:image/svg+xml,%3Csvg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 17" fill="none"%3E%3Cline x1="1.5" y1="-1.5" x2="19.0381" y2="-1.5" transform="matrix(0.684796 0.728734 -0.684796 0.728734 0 2.0332)" stroke="%236B6B6B" stroke-width="3" stroke-linecap="round"/%3E%3Cline x1="1.5" y1="-1.5" x2="19.0381" y2="-1.5" transform="matrix(0.684796 -0.728734 0.684796 0.728734 1.93555 16.9668)" stroke="%236B6B6B" stroke-width="3" stroke-linecap="round"/%3E%3C/svg%3E');
  background-size: cover;
  background-repeat: no-repeat;
}
.dialog-wrap {
  height: 100%;
  overflow-y: auto;
}
.dialog-content {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2.25rem 0;
  padding-bottom: min(36.1538461538vw, 10.6875rem);
}
.dialog .goats {
  position: absolute;
  bottom: 0;
  inset-inline: auto;
  width: min(71.7948717949vw, 21.25rem);
}
.dialog h2 {
  width: min(74.358974359vw, 31.25rem);
}
.dialog-content-body {
  display: grid;
  gap: 1rem 0;
  width: min(74.358974359vw, 25.8125rem);
}
.dialog-content-body h3 {
  color: var(--accent);
  font-size: 1.125rem;
  white-space: pre-line;
  line-height: 177.778%;
}
.dialog-content-body .meh + h3 {
  padding-top: 1.5rem;
}
.dialog-content-body p {
  font-family: "Koburina Gothic W3 JIS2004";
  font-feature-settings: "halt" on;
}
.dialog-content-body a {
  color: var(--red);
  text-decoration: underline;
}
@media (min-width: 35rem) {
  .dialog-content-body p {
    white-space: pre-line;
  }
  .dialog-content-body .meh {
    width: 18.125rem;
  }
}

.footer {
  display: grid;
  justify-content: center;
  gap: 1.5rem 2.5rem;
  width: var(--wrap);
  margin-inline: auto;
  padding: 2.5rem 0 2.5rem;
  background-color: var(--paper);
}
.footer ul {
  display: flex;
  justify-content: center;
  gap: 0 1rem;
}
.footer img {
  width: min(27.6923076923vw, 6.75rem);
  height: auto;
}
.footer-copy {
  padding-block-start: 1rem;
  color: var(--green);
  font-size: 0.75rem;
  text-align: center;
}
@media (min-width: 48rem) {
  .footer {
    grid-template-columns: auto auto;
    padding: 3.25rem 0 3.125rem;
  }
  .footer-copy {
    grid-column: span 2;
    padding-block-start: 1.75rem;
  }
}

.is-end .post-office a,
.is-end .post-office button {
  cursor: default;
  pointer-events: none;
  opacity: 0.5;
}
.is-end .post-office-note {
  color: var(--red);
}