@charset "UTF-8";
@import url("https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@400;500;700&display=swap");
@import url("https://fonts.googleapis.com/css2?family=Zen+Kaku+Gothic+New:wght@400;500;700;900&display=swap");
@keyframes anime_insect {
  0% {
    transform: rotate(-31deg) translate(0, 0);
  }
  25% {
    transform: rotate(-21deg) translate(5px, -5px);
  }
  50% {
    transform: rotate(-31deg) translate(0, 0);
  }
  75% {
    transform: rotate(-41deg) translate(-5px, 5px);
  }
  100% {
    transform: rotate(-31deg) translate(0, 0);
  }
}
@keyframes anime_boar {
  0% {
    transform: translate(0, 0);
  }
  50% {
    transform: translate(25px, 0);
  }
  100% {
    transform: translate(0, 0);
  }
}
@keyframes anime_bird {
  0% {
    transform: translate(0, 0);
  }
  50% {
    transform: translate(25px, -35px);
  }
  100% {
    transform: translate(0, 0);
  }
}
@keyframes anime_fish {
  0% {
    transform: translateX(0) scaleX(1);
  }
  25% {
    transform: translateX(20px) scaleX(1.1);
  }
  50% {
    transform: translateX(0) scaleX(1);
  }
  75% {
    transform: translateX(-20px) scaleX(1.1);
  }
  100% {
    transform: translateX(0) scaleX(1);
  }
}
@keyframes anime_leaf {
  0% {
    transform: rotate(0deg) translate(0, 0);
  }
  50% {
    transform: rotate(25deg) translate(10px, 20px);
  }
  100% {
    transform: rotate(0deg) translate(0, 0);
  }
}
@scope (.lp_main) {
  color: #445244;
  font-family: "Noto Sans JP", sans-serif;
  font-size: min(4vw, 16px);
  /*スマホの文字の大きさ一定*/
  -webkit-text-size-adjust: 100%;
  /*アンチエイリアス*/
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
  @media print, screen and (min-width: 920px) {
    font-size: 16px;
  }
  img {
    max-width: 100%;
  }
  a {
    text-decoration: none;
    color: #000;
  }
  a:hover {
    color: #000;
    text-decoration: none;
  }
  figure figcaption {
    margin-top: min(1vw, 8px);
    letter-spacing: 0;
    color: #7f837f;
    font-size: min(2.8vw, 14px);
    font-weight: 500;
  }
  figure figcaption.c_black {
    color: #445244;
  }
  /*breakpoint display*/
  .sp_min {
    display: block;
  }
  .sp_min_inline {
    display: inline;
  }
  .sp {
    display: block;
  }
  .sp_inline {
    display: inline;
  }
  .sp_tab {
    display: block;
  }
  .sp_tab_inline {
    display: inline;
  }
  .pc,
  .pc_inline {
    display: none !important;
  }
  .tab,
  .tab_inline {
    display: none !important;
  }
  .pc_tab,
  .pc_tab_inline {
    display: none !important;
  }
  @media print, screen and (min-width: 321px) {
    .sp_min,
    .sp_min_inline {
      display: none !important;
    }
  }
  @media print, screen and (min-width: 768px) {
    .sp,
    .sp_inline {
      display: none !important;
    }
    .tab {
      display: block !important;
    }
    .tab_inline {
      display: inline !important;
    }
    .pc_tab {
      display: block !important;
    }
    .pc_tab_inline {
      display: inline !important;
    }
  }
  @media print, screen and (min-width: 920px) {
    .sp_tab,
    .sp_tab_inline {
      display: none !important;
    }
    .tab,
    .tab_inline {
      display: none !important;
    }
    .pc {
      display: block !important;
    }
    .pc_inline {
      display: inline !important;
    }
  }
  .ta_c {
    text-align: center;
  }
  .ta_r {
    text-align: right;
  }
  .mt_ss {
    margin-top: min(2vw, 14px);
  }
  .mt_s {
    margin-top: min(5vw, 36px);
  }
  .mt_m {
    margin-top: min(10vw, 60px);
  }
  .mt_l {
    margin-top: min(18vw, 100px);
  }
  .head_title_s .mt_ss,
  .page_text .mt_ss {
    margin-top: min(1.8vw, 10px);
  }
  .head_title_s.mt_s,
  .page_text.mt_s {
    margin-top: min(4vw, 32px);
  }
  .pd_bl_l {
    padding-block: min(18vw, 100px);
  }
  .pd_bl_m {
    padding-block: min(10vw, 60px);
  }
  .pd_b_l {
    padding-bottom: min(18vw, 100px);
  }
  .pd_t_l {
    padding-top: min(18vw, 100px);
  }
  .box_flex {
    display: flex;
    flex-direction: column;
    gap: min(5vw, 30px);
  }
  @media print, screen and (min-width: 920px) {
    .box_flex {
      flex-direction: row;
      gap: min(3vw, 40px);
    }
    .box_flex .flex_1 {
      flex: 1;
    }
    .box_flex .flex_2 {
      flex: 2;
    }
    .box_flex .flex_3 {
      flex: 3;
    }
    .box_flex .flex_4 {
      flex: 4;
    }
    .box_flex .flex_5 {
      flex: 5;
    }
    .box_flex .flex_6 {
      flex: 6;
    }
    .box_flex .flex_7 {
      flex: 7;
    }
    .box_flex .flex_8 {
      flex: 8;
    }
    .box_flex .flex_9 {
      flex: 9;
    }
    .box_flex .flex_10 {
      flex: 10;
    }
  }
  .page_inner_l {
    width: calc(100% - min(4vw, 40px) * 2);
    max-width: 1200px;
    margin-inline: auto;
  }
  @media print, screen and (min-width: 920px) {
    .page_inner_l {
      width: calc(100% - 160px);
    }
  }
  .head_title_l {
    font-size: 2.4rem;
    line-height: 1.4;
    font-weight: 700;
    letter-spacing: 0.05em;
    text-align: center;
    margin-bottom: min(6vw, 40px);
  }
  .head_title_l .sub_title {
    display: block;
    font-size: min(3.5vw, 20px);
    font-weight: bold;
  }
  .head_title_l .main_title {
    display: block;
    font-size: min(8vw, 50px);
    font-weight: bold;
    color: #027c72;
    line-height: 1.4;
  }
  .head_title_m {
    font-family: "Zen Kaku Gothic New", sans-serif;
    font-size: min(6.4vw, 28px);
    font-weight: 700;
    line-height: 1.4;
    padding-bottom: min(1.3vw, 8px);
    border-bottom: 2px dashed #e8e8e1;
  }
  .head_title_s {
    position: relative;
    font-family: "Zen Kaku Gothic New", sans-serif;
    font-size: min(6vw, 24px);
    font-weight: 700;
    line-height: 1.4;
    padding-left: min(2vw, 12px);
  }
  .head_title_s::before {
    content: "";
    position: absolute;
    top: 0.12em;
    left: 0;
    width: min(0.5vw, 4px);
    height: calc(100% - 0.2em);
    border-radius: 100px;
    background-color: #027c72;
  }
  .title_sub_text {
    text-align: center;
    line-height: 1.8;
    font-size: min(3.5vw, 18px);
    font-weight: 500;
  }
  .page_text {
    font-size: min(3.5vw, 18px);
    font-weight: 500;
    line-height: 1.8;
  }
  .page_text a {
    color: #027c72;
  }
  .page_text a[target=_blank]::after {
    content: "";
    position: relative;
    top: -1px;
    display: inline-block;
    width: min(5vw, 23px);
    height: min(5vw, 23px);
    border-radius: 100%;
    background-color: #027c72;
    background-image: url(../img/blank_arrow.svg);
    background-size: min(2vw, 9px) auto;
    background-repeat: no-repeat;
    background-position: center;
  }
  .page_text a:hover {
    text-decoration: underline;
  }
  .page_table {
    table-layout: fixed;
    border-collapse: collapse;
    border-spacing: 0;
    width: 100%;
  }
  .page_table tr th,
  .page_table tr td {
    border: 1px solid #7f837f;
    padding: min(1.5vw, 8px) min(2vw, 20px);
  }
  .page_table tr th {
    text-align: initial;
    background-color: #f5f5ee;
  }
  .page_table .table_w1 {
    width: 10%;
  }
  .page_table .table_w2 {
    width: 20%;
  }
  .page_table .table_w3 {
    width: 30%;
  }
  .page_table .table_w4 {
    width: 40%;
  }
  .page_table .table_w5 {
    width: 50%;
  }
  .page_table .table_w6 {
    width: 60%;
  }
  .page_table .table_w7 {
    width: 70%;
  }
  .page_table .table_w8 {
    width: 80%;
  }
  .page_table .table_w9 {
    width: 90%;
  }
  .page_table .table_w10 {
    width: 100%;
  }
  .page_table .table_title {
    width: 34%;
  }
  .page_table .table_number {
    width: 16%;
  }
  .page_table .table_text {
    width: 60%;
  }
  .anchor_decoy {
    margin-top: -1px;
    padding-top: 1px;
  }
  .bg_color01 {
    background: #f5f5ee;
  }
  .bg_color02 {
    background: #d0ebd3;
  }
  .separate_top_after {
    position: relative;
    padding-top: calc(min(5vw, 100px) + min(18vw, 100px));
  }
  .separate_top_after::after {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: min(5vw, 100px);
    background-image: url(../img/separate_top.svg);
    background-size: 100% auto;
    background-repeat: no-repeat;
    background-position: top;
  }
  .separate_bottom_after {
    position: relative;
    padding-bottom: calc(min(5vw, 100px) + min(18vw, 100px));
  }
  .separate_bottom_after::after {
    content: "";
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: min(5vw, 100px);
    background-image: url(../img/separate_bottom.svg);
    background-size: 100% auto;
    background-repeat: no-repeat;
    background-position: bottom;
  }
}
.mv_intro {
  overflow: hidden;
}

.mv {
  position: relative;
  padding-top: 126%;
}
@media print, screen and (min-width: 768px) {
  .mv {
    padding-top: 60%;
  }
}
@media print, screen and (min-width: 920px) {
  .mv {
    padding-top: 48%;
  }
}
.mv .page_inner_l {
  position: absolute;
  height: 100%;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  z-index: 1;
}
.mv .mv_title {
  position: absolute;
  top: min(8vw, 57px);
  left: 50%;
  transform: translateX(-50%);
  width: min(90vw, 632px);
}
@media print, screen and (min-width: 768px) {
  .mv .mv_title {
    top: min(5vw, 57px);
    width: min(56vw, 632px);
  }
}
@media print, screen and (min-width: 920px) {
  .mv .mv_title {
    top: min(4.2vw, 70px);
    width: min(50vw, 632px);
  }
}
@media print, screen and (min-width: 1400px) {
  .mv .mv_title {
    top: 4.8vw;
  }
}
.mv .map_point {
  position: absolute;
  bottom: min(6vw, 68px);
  right: 0;
  width: min(71vw, 466px);
}
@media print, screen and (min-width: 768px) {
  .mv .map_point {
    bottom: min(4vw, 68px);
    width: min(40vw, 466px);
  }
}
@media print, screen and (min-width: 920px) {
  .mv .map_point {
    bottom: min(4vw, 68px);
    right: calc(-1 * min(3vw, 45px));
    width: min(32vw, 466px);
  }
}
.mv .mv_bg {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}
.mv .mv_bg img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.intro_sec {
  position: relative;
  background: #f5f5ee url(../img/intro_bg.png) no-repeat bottom center;
  background-size: 100% auto;
  padding-top: min(14vw, 65px);
  padding-bottom: min(60vw, 460px);
}
@media print, screen and (min-width: 1180px) {
  .intro_sec {
    padding-bottom: 10vw;
  }
}
@media print, screen and (min-width: 1400px) {
  .intro_sec {
    padding-bottom: 110px;
  }
}
.intro_sec .intro_obj01 {
  position: absolute;
  top: -12px;
  left: min(4vw, 20px);
  width: min(28vw, 143px);
}
@media print, screen and (min-width: 920px) {
  .intro_sec .intro_obj01 {
    width: min(16vw, 193px);
  }
}
@media print, screen and (min-width: 1180px) {
  .intro_sec .intro_obj01 {
    top: -3vw;
    left: calc(50% - min(40vw, 610px));
    transform: translateX(-50%);
  }
}
@media print, screen and (min-width: 1400px) {
  .intro_sec .intro_obj01 {
    top: calc(-1 * min(4vw, 70px));
  }
}
.intro_sec .intro_obj02 {
  position: absolute;
  left: calc(-1 * min(3vw, 20px));
  bottom: min(10vw, 68px);
  overflow: hidden;
  border-radius: 100%;
  width: min(40vw, 378px);
}
@media print, screen and (min-width: 1180px) {
  .intro_sec .intro_obj02 {
    bottom: min(11vw, 148px);
    left: calc(50% - min(43vw, 660px));
    transform: translateX(-50%);
    width: min(22vw, 378px);
  }
}
@media print, screen and (min-width: 1400px) {
  .intro_sec .intro_obj02 {
    bottom: min(10vw, 112px);
  }
}
.intro_sec .intro_obj03 {
  position: absolute;
  bottom: min(9vw, 290px);
  left: min(30vw, 310px);
  width: min(16vw, 94px);
  transform: rotate(-38deg);
}
@media print, screen and (min-width: 1180px) {
  .intro_sec .intro_obj03 {
    width: min(7vw, 94px);
    left: calc(50% - min(35vw, 520px));
    transform: translateX(-50%) rotate(-38deg);
  }
}
@media print, screen and (min-width: 1400px) {
  .intro_sec .intro_obj03 {
    bottom: min(5vw, 290px);
  }
}
.intro_sec .intro_obj04 {
  position: absolute;
  right: min(5vw, 40px);
  top: min(5vw, 40px);
  width: min(14.5vw, 63px);
}
@media print, screen and (min-width: 1180px) {
  .intro_sec .intro_obj04 {
    top: calc(-1 * min(1vw, 50px));
    right: calc(50% - min(45vw, 700px));
    transform: translateX(50%);
    width: min(14.5vw, 89px);
  }
}
@media print, screen and (min-width: 1400px) {
  .intro_sec .intro_obj04 {
    top: calc(-1 * min(2vw, 50px));
  }
}
.intro_sec .intro_obj05 {
  position: absolute;
  bottom: min(20vw, 200px);
  right: calc(-1 * min(3vw, 20px));
  overflow: hidden;
  border-radius: 100%;
  width: min(30vw, 294px);
}
@media print, screen and (min-width: 1180px) {
  .intro_sec .intro_obj05 {
    width: min(18vw, 294px);
    bottom: min(25vw, 250px);
    right: calc(50% - min(42vw, 670px));
    transform: translateX(50%);
  }
}
@media print, screen and (min-width: 1400px) {
  .intro_sec .intro_obj05 {
    bottom: min(20vw, 200px);
  }
}
.intro_sec .intro_obj06 {
  position: absolute;
  bottom: min(4vw, 200px);
  right: min(16vw, 200px);
  width: min(18vw, 171px);
}
@media print, screen and (min-width: 1180px) {
  .intro_sec .intro_obj06 {
    bottom: min(4vw, 40px);
    width: min(10vw, 171px);
    right: calc(50% - min(38vw, 480px));
    transform: translateX(50%);
  }
}
.intro_sec .intro_sec__inner {
  text-align: center;
  width: calc(100% - min(4vw, 40px) * 2);
  max-width: 740px;
  margin-inline: auto;
}
@media print, screen and (min-width: 920px) {
  .intro_sec .intro_sec__inner {
    width: calc(100% - 160px);
  }
}
.intro_sec .intro_text {
  font-size: min(4.7vw, 20px);
  font-weight: 700;
  line-height: 2;
  margin-inline: auto;
  letter-spacing: 0.02em;
}
@media print, screen and (min-width: 768px) {
  .intro_sec .intro_text {
    font-size: min(2.5vw, 20px);
  }
}
.intro_sec .intro_text_mini {
  margin-top: min(4vw, 60px);
  font-size: min(3.5vw, 18px);
  font-weight: 500;
  line-height: 1.8;
}
.intro_sec .intro_img {
  width: 278px;
  max-width: 100%;
  margin-top: min(4vw, 20px);
}

.sakoshi_info {
  background: #d0ebd3;
}

.sakoshi_anchor_nav {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: min(4.5vw, 26px) min(3vw, 20px);
  margin-top: min(8vw, 60px);
}
@media print, screen and (min-width: 1180px) {
  .sakoshi_anchor_nav {
    flex-wrap: nowrap;
  }
}
.sakoshi_anchor_nav .block_link {
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  width: calc((100% - min(3vw, 20px)) / 2);
  background: #fff;
  text-align: center;
  border-radius: min(1.5vw, 10px);
  padding: min(4vw, 20px) min(3vw, 10px) min(12vw, 60px) min(3vw, 10px);
  box-shadow: 0 min(1.5vw, 8px) 0 rgba(0, 0, 0, 0.15);
  transition: opacity 0.3s;
}
@media print, screen and (min-width: 920px) {
  .sakoshi_anchor_nav .block_link {
    width: calc((100% - min(3vw, 20px) * 2) / 3);
  }
}
@media print, screen and (min-width: 1180px) {
  .sakoshi_anchor_nav .block_link {
    flex: 1;
    width: auto;
  }
}
.sakoshi_anchor_nav .block_link:hover {
  opacity: 0.7;
}
.sakoshi_anchor_nav .block_link .sub_title {
  font-size: min(2.8vw, 16px);
  font-weight: 700;
  line-height: 1.4;
}
.sakoshi_anchor_nav .block_link .main_title {
  font-size: min(4.6vw, 24px);
  font-weight: bold;
  letter-spacing: 0;
  line-height: 1.4;
  color: #027c72;
  margin-top: 2px;
}
.sakoshi_anchor_nav .block_link .arrow {
  position: absolute;
  left: 50%;
  bottom: min(3vw, 20px);
  transform: translateX(-50%);
  width: min(6vw, 30px);
  height: min(6vw, 30px);
  margin-top: 10px;
  border-radius: 100%;
  background: #027c72;
}
.sakoshi_anchor_nav .block_link .arrow::after {
  content: "";
  position: absolute;
  left: 50%;
  top: calc(50% - 1px);
  width: min(1.8vw, 9px);
  height: min(1.8vw, 9px);
  border-top: 2px solid #fff;
  border-right: 2px solid #fff;
  transform: translate(-50%, -50%) rotate(135deg);
}

.sakoshi_info_sec {
  position: relative;
  padding-block: 1px;
}

.sakoshi_feature {
  display: flex;
  flex-direction: column;
  gap: 4vw;
}
@media print, screen and (min-width: 920px) {
  .sakoshi_feature {
    flex-direction: row;
    gap: min(2vw, 40px);
  }
}

.sakoshi_feature__box {
  min-width: 0;
  flex: 1;
  background: #fff;
  padding: min(3.5vw, 20px) min(4vw, 30px) min(4vw, 25px);
  border-radius: 15px;
}
.sakoshi_feature__box .title {
  display: flex;
  align-items: center;
  gap: 15px;
  font-family: "Zen Kaku Gothic New", sans-serif;
  font-size: min(5.6vw, 22px);
  font-weight: 700;
  line-height: 1.4;
  border-bottom: 2px dashed #e8e8e1;
  padding-bottom: min(1.2vw, 8px);
}
.sakoshi_feature__box .title .no {
  font-size: min(8.5vw, 45px);
  font-weight: 500;
  font-style: italic;
  color: #359f87;
  padding-bottom: 0.15em;
}
.sakoshi_feature__box .img {
  margin-top: min(3vw, 20px);
}
.sakoshi_feature__box .text {
  margin-top: min(3vw, 20px);
}
.sakoshi_feature__box .notes {
  display: flex;
  flex-direction: column;
  gap: 4px;
  position: relative;
  padding-left: 32px;
  margin-top: min(2vw, 15px);
  font-size: min(3.5vw, 14px);
  line-height: 1.4;
  color: #7f837f;
}
.sakoshi_feature__box .notes span {
  position: absolute;
  left: 0;
}

.sakoshi_managemen {
  text-align: center;
}
.sakoshi_managemen .managemen_flow_img {
  width: 911px;
  max-width: 100%;
  margin-inline: auto;
}
.sakoshi_managemen .managemen_box {
  border-radius: 15px;
  background: #e8e8e1;
  padding: min(4vw, 40px) min(4vw, 60px) min(4vw, 60px);
  text-align: center;
  margin-top: min(8vw, 80px);
}
@media print, screen and (min-width: 920px) {
  .sakoshi_managemen .managemen_box {
    flex-direction: row;
  }
}
.sakoshi_managemen .managemen_box .title {
  font-family: "Zen Kaku Gothic New", sans-serif;
  font-size: min(4.5vw, 30px);
  font-weight: 700;
}
.sakoshi_managemen .managemen_box .managemen_img {
  margin-top: min(3vw, 20px);
  max-width: 100%;
  aspect-ratio: 4/2.25;
}
.sakoshi_managemen .managemen_box .managemen_img video {
  height: 100%;
  width: 100%;
  object-fit: cover;
}

.creature_obj01 {
  position: absolute;
  left: 0;
  top: 0;
  width: min(25vw, 279px);
}

.creature_obj02 {
  position: absolute;
  right: 0;
  top: 0;
  width: min(25vw, 279px);
}

.sakoshi_creature {
  display: flex;
  flex-direction: column;
  gap: min(8vw, 40px);
}
@media print, screen and (min-width: 920px) {
  .sakoshi_creature {
    flex-direction: row;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
  }
}
@media print, screen and (min-width: 920px) {
  .sakoshi_creature.reverse {
    flex-direction: row-reverse;
  }
}
.sakoshi_creature.reverse .sakoshi_creature_data {
  background-image: url(../img/note_right.svg);
  padding-inline: min(3.5vw, 40px) min(8vw, 60px);
}
.sakoshi_creature + .sakoshi_creature {
  margin-top: min(18vw, 90px);
}

.sakoshi_creature_data {
  display: flex;
  flex-direction: column;
  justify-content: center;
  position: relative;
  aspect-ratio: 131/87;
  background: url(../img/note_left.svg) no-repeat 0 0;
  background-size: 100% auto;
  padding: min(3.5vw, 20px) min(3.5vw, 40px) min(3.5vw, 20px) min(8vw, 60px);
}
@media print, screen and (min-width: 920px) {
  .sakoshi_creature_data {
    width: 55%;
    min-width: 0;
    flex-shrink: 0;
  }
}
@media print, screen and (min-width: 1180px) {
  .sakoshi_creature_data {
    width: 45%;
  }
}
.sakoshi_creature_data .data_obj01 {
  position: absolute;
  top: calc(-1 * min(4vw, 32px));
  right: min(6vw, 58px);
  width: min(13vw, 65px);
  transform: rotate(-31deg);
  animation: anime_insect 2s ease-in-out infinite;
}
@media print, screen and (min-width: 920px) {
  .sakoshi_creature_data .data_obj01 {
    width: min(7vw, 85px);
    right: min(4vw, 58px);
  }
}
.sakoshi_creature_data .data_obj02 {
  position: absolute;
  top: calc(-1 * min(6vw, 35px));
  left: min(4vw, 58px);
  width: min(18vw, 92px);
  animation: anime_boar 3s ease-in-out infinite;
}
@media print, screen and (min-width: 920px) {
  .sakoshi_creature_data .data_obj02 {
    top: calc(-1 * min(4vw, 45px));
    width: min(10vw, 114px);
    left: min(4vw, 40px);
  }
}
.sakoshi_creature_data .data_obj03 {
  position: absolute;
  top: calc(-1 * min(4vw, 44px));
  width: min(13vw, 78px);
  right: min(6vw, 58px);
  animation: anime_bird 3s ease-in-out infinite;
}
@media print, screen and (min-width: 920px) {
  .sakoshi_creature_data .data_obj03 {
    width: min(9vw, 108px);
    right: min(4vw, 58px);
  }
}
.sakoshi_creature_data .data_obj04 {
  position: absolute;
  top: calc(-1 * min(6vw, 35px));
  left: min(4vw, 58px);
  width: min(18vw, 92px);
  animation: anime_fish 5s ease-in-out infinite;
}
@media print, screen and (min-width: 920px) {
  .sakoshi_creature_data .data_obj04 {
    top: calc(-1 * min(4vw, 45px));
    width: min(10vw, 113px);
    left: min(4vw, 40px);
  }
}
.sakoshi_creature_data .data_obj05 {
  position: absolute;
  top: calc(-1 * min(4vw, 44px));
  width: min(13vw, 78px);
  right: min(6vw, 58px);
  animation: anime_leaf 5s ease-in-out infinite;
}
@media print, screen and (min-width: 920px) {
  .sakoshi_creature_data .data_obj05 {
    width: min(8vw, 96px);
    right: min(4vw, 58px);
  }
}
.sakoshi_creature_data .data_title {
  font-size: min(5.5vw, 35px);
  font-weight: 700;
  line-height: 1.4;
  border-bottom: 2px dashed #e8e8e1;
  padding-bottom: min(1.2vw, 8px);
}
@media print, screen and (min-width: 920px) {
  .sakoshi_creature_data .data_title {
    font-size: min(2.5vw, 35px);
  }
}
.sakoshi_creature_data .data_text {
  margin-top: min(3.5vw, 20px);
  font-size: min(3.5vw, 16px);
  font-weight: 500;
}
@media print, screen and (min-width: 920px) {
  .sakoshi_creature_data .data_text {
    margin-top: min(1.3vw, 20px);
    font-size: min(1.25vw, 16px);
  }
}
.sakoshi_creature_data .data_text span {
  display: inline-block;
}
.sakoshi_creature_data .data_count {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 5px min(1.5vw, 15px);
  width: fit-content;
  margin-top: min(3.5vw, 30px);
  padding: min(2vw, 15px) min(4vw, 28px) min(2vw, 13px);
  border-radius: 1000px;
  border: 1px solid #027c72;
  color: #027c72;
  letter-spacing: 0;
}
@media print, screen and (min-width: 920px) {
  .sakoshi_creature_data .data_count {
    gap: 5px min(1vw, 15px);
    margin-top: min(1.6vw, 30px);
    padding: min(1vw, 15px) min(2vw, 28px) min(1vw, 13px);
  }
}
.sakoshi_creature_data .data_count .num {
  display: flex;
  align-items: baseline;
  font-size: min(6.5vw, 45px);
  font-weight: 700;
  flex-shrink: 0;
  min-width: 0;
  gap: 4px;
  line-height: 1;
}
.sakoshi_creature_data .data_count .num span {
  font-size: min(3.5vw, 28px);
}
@media print, screen and (min-width: 920px) {
  .sakoshi_creature_data .data_count .num {
    gap: min(0.3vw, 4px);
    font-size: min(2.6vw, 45px);
  }
  .sakoshi_creature_data .data_count .num span {
    font-size: min(1.5vw, 28px);
  }
}
.sakoshi_creature_data .data_count .text {
  display: flex;
  align-items: baseline;
  font-size: min(4.5vw, 23px);
  font-weight: 700;
  min-width: 0;
  line-height: 1.4;
  gap: 6px;
}
.sakoshi_creature_data .data_count .text span {
  font-size: min(2.3vw, 12px);
  font-weight: 500;
}
@media print, screen and (min-width: 920px) {
  .sakoshi_creature_data .data_count .text {
    gap: min(0.5vw, 6px);
    font-size: min(1.6vw, 28px);
  }
  .sakoshi_creature_data .data_count .text span {
    font-size: min(1vw, 12px);
  }
}

.sakoshi_creature_list {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 4vw 4%;
  min-width: 0;
}
@media print, screen and (min-width: 920px) {
  .sakoshi_creature_list {
    width: calc(45% - min(5vw, 60px));
    gap: 20px 5%;
  }
}
@media print, screen and (min-width: 1180px) {
  .sakoshi_creature_list {
    width: calc(55% - min(10vw, 60px));
    gap: 25px 4%;
  }
}
.sakoshi_creature_list:not(.first_big) .sakoshi_creature_list__box {
  width: 29.3333333333%;
}
@media print, screen and (min-width: 920px) {
  .sakoshi_creature_list:not(.first_big) .sakoshi_creature_list__box {
    width: 47.5%;
  }
}
@media print, screen and (min-width: 1180px) {
  .sakoshi_creature_list:not(.first_big) .sakoshi_creature_list__box {
    width: 29.3333333333%;
  }
}
.sakoshi_creature_list.first_big {
  display: grid;
  grid-template-columns: 1.8fr 1fr;
  grid-template-rows: repeat(2, auto);
  align-items: center;
}
@media print, screen and (min-width: 920px) {
  .sakoshi_creature_list.first_big {
    width: calc(45% - min(5vw, 60px));
    grid-template-columns: 2fr 1.1fr;
  }
}
@media print, screen and (min-width: 1180px) {
  .sakoshi_creature_list.first_big {
    width: calc(55% - min(10vw, 60px));
    grid-template-columns: 2fr 1fr;
  }
}
.sakoshi_creature_list.first_big .sakoshi_creature_list__box:nth-child(1) {
  grid-column: 1/2;
  grid-row: 1/3;
}
.sakoshi_creature_list.first_big .sakoshi_creature_list__box:nth-child(2) {
  grid-column: 2/3;
  grid-row: 1/2;
}
.sakoshi_creature_list.first_big .sakoshi_creature_list__box:nth-child(3) {
  grid-column: 2/3;
  grid-row: 2/3;
}

.sakoshi_creature_list__box {
  text-align: center;
}
.sakoshi_creature_list__box .box_img {
  position: relative;
  overflow: hidden;
  border-radius: 100%;
}
.sakoshi_creature_list__box .box_img.star::after {
  display: block;
  position: absolute;
  bottom: min(2vw, 12px);
  left: 50%;
  transform: translateX(-50%);
  content: "";
  width: min(3vw, 16px);
  height: min(3vw, 16px);
  background: url(../img/icon_star.svg) no-repeat 0 0;
  background-size: 100%;
}
.sakoshi_creature_list__box .box_name {
  position: relative;
  margin-top: min(1vw, 8px);
  font-weight: 500;
  letter-spacing: 0;
  font-size: min(3vw, 17px);
}
@media print, screen and (min-width: 920px) {
  .sakoshi_creature_list__box .box_name {
    font-size: min(1.3vw, 17px);
  }
}
@media print, screen and (min-width: 1180px) {
  .sakoshi_creature_list__box .box_name {
    font-size: min(2.4vw, 17px);
  }
}

.sakoshi_effort {
  margin-top: min(8vw, 40px);
}
.sakoshi_effort .effort_img {
  padding-inline: min(4vw, 60px);
}
.sakoshi_effort .effort_text {
  font-size: min(4vw, 28px);
  font-weight: 700;
  line-height: 1.8;
  margin-top: min(4vw, 40px);
}
@media print, screen and (min-width: 1180px) {
  .sakoshi_effort .effort_text {
    text-align: center;
  }
}
.sakoshi_effort .effort_text span {
  color: #027c72;
  text-decoration: underline;
  text-decoration-thickness: 2px;
  text-underline-offset: 3px;
}
@media print, screen and (min-width: 1180px) {
  .sakoshi_effort .effort_text span {
    text-decoration-thickness: 3px;
    text-underline-offset: 6px;
  }
}

.rare_text {
  position: relative;
  width: fit-content;
  margin-inline: auto;
  padding-inline: min(8vw, 55px);
  text-align: center;
  font-size: min(4vw, 28px);
  font-weight: 700;
  line-height: 1.4;
}
.rare_text::before, .rare_text::after {
  content: "";
  position: absolute;
  width: min(7vw, 43px);
  height: min(7.2vw, 48px);
  background: url(../img/rare_fukidashi_line.svg) no-repeat 0 0;
  background-size: 100%;
}
.rare_text::before {
  right: 0;
  bottom: 0;
}
.rare_text::after {
  left: 0;
  bottom: 0;
  transform: scaleX(-1);
}
.rare_text .sub {
  display: block;
  width: fit-content;
  margin-inline: auto;
  border-bottom: 2px solid #bf972a;
}
.rare_text .sub span {
  color: #bf972a;
}
.rare_text .sub strong {
  position: relative;
  top: 2px;
  font-size: min(6vw, 42px);
}
.rare_text .main {
  display: block;
}
.rare_text .main strong {
  font-size: min(5vw, 36px);
  color: #bf972a;
}

.rare_list {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: min(4vw, 30px);
  margin-top: min(8vw, 40px);
}
.rare_list li {
  padding: min(2vw, 8px);
  border-radius: min(3vw, 15px);
  background-color: #027c72;
}
@media print, screen and (min-width: 920px) {
  .rare_list li {
    width: calc((100% - 90px) / 4);
  }
}
.rare_list li .list_img {
  position: relative;
  border-radius: min(2vw, 8px) min(2vw, 8px) 0 0;
  overflow: hidden;
}
.rare_list li .list_img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.rare_list li .list_img.star::after {
  display: block;
  position: absolute;
  bottom: min(2vw, 8px);
  right: min(2vw, 8px);
  content: "";
  width: min(5vw, 20px);
  height: min(5vw, 20px);
  background: url(../img/icon_star_y.svg) no-repeat 0 0;
  background-size: 100%;
}
.rare_list li .list_name {
  color: #fff;
  text-align: center;
  padding-block: min(2vw, 8px);
}
.rare_list li .list_name .name {
  display: block;
  font-weight: 700;
  font-size: min(5vw, 20px);
}
.rare_list li .list_name .rank {
  display: block;
  font-size: min(3.5vw, 14px);
  font-weight: 700;
}
.rare_list li .list_name .rank strong {
  position: relative;
  display: inline-block;
  height: min(5vw, 24px);
  line-height: min(4.6vw, 24px);
  text-align: center;
  padding: 0 min(3vw, 20px);
  font-size: min(3.5vw, 17px);
  background: #ffd667;
  color: #027c72;
  box-sizing: border-box;
  letter-spacing: 0;
}
@media print, screen and (min-width: 768px) {
  .rare_list li .list_name .rank strong {
    top: 2px;
  }
}
.rare_list li .list_name .rank strong::before, .rare_list li .list_name .rank strong::after {
  position: absolute;
  content: "";
  width: 0px;
  height: 0px;
  z-index: 1;
}
.rare_list li .list_name .rank strong::before {
  top: 0;
  left: 0;
  border-width: min(2.5vw, 12px) 0px min(2.5vw, 12px) min(1.5vw, 12px);
  border-color: transparent transparent transparent #027c72;
  border-style: solid;
}
.rare_list li .list_name .rank strong::after {
  top: 0;
  right: 0;
  border-width: min(2.5vw, 12px) min(1.5vw, 12px) min(2.5vw, 12px) 0px;
  border-color: transparent #027c72 transparent transparent;
  border-style: solid;
}

.rare_about {
  margin-top: min(8vw, 80px);
  background: #fff;
  border-radius: min(3vw, 15px);
  padding: min(3.5vw, 35px) min(6vw, 60px);
}
.rare_about .about_title {
  font-size: min(5.5vw, 36px);
  font-weight: 700;
  line-height: 1.4;
  color: #027c72;
  text-align: center;
}
.rare_about .about_box {
  display: flex;
  flex-direction: column;
  gap: min(4vw, 40px);
  margin-top: min(2.5vw, 25px);
}
@media print, screen and (min-width: 920px) {
  .rare_about .about_box {
    align-items: flex-start;
    flex-direction: row;
  }
}
.rare_about .about_box .text {
  font-size: min(3.5vw, 18px);
  line-height: 1.8;
  flex: 4;
  letter-spacing: 0.02em;
}
.rare_about .about_box .img {
  display: flex;
  gap: min(2vw, 22px);
  flex: 6;
}
.rare_about .about_box .img figure {
  min-width: 0;
}
.rare_about .about_box .img img {
  width: 100%;
}

.sakoshi_environment {
  margin-top: min(4vw, 40px);
}

.sakoshi_environment_box {
  background: #fff;
  border-radius: min(3vw, 15px);
  padding: min(5vw, 60px) min(5vw, 60px);
}
.sakoshi_environment_box + .sakoshi_environment_box {
  margin-top: min(6vw, 40px);
}
.sakoshi_environment_box .balloon {
  position: relative;
  font-size: min(3.5vw, 16px);
  font-weight: 700;
  line-height: 1.8;
  margin-right: min(3vw, 30px);
  padding: min(3vw, 20px) calc(min(5vw, 25px) + min(16vw, 80px) / 2) min(3vw, 20px) min(3vw, 20px);
  background: #f5f5ee;
  border-radius: min(3vw, 15px);
}
.sakoshi_environment_box .balloon .earthkun {
  position: absolute;
  bottom: 0;
  right: calc(-1 * min(8vw, 90px) / 2);
  width: min(16vw, 90px);
}

.sakoshi_environment_note {
  color: #7f837f;
  font-size: min(3vw, 14px);
}

.sakoshi_pickup {
  position: relative;
  background: #f5f5ee;
}
.sakoshi_pickup .page_inner_l {
  position: relative;
}
.sakoshi_pickup .pickup_obj01 {
  position: absolute;
  top: 0;
  left: 0;
  width: min(30vw, 280px);
  opacity: 0.5;
}
.sakoshi_pickup .pickup_obj02 {
  position: absolute;
  top: 0;
  right: 0;
  width: min(30vw, 280px);
  opacity: 0.5;
}
.sakoshi_pickup .pickup_title {
  font-size: min(5.5vw, 40px);
  font-weight: 700;
  line-height: 1.4;
  color: #027c72;
}

.view_animation {
  opacity: 0;
  visibility: hidden;
  transform: translateY(30px);
  filter: blur(6px);
}