@charset "UTF-8";
@import url("https://fonts.googleapis.com/css2?family=Google+Sans+Flex:opsz,wght@6..144,1..1000&family=Zen+Kaku+Gothic+New:wght@400;500;700&display=swap");
/* --------------------------------
  Breakpoints & Sizes
-------------------------------- */
.section__inner {
  width: min(90%, 1200px);
  margin-left: auto;
  margin-right: auto;
}
@media not screen and (min-width: 768px) {
  .section__inner {
    width: 84%;
  }
}

/* --------------------------------
  Fonts
-------------------------------- */
p {
  line-height: 1.8;
  font-size: min(1.2vw, 18px);
}
@media not screen and (min-width: 768px) {
  p {
    font-size: min(3.4vw, 20px);
  }
}

/* --------------------------------
  Easing
-------------------------------- */
/* --------------------------------
  Webp Classes
-------------------------------- */
[data-anim=fade],
[data-anim-repeat] {
  opacity: 0;
  transition: opacity 0.3s cubic-bezier(0.22, 1, 0.36, 1) 0s, visibility 0.3s linear 0s;
}
[data-anim=fade].anim--on,
[data-anim-repeat].anim--on {
  opacity: 1;
  visibility: visible;
}

[data-anim=fade] {
  transition-duration: 0.6s;
}

[data-anim=fadeup] {
  opacity: 0;
  transform: translateY(min(10vw, 60px));
}
[data-anim=fadeup].anim--on {
  animation: fadeup 1s cubic-bezier(0.22, 1, 0.36, 1) 0s forwards;
}

@keyframes fade {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}
@keyframes fadeup {
  0% {
    opacity: 0;
    transform: translateY(min(10vw, 60px));
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}
:root {
  color-scheme: light !important;
}

::-moz-selection {
  background: rgba(0, 153, 68, 0.95);
  color: #fff;
}

::selection {
  background: rgba(0, 153, 68, 0.95);
  color: #fff;
}

img::-moz-selection {
  background: rgba(0, 153, 68, 0);
}

img::selection {
  background: rgba(0, 153, 68, 0);
}

* {
  margin: 0;
  padding: 0;
  line-height: 1;
  box-sizing: border-box;
  list-style-type: none;
  letter-spacing: 0.01em;
}

html, body {
  font-family: "Zen Kaku Gothic New", sans-serif;
  font-weight: 400;
  font-style: normal;
  margin: 0;
  padding: 0;
  width: 100%;
  background-color: #fff;
  font-size: min(1.3vw, 18px);
}
@media not screen and (min-width: 768px) {
  html, body {
    font-size: min(3.4vw, 20px);
  }
}

html {
  -webkit-text-size-adjust: 100%;
  font-size: 62.5%;
}

h2, h3, h4 {
  text-align: center;
}

h2 {
  margin-bottom: min(7vw, 50px);
}

a, a:visited {
  color: #2D2D2D;
  text-decoration: none;
}

picture {
  display: flex;
}

img {
  width: 100%;
}

p {
  text-align: justify;
  word-break: break-all;
}

.not-break {
  display: inline-block;
  white-space: nowrap;
}

@media not screen and (min-width: 768px) {
  .pc {
    display: none;
  }
}

@media screen and (min-width: 768px) {
  .sp {
    display: none;
  }
}

section {
  padding-top: min(8vw, 80px);
  margin-top: calc(-1 * min(8vw, 80px));
  background-color: #fff;
  position: relative;
}
@media not screen and (min-width: 768px) {
  section {
    padding-top: min(25vw, 180px);
    margin-top: calc(-1 * min(25vw, 180px));
  }
}

.section__inner {
  padding: min(10vw, 94px) 0;
}

header {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  z-index: 1000;
  background: #fff;
}

.header {
  transition: max-height 0.3s cubic-bezier(0.22, 1, 0.36, 1);
  height: 100%;
}
.header.fixed {
  transition: max-height 0.3s cubic-bezier(0.22, 1, 0.36, 1);
}
@media screen and (min-width: 768px) {
  .header {
    max-height: min(11vw, 210px);
  }
  .header.fixed {
    max-height: min(8vw, 80px);
  }
}
@media not screen and (min-width: 768px) {
  .header {
    max-height: min(45vw, 400px);
  }
  .header.fixed {
    max-height: min(25vw, 180px);
  }
}
.header__inner {
  width: min(96%, 1520px);
  margin: 0 auto;
  transition: max-height 0.3s cubic-bezier(0.22, 1, 0.36, 1);
}
@media screen and (min-width: 768px) {
  .header__inner {
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    height: min(11vw, 210px);
    max-height: min(11vw, 210px);
  }
}
@media not screen and (min-width: 768px) {
  .header__inner {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-end;
    height: 100%;
  }
}
.fixed .header__inner {
  height: 100%;
  transition: max-height 0.3s cubic-bezier(0.22, 1, 0.36, 1);
}
.header a[href="#top__guide"] {
  display: flex;
  transition: max-height 0.3s cubic-bezier(0.22, 1, 0.36, 1);
  padding: min(1.5vw, 30px) 0 min(1.4vw, 26px);
}
@media screen and (min-width: 768px) {
  .header a[href="#top__guide"] {
    position: absolute;
    top: 50%;
    left: 0;
    transform: translateY(-50%);
    height: 100%;
    max-height: min(11vw, 210px);
  }
}
@media not screen and (min-width: 768px) {
  .header a[href="#top__guide"] {
    height: 60%;
    padding-bottom: 0;
    width: 100%;
  }
}
@media screen and (min-width: 768px) {
  .header.fixed a[href="#top__guide"] {
    padding: clamp(5px, 10px, 0.3vw) 0 clamp(5px, 10px, 0.35vw);
    max-height: 100px;
  }
}
.header h1 {
  display: flex;
  align-items: center;
  gap: 6%;
  transition: max-height 0.3s cubic-bezier(0.22, 1, 0.36, 1);
}
@media not screen and (min-width: 768px) {
  .header h1 {
    gap: min(2vw, 20px);
    justify-content: center;
    transform: translateX(-1%);
    width: 100%;
  }
}
.header h1 span {
  display: block;
}
.header .logo--txt {
  transition: max-height 0.3s cubic-bezier(0.22, 1, 0.36, 1);
}
.header .logo--txt img {
  transform: translateY(8%);
}
@media screen and (min-width: 768px) {
  .header .logo--txt {
    display: flex;
    height: 100%;
    max-height: 62%;
  }
  .header .logo--txt img {
    aspect-ratio: 300/88;
    transform: translateY(9%);
    height: 100%;
  }
}
@media not screen and (min-width: 768px) {
  .header .logo--txt {
    width: 62vw;
    display: block;
    transition: max-width 0.3s cubic-bezier(0.22, 1, 0.36, 1);
  }
  .header .logo--txt img {
    height: auto;
    width: 100%;
  }
}
@media not screen and (min-width: 768px) {
  .header.fixed .logo--txt {
    max-width: 50vw;
  }
}
.header .logo--img {
  height: 100%;
}
.header .logo--img picture {
  height: 100%;
}
.header .logo--img img {
  aspect-ratio: 146/154;
  height: 100%;
  width: auto;
}
@media not screen and (min-width: 768px) {
  .header .logo--img {
    height: 75%;
  }
}
.header__nav {
  padding: 1em 1em min(3vw, 4em);
}
@media screen and (min-width: 768px) {
  .header__nav {
    position: absolute;
    right: 0;
    bottom: 0;
    padding-right: 0;
  }
}
.fixed .header__nav {
  padding-bottom: min(2.5vw, 20px);
}
.fixed .header__nav ul {
  gap: 0;
}
.fixed .header__nav li {
  transform: scale(0.8);
}
@media not screen and (min-width: 768px) {
  .fixed .header__nav li {
    transform: scale(0.7);
  }
}
.header__nav ul {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  gap: min(3.2vw, 60px);
  transition: gap 0.3s cubic-bezier(0.22, 1, 0.36, 1);
}
.header__nav li {
  transition: gap 0.3s cubic-bezier(0.22, 1, 0.36, 1);
  transform-origin: right center;
}
@media not screen and (min-width: 768px) {
  .header__nav ul {
    gap: 3.5vw;
  }
  .header__nav li {
    transform: scale(1);
    transform-origin: center center;
  }
}
.header__nav a {
  display: flex;
  align-items: center;
  gap: 0.5em;
  transition: transform 0.1s ease;
}
@media not screen and (min-width: 768px) {
  .header__nav a {
    gap: min(1vw, 25px);
  }
}
.header__nav a::after {
  content: "";
  display: block;
  width: min(1.65vw, 25.5px);
  aspect-ratio: 25.5/13;
  background: url(../img/nav_arw.svg) no-repeat center bottom/contain;
}
@media not screen and (min-width: 768px) {
  .header__nav a::after {
    width: min(4.5vw, 30px);
  }
}
.header__nav a:hover {
  transform: translateY(10%);
}
.header__nav a[href="#news"] img {
  width: clamp(60px, 91px, 5.8vw);
}
@media not screen and (min-width: 768px) {
  .header__nav a[href="#news"] img {
    width: min(14vw, 91px);
  }
}
.header__nav a[href="#activity"] img {
  width: clamp(105px, 180px, 11.4vw);
}
@media not screen and (min-width: 768px) {
  .header__nav a[href="#activity"] img {
    width: min(25vw, 180px);
  }
}
.header__nav a[href="#voice"] img {
  width: clamp(72px, 118px, 7.6vw);
}
@media not screen and (min-width: 768px) {
  .header__nav a[href="#voice"] img {
    width: min(17vw, 118px);
  }
}

.top__guide {
  width: 100%;
  position: absolute;
  top: 0;
  display: block;
  height: 100vh;
  pointer-events: none;
}

.top {
  margin-top: min(11vw, 210px);
  padding-top: 0;
  position: relative;
  z-index: 5;
}
@media not screen and (min-width: 768px) {
  .top {
    margin-top: min(45vw, 400px);
  }
}
.top__bg {
  width: 100%;
}
.top__bg img {
  -o-object-fit: cover;
     object-fit: cover;
  width: 100%;
  height: 100%;
}
@media screen and (min-width: 768px) {
  .top__bg img {
    border-radius: 0 0 min(1.8vw, 35px) min(1.8vw, 35px);
  }
}
.top__line {
  width: 100%;
  aspect-ratio: 1920/432;
  position: absolute;
  left: 0;
  top: 0;
}
@media screen and (min-width: 768px) {
  .top__line {
    top: 50%;
    transform: translateY(-33%);
  }
}

.about {
  z-index: 4;
}
.about__inner {
  position: relative;
  transition: opacity 1s cubic-bezier(0.33, 1, 0.68, 1) 0s, visibility 1s linear 0s;
}
.about__map {
  background: no-repeat center bottom/cover;
  background-image: url("../img/about_map.svg");
  width: 100%;
  aspect-ratio: 1920/1224;
  margin-top: min(5vw, 90px);
}
@media not screen and (min-width: 768px) {
  .about__map {
    background-image: url("../img/about_map_sp.svg?v=260212");
    aspect-ratio: 430/354;
  }
}
.about__map.anim--on .balloon img {
  transform: translateY(0);
  opacity: 1;
}
.about__content {
  margin: auto;
  z-index: 10;
}
@media screen and (min-width: 768px) {
  .about__content {
    width: min(90%, 1424px);
    position: absolute;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
  }
}
@media not screen and (min-width: 768px) {
  .about__content {
    width: 80%;
  }
}
.about h2 {
  text-align: left;
  margin-top: min(1.5vw, 20px);
  margin-bottom: min(3vw, 68px);
}
.about h2 img {
  width: min(44vw, 754px);
  transform: translateX(calc(-1 * min(2.2vw, 32px)));
}
@media not screen and (min-width: 768px) {
  .about h2 {
    margin: 8vw 0 6vw;
  }
  .about h2 img {
    width: 83vw;
    transform: translateX(calc(-1 * min(3vw, 32px)));
  }
}
.about__txt p {
  font-size: min(1.2vw, 22px);
  font-weight: 500;
}
@media not screen and (min-width: 768px) {
  .about__txt p {
    font-size: 3.5vw;
    letter-spacing: -0.05em;
    white-space: nowrap;
  }
}

.news {
  z-index: 3;
}
.news h2 img {
  width: min(17.5vw, 184px);
  aspect-ratio: 184/44;
}
@media not screen and (min-width: 768px) {
  .news h2 img {
    width: 23vw;
  }
}
.news__content {
  background: #FFF9D9;
  border-radius: min(1.8vw, 35px);
  padding: min(4vw, 30px) min(4.5vw, 40px);
  padding-right: min(2.5vw, 30px);
  width: 98%;
  margin: auto;
}
.news__list {
  max-height: 280px;
  overflow-y: scroll;
  padding-right: 1em;
}
.news__list::-webkit-scrollbar {
  width: 10px;
  height: 10px;
}
.news__list::-webkit-scrollbar-thumb {
  background: #ffec6e;
  border-radius: 5px;
}
.news__list::-webkit-scrollbar-track {
  background: #fff7c7;
  border-radius: 5px;
}
.news__list li {
  padding: 1.1em 2.5em;
  border-bottom: 1px solid #2D2D2D;
}
@media not screen and (min-width: 768px) {
  .news__list li {
    padding: 1em 0;
  }
}
.news__list a {
  display: flex;
  transition: opacity 0.1s ease;
}
.news__list .date {
  width: 28%;
  font-size: min(1.3vw, 21px);
  font-family: "Google Sans Flex", "Zen Kaku Gothic New", sans-serif;
  letter-spacing: 0.06em;
  line-height: 1.45;
}
@media not screen and (min-width: 768px) {
  .news__list .date {
    width: max(40vw, 100px);
    font-size: min(3.4vw, 21px);
  }
}
.news__list .txt {
  font-size: min(1.25vw, 20px);
  line-height: 1.5;
}
@media not screen and (min-width: 768px) {
  .news__list .txt {
    font-size: min(3.35vw, 20px);
  }
}

.activity {
  z-index: 2;
  background: #F5F5F1;
}
.activity h2 {
  margin-top: min(1vw, 30px);
}
.activity h2 img {
  width: min(46vw, 548px);
}
@media not screen and (min-width: 768px) {
  .activity h2 img {
    width: 65vw;
  }
}
.activity__list {
  margin-top: min(8vw, 120px);
  display: flex;
}
@media screen and (min-width: 768px) {
  .activity__list {
    flex-wrap: wrap;
    justify-content: space-between;
    gap: min(6vw, 80px) min(8.5vw, 132px);
  }
  .activity__list li {
    width: min(39vw, 518px);
  }
}
@media not screen and (min-width: 768px) {
  .activity__list {
    margin-top: 10vw;
    flex-direction: column;
    gap: min(10vw, 60px);
  }
}
.activity__list li.anim--on h3 {
  transform: translateY(0);
  opacity: 1;
}
.activity__list li.anim--on .activity__list__inner {
  opacity: 1;
}
@media not screen and (min-width: 768px) {
  .activity__list li:nth-of-type(2) h3 {
    letter-spacing: -0.05em;
  }
}
.activity__list h3 {
  font-weight: 700;
  font-size: min(1.9vw, 25px);
  line-height: 1.5;
  background: url(../img/activity_balloon.svg) no-repeat center center/contain;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  aspect-ratio: 517/125;
  width: 100%;
  padding-bottom: min(2vw, 22px);
  margin-bottom: min(1.5vw, 20px);
  opacity: 0;
  transform: translateY(15%);
  transition: transform 0.3s ease, opacity 0.3s ease;
}
@media not screen and (min-width: 768px) {
  .activity__list h3 {
    font-size: 4.7vw;
    letter-spacing: -0.02em;
    padding-bottom: 3.8vw;
    margin-bottom: 3vw;
    line-height: 1.3;
    background-image: url(../img/activity_balloon_sp.svg);
  }
}
.activity__list__inner {
  opacity: 0;
  transition: opacity 0.5s ease 0.3s;
}
.activity__list h4 {
  color: #009944;
  font-size: min(1.9vw, 25px);
  font-weight: 700;
  margin: min(1.5vw, 25px) auto;
}
@media not screen and (min-width: 768px) {
  .activity__list h4 {
    font-size: 4.7vw;
    letter-spacing: -0.05em;
    margin: 1em auto 0.7em;
  }
}
.activity__list__txt p {
  text-align: center;
  white-space: nowrap;
  margin: 0 -20px;
}
@media not screen and (min-width: 768px) {
  .activity__list__txt p {
    letter-spacing: 0;
  }
}
.activity__list__txt p .not-break {
  position: relative;
  left: 50%;
  transform: translateX(-50%);
  line-height: 1.8;
}
@media not screen and (min-width: 768px) {
  .activity__list__txt p .not-break {
    width: 100%;
  }
}

.voice {
  z-index: 1;
}
.voice h2 img {
  width: min(38vw, 454px);
}
@media not screen and (min-width: 768px) {
  .voice h2 img {
    width: 55vw;
  }
}
.voice__list {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: min(10vw, 80px) min(6vw, 56px);
  margin: min(3vw, 70px) auto 0;
}
@media not screen and (min-width: 768px) {
  .voice__list {
    gap: min(6vw, 50px) min(6vw, 56px);
  }
}
.voice__list li {
  width: min(40vw, 552px);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  margin-top: min(3.6vw, 27.5px);
}
.voice__list li::after {
  content: "";
  display: block;
  height: min(4vw, 40px);
}
@media not screen and (min-width: 768px) {
  .voice__list li::after {
    height: min(20vw, 50px);
  }
}
.voice__list li:has(.toggle:checked)::after {
  height: 0px;
}
.voice__list li:has(.toggle:checked) .voice__txt {
  flex: 1;
}
@media not screen and (min-width: 768px) {
  .voice__list {
    flex-direction: column;
    justify-content: flex-start;
    margin-top: min(6vw, 25px);
  }
  .voice__list li {
    width: 100%;
  }
}
.voice__header {
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  margin-bottom: min(1vw, 7px);
}
.voice__header__img {
  width: min(50%, 264px);
  margin-bottom: min(1.5vw, 20px);
}
@media not screen and (min-width: 768px) {
  .voice__header__img {
    margin-bottom: 3.5vw;
  }
}
.voice__header h3 {
  color: #009944;
  font-size: min(2vw, 27px);
  line-height: 1.5;
  text-align: center;
  position: relative;
  width: 65%;
  aspect-ratio: 296/86;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  font-weight: 700;
}
@media not screen and (min-width: 768px) {
  .voice__header h3 {
    font-size: min(4.8vw, 27px);
    letter-spacing: -0.03em;
    aspect-ratio: 190/54;
    line-height: 1.3;
    padding-right: 0.5em;
  }
}
.voice__header h3::before, .voice__header h3::after {
  content: "";
  display: block;
  background: url(../img/voice_brackets.svg) no-repeat left top/100%;
  width: min(2vw, 24px);
  aspect-ratio: 1/1;
  position: absolute;
}
@media not screen and (min-width: 768px) {
  .voice__header h3::before, .voice__header h3::after {
    width: min(4.5vw, 30px);
    background-image: url(../img/voice_brackets_sp.svg);
  }
}
.voice__header h3::before {
  left: 0;
  top: 0;
}
.voice__header h3::after {
  transform: rotate(180deg);
  right: 0;
  bottom: 0;
}
.voice__person {
  color: #009944;
  text-align: center;
  line-height: 1.4;
  font-size: min(1.4vw, 17px);
  height: min(8vw, 80px);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  font-weight: 500;
  margin-top: -0.5em;
}
@media not screen and (min-width: 768px) {
  .voice__person {
    font-size: min(3.6vw, 20px);
    height: auto;
    padding: 3vw 0;
  }
}
.voice__txt__inner {
  border: 1px solid #009944;
  border-radius: min(2vw, 30px);
  padding: min(3.8vw, 42px) min(3.2vw, 40px) min(2.5vw, 35px);
  opacity: 0;
  transition: opacity 0.2s ease;
}
.voice__txt__inner p {
  letter-spacing: -0.04em;
  text-indent: 1em;
}
@media not screen and (min-width: 768px) {
  .voice__txt__inner {
    border-radius: min(3.5vw, 30px);
    padding: min(8vw, 48px) min(6vw, 40px) min(6vw, 40px);
  }
}

.toggle {
  display: none;
}

.Label { /*タイトル*/
  padding: 0.4em;
  display: flex;
  color: #fff;
  background: #009944;
  border-radius: 5em;
  width: min(50%, 260px);
  height: min(3.7vw, 50px);
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: transform 0.2s ease;
  z-index: 10;
}
@media not screen and (min-width: 768px) {
  .Label {
    aspect-ratio: 164/32;
    height: min(10vw, 50px);
    width: initial;
  }
}
.Label:hover {
  transform: translateY(5%);
}
.Label__txt {
  height: 60%;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: min(1.5vw, 5px);
  transform: translateX(5%);
}
@media not screen and (min-width: 768px) {
  .Label__txt {
    height: 65%;
  }
}
.Label__txt::after {
  content: "";
  display: block;
  background: url(../img/read_arw.svg) no-repeat center center/100%;
  aspect-ratio: 24.3/13.5;
  height: 60%;
}
.Label__txt img {
  display: block;
  height: 100%;
  width: auto;
}

.Label,
.Label__txt::after,
.voice__txt {
  backface-visibility: hidden;
  transform: translateZ(0);
  transition: all 0.3s;
}

.Label__txt::after {
  transform: rotate(-90deg);
}

.voice__txt { /*本文*/
  height: 0px;
  padding: 0 0;
  margin-top: calc(-1 * (min(3.6vw, 55px) / 2 + 20px));
  overflow: hidden;
  position: relative;
}
@media not screen and (min-width: 768px) {
  .voice__txt {
    margin-top: calc(-1 * (min(10vw, 50px) / 2 + 20px));
  }
}

.toggle:checked + .Label + .voice__txt { /*開閉時*/
  height: auto;
  padding: 20px 0 0;
  transition: all 0.3s;
}

.toggle:checked + .Label + .voice__txt .voice__txt__inner { /*開閉時*/
  opacity: 1;
  height: 100%;
}

.toggle:checked + .Label .Label__txt::after {
  transform: rotate(0deg) !important;
}

footer * {
  text-align: center;
}

.footer__belt {
  background: #009944;
  color: #fff;
  padding: 2.4em 0 1.3em;
}
@media not screen and (min-width: 768px) {
  .footer__belt {
    padding: min(5.3vw, 35px) 0 min(2.8vw, 20px);
  }
}
.footer__belt p {
  line-height: 3.2;
  font-size: min(1.7vw, 22px);
}
@media not screen and (min-width: 768px) {
  .footer__belt p {
    font-size: min(3.5vw, 22px);
    line-height: 2.5;
  }
}
.footer__wanted img {
  width: min(45vw, 566px);
  margin: auto;
}

.copy {
  line-height: 2;
  padding: 1em;
  font-size: min(1.8vw, 25px);
}
@media not screen and (min-width: 768px) {
  .copy {
    font-size: min(3.2vw, 20px);
  }
}

.btn--gototop {
  position: sticky;
  bottom: 0;
  left: calc(100vw - min(12vw, 61px) - min(4vw, 50px));
  width: -moz-fit-content;
  width: fit-content;
  z-index: 100;
  padding: min(4vw, 30px);
  mix-blend-mode: multiply;
  transition: opacity 0.3s ease;
  opacity: 0;
}
.btn--gototop.is-active {
  opacity: 1;
}
.btn--gototop a {
  display: block;
  width: min(8.5vw, 50px);
  transform-origin: center;
  transition: transform 0.1s cubic-bezier(0.33, 1, 0.68, 1);
}
.btn--gototop a:hover {
  transform: translateY(5%);
}/*# sourceMappingURL=style.css.map */