:root {
  --viewport-width: 100vw;
  --b: calc(var(--viewport-width) / 160);
}

@media screen and (max-width: 550px) {
  :root {
    --viewport-width: max(100vw, 550px);
    --b: calc(var(--viewport-width) / 55);
  }
}
main {
  display: flex;
  align-items: start;
  overflow: hidden;
}

#mainL {
  width: 60rem;
  display: flex;
  position: fixed;
  top: 0;
  overflow: hidden;
  z-index: 1000;
}
@media screen and (max-width: 768px) {
  #mainL {
    display: none;
  }
}
#mainL .mainL__slider {
  display: flex;
}
#mainL .mainL__slider img {
  width: 60rem;
  height: 100vh;
  flex-shrink: 0;
  pointer-events: none;
}
#mainL .mainL__scroll {
  position: absolute;
  right: 2.5%;
  bottom: 5%;
  z-index: 100;
}
#mainL .mainL__scroll::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  height: 200%;
  width: 1px;
  background: rgba(255, 255, 255, 0.25);
}
#mainL .mainL__scroll::after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  height: 200%;
  width: 1px;
  background: #fff;
  animation: scrollLine 5s ease-in-out infinite forwards;
}
#mainL .mainL__scroll p {
  font-size: 12px;
  writing-mode: vertical-rl;
  color: #fff;
  letter-spacing: 0.15em;
}

@keyframes scrollLine {
  0% {
    transform-origin: top;
    transform: scale(1, 0);
  }
  49% {
    transform-origin: top;
    transform: scale(1, 1);
  }
  50% {
    transform-origin: bottom;
    transform: scale(1, 1);
  }
  100% {
    transform-origin: bottom;
    transform: scale(1, 0);
  }
}
h3 {
  position: relative;
  gap: 10px;
  display: flex;
  align-items: end;
  flex-wrap: wrap;
  font-size: max(1.8rem, 16px);
  line-height: 1;
  padding-bottom: 20px;
}
h3::before {
  content: "";
  position: absolute;
  bottom: 0;
  left: 0;
  width: max(1.9rem, 10px);
  height: 1px;
  background: #007440;
}
h3 span {
  display: inline-block;
  color: #007440;
  font-size: max(1.6rem, 14px);
  line-height: 1;
  letter-spacing: 0.05em;
}
@media screen and (max-width: 1000px) {
  h3 span {
    font-size: 16px;
  }
}

#mainR {
  width: calc(100% - 60rem);
  margin-left: auto;
}
@media screen and (max-width: 768px) {
  #mainR {
    width: 100%;
  }
}
#mainR .top {
  position: relative;
  margin-top: max(12.5rem, 100px);
}
@media screen and (max-width: 550px) {
  #mainR .top {
    margin-top: 60px;
  }
}
#mainR .top .imageBox {
  position: relative;
  width: 90%;
}
@media screen and (max-width: 550px) {
  #mainR .top .imageBox {
    width: 95%;
  }
}
#mainR .top .imageBox::before {
  content: "";
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 20%;
  background: linear-gradient(
    to top,
    rgb(255, 255, 255) 0%,
    rgba(255, 255, 255, 0) 100%
  );
}
@media screen and (max-width: 550px) {
  #mainR .top .imageBox::before {
    display: none;
  }
}
#mainR .top__bottom {
  position: relative;
  display: flex;
  align-items: start;
  justify-content: space-between;
  margin-top: -7rem;
  margin-left: 10%;
  padding-bottom: 8rem;
  z-index: 10;
}
@media screen and (max-width: 1000px) {
  #mainR .top__bottom {
    flex-direction: column-reverse;
  }
}
@media screen and (max-width: 550px) {
  #mainR .top__bottom {
    margin-top: -20px;
    margin-left: 5%;
    padding-bottom: 50px;
  }
}
#mainR .top__bottom--text {
  padding-top: 4rem;
}
@media screen and (max-width: 1000px) {
  #mainR .top__bottom--text {
    padding-top: 0;
    margin-top: -5rem;
    z-index: 100;
  }
}
@media screen and (max-width: 550px) {
  #mainR .top__bottom--text {
    margin-top: -2.5rem;
  }
}
#mainR .top__bottom--text strong {
  color: #007440;
  font-size: max(2.9rem, 22px);
  font-weight: 500;
  letter-spacing: 0.4em;
}
#mainR .top__bottom--text strong > span {
  opacity: 0;
  transform: translateY(20px);
}
#mainR .top__bottom--text strong.loaded > span {
  animation: fadeInUp 0.5s ease forwards;
}
#mainR .top__bottom--text p {
  margin-top: 2rem;
  line-height: 3;
}
#mainR .top__bottom--text p span {
  display: inline-block;
}
#mainR .top__bottom--image {
  width: 49rem;
  height: 29.5rem;
}
@media screen and (max-width: 1000px) {
  #mainR .top__bottom--image {
    margin-left: auto;
  }
}
@media screen and (max-width: 550px) {
  #mainR .top__bottom--image {
    width: 244px;
    height: 146px;
  }
  #mainR .top__bottom--image::before {
    content: "";
    position: absolute;
    bottom: -1px;
    left: 0;
    width: 100%;
    height: 50%;
    background: linear-gradient(
      to top,
      rgb(255, 255, 255) 0%,
      rgba(255, 255, 255, 0) 100%
    );
  }
}
#mainR .top .deco {
  width: 22rem;
  bottom: 0;
  left: 0;
}
@media screen and (max-width: 550px) {
  #mainR .top .deco {
    width: 170px;
    left: initial;
    bottom: initial;
    top: 40%;
    right: 0;
    transform: scale(-1, 1);
  }
}
#mainR .info {
  margin-bottom: 7rem;
}
@media screen and (max-width: 550px) {
  #mainR .info {
    margin-bottom: 50px;
  }
}
#mainR .info__news ul {
  display: flex;
  flex-direction: column;
  row-gap: 10px;
}
#mainR .info__news ul li .btn {
  color: #141414;
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  background: #def0ea;
  border-left: 3px solid #007440;
  font-size: max(1.4rem, 12px);
  line-height: 1.3;
  font-family: "Noto Serif JP", sans-serif;
  cursor: default;
}
@media screen and (max-width: 550px) {
  #mainR .info__news ul li .btn {
    font-size: 14px;
    padding: 10px 25px;
  }
}
#mainR .info__news ul li .btn > span {
  color: #007440;
  font-size: max(1.4rem, 12px);
  margin-right: 30px;
}
@media screen and (max-width: 550px) {
  #mainR .info__news ul li .btn > span {
    font-size: 14px;
  }
}
/*
#mainR .info__pickup {
  margin-top: 10rem;
}
*/
@media screen and (max-width: 550px) {
/*
  #mainR .info__pickup {
    margin-top: 50px;
  }
*/
}
#mainR .info__pickup h3 {
  margin-left: 10%;
}
@media screen and (max-width: 550px) {
  #mainR .info__pickup h3 {
    margin-left: 5%;
  }
}
#mainR .info__pickup .slider__list--item a span,
#mainR .info__pickup .slider__list--item a p {
  font-family: "Noto Serif JP", sans-serif;
}
#mainR .about {
  margin-top: 10rem;
  margin-bottom: 10rem;
}
@media screen and (max-width: 550px) {
  #mainR .about {
    width: 90%;
    margin: 80px auto;
  }
}
#mainR .about__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 5rem;
}
@media screen and (max-width: 1000px) {
  #mainR .about__inner {
    gap: 0;
    flex-direction: column;
  }
}
#mainR .about__text {
  flex: 1;
}
#mainR .about__text strong {
  display: block;
  color: #007440;
  font-size: max(2.9rem, 22px);
  font-weight: 500;
  letter-spacing: 0.4em;
  margin-top: 2rem;
  margin-bottom: 2rem;
}
#mainR .about__text strong span {
  display: inline-block;
  color: inherit;
  font-size: inherit;
  font-weight: inherit;
  letter-spacing: inherit;
}
#mainR .about__text .btn {
  margin-top: 5rem;
}
#mainR .about__image {
  position: relative;
  width: 37.5rem;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}
@media screen and (max-width: 1000px) {
  #mainR .about__image {
    width: 100%;
  }
}
@media screen and (max-width: 768px) {
  #mainR .about__image {
    width: 60%;
  }
}
@media screen and (max-width: 550px) {
  #mainR .about__image {
    width: 100%;
  }
}
#mainR .about__image--circle {
  position: relative;
  width: 70%;
  display: grid;
  place-items: center;
  aspect-ratio: 1/1;
  border-radius: 50%;
}
@media screen and (max-width: 1000px) {
  #mainR .about__image--circle {
    width: 60%;
  }
}
#mainR .about__image--circle:nth-of-type(1) {
  align-self: start;
  transform: translateY(10%);
}
@media screen and (max-width: 1000px) {
  #mainR .about__image--circle:nth-of-type(1) {
    transform: translateY(20%);
  }
}
#mainR .about__image--circle:nth-of-type(1) .animate-circle {
  animation: drawCircle1 2s ease-out forwards;
}
#mainR .about__image--circle:nth-of-type(2) {
  align-self: end;
  transform: translateY(-10%);
}
@media screen and (max-width: 1000px) {
  #mainR .about__image--circle:nth-of-type(2) {
    transform: translateY(-20%);
  }
}
#mainR .about__image--circle:nth-of-type(2) .animate-circle {
  animation: drawCircle2 2s ease-out forwards;
  animation-delay: 0.3s;
}
#mainR .about__image--circle:nth-of-type(2) p {
  transition-delay: 0.3s;
}
#mainR .about__image--circle p {
  padding: 2rem;
  color: #007440;
  font-size: max(2.7rem, 20px);
  font-weight: 600;
  line-height: 1.2;
  letter-spacing: 0.2em;
  text-align: center;
  opacity: 0;
  transition: opacity 1s ease-in-out;
}
@media screen and (max-width: 550px) {
  #mainR .about__image--circle p {
    font-size: 16px;
  }
}
#mainR .about__image--circle.active p {
  opacity: 1;
}
#mainR .about .btn {
  width: 50%;
  margin: auto;
  z-index: 1;
  margin-top: 100px;
}
@media screen and (max-width: 1000px) {
  #mainR .about .btn {
    width: 80%;
    margin-top: 50px;
  }
}
@media screen and (max-width: 550px) {
  #mainR .about .btn {
    width: 90%;
    margin-top: 10px;
  }
}
#mainR .property {
  position: relative;
  background: linear-gradient(180deg, #def0ea 0%, #fff 100%);
  border-top: 4px solid #007440;
  padding-top: 7rem;
  z-index: 0;
}
#mainR .property h3 {
  margin-left: 10%;
}
#mainR .property__list {
  position: relative;
  margin-top: 25px;
}
#mainR .property__list ul li {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}
#mainR .property__list .slider__list--item .imageBox {
  margin-bottom: 15px;
}
#mainR .property__list .slider__list--item .imageBox .tag {
  gap: 5px;
  display: flex;
  flex-wrap: wrap;
  margin-bottom: 5px;
}
#mainR .property__list .slider__list--item .imageBox .tag__list {
  display: inline-block;
  color: #fff;
  font-size: 12px;
  font-weight: 600;
  line-height: 1;
  letter-spacing: 0.05em;
  padding: 5px;
  background: #007440;
}
#mainR .property__list .slider__list--item .imageBox .tag__list.accent {
  background: #d86c00;
}
#mainR .property__list .slider__list--item .imageBox .tag .new {
  color: #fff;
  background: #d86c00;
}
#mainR .property__list .slider__list--item .textBox b {
  display: block;
  color: #007440;
  font-size: 16px;
  font-weight: 600;
  line-height: 1.2;
  letter-spacing: 0.1em;
  margin-bottom: 10px;
}
#mainR .property__list .slider__list--item .textBox b a {
  color: inherit;
  font-size: inherit;
  font-weight: inherit;
  line-height: inherit;
  letter-spacing: inherit;
}
#mainR .property__list .slider__list--item .textBox p {
  line-height: 1.2;
}
#mainR .property__list .slider__list--item .btnBox {
  gap: 5px;
  display: flex;
  flex-wrap: wrap;
  margin-top: 15px;
}
#mainR .property__list .slider__list--item .btnBox .arrowBtn {
  display: block;
  width: 100%;
  padding: 12px;
  text-align: center;
  font-size: max(1.6rem, 13px);
  font-weight: 500;
  line-height: 1;
  letter-spacing: 0.15em;
}
@media screen and (max-width: 550px) {
  #mainR .property__list .slider__list--item .btnBox .arrowBtn {
    font-size: 14px;
  }
}
#mainR .property__list .slider__list--item .btnBox .arrowBtn::after {
  right: 10px;
}
#mainR .property__list .slider__list--item .btnBox .arrowBtn:hover::after {
  right: 0;
}
#mainR .property__list .slider__list--item .btnBox .arrowBtn.arrowBtn2 {
  flex: 1;
  width: auto;
}
@media screen and (max-width: 1000px) {
  #mainR .property__list .slider__list--item .btnBox .arrowBtn.arrowBtn2 {
    flex: auto;
    width: 100%;
  }
}
@media screen and (max-width: 550px) {
  #mainR .property__list .slider__list--item .btnBox .arrowBtn.arrowBtn2 {
    flex: 1;
    width: auto;
  }
}
#mainR .property .btn {
  width: 50%;
  margin: auto;
  z-index: 1;
  margin-top: 100px;
}
@media screen and (max-width: 1000px) {
  #mainR .property .btn {
    width: 80%;
  }
}
@media screen and (max-width: 550px) {
  #mainR .property .btn {
    width: 90%;
    margin-top: 50px;
  }
}
#mainR .property .deco {
  position: absolute;
  width: 39.5rem;
  bottom: 0;
  right: 0;
  transform: translateY(50%);
  z-index: -1;
}
@media screen and (max-width: 550px) {
  #mainR .property .deco {
    width: 200px;
    transform: translateY(100%);
  }
}
#mainR .lineup h3 {
  margin-left: 10%;
}
#mainR .lineup__inner {
  padding-bottom: 20px;
  position: relative;
  background: linear-gradient(to bottom, transparent 20%, #007440 20%);
}
#mainR .lineup__inner .slider-outer .slider__nav button {
  background: #def0ea;
}
#mainR .lineup__inner .slider-outer .slider__nav button::before {
  border-color: #007440;
}
#mainR .lineup__inner .slider-outer .slider__nav button:hover {
  border: 1px solid #fff;
}
#mainR .lineup__list ul li a {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}
#mainR .lineup__list ul li a .imageBox {
  width: 100%;
  height: auto;
  overflow: hidden;
}
@media screen and (max-width: 768px) {
  #mainR .lineup__list ul li a .imageBox {
    height: 37rem;
  }
}
@media screen and (max-width: 550px) {
  #mainR .lineup__list ul li a .imageBox {
    height: auto;
  }
}
#mainR .lineup__list ul li a .imageBox img {
  transition: transform 0.5s cubic-bezier(0.03, 0.29, 0.24, 0.72);
}
#mainR .lineup__list ul li a b {
  color: #fff;
}
#mainR .lineup__list ul li a p {
  color: #fff;
}
#mainR .lineup__list ul li a .textBox {
  display: flex;
  flex-direction: column;
  align-items: start;
}
#mainR .lineup__list ul li a .more {
  display: flex;
  align-items: center;
  justify-content: end;
  gap: 5px;
  margin-top: 18px;
}
#mainR .lineup__list ul li a .more p {
  text-align: right;
  font-size: max(1.4rem, 12px);
  font-weight: 400;
  line-height: 1;
  letter-spacing: 0.05em;
}
#mainR .lineup__list ul li a .more span {
  display: block;
  position: relative;
  width: max(6rem, 10px);
  height: 1px;
  background: rgba(255, 255, 255, 0.25);
}
#mainR .lineup__list ul li a .more span::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 20%;
  height: 1px;
  background: #fff;
  transition: left 0.5s cubic-bezier(0.03, 0.29, 0.24, 0.72);
}
#mainR .lineup__list ul li a:hover img {
  transform: scale(1.1);
}
#mainR .lineup__list ul li a:hover .more span::before {
  left: 80%;
}
#mainR .lineup__list .dot {
  background: rgba(255, 255, 255, 0.4);
  cursor: pointer;
  transition: background-color 0.3s ease;
}
#mainR .lineup__list .dot.active {
  background: #fff;
}
#mainR .lineup .btnBox {
  background: #007440;
  padding-top: max(8rem, 50px);
  padding-bottom: max(11rem, 80px);
}
@media screen and (max-width: 1000px) {
  #mainR .lineup .btnBox {
    padding-top: 50px;
    padding-bottom: 80px;
  }
}
@media screen and (max-width: 550px) {
  #mainR .lineup .btnBox {
    padding-top: 50px;
  }
}
#mainR .lineup .btnBox .btn {
  width: 50%;
  margin: auto;
  border: 1px solid #def0ea;
}
@media screen and (max-width: 1000px) {
  #mainR .lineup .btnBox .btn {
    width: 80%;
  }
}
#mainR .lineup .btnBox .btn:hover {
  border: 1px solid #fff;
  background: #fff;
  color: #007440;
}
#mainR .lineup .btnBox .btn:hover .line {
  background: rgba(0, 116, 64, 0.25);
}
#mainR .lineup .btnBox .btn:hover .line::before {
  background: #007440;
}
#mainR .products {
  z-index: 10;
  margin-bottom: 10rem;
}
@media screen and (max-width: 550px) {
  #mainR .products {
    margin-bottom: 50px;
  }
}
#mainR .products__wrapper1 {
  position: relative;
  margin-top: -5rem;
}
@media screen and (max-width: 768px) {
  #mainR .products__wrapper1 {
    margin-top: -50px;
  }
}
#mainR .products__wrapper1 img {
  display: block;
  width: 72rem;
  height: 36.6rem;
  margin-left: auto;
}
@media screen and (max-width: 550px) {
  #mainR .products__wrapper1 img {
    width: 90%;
    height: auto;
  }
}
#mainR .products__wrapper1--inner {
  display: flex;
  align-items: end;
  gap: 5rem;
  margin-top: -5rem;
  margin-left: 5%;
  margin-right: 10%;
}
@media screen and (max-width: 550px) {
  #mainR .products__wrapper1--inner {
    gap: 30px;
    margin-right: 5%;
    align-items: start;
    flex-direction: column;
  }
}
#mainR .products__wrapper1--inner .imageBox {
  border: 3px solid #fff;
}
#mainR .products__wrapper1--inner .imageBox img {
  width: 38.6rem;
  height: 27rem;
}
@media screen and (max-width: 550px) {
  #mainR .products__wrapper1--inner .imageBox img {
    width: 172px;
    height: 117px;
  }
}
#mainR .products__wrapper1--inner .textBox {
  flex: 1;
}
@media screen and (max-width: 550px) {
  #mainR .products__wrapper1--inner .textBox {
    width: 100%;
  }
}
#mainR .products__wrapper1--inner .textBox p {
  display: flex;
  align-items: end;
  gap: 10px;
  color: #007440;
  font-size: 1.8rem;
  line-height: 1;
  letter-spacing: 0.2em;
}
@media screen and (max-width: 550px) {
  #mainR .products__wrapper1--inner .textBox p {
    font-size: 18px;
  }
}
#mainR .products__wrapper1--inner .textBox p span {
  color: #007440;
  font-size: max(1.2rem, 10px);
  line-height: 1;
  letter-spacing: 0;
}
@media screen and (max-width: 550px) {
  #mainR .products__wrapper1--inner .textBox p span {
    font-size: 12px;
  }
}
#mainR .products__wrapper1--inner .textBox strong {
  display: block;
  color: #007440;
  font-size: 7.2rem;
  font-weight: 500;
  line-height: 1;
  letter-spacing: 0.05em;
  margin-top: 0.5rem;
}
@media screen and (max-width: 550px) {
  #mainR .products__wrapper1--inner .textBox strong {
    font-size: 72px;
    margin-bottom: 20px;
  }
}
#mainR .products__wrapper1--inner .textBox strong span {
  color: #007440;
  font-size: max(2.9rem, 22px);
  letter-spacing: 0.15em;
}
@media screen and (max-width: 550px) {
  #mainR .products__wrapper1--inner .textBox strong span {
    font-size: 29px;
  }
}
#mainR .products__wrapper1 .deco {
  top: 5rem;
  left: 0;
  width: 29rem;
  height: 25.7rem;
  z-index: -1;
}
@media screen and (max-width: 550px) {
  #mainR .products__wrapper1 .deco {
    top: 35%;
    left: initial;
    right: -15px;
    width: 170px;
    height: auto;
    transform: scale(-1, 1);
  }
}
#mainR .products__wrapper2,
#mainR .products__wrapper3 {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 4rem;
  padding-top: 10rem;
}
@media screen and (max-width: 1000px) {
  #mainR .products__wrapper2,
  #mainR .products__wrapper3 {
    gap: 25px;
    flex-direction: column;
  }
}
@media screen and (max-width: 550px) {
  #mainR .products__wrapper2,
  #mainR .products__wrapper3 {
    padding-top: 50px;
  }
}
#mainR .products__wrapper2--text,
#mainR .products__wrapper3--text {
  flex: 1;
}
#mainR .products__wrapper2--text h3,
#mainR .products__wrapper3--text h3 {
  flex-direction: column;
  align-items: start;
}
#mainR .products__wrapper2--text p,
#mainR .products__wrapper3--text p {
  line-height: 2.5;
  margin-top: 15px;
  margin-bottom: 3rem;
}
#mainR .products__wrapper2--text .btn:nth-of-type(2),
#mainR .products__wrapper3--text .btn:nth-of-type(2) {
  margin-top: 1.5rem;
}
@media screen and (max-width: 1000px) {
  #mainR .products__wrapper2--text .btn:nth-of-type(2),
  #mainR .products__wrapper3--text .btn:nth-of-type(2) {
    margin-top: 10px;
  }
}
@media screen and (max-width: 1000px) {
  #mainR .products__wrapper2--text .btn,
  #mainR .products__wrapper3--text .btn {
    display: none;
  }
}
#mainR .products__wrapper2--image,
#mainR .products__wrapper3--image {
  width: 41.5rem;
  aspect-ratio: 1/1;
}
@media screen and (max-width: 1000px) {
  #mainR .products__wrapper2--image,
  #mainR .products__wrapper3--image {
    width: 100%;
    height: auto;
    aspect-ratio: initial;
  }
}
#mainR .products__wrapper2--image .btn,
#mainR .products__wrapper3--image .btn {
  display: none;
}
@media screen and (max-width: 1000px) {
  #mainR .products__wrapper2--image .btn,
  #mainR .products__wrapper3--image .btn {
    display: flex;
  }
  #mainR .products__wrapper2--image .btn:first-of-type,
  #mainR .products__wrapper3--image .btn:first-of-type {
    margin-top: 30px;
  }
  #mainR .products__wrapper2--image .btn:not(:first-of-type),
  #mainR .products__wrapper3--image .btn:not(:first-of-type) {
    margin-top: 15px;
  }
}
@media screen and (max-width: 1000px) {
  #mainR .products__wrapper3 {
    flex-direction: column-reverse;
  }
}
#mainR .public {
  position: relative;
  padding-top: 10rem;
  padding-bottom: 10rem;
  border-top: 4px solid #007440;
  background: linear-gradient(180deg, #def0ea 0%, #fff 100%);
  z-index: 0;
}
@media screen and (max-width: 550px) {
  #mainR .public {
    padding-top: 50px;
    padding-bottom: 0;
  }
}
#mainR .public__text {
  margin-left: 10%;
  margin-right: 10%;
  margin-bottom: 3rem;
}
#mainR .public__text p {
  margin-top: 10px;
}
#mainR .public__list {
  position: relative;
  z-index: 100;
}
#mainR .public__list ul li b {
  display: inline-block;
  width: 100%;
  text-align: center;
  color: #007440;
  font-size: max(1.4rem, 12px);
}
#mainR .public .btn,
#mainR .present .btn{
  width: 50%;
  margin: auto;
  margin-top: 10rem;
}
@media screen and (max-width: 1000px) {
  #mainR .public .btn,
#mainR .present .btn {
    width: 80%;
  }
}
@media screen and (max-width: 550px) {
  #mainR .public .btn,
#mainR .present .btn {
    width: 90%;
    margin-top: 50px;
  }
}
#mainR .public .deco {
  top: 0;
  right: 0;
  width: 25rem;
  z-index: -1;
}
#mainR .present {
  position: relative;
}
@media screen and (max-width: 550px) {
  #mainR .present {
    padding-top: 100px;
  }
}
#mainR .present__wrapper {
  position: relative;
  width: 80%;
  margin: auto;
  display: flex;
  align-items: center;
  background: #007440;
  z-index: 100;
}
@media screen and (max-width: 1000px) {
  #mainR .present__wrapper {
    width: 400px;
    padding: 5%;
    padding-bottom: 0;
    margin-bottom: 10%;
    flex-direction: column;
  }
}
@media screen and (max-width: 768px) {
  #mainR .present__wrapper {
    width: 500px;
  }
}
@media screen and (max-width: 550px) {
  #mainR .present__wrapper {
    width: 90%;
    margin: 0 auto 10% auto;
  }
}
#mainR .present__wrapper--text {
  flex: 1;
  padding-left: 5rem;
}
@media screen and (max-width: 1000px) {
  #mainR .present__wrapper--text {
    padding-left: 0;
  }
}
#mainR .present__wrapper--text strong {
  color: #fff;
  font-size: max(2.9rem, 22px);
  font-weight: 500;
  letter-spacing: 0.1em;
}
@media screen and (max-width: 550px) {
  #mainR .present__wrapper--text strong {
    font-size: 29px;
  }
}
#mainR .present__wrapper--text p {
  color: #fff;
  font-size: 16px;
  font-weight: 400;
  letter-spacing: 0.05em;
}
#mainR .present__wrapper--circle {
  height: 26rem;
  aspect-ratio: 1/1;
  border: 3px solid #007440;
  border-radius: 50%;
  background: #fff;
  overflow: hidden;
  transform: translateY(-10%);
  margin-right: 5rem;
}
@media screen and (max-width: 1000px) {
  #mainR .present__wrapper--circle {
    height: 250px;
    transform: translateY(10%);
    margin-right: 0;
  }
}
#mainR .present__wrapper--circle strong {
  color: #007440;
  font-family: "Noto Serif JP", sans-serif;
  font-size: 5.6rem;
  line-height: 1;
  letter-spacing: -0.035em;
  display: flex;
  align-items: end;
  justify-content: center;
  -moz-column-gap: 5px;
  column-gap: 5px;
  margin-top: 1rem;
}
@media screen and (max-width: 1000px) {
  #mainR .present__wrapper--circle strong {
    font-size: 56px;
  }
}
#mainR .present__wrapper--circle strong span {
  color: #007440;
  font-size: max(2.9rem, 22px);
  font-weight: 700;
  line-height: 1.3;
}
@media screen and (max-width: 1000px) {
  #mainR .present__wrapper--circle strong span {
    font-size: 22px;
  }
}
#mainR .present__wrapper--circle span {
  color: #007440;
  display: block;
  font-size: 2.7rem;
  font-weight: 700;
  letter-spacing: 0;
  line-height: 1;
  text-align: center;
  margin-top: 2rem;
}
@media screen and (max-width: 1000px) {
  #mainR .present__wrapper--circle span {
    font-size: 27px;
  }
}
#mainR .present__wrapper--circle span.accent {
  color: #007440;
  display: grid;
  place-items: center;
  width: 100%;
  height: 35%;
  font-size: 2.2rem;
  font-weight: 700;
  margin: 0;
  background: #def0ea;
  text-align: center;
}
@media screen and (max-width: 1000px) {
  #mainR .present__wrapper--circle span.accent {
    font-size: 22px;
  }
}
#mainR .present .attention {
  display: block;
  color: #007440;
  font-size: 11px;
  letter-spacing: 0.05em;
  width: 80%;
  margin: auto;
  margin-top: 10px;
}
@media screen and (max-width: 1000px) {
  #mainR .present .attention {
    width: 400px;
  }
}
@media screen and (max-width: 768px) {
  #mainR .present .attention {
    width: 500px;
  }
}
@media screen and (max-width: 550px) {
  #mainR .present .attention {
    width: 90%;
  }
}
#mainR .present .deco {
  top: -30%;
  left: 0;
  width: 38.5rem;
  z-index: -1;
}
@media screen and (max-width: 1000px) {
  #mainR .present .deco {
    top: 0;
  }
}
#mainR .topics {
  padding-top: 8.5rem;
}
#mainR .topics__list {
  margin-top: 5rem;
}
#mainR .topics__list ul {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
}
#mainR .topics__list ul li {
  flex: 1;
  width: calc(25% - 1.5rem);
}
@media screen and (max-width: 1000px) {
  #mainR .topics__list ul li {
    min-width: calc(50% - 0.5rem);
  }
}

.circle-svg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

.circle-stroke {
  stroke: #007440;
  stroke-width: 1;
  fill: none;
  stroke-dasharray: 390;
  stroke-dashoffset: 390;
}

@keyframes drawCircle1 {
  from {
    stroke-dashoffset: 390;
  }
  to {
    stroke-dashoffset: 0;
  }
}
@keyframes drawCircle2 {
  from {
    stroke-dashoffset: 390;
  }
  to {
    stroke-dashoffset: 0;
  }
} /*# sourceMappingURL=front.css.map */