@charset "UTF-8";
/* ==========================================================
   ヨンダネ！ LP
   ========================================================== */

/* ----- base ----- */
html {
  scroll-behavior: smooth;
}
@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }
  * {
    transition: none !important;
  }
}
body {
  margin: 0;
  line-break: strict;
  background: #ffffff;
  color: #292524;
  font-family: "Noto Sans JP", "Hiragino Kaku Gothic ProN", "Yu Gothic", sans-serif;
  -webkit-font-smoothing: antialiased;
}
* {
  box-sizing: border-box;
}
a {
  color: #155dfc;
}
a:not([class]):hover {
  color: #193cb8;
}

/* ----- keyframes ----- */
@keyframes yd-scroll {
  0% {
    transform: translateY(-100%);
  }
  60% {
    transform: translateY(200%);
  }
  100% {
    transform: translateY(200%);
  }
}

/* ----- 画像スロット（差し替え用画像） ----- */
.img-slot {
  display: block;
  width: 100%;
  height: 100%;
}
.img-slot img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.img-slot.is-contain img {
  object-fit: contain;
}

/* ----- hover ----- */
.hover-text-green:hover {
  color: #34802a !important;
}
.hover-btn-primary:hover {
  background: #34802a !important;
  border-color: #34802a !important;
  transform: translateY(3px) !important;
  box-shadow: #34802a 0px 1px 0px !important;
}
.hover-lift:hover {
  transform: translateY(-4px) !important;
}
.hover-bg-cream:hover {
  background: #fffff0 !important;
}
.hover-btn-outline:hover {
  background: #e1f0de !important;
  transform: translateY(3px) !important;
  box-shadow: #34802a 0px 1px 0px !important;
}
.hover-btn-white:hover {
  background: #f3fff0 !important;
  transform: translateY(3px) !important;
  box-shadow: #34802a 0px 1px 0px !important;
}
.hover-underline:hover {
  text-decoration: underline !important;
}

/* ==========================================================
   各要素スタイル（Claude Design のインラインstyleをクラス化）
   ========================================================== */

.l-wrapper {
  min-height: 100vh;
  overflow-x: clip;
  background: rgb(255, 255, 255);
}
.header {
  position: sticky;
  top: 0px;
  z-index: 50;
  background: transparent;
  transition: background-color 0.3s;
  height: 80px;
}
.header__inner {
  max-width: 1200px;
  height: 100%;
  margin: 0px auto;
  padding: 0px 20px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
}
.header__logo {
  display: flex;
  align-items: center;
  flex-shrink: 0;
  min-height: 44px;
}
.header__logo-img {
  display: block;
  height: 36px;
  width: auto;
}
.header__nav {
  display: flex;
  align-items: center;
  gap: 24px;
}
.header__nav-link {
  font-family: "Zen Maru Gothic", "Hiragino Maru Gothic ProN", sans-serif;
  font-weight: 700;
  font-size: 16px;
  letter-spacing: 0.06em;
  line-height: 150%;
  color: rgb(103, 89, 60);
  text-decoration: none;
  padding: 12px 0px;
  white-space: nowrap;
}
.header__btn {
  margin-top: 0px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  align-self: flex-start;
  width: fit-content;
  height: 48px;
  padding: 0px 8px 0px 22px;
  border-radius: 999px;
  background: rgb(73, 172, 53);
  border: 2px solid rgb(73, 172, 53);
  box-shadow: rgb(52, 128, 42) 0px 4px 0px;
  color: rgb(255, 255, 255);
  text-decoration: none;
  font-family: "Zen Maru Gothic", "Hiragino Maru Gothic ProN", sans-serif;
  font-weight: 700;
  font-size: 16px;
  letter-spacing: 0.06em;
  line-height: 150%;
  transition: 0.15s;
}
.header__btn-arrow {
  flex-shrink: 0;
  width: 33px;
  height: 33px;
  border-radius: 50%;
  background: rgb(255, 255, 255);
  display: flex;
  align-items: center;
  justify-content: center;
}
.header__menu-btn {
  display: none;
  width: 44px;
  height: 44px;
  border-width: medium;
  border-style: none;
  border-color: currentcolor;
  border-image: none;
  background: transparent;
  padding: 0px;
  cursor: pointer;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 6px;
}
.header__menu-line {
  display: block;
  width: 24px;
  height: 2px;
  border-radius: 2px;
  background: rgb(103, 89, 60);
}
.sp-menu {
  display: none;
}
.sp-menu__link {
  display: flex;
  align-items: center;
  min-height: 52px;
  border-bottom: 1px solid rgb(231, 229, 228);
  font-family: "Zen Maru Gothic", "Hiragino Maru Gothic ProN", sans-serif;
  font-weight: 700;
  font-size: 16px;
  letter-spacing: 0.06em;
  line-height: 150%;
  color: rgb(103, 89, 60);
  text-decoration: none;
}
.sp-menu__btn {
  margin-top: 20px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  width: 100%;
  height: 56px;
  padding: 0px 9px 0px 25px;
  border-radius: 999px;
  background: rgb(73, 172, 53);
  border: 2px solid rgb(73, 172, 53);
  box-shadow: rgb(52, 128, 42) 0px 4px 0px;
  color: rgb(255, 255, 255);
  text-decoration: none;
  font-family: "Zen Maru Gothic", "Hiragino Maru Gothic ProN", sans-serif;
  font-weight: 700;
  font-size: 16px;
  letter-spacing: 0.06em;
  line-height: 150%;
  transition: 0.15s;
}
.sp-menu__btn-arrow {
  flex-shrink: 0;
  width: 38px;
  height: 38px;
  border-radius: 50%;
  background: rgb(255, 255, 255);
  display: flex;
  align-items: center;
  justify-content: center;
}
.fv {
  position: relative;
  z-index: 2;
  margin-top: calc(-80px);
  border-top: 80px solid rgb(243, 255, 240);
  display: flex;
  flex-direction: column;
  height: calc(80px + max(480px, -96px + 100svh - clamp(56px, 8vw, 128px)));
  background: rgb(243, 255, 240);
  padding: clamp(24px, 3vw, 48px) clamp(20px, 5vw, 64px) 0px;
}
.fv__wave {
  position: absolute;
  left: 0px;
  bottom: calc(1px - clamp(56px, 8vw, 128px));
  width: 100%;
  height: clamp(56px, 8vw, 128px);
  display: block;
  pointer-events: none;
  transform: scaleY(-1);
  z-index: 1;
}
.fv__inner {
  position: relative;
  flex: 1 1 0%;
  width: 100%;
  max-width: max(1240px, 80vw);
  margin: 0px auto;
  display: flex;
  flex-direction: row;
  gap: clamp(20px, 2vw, 32px);
  align-items: center;
  min-height: auto;
  padding-bottom: clamp(48px, 5vw, 72px);
}
.fv__body {
  position: relative;
  z-index: 3;
  min-width: 0px;
  display: flex;
  flex-direction: column;
  gap: min(clamp(28px, 3.4vw, 48px), 5svh);
  order: 0;
  flex: 0 0 auto;
  max-width: none;
  align-items: flex-start;
}
.fv__label {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  width: fit-content;
  padding: 6px 16px 6px 12px;
  border-radius: 999px;
  background: rgb(255, 255, 255);
  font-family: "Zen Maru Gothic", "Hiragino Maru Gothic ProN", sans-serif;
  font-weight: 700;
  font-size: clamp(15px, 13px + 0.5vw, max(20px, 1.05vw));
  letter-spacing: 0.06em;
  line-height: 150%;
  color: rgb(103, 89, 60);
}
.section-label__icon {
  display: block;
  flex-shrink: 0;
  width: 24px;
  height: 20px;
  background: rgb(73, 172, 53);
  mask: url("../img/icon-leaf.svg") center center / contain no-repeat;
}
.fv__title {
  margin: 0px;
  font-family: "Zen Maru Gothic", "Hiragino Maru Gothic ProN", sans-serif;
  font-weight: 700;
  font-size: min(clamp(min(42px, 10.8vw), 10px + 4.6vw, max(96px, 5.2vw)), 10svh);
  line-height: 125%;
  white-space: nowrap;
  text-shadow: rgb(243, 255, 240) 6px 0px 0px, rgb(243, 255, 240) 5.5px 2.3px 0px, rgb(243, 255, 240) 4.2px 4.2px 0px, rgb(243, 255, 240) 2.3px 5.5px 0px, rgb(243, 255, 240) 0px 6px 0px, rgb(243, 255, 240) -2.3px 5.5px 0px, rgb(243, 255, 240) -4.2px 4.2px 0px, rgb(243, 255, 240) -5.5px 2.3px 0px, rgb(243, 255, 240) -6px 0px 0px, rgb(243, 255, 240) -5.5px -2.3px 0px, rgb(243, 255, 240) -4.2px -4.2px 0px, rgb(243, 255, 240) -2.3px -5.5px 0px, rgb(243, 255, 240) 0px -6px 0px, rgb(243, 255, 240) 2.3px -5.5px 0px, rgb(243, 255, 240) 4.2px -4.2px 0px, rgb(243, 255, 240) 5.5px -2.3px 0px;
  letter-spacing: 0.04em;
  color: rgb(103, 89, 60);
  text-align: left;
}
.fv__title-first {
  display: inline-block;
  margin-right: 0px;
}
.u-phrase {
  display: inline-block;
}
.fv__title-accent {
  color: rgb(73, 172, 53);
}
.fv__lead {
  margin: 0px;
  font-family: "Zen Maru Gothic", "Hiragino Maru Gothic ProN", sans-serif;
  font-weight: 700;
  font-size: min(clamp(18px, 13px + 0.8vw, max(24px, 1.3vw)), 3.4svh);
  line-height: 180%;
  letter-spacing: 0.08em;
  color: rgb(103, 89, 60);
  text-align: left;
  text-shadow: rgb(243, 255, 240) 4px 0px 0px, rgb(243, 255, 240) 3.7px 1.5px 0px, rgb(243, 255, 240) 2.8px 2.8px 0px, rgb(243, 255, 240) 1.5px 3.7px 0px, rgb(243, 255, 240) 0px 4px 0px, rgb(243, 255, 240) -1.5px 3.7px 0px, rgb(243, 255, 240) -2.8px 2.8px 0px, rgb(243, 255, 240) -3.7px 1.5px 0px, rgb(243, 255, 240) -4px 0px 0px, rgb(243, 255, 240) -3.7px -1.5px 0px, rgb(243, 255, 240) -2.8px -2.8px 0px, rgb(243, 255, 240) -1.5px -3.7px 0px, rgb(243, 255, 240) 0px -4px 0px, rgb(243, 255, 240) 1.5px -3.7px 0px, rgb(243, 255, 240) 2.8px -2.8px 0px, rgb(243, 255, 240) 3.7px -1.5px 0px;
}
.fv__lead-marker {
  background: linear-gradient(transparent 60%, rgb(255, 240, 133) 60%);
  text-shadow: none;
}
.fv__visual {
  margin-top: 0px;
  position: absolute;
  right: calc(24px + (-1 * clamp(20px, 5vw, 64px)) - max(0px, 0.5 * (100vw - max(1240px, 80vw))));
  top: 50%;
  transform: translateY(calc(-50% - clamp(20px, 2.4vw, 40px)));
  width: min(59vw, 1.455 * (-184px + 100svh - clamp(24px, 3vw, 48px)));
  z-index: 2;
}
.fv__photo-mask {
  position: relative;
  width: 100%;
  aspect-ratio: 97.13 / 66.74;
  mask: url("../img/shape-book.svg") center center / 100% 100% no-repeat;
}
.fv__chara {
  position: absolute;
  right: calc(8px + clamp(20px, 5vw, 64px) + max(0px, 0.5 * (100vw - max(1240px, 80vw))));
  bottom: -2%;
  width: 21%;
  height: auto;
  z-index: 4;
}
.fv__scroll {
  position: absolute;
  left: 50%;
  bottom: calc(-0.5 * clamp(56px, 8vw, 128px));
  transform: translate(-50%, 85%);
  z-index: 4;
}
.fv__scroll-link {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  text-decoration: none;
  color: rgb(103, 89, 60);
}
.fv__scroll-text {
  font-family: Quicksand, sans-serif;
  font-weight: 700;
  font-size: 11px;
  letter-spacing: 0.24em;
}
.fv__scroll-line {
  position: relative;
  display: block;
  width: 2px;
  height: 56px;
  border-radius: 2px;
  background: rgb(217, 212, 199);
  overflow: hidden;
}
.fv__scroll-line-bar {
  position: absolute;
  left: 0px;
  top: 0px;
  width: 100%;
  height: 50%;
  border-radius: 2px;
  background: rgb(103, 89, 60);
  animation: 1.8s cubic-bezier(0.6, 0, 0.3, 1) 0s infinite normal none running yd-scroll;
}
.vision {
  position: relative;
  scroll-margin-top: 80px;
  padding: clamp(130px, 14vw, 200px) clamp(20px, 5vw, 64px) clamp(48px, 5vw, 80px);
}
.vision__inner {
  position: relative;
  max-width: 1280px;
  margin: 0px auto;
  padding: clamp(120px, 10vw, 160px) 0px;
}
.vision__sp-photos-top {
  display: none;
}
.vision__sp-photo1 {
  position: absolute;
  left: -12%;
  top: 0px;
  width: 64%;
  transform: rotate(-9deg);
  aspect-ratio: 97.13 / 66.74;
  mask: url("../img/shape-book.svg") center center / 100% 100% no-repeat;
}
.vision__sp-photo2 {
  position: absolute;
  right: -6%;
  top: 22vw;
  width: 46%;
  transform: rotate(9deg);
  aspect-ratio: 97.13 / 66.74;
  mask: url("../img/shape-book.svg") center center / 100% 100% no-repeat;
}
.vision__sp-chara-heart {
  position: absolute;
  height: auto;
  pointer-events: none;
  left: 46vw;
  top: 13vw;
  width: 19%;
  transform: rotate(-8deg);
}
.vision__tab-photos-top {
  display: none;
}
.vision__tab-photo1 {
  position: absolute;
  left: -6%;
  top: 0px;
  width: 44%;
  transform: rotate(-5deg);
  aspect-ratio: 97.13 / 66.74;
  mask: url("../img/shape-book.svg") center center / 100% 100% no-repeat;
}
.vision__tab-photo2 {
  position: absolute;
  right: -3%;
  top: 13vw;
  width: 32%;
  transform: rotate(5deg);
  aspect-ratio: 97.13 / 66.74;
  mask: url("../img/shape-book.svg") center center / 100% 100% no-repeat;
}
.vision__tab-chara-heart {
  position: absolute;
  height: auto;
  pointer-events: none;
  left: 65%;
  top: 9vw;
  width: 11%;
  transform: rotate(-8deg);
}
.vision__photo1 {
  position: absolute;
  left: -5%;
  top: -2%;
  width: 27%;
  transform: rotate(-5deg);
  aspect-ratio: 97.13 / 66.74;
  mask: url("../img/shape-book.svg") center center / 100% 100% no-repeat;
}
.vision__photo2 {
  position: absolute;
  right: 3%;
  top: 7%;
  width: 20%;
  transform: rotate(4deg);
}
.vision__photo2-mask {
  width: 100%;
  aspect-ratio: 97.13 / 66.74;
  mask: url("../img/shape-book.svg") center center / 100% 100% no-repeat;
}
.vision__chara-heart {
  position: absolute;
  height: auto;
  pointer-events: none;
  left: -22%;
  top: -38%;
  width: 50%;
  transform: rotate(-8deg);
}
.vision__photo3 {
  position: absolute;
  left: 8%;
  bottom: 6%;
  width: 18.7%;
  transform: rotate(6deg);
  aspect-ratio: 479 / 329;
  mask: url("../img/shape-book.svg") center center / 100% 100% no-repeat;
}
.vision__chara-calm {
  position: absolute;
  height: 81px;
  pointer-events: none;
  left: 87px;
  top: 502px;
  width: 81px;
}
.vision__chara-smile {
  position: absolute;
  height: auto;
  pointer-events: none;
  width: 12.5%;
  left: 1014px;
  top: 658px;
}
.vision__content {
  position: relative;
  max-width: 900px;
  margin: 0px auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: clamp(34px, 4.9vw, 56px);
  text-align: center;
}
.vision__label {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: calc(16px - clamp(34px, 4.9vw, 56px));
}
.vision__label-text {
  font-family: Quicksand, sans-serif;
  font-weight: 700;
  font-size: 16px;
  letter-spacing: 0.1em;
  line-height: 150%;
  color: rgb(103, 89, 60);
  margin-right: -0.1em;
}
.vision__title {
  margin: 0px 0px clamp(16px, 2vw, 32px);
  font-family: "Zen Maru Gothic", "Hiragino Maru Gothic ProN", sans-serif;
  font-weight: 700;
  font-size: clamp(26px, 16px + 1.8vw, 40px);
  line-height: 160%;
  letter-spacing: 0.08em;
  color: rgb(103, 89, 60);
  padding-left: 0.08em;
}
.vision__message {
  display: flex;
  flex-direction: column;
  gap: calc(0.5 * clamp(34px, 4.9vw, 56px));
}
.vision__message-text {
  margin: 0px;
  font-family: "Zen Maru Gothic", "Hiragino Maru Gothic ProN", sans-serif;
  font-weight: 500;
  font-size: clamp(min(16px, 3.9vw), 12px + 0.6vw, 20px);
  line-height: 260%;
  letter-spacing: 0.08em;
  color: rgb(41, 37, 36);
  padding-left: 0.08em;
}
.vision__em {
  font-weight: 700;
  color: rgb(73, 172, 53);
}
.vision__closing {
  margin: 0px;
  font-family: "Zen Maru Gothic", "Hiragino Maru Gothic ProN", sans-serif;
  font-weight: 700;
  font-size: clamp(min(16px, 3.9vw), 13px + 0.6vw, 20px);
  line-height: 260%;
  letter-spacing: 0.08em;
  color: rgb(73, 172, 53);
  padding-left: 0.08em;
}
.vision__closing-phrase {
  display: inline-block;
  font-size: 22px;
}
.vision__sp-photos-bottom {
  display: none;
}
.vision__sp-photo3 {
  position: absolute;
  left: -8%;
  top: 4%;
  width: 55%;
  transform: rotate(6deg);
  aspect-ratio: 479 / 329;
  mask: url("../img/shape-book.svg") center center / 100% 100% no-repeat;
}
.vision__sp-chara1 {
  position: absolute;
  height: auto;
  pointer-events: none;
  left: 55%;
  width: 16.5%;
  top: 29vw;
}
.vision__sp-chara2 {
  position: absolute;
  height: auto;
  pointer-events: none;
  top: -33px;
  width: 30%;
  right: 2%;
}
.vision__tab-photos-bottom {
  display: none;
}
.vision__tab-photo3 {
  position: absolute;
  left: -1%;
  top: 0px;
  width: 34%;
  transform: rotate(6deg);
  aspect-ratio: 479 / 329;
  mask: url("../img/shape-book.svg") center center / 100% 100% no-repeat;
}
.vision__tab-chara1 {
  position: absolute;
  height: auto;
  pointer-events: none;
  left: 45%;
  bottom: 20%;
  width: 11.7%;
}
.vision__tab-chara2 {
  position: absolute;
  height: auto;
  pointer-events: none;
  right: 7%;
  top: -2vw;
  width: 16%;
}
.note {
  scroll-margin-top: 80px;
}
.note__wrap {
  padding: 0px;
}
.note__bg {
  position: relative;
  background: rgb(243, 255, 240);
  padding: clamp(80px, 10vw, 140px) 20px;
}
.section-wave-top {
  position: absolute;
  left: 0px;
  top: calc(1px - clamp(32px, 4.4vw, 64px));
  width: 100%;
  height: clamp(32px, 4.4vw, 64px);
  display: block;
  pointer-events: none;
}
.section-wave-bottom {
  position: absolute;
  left: 0px;
  bottom: calc(1px - clamp(32px, 4.4vw, 64px));
  width: 100%;
  height: clamp(32px, 4.4vw, 64px);
  display: block;
  pointer-events: none;
  transform: scaleY(-1);
}
.section-inner {
  position: relative;
  max-width: 1080px;
  margin: 0px auto;
}
.note__head {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: 24px;
}
.note__head-text {
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.section-label {
  display: flex;
  align-items: center;
  gap: 8px;
}
.section-label__text {
  font-family: Quicksand, sans-serif;
  font-weight: 700;
  font-size: 16px;
  letter-spacing: 0.1em;
  line-height: 150%;
  color: rgb(103, 89, 60);
}
.note__title {
  margin: 0px;
  font-family: "Zen Maru Gothic", "Hiragino Maru Gothic ProN", sans-serif;
  font-weight: 700;
  font-size: clamp(24px, 18px + 1.2vw, 34px);
  line-height: 150%;
  letter-spacing: 0.1em;
  color: rgb(103, 89, 60);
}
.note__lead {
  margin: 4px 0px 0px;
  font-size: 16px;
  line-height: 180%;
  letter-spacing: 0.04em;
  color: rgb(41, 37, 36);
  text-wrap: pretty;
}
.note__more-btn {
  margin: 0px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  width: fit-content;
  height: 52px;
  padding: 0px 9px 0px 23px;
  border-radius: 999px;
  background: rgb(73, 172, 53);
  border: 2px solid rgb(73, 172, 53);
  box-shadow: rgb(52, 128, 42) 0px 4px 0px;
  color: rgb(255, 255, 255);
  text-decoration: none;
  font-family: "Zen Maru Gothic", "Hiragino Maru Gothic ProN", sans-serif;
  font-weight: 700;
  font-size: 15px;
  letter-spacing: 0.06em;
  line-height: 150%;
  transition: 0.15s;
}
.btn__text {
  font-size: 16px;
}
.btn__arrow {
  flex-shrink: 0;
  width: 35px;
  height: 35px;
  border-radius: 50%;
  background: rgb(255, 255, 255);
  display: flex;
  align-items: center;
  justify-content: center;
}
.note__list {
  margin-top: clamp(40px, 5vw, 56px);
  display: grid;
  grid-template-columns: repeat(3, minmax(0px, 1fr));
  gap: clamp(20px, 2.4vw, 32px);
}
.note__card {
  display: flex;
  flex-direction: column;
  background: rgb(255, 255, 255);
  border-radius: clamp(20px, 2.4vw, 24px);
  overflow: hidden;
  box-shadow: rgba(103, 89, 60, 0.12) 0px 4px 16px 0px;
  color: rgb(41, 37, 36);
  text-decoration: none;
  transition: transform 0.2s;
}
.note__card-thumb {
  width: 100%;
  aspect-ratio: 1200 / 628;
  background: rgb(225, 240, 222);
}
.note__card-body {
  padding: 20px 24px 24px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.note__card-date {
  font-family: Quicksand, sans-serif;
  font-weight: 600;
  font-size: 13px;
  line-height: 150%;
  letter-spacing: 0.06em;
  color: rgb(87, 83, 77);
}
.note__card-title {
  margin: 0px;
  font-family: "Zen Maru Gothic", "Hiragino Maru Gothic ProN", sans-serif;
  font-weight: 700;
  font-size: 17px;
  line-height: 160%;
  letter-spacing: 0.04em;
  color: rgb(103, 89, 60);
}
.note__more-sp {
  display: none;
}
.btn {
  margin: 0px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  width: fit-content;
  height: 52px;
  padding: 0px 9px 0px 23px;
  border-radius: 999px;
  background: rgb(73, 172, 53);
  border: 2px solid rgb(73, 172, 53);
  box-shadow: rgb(52, 128, 42) 0px 4px 0px;
  color: rgb(255, 255, 255);
  text-decoration: none;
  font-family: "Zen Maru Gothic", "Hiragino Maru Gothic ProN", sans-serif;
  font-weight: 700;
  font-size: 15px;
  letter-spacing: 0.06em;
  line-height: 150%;
  transition: 0.15s;
}
.note__instagram {
  position: relative;
  margin-top: clamp(56px, 6vw, 72px);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: flex-start;
  text-align: left;
  gap: 16px 24px;
  padding: clamp(20px, 2.4vw, 28px) clamp(20px, 3vw, 40px);
  border-radius: clamp(20px, 2.4vw, 24px);
  background: rgb(255, 255, 255);
  box-shadow: rgba(103, 89, 60, 0.12) 0px 4px 16px 0px;
  color: rgb(41, 37, 36);
  text-decoration: none;
  transition: background 0.2s;
}
.note__instagram-body {
  flex: 1 1 260px;
  min-width: 0px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.note__instagram-title {
  font-family: "Zen Maru Gothic", "Hiragino Maru Gothic ProN", sans-serif;
  font-weight: 700;
  font-size: clamp(16px, 14px + 0.4vw, 19px);
  line-height: 150%;
  letter-spacing: 0.06em;
  color: rgb(103, 89, 60);
}
.note__instagram-text {
  font-size: 14px;
  line-height: 170%;
  letter-spacing: 0.04em;
  color: rgb(87, 83, 77);
}
.note__instagram-btn {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  height: 52px;
  padding: 0px 9px 0px 23px;
  border-radius: 999px;
  background: rgb(243, 255, 240);
  border: 2px solid rgb(73, 172, 53);
  color: rgb(52, 128, 42);
  font-family: "Zen Maru Gothic", "Hiragino Maru Gothic ProN", sans-serif;
  font-weight: 700;
  font-size: 15px;
  letter-spacing: 0.06em;
  line-height: 150%;
  box-shadow: rgb(52, 128, 42) 0px 4px 0px;
  transition: 0.15s;
}
.note__instagram-btn-arrow {
  flex-shrink: 0;
  width: 35px;
  height: 35px;
  border-radius: 50%;
  background: rgb(73, 172, 53);
  display: flex;
  align-items: center;
  justify-content: center;
}
.feature {
  scroll-margin-top: 80px;
  padding: clamp(120px, 14vw, 180px) 20px;
}
.feature__head {
  display: grid;
  grid-template-columns: minmax(0px, 1fr) minmax(0px, 461px);
  gap: clamp(40px, 5vw, 64px);
  align-items: center;
}
.u-min-w0 {
  min-width: 0px;
}
.section-title {
  margin: 16px 0px 0px;
  font-family: "Zen Maru Gothic", sans-serif;
  font-weight: 700;
  font-size: clamp(24px, 18px + 1.2vw, 34px);
  line-height: 150%;
  letter-spacing: 0.1em;
  color: rgb(103, 89, 60);
}
.feature__lead {
  margin: 32px 0px 0px;
  max-width: 760px;
  font-size: 16px;
  line-height: 180%;
  letter-spacing: 0.04em;
  color: rgb(41, 37, 36);
}
.feature__devices {
  position: relative;
  width: 100%;
  max-width: 461px;
  margin: 0px;
  justify-self: center;
  aspect-ratio: 922 / 642;
}
.feature__devices-img {
  display: block;
  width: 100%;
  height: auto;
}
.feature__list {
  margin: clamp(0px, 1vw, 16px) -28px 0px;
  display: grid;
  grid-template-columns: repeat(3, minmax(0px, 1fr));
  row-gap: 0px;
}
.feature__item {
  padding: 0px 28px;
  display: grid;
  grid-template-rows: subgrid;
  grid-row: span 4;
  row-gap: 20px;
}
.feature__num {
  position: relative;
  width: 84px;
  height: 58px;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1;
  transform: translateY(calc(50% + 20px));
  justify-self: center;
}
.feature__num-bg {
  display: block;
  flex-shrink: 0;
  width: 100%;
  height: 100%;
  background: rgb(103, 89, 60);
  mask: url("../img/shape-book.svg") center center / contain no-repeat;
  position: absolute;
  inset: 0px;
}
.feature__num-text {
  position: relative;
  margin-top: -6%;
  color: rgb(255, 255, 255);
  font-family: Quicksand, sans-serif;
  font-weight: 700;
  font-size: 26px;
  line-height: 100%;
  letter-spacing: 0.04em;
}
.feature__img {
  position: relative;
  width: 100%;
  aspect-ratio: 646 / 484;
}
.feature__mock-img {
  position: absolute;
  inset: 0px;
}
.feature__item-title {
  margin: 0px;
  align-self: center;
  text-align: center;
  font-family: "Zen Maru Gothic", sans-serif;
  font-weight: 700;
  font-size: 20px;
  line-height: 150%;
  letter-spacing: 0.06em;
  color: rgb(73, 172, 53);
}
.feature__item-text {
  margin: -7px 0px 0px;
  font-size: 15px;
  line-height: 180%;
  letter-spacing: 0.04em;
  color: rgb(41, 37, 36);
}
.feature__item--divider {
  position: relative;
  padding: 0px 28px;
  border-top-width: medium;
  border-top-style: none;
  border-top-color: currentcolor;
  display: grid;
  grid-template-rows: subgrid;
  grid-row: span 4;
  row-gap: 20px;
}
.feature__item-divider {
  position: absolute;
  left: 0px;
  top: calc(49px);
  bottom: 0px;
  border-left: 1px dashed rgb(166, 160, 155);
  pointer-events: none;
}
.section-band {
  scroll-margin-top: 80px;
  padding: 0px;
}
.activity__bg {
  position: relative;
  background: rgb(225, 240, 222);
  padding: clamp(80px, 10vw, 120px) 20px;
}
.activity__lead {
  margin: 32px 0px 0px;
  max-width: 720px;
  display: flex;
  flex-direction: column;
  gap: 0.9em;
  font-size: 16px;
  line-height: 180%;
  letter-spacing: 0.04em;
  color: rgb(41, 37, 36);
  text-wrap: pretty;
}
.u-m0 {
  margin: 0px;
}
.activity__project {
  margin-top: clamp(48px, 6vw, 72px);
  display: grid;
  grid-template-columns: repeat(2, minmax(0px, 1fr));
  gap: clamp(27px, 4vw, 53px);
  align-items: center;
}
.u-relative {
  position: relative;
}
.activity__project-photo {
  width: 100%;
  aspect-ratio: 1027 / 771;
  border-radius: clamp(20px, 2.4vw, 32px);
  overflow: hidden;
}
.activity__project-deco {
  position: absolute;
  left: -3%;
  top: -6%;
  width: 13%;
  aspect-ratio: 62.91 / 53;
  background: rgb(73, 172, 53);
  mask: url("../img/icon-leaf.svg") center center / contain no-repeat;
  transform: rotate(-16deg);
}
.activity__project-body {
  min-width: 0px;
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.activity__project-tag {
  align-self: flex-start;
  padding: 4px 12px;
  border-radius: 8px;
  background: rgb(255, 255, 255);
  font-size: 13px;
  font-weight: 700;
  line-height: 170%;
  letter-spacing: 0.04em;
  color: rgb(52, 128, 42);
}
.activity__project-title {
  margin: 0px;
  font-family: "Zen Maru Gothic", sans-serif;
  font-weight: 700;
  font-size: clamp(22px, 17px + 0.8vw, 28px);
  line-height: 150%;
  letter-spacing: 0.06em;
  color: rgb(103, 89, 60);
}
.activity__project-text {
  display: flex;
  flex-direction: column;
  gap: 0.9em;
  font-size: 16px;
  line-height: 190%;
  letter-spacing: 0.04em;
  color: rgb(41, 37, 36);
  text-wrap: pretty;
}
.activity__project-note {
  letter-spacing: 0.02em;
}
.activity__project-link {
  margin-top: 8px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}
.schedule {
  position: relative;
  scroll-margin-top: 80px;
  padding: clamp(120px, 14vw, 180px) 20px;
}
.schedule__lead {
  margin: 32px 0px 0px;
  max-width: 680px;
  font-size: 16px;
  line-height: 180%;
  letter-spacing: 0.04em;
  color: rgb(41, 37, 36);
  text-wrap: pretty;
}
.schedule__steps {
  position: relative;
  margin-top: clamp(48px, 6vw, 64px);
  display: grid;
  grid-template-columns: repeat(3, minmax(0px, 1fr));
  gap: 24px;
}
.schedule__steps-line {
  position: absolute;
  left: 16%;
  right: 16%;
  top: 22px;
  width: 68%;
  height: 40px;
  display: block;
  pointer-events: none;
  overflow: visible;
}
.schedule__step {
  position: relative;
  min-width: 0px;
  display: flex;
  flex-direction: column;
  align-items: center;
}
.schedule__step-connector--current {
  display: none;
  position: absolute;
  left: 50%;
  top: -34px;
  height: 36px;
  border-left: 3px dotted rgb(73, 172, 53);
  transform: translateX(-50%);
}
.schedule__step-badge {
  position: relative;
  width: 112px;
  height: 77px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  z-index: 1;
}
.schedule__step-badge-bg--current {
  position: absolute;
  inset: 0px;
  background: rgb(73, 172, 53);
  mask: url("../img/shape-book.svg") center center / 100% 100% no-repeat;
}
.schedule__step-label {
  position: relative;
  font-family: Quicksand, sans-serif;
  font-weight: 700;
  font-size: 11px;
  line-height: 100%;
  letter-spacing: 0.14em;
  color: rgb(255, 255, 255);
}
.schedule__step-num {
  position: relative;
  margin-top: 2px;
  font-family: Quicksand, sans-serif;
  font-weight: 700;
  font-size: 26px;
  line-height: 110%;
  color: rgb(255, 255, 255);
}
.schedule__card--current {
  margin-top: -18px;
  flex: 1 1 0%;
  width: 100%;
  border-radius: clamp(20px, 2.4vw, 28px);
  padding: 44px 28px 28px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  background: rgb(255, 255, 255);
  border: 2px solid rgb(73, 172, 53);
  box-shadow: rgba(73, 172, 53, 0.16) 0px 6px 20px 0px;
}
.schedule__card-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 6px;
}
.schedule__card-when--current {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 14px 4px 10px;
  border-radius: 999px;
  background: rgb(225, 240, 222);
  color: rgb(52, 128, 42);
}
.schedule__card-when-text {
  font-family: Quicksand, "Zen Maru Gothic", sans-serif;
  font-weight: 700;
  font-size: 14px;
  line-height: 160%;
  letter-spacing: 0.08em;
}
.schedule__card-tag--current {
  display: none;
  padding: 2px 12px;
  border-radius: 999px;
  font-size: 13px;
  font-weight: 700;
  line-height: 170%;
  letter-spacing: 0.04em;
  background: rgb(255, 137, 4);
  color: rgb(255, 255, 255);
}
.schedule__card-title {
  margin: 0px;
  font-family: "Zen Maru Gothic", "Hiragino Maru Gothic ProN", sans-serif;
  font-weight: 700;
  font-size: clamp(20px, 16px + 0.5vw, 23px);
  line-height: 150%;
  letter-spacing: 0.06em;
  color: rgb(103, 89, 60);
}
.schedule__card-text {
  margin: 0px;
  font-size: 15px;
  line-height: 180%;
  letter-spacing: 0.04em;
  color: rgb(41, 37, 36);
  white-space: pre-line;
  text-wrap-style: pretty;
}
.schedule__step-connector {
  display: none;
  position: absolute;
  left: 50%;
  top: -34px;
  height: 36px;
  border-left: 3px dotted rgb(73, 172, 53);
  transform: translateX(-50%);
}
.schedule__step-badge-bg {
  position: absolute;
  inset: 0px;
  background: rgb(103, 89, 60);
  mask: url("../img/shape-book.svg") center center / 100% 100% no-repeat;
}
.schedule__card {
  margin-top: -18px;
  flex: 1 1 0%;
  width: 100%;
  border-radius: clamp(20px, 2.4vw, 28px);
  padding: 44px 28px 28px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  background: rgb(245, 245, 244);
  border: 2px solid transparent;
  box-shadow: none;
}
.schedule__card-when {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 14px 4px 10px;
  border-radius: 999px;
  background: rgb(255, 255, 255);
  color: rgb(103, 89, 60);
}
.schedule__card-tag {
  display: none;
  padding: 2px 12px;
  border-radius: 999px;
  font-size: 13px;
  font-weight: 700;
  line-height: 170%;
  letter-spacing: 0.04em;
  background: rgb(231, 229, 228);
  color: rgb(87, 83, 77);
}
.company__bg {
  position: relative;
  background: rgb(243, 255, 240);
  padding: clamp(80px, 10vw, 120px) 20px;
}
.company__inner {
  position: relative;
  max-width: 1080px;
  margin: 0px auto;
  display: grid;
  grid-template-columns: repeat(2, minmax(0px, 1fr));
  gap: clamp(40px, 6vw, 80px);
  align-items: center;
}
.company__text {
  margin-top: 32px;
  display: flex;
  flex-direction: column;
  gap: 1.2em;
  font-size: 16px;
  line-height: 180%;
  letter-spacing: 0.04em;
  color: rgb(41, 37, 36);
}
.company__btn {
  margin: 28px 0px 0px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  align-self: flex-start;
  width: fit-content;
  height: 52px;
  padding: 0px 9px 0px 23px;
  border-radius: 999px;
  background: rgb(73, 172, 53);
  border: 2px solid rgb(73, 172, 53);
  box-shadow: rgb(52, 128, 42) 0px 4px 0px;
  color: rgb(255, 255, 255);
  text-decoration: none;
  font-family: "Zen Maru Gothic", "Hiragino Maru Gothic ProN", sans-serif;
  font-weight: 700;
  font-size: 15px;
  letter-spacing: 0.06em;
  line-height: 150%;
  transition: 0.15s;
}
.company__box {
  align-self: center;
  order: 0;
  background: rgb(225, 240, 222);
  border-width: medium;
  border-style: none;
  border-color: currentcolor;
  border-image: none;
  border-radius: clamp(20px, 2.4vw, 24px);
  padding: clamp(28px, 3.5vw, 40px);
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.company__box-title {
  margin: 0px;
  font-family: "Zen Maru Gothic", "Hiragino Maru Gothic ProN", sans-serif;
  font-weight: 700;
  font-size: clamp(18px, 16px + 0.4vw, 20px);
  line-height: 150%;
  letter-spacing: 0.06em;
  color: rgb(103, 89, 60);
  text-align: left;
}
.company__box-text {
  margin: 0px;
  font-size: 15px;
  line-height: 180%;
  letter-spacing: 0.04em;
  color: rgb(41, 37, 36);
}
.company__box-btn {
  margin-top: 8px;
  align-self: flex-start;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  height: 56px;
  padding: 0px 9px 0px 25px;
  border-radius: 999px;
  background: rgb(255, 255, 255);
  border: 2px solid rgb(73, 172, 53);
  box-shadow: rgb(52, 128, 42) 0px 4px 0px;
  color: rgb(52, 128, 42);
  text-decoration: none;
  font-family: "Zen Maru Gothic", "Hiragino Maru Gothic ProN", sans-serif;
  font-weight: 700;
  font-size: 16px;
  letter-spacing: 0.06em;
  line-height: 150%;
  transition: 0.15s;
  width: 300px;
}
.company__box-btn-arrow {
  flex-shrink: 0;
  width: 38px;
  height: 38px;
  border-radius: 50%;
  background: rgb(73, 172, 53);
  display: flex;
  align-items: center;
  justify-content: center;
}
.contact {
  position: relative;
  margin-top: clamp(32px, 4.4vw, 64px);
  scroll-margin-top: 80px;
  background: rgb(73, 172, 53);
  padding: clamp(72px, 9vw, 104px) 20px;
}
.contact__chara {
  position: absolute;
  right: clamp(24px, 10vw, 160px);
  top: calc(-0.55 * clamp(32px, 4.4vw, 64px));
  transform: translateY(-56%);
  width: clamp(96px, 10vw, 148px);
  height: auto;
  display: flex;
  pointer-events: none;
  z-index: 1;
}
.contact__inner {
  max-width: 880px;
  margin: 0px auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}
.contact__label-icon {
  display: block;
  flex-shrink: 0;
  width: 24px;
  height: 20px;
  background: rgb(255, 255, 255);
  mask: url("../img/icon-leaf.svg") center center / contain no-repeat;
}
.contact__label-text {
  font-family: Quicksand, sans-serif;
  font-weight: 700;
  font-size: 16px;
  letter-spacing: 0.1em;
  line-height: 150%;
  color: rgb(255, 255, 255);
}
.contact__title {
  margin: 16px 0px 0px;
  font-family: "Zen Maru Gothic", "Hiragino Maru Gothic ProN", sans-serif;
  font-weight: 700;
  font-size: clamp(24px, 18px + 1.2vw, 34px);
  line-height: 150%;
  letter-spacing: 0.1em;
  color: rgb(255, 255, 255);
}
.contact__lead {
  margin: 20px 0px 0px;
  font-family: "Zen Maru Gothic", "Hiragino Maru Gothic ProN", sans-serif;
  font-weight: 700;
  font-size: 18px;
  line-height: 180%;
  letter-spacing: 0.06em;
  color: rgb(255, 255, 255);
}
.contact__btn {
  margin-top: 36px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  width: 100%;
  max-width: 420px;
  height: 68px;
  padding: 0px 11px 0px 31px;
  border-radius: 999px;
  background: rgb(255, 255, 255);
  border: 2px solid rgb(255, 255, 255);
  box-shadow: rgb(52, 128, 42) 0px 4px 0px;
  color: rgb(52, 128, 42);
  text-decoration: none;
  font-family: "Zen Maru Gothic", "Hiragino Maru Gothic ProN", sans-serif;
  font-weight: 700;
  font-size: clamp(18px, 15px + 0.4vw, 21px);
  letter-spacing: 0.06em;
  line-height: 150%;
  transition: 0.15s;
}
.contact__btn-text {
  font-size: 18px;
}
.contact__btn-arrow {
  flex-shrink: 0;
  width: 46px;
  height: 46px;
  border-radius: 50%;
  background: rgb(73, 172, 53);
  display: flex;
  align-items: center;
  justify-content: center;
}
.footer {
  background: rgb(103, 89, 60);
  color: rgb(255, 255, 255);
  padding: 56px 20px 32px;
}
.footer__inner {
  position: relative;
  max-width: 1080px;
  margin: 0px auto;
  display: flex;
  flex-direction: column;
  gap: 32px;
}
.footer__top {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  justify-content: space-between;
  gap: 32px;
}
.footer__brand {
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.footer__logo {
  display: block;
  height: 40px;
  width: auto;
}
.footer__nav {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 28px;
}
.footer__nav-link {
  display: flex;
  align-items: center;
  min-height: 44px;
  font-size: 16px;
  line-height: 170%;
  letter-spacing: 0.04em;
  color: rgb(255, 255, 255);
  text-decoration: none;
}
.footer__bottom {
  border-top: 1px solid rgb(177, 167, 145);
  padding-top: 12px;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 4px 24px;
}
.footer__links {
  display: flex;
  flex-wrap: wrap;
  gap: 0px 24px;
}
.footer__link {
  display: flex;
  align-items: center;
  gap: 6px;
  min-height: 44px;
  font-size: 14px;
  line-height: 170%;
  letter-spacing: 0.04em;
  color: rgb(255, 255, 255);
  text-decoration: none;
}
.footer__link-icon {
  flex-shrink: 0;
}
.footer__copyright {
  font-family: Quicksand, sans-serif;
  font-weight: 600;
  font-size: 12px;
  line-height: 170%;
  letter-spacing: 0.06em;
}

/* ===== 1680px以上 ===== */

@media (min-width: 1680px) {
  .fv__visual {
    right: calc((-1 * clamp(20px, 5vw, 64px)) - max(0px, 0.5 * (100vw - max(1240px, 80vw))));
    width: min(47vw, 1.455 * (-120px + 100svh - clamp(24px, 3vw, 48px)));
  }
}

/* ===== 1199px以下（タブレット） ===== */

@media (max-width: 1199px) {
  .feature__devices {
    max-width: 560px;
  }
  .header__nav {
    display: none;
  }
  .header__menu-btn {
    display: flex;
  }
  .fv {
    height: auto;
  }
  .fv__inner {
    flex-direction: column;
    align-items: stretch;
  }
  .fv__body {
    gap: 20px;
    align-items: center;
  }
  .fv__title {
    text-align: center;
  }
  .fv__lead {
    text-align: center;
  }
  .fv__visual {
    margin-top: 24px;
    position: relative;
    right: auto;
    transform: none;
    width: 100%;
  }
  .fv__chara {
    right: -2%;
    bottom: -8%;
    width: 31.5%;
  }
  .fv__scroll {
    transform: translate(-50%, 45%);
  }
  .vision__inner {
    padding: 0px;
  }
  .vision__tab-photos-top {
    position: relative;
    height: 34vw;
    margin: 0px 0px 24px;
    display: revert;
  }
  .vision__photo1 {
    display: none;
    position: unset;
    left: unset;
    top: unset;
    width: unset;
    transform: unset;
    aspect-ratio: unset;
    mask: unset;
  }
  .vision__photo2 {
    display: none;
    position: unset;
    right: unset;
    top: unset;
    width: unset;
    transform: unset;
  }
  .vision__photo3 {
    display: none;
    position: unset;
    left: unset;
    bottom: unset;
    width: unset;
    transform: unset;
    aspect-ratio: unset;
    mask: unset;
  }
  .vision__chara-calm {
    display: none;
    position: unset;
    height: unset;
    pointer-events: unset;
    left: unset;
    top: unset;
    width: unset;
  }
  .vision__chara-smile {
    display: none;
    position: unset;
    height: unset;
    pointer-events: unset;
    width: unset;
    left: unset;
    top: unset;
  }
  .vision__tab-photos-bottom {
    position: relative;
    height: 28vw;
    margin-top: 56px;
    display: revert;
  }
  .feature__head {
    grid-template-columns: minmax(0px, 1fr);
  }
  .activity__project-note {
    letter-spacing: 0.04em;
  }
}

/* ===== 1023px以下 ===== */

@media (max-width: 1023px) {
  .vision__tab-photos-top {
    display: revert;
  }
  .vision__photo1 {
    position: unset;
    left: unset;
    top: unset;
    width: unset;
    transform: unset;
    aspect-ratio: unset;
    mask: unset;
  }
  .vision__photo2 {
    position: unset;
    right: unset;
    top: unset;
    width: unset;
    transform: unset;
  }
  .vision__photo3 {
    position: unset;
    left: unset;
    bottom: unset;
    width: unset;
    transform: unset;
    aspect-ratio: unset;
    mask: unset;
  }
  .vision__chara-calm {
    position: unset;
    height: unset;
    pointer-events: unset;
    left: unset;
    top: unset;
    width: unset;
  }
  .vision__chara-smile {
    position: unset;
    height: unset;
    pointer-events: unset;
    width: unset;
    left: unset;
    top: unset;
  }
  .vision__tab-photos-bottom {
    display: revert;
  }
}

/* ===== 900px以下 ===== */

@media (max-width: 900px) {
  .vision__tab-photos-top {
    display: revert;
  }
  .vision__photo1 {
    position: unset;
    left: unset;
    top: unset;
    width: unset;
    transform: unset;
    aspect-ratio: unset;
    mask: unset;
  }
  .vision__photo2 {
    position: unset;
    right: unset;
    top: unset;
    width: unset;
    transform: unset;
  }
  .vision__photo3 {
    position: unset;
    left: unset;
    bottom: unset;
    width: unset;
    transform: unset;
    aspect-ratio: unset;
    mask: unset;
  }
  .vision__chara-calm {
    position: unset;
    height: unset;
    pointer-events: unset;
    left: unset;
    top: unset;
    width: unset;
  }
  .vision__chara-smile {
    position: unset;
    height: unset;
    pointer-events: unset;
    width: unset;
    left: unset;
    top: unset;
  }
  .vision__tab-photos-bottom {
    display: revert;
  }
}

/* ===== 767px以下（SP） ===== */

@media (max-width: 767px) {
  .header {
    height: 60px;
  }
  .header__logo-img {
    height: 30px;
  }
  .fv {
    margin-top: calc(-60px);
    border-top: 60px solid rgb(243, 255, 240);
  }
  .fv__body {
    gap: 16px;
  }
  .fv__title-first {
    margin-right: -0.5em;
  }
  .vision {
    scroll-margin-top: 60px;
    padding: 132px 20px 104px;
  }
  .vision__sp-photos-top {
    position: relative;
    height: 56vw;
    margin: 0px 0px 8px;
    display: revert;
  }
  .vision__tab-photos-top {
    display: none;
    position: unset;
    height: unset;
    margin: unset;
  }
  .vision__photo1 {
    position: unset;
    left: unset;
    top: unset;
    width: unset;
    transform: unset;
    aspect-ratio: unset;
    mask: unset;
  }
  .vision__photo2 {
    position: unset;
    right: unset;
    top: unset;
    width: unset;
    transform: unset;
  }
  .vision__photo3 {
    position: unset;
    left: unset;
    bottom: unset;
    width: unset;
    transform: unset;
    aspect-ratio: unset;
    mask: unset;
  }
  .vision__chara-calm {
    position: unset;
    height: unset;
    pointer-events: unset;
    left: unset;
    top: unset;
    width: unset;
  }
  .vision__chara-smile {
    position: unset;
    height: unset;
    pointer-events: unset;
    width: unset;
    left: unset;
    top: unset;
  }
  .vision__sp-photos-bottom {
    position: relative;
    height: 40vw;
    margin-top: 36px;
    display: revert;
  }
  .vision__tab-photos-bottom {
    display: none;
    position: unset;
    height: unset;
    margin-top: unset;
  }
  .note {
    scroll-margin-top: 60px;
  }
  .note__bg {
    padding: 80px 20px;
  }
  .note__more-btn {
    display: none;
    margin: unset;
    align-items: unset;
    justify-content: unset;
    gap: unset;
    width: unset;
    height: unset;
    padding: unset;
    border-radius: unset;
    background: unset;
    border: unset;
    box-shadow: unset;
    color: unset;
    text-decoration: unset;
    font-family: unset;
    font-weight: unset;
    font-size: unset;
    letter-spacing: unset;
    line-height: unset;
    transition: unset;
  }
  .note__list {
    grid-template-columns: 1fr;
  }
  .note__more-sp {
    margin-top: 40px;
    display: flex;
    justify-content: center;
  }
  .note__instagram {
    margin-top: 96px;
    justify-content: center;
    text-align: center;
  }
  .note__instagram-title {
    font-size: 18px;
  }
  .feature {
    scroll-margin-top: 60px;
    padding: 112px 20px 72px;
  }
  .feature__list {
    margin: clamp(0px, 1vw, 16px) 0px 0px;
    grid-template-columns: 1fr;
  }
  .feature__item {
    padding: 0px 0px 40px;
  }
  .feature__num {
    width: 72px;
    height: 50px;
  }
  .feature__num-text {
    font-size: 22px;
  }
  .feature__item--divider {
    padding: 0px 0px 40px;
    border-top: 1px dashed rgb(166, 160, 155);
    border-top-width: unset;
    border-top-style: unset;
    border-top-color: unset;
  }
  .feature__item-divider {
    top: calc(45px);
    border-left-width: medium;
    border-left-style: none;
    border-left-color: currentcolor;
    border-left: unset;
  }
  .section-band {
    scroll-margin-top: 60px;
  }
  .activity__bg {
    padding: 80px 20px;
  }
  .activity__project {
    grid-template-columns: 1fr;
  }
  .activity__project-link {
    align-items: center;
  }
  .schedule {
    scroll-margin-top: 60px;
    padding: 112px 20px 104px;
  }
  .schedule__steps {
    grid-template-columns: 1fr;
    gap: 32px;
  }
  .schedule__steps-line {
    display: none;
  }
  .schedule__step-connector {
    display: block;
    transform: none;
  }
  .company__bg {
    padding: 80px 20px;
  }
  .company__inner {
    grid-template-columns: 1fr;
    gap: 72px;
  }
  .company__btn {
    margin: 28px auto 0px;
    align-self: center;
  }
  .company__box-title {
    text-align: center;
  }
  .company__box-btn {
    align-self: center;
  }
  .contact {
    scroll-margin-top: 60px;
    padding: 80px 20px;
  }
  .contact__chara {
    display: none;
  }
}

/* ===== スクロール時ヘッダー（JSで .is-scrolled 付与） ===== */
.is-scrolled .header {
  background: rgb(255, 255, 255);
}

/* ===== メニュー展開時（JSで .is-menu-open 付与） ===== */

@media (max-width: 1199px) {
  .is-menu-open .header {
    background: rgb(255, 255, 255);
  }
  /* 閉じている状態：レイアウトは保持したまま非表示（ふわっと開閉させるため） */
  .sp-menu {
    position: absolute;
    left: 0px;
    right: 0px;
    top: 80px;
    background: rgb(255, 255, 255);
    border-bottom: 1px solid rgb(214, 211, 209);
    padding: 8px 20px 24px;
    display: flex;
    flex-direction: column;
    opacity: 0;
    visibility: hidden;
    transform: translateY(-12px);
    pointer-events: none;
    transition: opacity 0.3s ease, transform 0.3s ease, visibility 0s linear 0.3s;
  }
  .is-menu-open .sp-menu {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
    pointer-events: auto;
    transition: opacity 0.3s ease, transform 0.3s ease, visibility 0s linear 0s;
  }
  .is-menu-open .vision__tab-photos-top {
    display: revert;
  }
  .is-menu-open .vision__photo1 {
    position: unset;
    left: unset;
    top: unset;
    width: unset;
    transform: unset;
    aspect-ratio: unset;
    mask: unset;
  }
  .is-menu-open .vision__photo2 {
    position: unset;
    right: unset;
    top: unset;
    width: unset;
    transform: unset;
  }
  .is-menu-open .vision__photo3 {
    position: unset;
    left: unset;
    bottom: unset;
    width: unset;
    transform: unset;
    aspect-ratio: unset;
    mask: unset;
  }
  .is-menu-open .vision__chara-calm {
    position: unset;
    height: unset;
    pointer-events: unset;
    left: unset;
    top: unset;
    width: unset;
  }
  .is-menu-open .vision__chara-smile {
    position: unset;
    height: unset;
    pointer-events: unset;
    width: unset;
    left: unset;
    top: unset;
  }
  .is-menu-open .vision__tab-photos-bottom {
    display: revert;
  }
}

@media (max-width: 767px) {
  .sp-menu {
    top: 60px;
  }
  .is-menu-open .vision__sp-photos-top {
    display: revert;
  }
  .is-menu-open .vision__tab-photos-top {
    display: none;
    position: unset;
    height: unset;
    margin: unset;
  }
  .is-menu-open .vision__photo1 {
    position: unset;
    left: unset;
    top: unset;
    width: unset;
    transform: unset;
    aspect-ratio: unset;
    mask: unset;
  }
  .is-menu-open .vision__photo2 {
    position: unset;
    right: unset;
    top: unset;
    width: unset;
    transform: unset;
  }
  .is-menu-open .vision__photo3 {
    position: unset;
    left: unset;
    bottom: unset;
    width: unset;
    transform: unset;
    aspect-ratio: unset;
    mask: unset;
  }
  .is-menu-open .vision__chara-calm {
    position: unset;
    height: unset;
    pointer-events: unset;
    left: unset;
    top: unset;
    width: unset;
  }
  .is-menu-open .vision__chara-smile {
    position: unset;
    height: unset;
    pointer-events: unset;
    width: unset;
    left: unset;
    top: unset;
  }
  .is-menu-open .vision__sp-photos-bottom {
    display: revert;
  }
  .is-menu-open .vision__tab-photos-bottom {
    display: none;
    position: unset;
    height: unset;
    margin-top: unset;
  }
  .is-menu-open .note__more-btn {
    margin: unset;
    align-items: unset;
    justify-content: unset;
    gap: unset;
    width: unset;
    height: unset;
    padding: unset;
    border-radius: unset;
    background: unset;
    border: unset;
    box-shadow: unset;
    color: unset;
    text-decoration: unset;
    font-family: unset;
    font-weight: unset;
    font-size: unset;
    letter-spacing: unset;
    line-height: unset;
    transition: unset;
  }
  .is-menu-open .feature__item--divider {
    border-top-width: unset;
    border-top-style: unset;
    border-top-color: unset;
  }
  .is-menu-open .feature__item-divider {
    border-left: unset;
  }
}

/* ==========================================================
   レスポンシブ補助（data属性ベース）
   ========================================================== */
@media (min-width: 768px) {
  br[data-sp-only] {
    display: none;
  }
}
[data-sp-btn] {
  box-sizing: border-box;
  justify-content: space-between !important;
  width: min(100%, 300px) !important;
  height: 60px !important;
}
[data-sp-btn][data-btn-primary] {
  width: min(100%, 400px) !important;
  height: 72px !important;
}
[data-sp-btn][data-btn-inbox] {
  width: min(100%, 240px) !important;
  height: 52px !important;
}
@media (min-width: 768px) and (max-width: 1199px) {
  [data-sp-btn] {
    width: min(100%, 280px) !important;
    height: 56px !important;
  }
  [data-sp-btn][data-btn-primary] {
    width: min(100%, 360px) !important;
    height: 64px !important;
  }
  [data-sp-btn][data-btn-inbox] {
    width: min(100%, 220px) !important;
    height: 52px !important;
  }
}
@media (max-width: 1199px) {
  [data-fv-label] {
    margin-bottom: 8px;
  }
}
br[data-tab-only] {
  display: none;
}
@media (min-width: 768px) and (max-width: 1199px) {
  br[data-tab-only] {
    display: inline;
  }
  [data-act-body] {
    gap: 0.6em !important;
  }
  [data-btn-long] > span:first-child {
    line-height: 135%;
  }
  #top h1 br,
  #top h1 + p br {
    display: none;
  }
  [data-fv-label] {
    margin-bottom: 4px;
  }
}
@media (max-width: 767px) {
  [data-foot-bottom] {
    row-gap: 8px !important;
  }
  [data-sp-foot] div,
  [data-sp-foot] nav {
    justify-content: center !important;
    align-items: center !important;
    text-align: center;
  }
  [data-vis-h2] {
    margin-bottom: 0 !important;
  }
  [data-sp-full] {
    width: 100%;
    flex: 1 1 100%;
  }
  [data-sp-center] {
    text-align: center !important;
    margin-left: auto !important;
    margin-right: auto !important;
  }
  section h2 {
    text-align: center !important;
    margin-left: auto;
    margin-right: auto;
  }
  section div:has(> span + span):has(+ h2) {
    justify-content: center !important;
    align-self: center;
  }
  [data-btn-primary] > span:first-child {
    line-height: 135%;
  }
  [data-vis-close] {
    line-height: 180% !important;
    margin-bottom: 32px !important;
    margin-top: 9px !important;
  }
  [data-sp-btn] {
    width: min(100%, 310px) !important;
    height: 56px !important;
  }
  [data-sp-btn]:not([data-btn-primary]):not([data-btn-long]) > span:first-child {
    font-size: 16px !important;
  }
  [data-sp-btn][data-btn-primary] {
    width: 100% !important;
    max-width: 360px;
    height: 64px !important;
  }
  [data-sp-btn][data-btn-inbox] {
    width: min(100%, 260px) !important;
    height: 52px !important;
  }
}
@media (max-width: 767px) {
  [data-sp-flow] br:not([data-sp-br]) {
    display: none;
  }
  [data-sp-flow] > span[data-sp-split] {
    display: inline !important;
  }
  [data-sp-prose] br:not([data-sp-br]) {
    display: none;
  }
  [data-sp-prose] span {
    display: inline !important;
  }
}