/*
* beginning.css
*
*/
/* --------------------------------
   beginning
-------------------------------- */
html,
body {
  -ms-scroll-chaining: none;
      overscroll-behavior: none;
}

.p-beginning {
  overflow: hidden; 
  position: relative;
}

.p-section {
  position: relative;
  background-color: var(--bg-color); 

  -webkit-padding-after: 32px; 

          padding-block-end: 32px;
}
@media (min-width: 768px) {
  .p-section {
    -webkit-padding-after: calc(100vw * 100 / 1440);
            padding-block-end: calc(100vw * 100 / 1440);
  }
}
.p-section.p-chapter4 {
  -webkit-padding-after: 0;
          padding-block-end: 0;
}

.p-sectionInner {
  position: relative;
  z-index: 1; 

  padding-block: 69px 100px;
  padding-inline: 32px;
}
@media (min-width: 768px) {
  .p-sectionInner {
    padding-block: 80px 180px;
  }
}
.p-chapter4 .p-sectionInner {
  -webkit-padding-after: 122px;
          padding-block-end: 122px;
}
@media (min-width: 768px) {
  .p-chapter4 .p-sectionInner {
    -webkit-padding-after: 180px;
            padding-block-end: 180px;
  }
}

.p-section_lead {
  -webkit-margin-before: 42px;
          margin-block-start: 42px;
}
@media (min-width: 768px) {
  .p-section_lead {
    -webkit-margin-before: 60px;
            margin-block-start: 60px;
  }
}
@media (max-width: 767.98px) {
  .p-chapter4 .p-section_lead {
    -webkit-margin-before: 34px;
            margin-block-start: 34px;
  }
}

/**
  KV
**/
.p-kv {
  position: relative;
  z-index: 0; 
  height: -webkit-max-content; 
  height: -moz-max-content; 
  height: max-content;
  background-image: -webkit-gradient(linear, left top, right top, from(#00beff), color-stop(35%, #0098ec), color-stop(55%, #007bd7), color-stop(75%, #0062c4), to(#004bb1));
  background-image: linear-gradient(90deg, #00beff 0%, #0098ec 35%, #007bd7 55%, #0062c4 75%, #004bb1 100%);

  padding-block: 162px 281px;
}
@media (min-width: 768px) {
  .p-kv {
    padding-block: 145px 235px;
  }
}

.p-kv_bg {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
}
.p-kv_bg::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-image: url(/assets/img/common/bg_blue.png);
  background-repeat: repeat;
  background-position: 50% 20px;
  background-size: 40px 40px; 

  mix-blend-mode: overlay;
}
.p-kv_bg img {
  position: absolute;
  bottom: -10.25641vw; 
  width: 100%;
}
@media (min-width: 768px) {
  .p-kv_bg img {
    bottom: -45px; 
    width: 100%;

    translate: 15px 0;
  }
}

.p-kv_inner {
  opacity: 0;
  position: relative;
  z-index: 10;
  height: 460px;
  -webkit-transition: opacity 0.8s cubic-bezier(0.25, 0.46, 0.45, 0.94);
  transition: opacity 0.8s cubic-bezier(0.25, 0.46, 0.45, 0.94);
  -webkit-transition-delay: 1s;
          transition-delay: 1s;
}
.p-kv_inner.is-active {
  opacity: 1;
}
@media (min-width: 768px) {
  .p-kv_inner {
    height: 620px;
  }
}
.p-kv_inner::before {
  content: "";
  position: absolute;
  z-index: -1; 
  left: 50%;
  border: 8px solid var(--cyo-color-white);
  border-radius: 999px;
  width: 460px;
  background-color: #ebf4ff;

  aspect-ratio: 1;
  translate: -50% 0;
}
@media (min-width: 768px) {
  .p-kv_inner::before {
    width: 620px;
  }
}
.p-kv_inner::after {
  content: "";
  position: absolute;
  z-index: -1; 
  top: 50%;
  left: 50%;
  border-radius: 999px;
  width: 244.2px;
  background-color: var(--cyo-color-white);

  aspect-ratio: 1;
  translate: -50% -50%;
}
@media (min-width: 768px) {
  .p-kv_inner::after {
    width: 322px;
  }
}

.p-kv_txts {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  padding: 75px 0 10px;
  text-align: center; 

  -webkit-box-align: center; 

      -ms-flex-align: center; 

          align-items: center;
}
@media (min-width: 768px) {
  .p-kv_txts {
    padding: 121px 0 42px;
  }
}
.p-kv_txts hgroup {
  color: var(--cyo-color-blue); 
  font-family: "NOW-GE", sans-serif;
  font-weight: 700;
  line-height: 1.35;
}
.p-kv_txts hgroup p {
  letter-spacing: 0.24rem;
  font-size: 2.4rem;
}
@media (min-width: 768px) {
  .p-kv_txts hgroup p {
    letter-spacing: 0.32rem;
    font-size: 3.2rem;
  }
}
.p-kv_txts hgroup p span::before,
.p-kv_txts hgroup p span::after {
  bottom: 50%;
  width: 20px;
  height: 28.18px;
  background-size: 20px 28.18px;

  translate: 0 50%;
}
@media (min-width: 768px) {
  .p-kv_txts hgroup p span::before,
  .p-kv_txts hgroup p span::after {
    width: 25px;
    height: 35.23px;
    background-size: 25px 35.23px; 

    translate: 0 calc(50% - 10px);
  }
}
.p-kv_txts hgroup h1 {
  margin-top: 6px;
  letter-spacing: 0.12rem;
  font-size: 3.2rem;
  line-height: 1.4;
}
@media (min-width: 768px) {
  .p-kv_txts hgroup h1 {
    margin-top: 14px;
    font-size: 4.8rem;
  }
}
.p-kv_txts hgroup h1 > span {
  letter-spacing: 0.5rem;
}
.p-kv_txts > p {
  margin-top: 12px;
  letter-spacing: 0.14rem;
  font-family: "Hiragino Kaku Gothic W7 JIS2004", "Hiragino Sans", "Hiragino Kaku Gothic ProN", Meiryo, YuGothic, sans-serif;
  font-size: 1.4rem;
  font-weight: 700;
  line-height: 2.2;

  -webkit-text-decoration-line: underline;

          text-decoration-line: underline;
  -webkit-text-decoration-color: var(--cyo-color-blue);
          text-decoration-color: var(--cyo-color-blue);
  -webkit-text-decoration-style: dotted;
          text-decoration-style: dotted;
  text-decoration-thickness: 2px;
  text-underline-offset: 5px;
}
@media (min-width: 768px) {
  .p-kv_txts > p {
    margin-top: 21px;
    letter-spacing: 0.2rem;
    font-size: 1.6rem;
    line-height: 2.7;

    text-underline-offset: 10px;
  }
}
.p-kv_txts .p-kv_btn_arw {
  display: inline-block;
  opacity: 1;
  position: relative;
  margin-top: 26px;
  border-radius: 999px;
  width: 33px;
  height: 33px;
  -webkit-transition: opacity 0.3s cubic-bezier(0, 0, 0.58, 1);
  transition: opacity 0.3s cubic-bezier(0, 0, 0.58, 1); 
  background-color: var(--cyo-color-blue);

  -webkit-filter: drop-shadow(5.33px 5.33px 13.33px rgba(9, 139, 222, 0.25));

          filter: drop-shadow(5.33px 5.33px 13.33px rgba(9, 139, 222, 0.25));
}
@media (min-width: 768px) {
  .p-kv_txts .p-kv_btn_arw {
    margin-top: 72px;
    width: 40px;
    height: 40px;
  }
}
.p-kv_txts .p-kv_btn_arw::before {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 8.5px;
  height: 6.12px;
  -webkit-animation: scroller-arw 1.2s cubic-bezier(0.55, 0.085, 0.68, 0.53) infinite alternate;
          animation: scroller-arw 1.2s cubic-bezier(0.55, 0.085, 0.68, 0.53) infinite alternate; 
  background-image: url(/assets/img/common/icon_arw_r.svg);
  background-size: cover;

  translate: -50% -75%;
  rotate: 90deg;
}
@media (min-width: 768px) {
  .p-kv_txts .p-kv_btn_arw::before {
    width: 12px;
    height: 8px;
  }
}

@-webkit-keyframes scroller-arw {
  form {
    translate: -50% -80%;
  }
  to {
    translate: -50% -20%;
  }
}

@keyframes scroller-arw {
  form {
    translate: -50% -80%;
  }
  to {
    translate: -50% -20%;
  }
}
.p-kv_txts .p-kv_btn_arw:hover {
  opacity: 0.7;
}

.p-kv_imgBox {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
}
@media (min-width: 768px) {
  .p-kv_imgBox {
    left: 50%;
    max-width: 1440px;

    translate: -50% 0;
  }
}
.p-kv_imgBox .p-kv_img {
  overflow: hidden;
  opacity: 0;
  position: absolute;
  border-radius: 1.71026vw;
  -webkit-transition: translate 0.8s cubic-bezier(0.25, 0.46, 0.45, 0.94), opacity 0.8s cubic-bezier(0.25, 0.46, 0.45, 0.94);
  transition: translate 0.8s cubic-bezier(0.25, 0.46, 0.45, 0.94), opacity 0.8s cubic-bezier(0.25, 0.46, 0.45, 0.94); 

  translate: 0 20px;
}
@media (min-width: 768px) {
  .p-kv_imgBox .p-kv_img {
    border-radius: 8px;
  }
}
.p-kv_imgBox .p-kv_img.is-anim-in {
  opacity: 1;

  translate: 0;
}
.p-kv_imgBox .p-kv_img:nth-of-type(1) {
  z-index: 1; 
  top: 93px;
  left: 10px;
  width: 25.64103vw;
  height: 34.23077vw;
}
@media (min-width: 768px) {
  .p-kv_imgBox .p-kv_img:nth-of-type(1) {
    top: 145px; 
    left: 50px;
    width: 13.88889vw;
    min-width: 144.44444px;
    max-width: 200px;
    height: auto;

    aspect-ratio: 200 / 267;
  }
}
.p-kv_imgBox .p-kv_img:nth-of-type(1) .p-kv_img_item {
  -webkit-transition-delay: 0s;
          transition-delay: 0s;
}
.p-kv_imgBox .p-kv_img:nth-of-type(2) {
  z-index: 1; 
  top: 27.22222vw;
  left: 14.09722vw;
  width: 11.11111vw;
  min-width: 115.55556px;
  max-width: 160px;

  aspect-ratio: 160 / 106.29;
}
@media screen and (min-width: 769px) and (max-width: 1040px) {
  .p-kv_imgBox .p-kv_img:nth-of-type(2) {
    top: 283px;
    left: 146px;
  }
}
@media screen and (min-width: 1440px) {
  .p-kv_imgBox .p-kv_img:nth-of-type(2) {
    top: 392px;
    left: 203px;
  }
}
@media (max-width: 767.98px) {
  .p-kv_imgBox .p-kv_img:nth-of-type(2) {
    display: none;
  }
}
.p-kv_imgBox .p-kv_img:nth-of-type(2) .p-kv_img_item {
  -webkit-transition-delay: 2.7s;
          transition-delay: 2.7s;
}
.p-kv_imgBox .p-kv_img:nth-of-type(3) {
  z-index: 10; 
  bottom: 159px;
  left: 12px;
  width: 35.89744vw;
  height: 23.82821vw;
}
@media (min-width: 768px) {
  .p-kv_imgBox .p-kv_img:nth-of-type(3) {
    bottom: 243px;
    left: 85px;
    width: 15.27778vw;
    min-width: 158.88889px;
    max-width: 220px;
    height: auto;

    aspect-ratio: 110 / 73;
  }
}
.p-kv_imgBox .p-kv_img:nth-of-type(3) .p-kv_img_item {
  -webkit-transition-delay: 2.25s;
          transition-delay: 2.25s;
}
@media (min-width: 768px) {
  .p-kv_imgBox .p-kv_img:nth-of-type(3) .p-kv_img_item {
    -webkit-transition-delay: 4.5s;
            transition-delay: 4.5s;
  }
}
.p-kv_imgBox .p-kv_img:nth-of-type(4) {
  z-index: 10; 
  top: 82px;
  right: 12px;
  width: 29.74359vw;
  height: 19.78974vw;
}
@media (min-width: 768px) {
  .p-kv_imgBox .p-kv_img:nth-of-type(4) {
    top: 173px;
    right: 50px;
    width: 19.44444vw;
    min-width: 202.22222px;
    max-width: 280px;
    height: auto; 

    aspect-ratio: 280 / 186.3;
  }
}
.p-kv_imgBox .p-kv_img:nth-of-type(4) .p-kv_img_item {
  -webkit-transition-delay: 4.5s;
          transition-delay: 4.5s;
}
@media (min-width: 768px) {
  .p-kv_imgBox .p-kv_img:nth-of-type(4) .p-kv_img_item {
    -webkit-transition-delay: 2.25s;
            transition-delay: 2.25s;
  }
}
.p-kv_imgBox .p-kv_img:nth-of-type(5) {
  z-index: 10; 
  top: 419px;
  right: 20px;
  width: 9.72222vw;
  min-width: 101.11111px;
  max-width: 140px;
  height: auto;

  aspect-ratio: 140 / 93.15;
}
@media (max-width: 767.98px) {
  .p-kv_imgBox .p-kv_img:nth-of-type(5) {
    display: none;
  }
}
@media (min-width: 768px) {
  .p-kv_imgBox .p-kv_img:nth-of-type(5) .p-kv_img_item {
    -webkit-transition-delay: 4.95s;
            transition-delay: 4.95s;
  }
}
.p-kv_imgBox .p-kv_img:nth-of-type(6) {
  z-index: 100; 
  right: 16px;
  bottom: 188px;
  width: 25.64103vw;
  height: 34.10256vw;
}
@media (min-width: 768px) {
  .p-kv_imgBox .p-kv_img:nth-of-type(6) {
    right: 180px;
    bottom: 230px;
    width: 11.80556vw;
    min-width: 122.77778px;
    max-width: 170px;
    height: auto; 

    aspect-ratio: 170 / 226;
  }
}
.p-kv_imgBox .p-kv_img:nth-of-type(6) .p-kv_img_item {
  -webkit-transition-delay: 6.75s;
          transition-delay: 6.75s;
}
@media (min-width: 768px) {
  .p-kv_imgBox .p-kv_img:nth-of-type(6) .p-kv_img_item {
    -webkit-transition-delay: 0.45s;
            transition-delay: 0.45s;
  }
}
.p-kv_imgBox .p-kv_img .p-kv_img_item {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  -webkit-transition: opacity 1.2s cubic-bezier(0.25, 0.46, 0.45, 0.94);
  transition: opacity 1.2s cubic-bezier(0.25, 0.46, 0.45, 0.94); 
  pointer-events: none;

  -o-object-fit: cover;

     object-fit: cover;
}

/** 
  Chapter 
**/
.p-chapter1 {
  --bg-color: var(--cyo-color-white);
  --comment-color: #ebf4ff;
}

.p-chapter2 {
  --bg-color: #ebf4ff;
  --comment-color: var(--cyo-color-white);
}

.p-chapter3 {
  --bg-color: var(--cyo-color-white);
  --comment-color: #ebf4ff;
}

.p-chapter4 {
  --bg-color: #ebf4ff;
  --comment-color: var(--cyo-color-white);
}

.p-chapter::before {
  content: "";
  position: absolute;
  z-index: 1; 
  top: 1px;
  left: 0;
  width: 100%;
  background-color: var(--bg-color);

  aspect-ratio: 125 / 16;
  translate: 0 -100%;
  -webkit-mask-image: url(/assets/img/beginning/separator_sm.svg);
          mask-image: url(/assets/img/beginning/separator_sm.svg);
  -webkit-mask-repeat: no-repeat;
          mask-repeat: no-repeat;
  -webkit-mask-size: contain;
          mask-size: contain;
  -webkit-mask-position: bottom;
          mask-position: bottom;
}
@media (min-width: 768px) {
  .p-chapter::before {
    aspect-ratio: 72 / 5;
    -webkit-mask-image: url(/assets/img/beginning/separator_lg.svg);
            mask-image: url(/assets/img/beginning/separator_lg.svg);
  }
}

.p-chapter_heading {
  text-align: center;
}
.p-chapter_heading p {
  display: inline-block;
  padding: 7.5px 17px 5.5px 16px;
  border-radius: 14px;
  min-width: 110px;
  background-color: var(--cyo-color-blue);
  letter-spacing: 0.005em;
  color: var(--cyo-color-white);
  font-family: "Montserrat", sans-serif;
  font-size: 1.1rem; 
  font-weight: 800;
  line-height: 1;
}
@media (min-width: 768px) {
  .p-chapter_heading p {
    padding: 7px 14px 6px; 
    letter-spacing: 0.07rem;
    font-size: 1.5rem;
  }
}
.p-chapter_heading h3 {
  margin-top: 19px;
  letter-spacing: 0.28rem;
  font-family: "NOW-GE", sans-serif;
  font-size: 2.8rem; 
  font-weight: 700;
  line-height: 1.45;
}
@media (min-width: 768px) {
  .p-chapter_heading h3 {
    margin-top: 32px;
    letter-spacing: 0.55rem; 
    font-size: 4.4rem;
  }
}

.p-chapter_comments {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;

  gap: 21px;
}
@media (min-width: 768px) {
  .p-chapter_comments {
    gap: 44px;
  }
}

.p-chapter_comment {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;

  gap: 21px;
}
@media (min-width: 768px) {
  .p-chapter_comment {
    -webkit-box-orient: horizontal;
    -webkit-box-direction: normal;
        -ms-flex-direction: row;
            flex-direction: row;

    gap: 40px;
    -webkit-box-pack: center;
        -ms-flex-pack: center;
            justify-content: center;
  }
}
.p-chapter_comment .p-chapter_comment_txt {
  position: relative;
  z-index: 1; 
  padding: 12px 20px 11px;
  width: -webkit-fit-content;
  width: -moz-fit-content;
  width: fit-content;
}
@media (min-width: 768px) {
  .p-chapter_comment .p-chapter_comment_txt {
    padding: 20px 28px;
  }
}
.p-chapter_comment .p-chapter_comment_txt::before {
  content: "";
  opacity: 0;
  position: absolute;
  position: absolute;
  width: 16px;
  height: 12px;
  -webkit-transition: opacity linear 0.3s;
  transition: opacity linear 0.3s; 
  background-color: var(--comment-color);

  -webkit-mask-image: url(/assets/img/beginning/comment_tail.svg);

          mask-image: url(/assets/img/beginning/comment_tail.svg);
  -webkit-mask-repeat: no-repeat;
          mask-repeat: no-repeat;
  -webkit-mask-size: contain;
          mask-size: contain;
}
@media (min-width: 768px) {
  .p-chapter_comment .p-chapter_comment_txt::before {
    width: 21.5px;
    height: 16px;
  }
}
.p-chapter_comment .p-chapter_comment_txt::after {
  content: "";
  opacity: 0;
  position: absolute;
  z-index: -1;
  top: 0;
  left: 0;
  border-radius: 10px;
  width: 100%;
  height: 100%;
  -webkit-transition: scale cubic-bezier(0.175, 0.885, 0.32, 1.275) 0.3s, opacity linear 0.2s;
  transition: scale cubic-bezier(0.175, 0.885, 0.32, 1.275) 0.3s, opacity linear 0.2s; 
  background-color: var(--comment-color);

  scale: 0.5;
}
.p-chapter_comment .p-chapter_comment_txt p {
  opacity: 0;
  -webkit-transition: opacity linear 0.3s;
  transition: opacity linear 0.3s; 
  letter-spacing: 0.15rem;
  color: var(--cyo-color-blue);
  font-family: "Hiragino Kaku Gothic W7 JIS2004", "Hiragino Sans", "Hiragino Kaku Gothic ProN", Meiryo, YuGothic, sans-serif;
  font-size: 1.5rem;
  font-weight: 700;
  line-height: 1.65;
}
@media (min-width: 768px) {
  .p-chapter_comment .p-chapter_comment_txt p {
    letter-spacing: 0.2rem; 
    font-size: 2rem;
  }
}
.p-chapter_comment .p-chapter_comment_txt.is-active p,
.p-chapter_comment .p-chapter_comment_txt.is-active::before {
  opacity: 1;
}
.p-chapter_comment .p-chapter_comment_txt.is-active::after {
  opacity: 1; 

  scale: 1;
}

.p-chapter_body {
  -webkit-margin-before: 53px;
          margin-block-start: 53px;
}
@media (min-width: 768px) {
  .p-chapter_body {
    -webkit-margin-before: 100px;
            margin-block-start: 100px;
  }
}
@media (max-width: 767.98px) {
  .p-chapter2 .p-chapter_body,
  .p-chapter3 .p-chapter_body,
  .p-chapter4 .p-chapter_body {
    -webkit-margin-before: 66px;
            margin-block-start: 66px;
  }
}

.p-chapter_h {
  position: relative;
  width: -webkit-fit-content;
  width: -moz-fit-content;
  width: fit-content;
  text-align: center;
  letter-spacing: 0.3rem;
  font-family: "Hiragino Kaku Gothic W7 JIS2004", "Hiragino Sans", "Hiragino Kaku Gothic ProN", Meiryo, YuGothic, sans-serif;
  font-size: 2.2rem; 
  font-weight: 700;
  line-height: 1.45;

  margin-inline: auto;
}
@media (min-width: 768px) {
  .p-chapter_h {
    letter-spacing: 0.6rem; 
    font-size: 3.4rem;
  }
}
.p-chapter_h [data-split-mark-first],
.p-chapter_h [data-split-mark-last] {
  opacity: 0;
  position: absolute;
  top: -1.5rem; 
  color: #3da2e0;
  font-family: "NOW-GE", sans-serif;
  font-size: 4.4rem;
  font-weight: 700;

  translate: 0 20px;
}
@media (min-width: 768px) {
  .p-chapter_h [data-split-mark-first],
  .p-chapter_h [data-split-mark-last] {
    top: -2.5rem;
    font-size: 7.2rem;
  }
}
.p-chapter_h [data-split-mark-first] {
  left: -5rem;
}
@media (min-width: 768px) {
  .p-chapter_h [data-split-mark-first] {
    left: -10.2rem;
  }
}
.p-chapter_h [data-split-mark-last] {
  right: -5rem;
}
@media (min-width: 768px) {
  .p-chapter_h [data-split-mark-last] {
    right: -10.2rem;
  }
}
.p-chapter_h [data-split-text] {
  display: inline-block;
  opacity: 0;
  -webkit-transform: translate(0, 20px);
      -ms-transform: translate(0, 20px);
          transform: translate(0, 20px);
}

.p-chapter_txt {
  letter-spacing: 0.14rem;
  font-family: "Hiragino Kaku Gothic W7 JIS2004", "Hiragino Sans", "Hiragino Kaku Gothic ProN", Meiryo, YuGothic, sans-serif;
  font-size: 1.4rem; 
  font-weight: 700;
  line-height: 2.2;
}
@media (min-width: 768px) {
  .p-chapter_txt {
    text-align: center;
    letter-spacing: 0.27rem; 
    font-size: 1.6rem;
    line-height: 2.6;
  }
}
.p-chapter_h ~ .p-chapter_txt {
  -webkit-margin-before: 40px;
          margin-block-start: 40px;
}
@media (min-width: 768px) {
  .p-chapter_h ~ .p-chapter_txt {
    -webkit-margin-before: 60px;
            margin-block-start: 60px;
  }
}
.p-chapter_txt ~ .p-chapter_txt {
  -webkit-margin-before: 20px;
          margin-block-start: 20px;
}
@media (min-width: 768px) {
  .p-chapter_txt ~ .p-chapter_txt {
    -webkit-margin-before: 40px;
            margin-block-start: 40px;
  }
}

.p-chapter_txt + .p-chapter {
  margin-top: 32px;
}

.p-chapter_txt__lg {
  margin-top: 28px; 
  letter-spacing: 0.16rem;
  font-family: "Hiragino Kaku Gothic W7 JIS2004", "Hiragino Sans", "Hiragino Kaku Gothic ProN", Meiryo, YuGothic, sans-serif;
  font-size: 1.6rem;
  font-weight: 700;
  line-height: 2.15;
}
@media (min-width: 768px) {
  .p-chapter_txt__lg {
    margin-top: 80px; 
    text-align: center;
    letter-spacing: 0.24rem;
    font-size: 2.0rem;
    line-height: 2.4;
  }
}
@media (min-width: 768px) {
  .p-chapter2 .p-chapter_txt__lg {
    margin-top: 40px;
  }
}
.p-chapter3_imgBox ~ .p-chapter_txt__lg {
  margin-top: 70px;
}
@media (min-width: 768px) {
  .p-chapter3_imgBox ~ .p-chapter_txt__lg {
    margin-top: 82px;
  }
}

.p-chapter1 .p-chapter_comments .p-chapter_comment_txt:nth-child(2n + 1) {
  margin-right: auto;
}

.p-chapter1 .p-chapter_comments .p-chapter_comment_txt:nth-child(2n) {
  margin-left: auto;
}

@media (min-width: 768px) {
  .p-chapter1 .p-chapter_comments .p-chapter_comment_txt {
    margin-inline: 0 !important;
  }
}

@media (min-width: 768px) {
  .p-chapter1 .p-chapter_comment:nth-child(1) {
    margin-right: 112px;
  }
}

.p-chapter1 .p-chapter_comment:nth-child(1) .p-chapter_comment_txt:nth-of-type(1)::before {
  bottom: 0;
  left: 20px;

  translate: 0 100%;
}
@media (min-width: 768px) {
  .p-chapter1 .p-chapter_comment:nth-child(1) .p-chapter_comment_txt:nth-of-type(1)::before {
    left: 34px;
  }
}

@media (max-width: 767.98px) {
  .p-chapter1 .p-chapter_comment:nth-child(1) .p-chapter_comment_txt:nth-of-type(2) {
    margin-right: 12px;
  }
}

.p-chapter1 .p-chapter_comment:nth-child(1) .p-chapter_comment_txt:nth-of-type(2)::before {
  top: 50%;
  right: 0;

  scale: -1 1;
  rotate: -90deg;
  translate: calc(100% - 2px) -50%;
}
@media (min-width: 768px) {
  .p-chapter1 .p-chapter_comment:nth-child(1) .p-chapter_comment_txt:nth-of-type(2)::before {
    translate: calc(100% - 4px) -50%;
  }
}

@media (min-width: 768px) {
  .p-chapter1 .p-chapter_comment:nth-child(2) {
    margin-bottom: 18px; 
    margin-left: 119px;
  }
}

.p-chapter1 .p-chapter_comment:nth-child(2) .p-chapter_comment_txt:nth-of-type(1)::before {
  bottom: 0;
  left: 20px;

  translate: 0 100%;
  scale: -1 1;
}
@media (min-width: 768px) {
  .p-chapter1 .p-chapter_comment:nth-child(2) .p-chapter_comment_txt:nth-of-type(1)::before {
    left: 143px;
  }
}

.p-chapter1 .p-chapter_comment:nth-child(2) .p-chapter_comment_txt:nth-of-type(2)::before {
  top: 0;
  right: 57.88px;

  rotate: 180deg;
  translate: 0 -100%;
}
@media (min-width: 768px) {
  .p-chapter1 .p-chapter_comment:nth-child(2) .p-chapter_comment_txt:nth-of-type(2)::before {
    right: auto;
    left: 29px; 

    scale: -1 1;
  }
}

.p-chapter2 .p-chapter_comments .p-chapter_comment_txt:nth-child(2n + 1) {
  margin-left: auto;
}

.p-chapter2 .p-chapter_comments .p-chapter_comment_txt:nth-child(2n) {
  margin-right: auto;
}

@media (min-width: 768px) {
  .p-chapter2 .p-chapter_comments .p-chapter_comment_txt {
    margin-inline: 0 !important;
  }
}

@media (min-width: 768px) {
  .p-chapter2 .p-chapter_comment:nth-child(1) {
    margin-right: 18px;
  }
}

.p-chapter2 .p-chapter_comment:nth-child(1) .p-chapter_comment_txt:nth-of-type(1)::before {
  right: 24px;
  bottom: 0;

  translate: 0 100%;
  scale: -1 1;
}
@media (min-width: 768px) {
  .p-chapter2 .p-chapter_comment:nth-child(1) .p-chapter_comment_txt:nth-of-type(1)::before {
    right: auto;
    left: 34px;

    scale: 1 1;
  }
}

.p-chapter2 .p-chapter_comment:nth-child(1) .p-chapter_comment_txt:nth-of-type(2) {
  margin-right: 52px;
}
.p-chapter2 .p-chapter_comment:nth-child(1) .p-chapter_comment_txt:nth-of-type(2)::before {
  top: 50%;
  right: 0;

  scale: -1 1;
  rotate: -90deg;
  translate: calc(100% - 2px) -50%;
}
@media (min-width: 768px) {
  .p-chapter2 .p-chapter_comment:nth-child(1) .p-chapter_comment_txt:nth-of-type(2)::before {
    top: 24px;

    translate: calc(100% - 4px) 0;
  }
}

@media (min-width: 768px) {
  .p-chapter2 .p-chapter_comment:nth-child(2) {
    margin-top: -10px;
    margin-bottom: 20px;
  }
}

@media (max-width: 767.98px) {
  .p-chapter2 .p-chapter_comment:nth-child(2) .p-chapter_comment_txt:nth-of-type(1) {
    padding-inline: 20px 30px;
  }
}

.p-chapter2 .p-chapter_comment:nth-child(2) .p-chapter_comment_txt:nth-of-type(1)::before {
  right: 45px;
  bottom: 0;

  translate: 0 100%;
}
@media (min-width: 768px) {
  .p-chapter2 .p-chapter_comment:nth-child(2) .p-chapter_comment_txt:nth-of-type(1)::before {
    right: auto;
    left: 143px;

    scale: -1 1;
  }
}

.p-chapter2 .p-chapter_comment:nth-child(2) .p-chapter_comment_txt:nth-of-type(2) {
  margin-top: 12px; 
  margin-right: 84px;
}
@media (min-width: 768px) {
  .p-chapter2 .p-chapter_comment:nth-child(2) .p-chapter_comment_txt:nth-of-type(2) {
    margin-right: auto; 

    margin-block: auto 9px;
  }
}

.p-chapter2 .p-chapter_comment:nth-child(2) .p-chapter_comment_txt:nth-of-type(2)::before {
  top: 0;
  right: 21.87px;

  translate: 0 -100%;
  rotate: 180deg;
}
@media (min-width: 768px) {
  .p-chapter2 .p-chapter_comment:nth-child(2) .p-chapter_comment_txt:nth-of-type(2)::before {
    top: 0;
    right: auto;
    left: 29px;

    rotate: 0deg;
    translate: 0 -100%;
    scale: 1 -1;
  }
}

.p-chapter3 .p-chapter_comments .p-chapter_comment_txt:nth-child(2n + 1) {
  margin-right: auto;
}

.p-chapter3 .p-chapter_comments .p-chapter_comment_txt:nth-child(2n) {
  margin-left: auto;
}

@media (min-width: 768px) {
  .p-chapter3 .p-chapter_comments .p-chapter_comment_txt {
    margin-inline: 0 !important;
  }
}

@media (min-width: 768px) {
  .p-chapter3 .p-chapter_comment:nth-child(1) {
    margin-right: 24px;
  }
}

.p-chapter3 .p-chapter_comment:nth-child(1) .p-chapter_comment_txt:nth-of-type(1)::before {
  bottom: 0;
  left: 20px;

  translate: 0 100%;
}
@media (min-width: 768px) {
  .p-chapter3 .p-chapter_comment:nth-child(1) .p-chapter_comment_txt:nth-of-type(1)::before {
    left: 34px;
  }
}

.p-chapter3 .p-chapter_comment:nth-child(1) .p-chapter_comment_txt:nth-child(2) {
  padding-right: 10px;
  padding-left: 15px;
}
@media (min-width: 768px) {
  .p-chapter3 .p-chapter_comment:nth-child(1) .p-chapter_comment_txt:nth-child(2) {
    padding-right: 40px;
    padding-left: 30px;
  }
}
@media screen and (max-width: 556px) {
  .p-chapter3 .p-chapter_comment:nth-child(1) .p-chapter_comment_txt:nth-child(2) {
    margin-left: 70px;
  }
}

.p-chapter3 .p-chapter_comment:nth-child(1) .p-chapter_comment_txt:nth-of-type(2)::before {
  top: 50%;
  left: 0;

  rotate: 90deg;
  translate: calc(-100% + 2px) -50%;
}
@media (min-width: 768px) {
  .p-chapter3 .p-chapter_comment:nth-child(1) .p-chapter_comment_txt:nth-of-type(2)::before {
    top: 24px;
    right: 0;
    left: auto;

    translate: calc(100% - 4px) 0;
    scale: 1 -1;
  }
}

@media (min-width: 768px) {
  .p-chapter3 .p-chapter_comment:nth-child(2) {
    margin-right: 1px;
    margin-bottom: 19px;
  }
}

.p-chapter3 .p-chapter_comment:nth-child(2) .p-chapter_comment_txt:nth-of-type(1)::before {
  right: 0;
  bottom: 20px;

  rotate: -90deg;
  translate: calc(100% - 2px) 0;
  scale: -1 1;
}
@media (min-width: 768px) {
  .p-chapter3 .p-chapter_comment:nth-child(2) .p-chapter_comment_txt:nth-of-type(1)::before {
    right: auto;
    bottom: 0;
    left: 143px;

    rotate: 0deg;
    translate: 0 100%;
  }
}

.p-chapter4 .p-chapter_comments .p-chapter_comment_txt:nth-child(2n + 1) {
  margin-right: auto;
}

.p-chapter4 .p-chapter_comments .p-chapter_comment_txt:nth-child(2n) {
  margin-left: auto;
}

@media (min-width: 768px) {
  .p-chapter4 .p-chapter_comments .p-chapter_comment_txt {
    margin-inline: 0 !important;
  }
}

@media (min-width: 768px) {
  .p-chapter4 .p-chapter_comment:nth-child(1) {
    margin-right: 16px;
  }
}

.p-chapter4 .p-chapter_comment:nth-child(1) .p-chapter_comment_txt:nth-of-type(1)::before {
  bottom: 0;
  left: 24px;

  translate: 0 100%;
}
@media (min-width: 768px) {
  .p-chapter4 .p-chapter_comment:nth-child(1) .p-chapter_comment_txt:nth-of-type(1)::before {
    right: 44px;
    left: auto;

    scale: -1 1;
  }
}

@media (min-width: 768px) {
  .p-chapter4 .p-chapter_comment:nth-child(1) .p-chapter_comment_txt:nth-of-type(2) {
    margin-block: auto -7px;
  }
}

.p-chapter4 .p-chapter_comment:nth-child(1) .p-chapter_comment_txt:nth-of-type(2)::before {
  top: 0;
  right: 18px;

  rotate: 180deg;
  translate: 0 -100%;
}
@media (min-width: 768px) {
  .p-chapter4 .p-chapter_comment:nth-child(1) .p-chapter_comment_txt:nth-of-type(2)::before {
    top: 24px;
    right: 0;

    rotate: 90deg;
    translate: calc(100% - 4px) 0;
    scale: 1 -1;
  }
}

@media (max-width: 767.98px) {
  .p-chapter4 .p-chapter_comment:nth-child(2) {
    margin-bottom: 12px;
  }
}

@media (min-width: 768px) {
  .p-chapter4 .p-chapter_comment:nth-child(2) {
    margin-top: 8px;
    margin-bottom: 19px; 
    margin-left: 1px;
  }
}

.p-chapter4 .p-chapter_comment:nth-child(2) .p-chapter_comment_txt:nth-of-type(1)::before {
  right: 125px;
  bottom: 0;

  translate: 0 100%;
  scale: -1 1;
}
@media (min-width: 768px) {
  .p-chapter4 .p-chapter_comment:nth-child(2) .p-chapter_comment_txt:nth-of-type(1)::before {
    right: auto;
    left: 68px;

    scale: 1 1;
  }
}

.p-chapter1_imgBox {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  position: relative;
  top: 0;
  left: 0;
  margin-top: 68px;
  width: calc(100% + 10px);
  height: 100%;

  translate: -5px 0;
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
}
@media (min-width: 768px) {
  .p-chapter1_imgBox {
    position: absolute;
    left: 50%;
    margin-top: 0;
    max-width: 1440px;

    margin-inline: auto;
    translate: -50% 0;
  }
}
.p-chapter1_imgBox .p-chapter1_img {
  overflow: hidden;
  border-radius: 1.96923vw;
}
@media (min-width: 768px) {
  .p-chapter1_imgBox .p-chapter1_img {
    overflow: hidden; 
    position: absolute;
    border-radius: 8px;
  }
}
.p-chapter1_imgBox .p-chapter1_img .p-chapter1_item {
  position: relative;
}
@media (min-width: 768px) {
  .p-chapter1_imgBox .p-chapter1_img .p-chapter1_item {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 100%; 

    translate: -50% -50%;
  }
}
.p-chapter1_imgBox .p-chapter1_img:nth-child(1) {
  width: 35.89744vw;
}
@media (min-width: 768px) {
  .p-chapter1_imgBox .p-chapter1_img:nth-child(1) {
    overflow: hidden; 
    bottom: 340px;
    left: 80px;
    border-radius: 8px;
    width: 16.66667vw;
    min-width: 173.33333px;
    max-width: 240px;
    height: auto;

    aspect-ratio: 3 / 4;
  }
}
.p-chapter1_imgBox .p-chapter1_img:nth-child(1) .p-chapter1_img_item {
  width: auto;
  height: 100%;
}
.p-chapter1_imgBox .p-chapter1_img:nth-child(2) {
  bottom: 134px;
  left: 15.13889vw; 
  width: 13.19444vw;
  min-width: 137.22222px;
  max-width: 190px;
  height: auto;

  aspect-ratio: 190 / 126;
}
@media screen and (min-width: 769px) and (max-width: 1040px) {
  .p-chapter1_imgBox .p-chapter1_img:nth-child(2) {
    left: 157px;
  }
}
@media screen and (min-width: 1440px) {
  .p-chapter1_imgBox .p-chapter1_img:nth-child(2) {
    left: 218px;
  }
}
@media (max-width: 767.98px) {
  .p-chapter1_imgBox .p-chapter1_img:nth-child(2) {
    display: none;
  }
}
.p-chapter1_imgBox .p-chapter1_img:nth-child(3) {
  right: 40px; 
  bottom: 472px;
  width: 12.5vw;
  min-width: 130px;
  max-width: 180px;
  height: auto;

  aspect-ratio: 180 / 120;
}
@media (max-width: 767.98px) {
  .p-chapter1_imgBox .p-chapter1_img:nth-child(3) {
    display: none;
  }
}
.p-chapter1_imgBox .p-chapter1_img:nth-child(4) {
  width: 46.15385vw;
}
@media (min-width: 768px) {
  .p-chapter1_imgBox .p-chapter1_img:nth-child(4) {
    right: 80px; 
    bottom: 192px;
    width: 300px;
    width: 20.83333vw;
    min-width: 216.66667px;
    max-width: 300px;
    height: auto;

    aspect-ratio: 3/2;
  }
}

.p-chapter2_imgWrapper {
  overflow: hidden;
  margin-top: 68px;
  width: calc(100% + 40px);

  translate: -20px 0;
  -webkit-clip-path: inset(0 50%);
          clip-path: inset(0 50%);
}
@media (min-width: 768px) {
  .p-chapter2_imgWrapper {
    position: relative;
    margin-top: 120px;
    max-width: 1376px; 

    margin-inline: auto;
    padding-inline: 88px;
  }
}
.p-chapter2_imgWrapper .p-chapter2_imgBox {
  display: -ms-grid;
  display: grid;
  overflow: hidden;
  position: relative;
  border-radius: 8px;
  width: 100%;

  -ms-grid-columns: (1fr)[2];

      grid-template-columns: repeat(2, 1fr);
  aspect-ratio: 600/ 199;
}
@media (max-width: 767.98px) {
  .p-chapter2_imgWrapper .p-chapter2_imgBox {
    aspect-ratio: 37/ 15;
  }
}
.p-chapter2_imgWrapper .p-chapter2_item {
  position: relative;
  width: 100%;
}
@media (max-width: 767.98px) {
  .p-chapter2_imgWrapper .p-chapter2_item {
    height: 100%;

    -o-object-fit: cover;

       object-fit: cover;
  }
}

.p-chapter3_imgBox {
  display: -ms-grid;
  display: grid;
  position: relative;
  left: 0;
  margin-top: 90px;

  aspect-ratio: 326 / 93;
  margin-inline: -21px;
  -ms-grid-row-align: center;
      align-self: center;
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
  gap: 2.5641vw;
  -ms-grid-columns: (1fr)[3];
      grid-template-columns: repeat(3, 1fr);
}
@media (min-width: 768px) {
  .p-chapter3_imgBox {
    margin-top: 80px;
    max-width: 1440px;

    aspect-ratio: 440 / 83;
    padding-inline: 28px;
    margin-inline: auto;
    -ms-grid-columns: (1fr)[4];
        grid-template-columns: repeat(4, 1fr);
    gap: calc(100% * 0.043);
  }
}
.p-chapter3_imgBox .p-chapter3_img {
  overflow: hidden;
  opacity: 0;
  position: relative;
  border-radius: 2.05128vw;
  width: 100%;

  aspect-ratio: 140 / 93;
  translate: 0 30px;
}
@media (min-width: 768px) {
  .p-chapter3_imgBox .p-chapter3_img {
    border-radius: 8px;

    aspect-ratio: 360 / 239;
    translate: 0 60px;
  }
  .p-chapter3_imgBox .p-chapter3_img img {
    width: 100%;
  }
}
.p-chapter3_imgBox .p-chapter3_img:nth-child(2n) {
  margin-top: auto;
}
@media (max-width: 767.98px) {
  .p-chapter3_imgBox .p-chapter3_img:nth-child(4) {
    display: none;
    visibility: hidden;
  }
}
.p-chapter3_imgBox .p-chapter3_img img {
  width: 100%;

  -o-object-fit: cover;

     object-fit: cover;
}

.p-chapter4_imgBox {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  margin-top: 65px;

  -ms-flex-wrap: wrap;

      flex-wrap: wrap;
  row-gap: 8.20513vw;
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
}
@media (min-width: 768px) {
  .p-chapter4_imgBox {
    display: block;
    position: absolute;
    top: 0;
    left: 50%;
    width: 100%;
    max-width: 1440px;
    height: 100%;

    translate: -50% 0;
  }
}

.p-chapter4_img {
  overflow: hidden;
  position: relative; 
  border-radius: 2.05128vw;
}
@media (min-width: 768px) {
  .p-chapter4_img {
    position: absolute;
    border-radius: 8px;
  }
}
.p-chapter4_img img {
  position: absolute;
  top: 50%;
  left: 50%;

  -o-object-fit: cover;

     object-fit: cover;
  translate: -50% -50%;
}

.p-chapter4_img:nth-of-type(1) {
  left: -11px; 
  width: 32.82051vw;
  height: 43.58974vw;
}
@media (min-width: 768px) {
  .p-chapter4_img:nth-of-type(1) {
    top: 382px; 
    left: 70px;
    width: 15.27778vw;
    min-width: 158.88889px;
    max-width: 220px;
    height: auto;

    aspect-ratio: 110 / 133.3;
  }
}
.p-chapter4_img:nth-of-type(1) img {
  height: 100%;
}

.p-chapter4_img:nth-of-type(2) {
  right: -11px; 
  margin-top: 17.4359vw;
  width: 48.66667vw;
  height: 32.35897vw;
}
@media (min-width: 768px) {
  .p-chapter4_img:nth-of-type(2) {
    top: 563px;
    right: 39px; 
    margin-top: 0;
    width: 19.44444vw;
    min-width: 202.22222px;
    max-width: 280px;
    height: auto;

    aspect-ratio: 140 / 93;
  }
}
.p-chapter4_img:nth-of-type(2) img {
  width: 100%;
}

.p-chapter4_img:nth-of-type(3) {
  left: -10px; 
  width: 44.10256vw;
  height: 29.23077vw;
}
@media (min-width: 768px) {
  .p-chapter4_img:nth-of-type(3) {
    bottom: 523px; 
    left: 38px;
    width: 19.44444vw;
    min-width: 202.22222px;
    max-width: 280px;
    height: auto;

    aspect-ratio: 140 / 93;
  }
}

.p-chapter4_img:nth-of-type(4) {
  top: -40px; 
  right: 0px;
  width: 25.64103vw;
  height: 34.18718vw;
}
@media (min-width: 768px) {
  .p-chapter4_img:nth-of-type(4) {
    top: 690px;
    right: 16.94444vw; 
    margin-left: 0;
    width: 8.75vw;
    min-width: 91px;
    max-width: 126px;
    height: auto;

    aspect-ratio: 63 / 84;
  }
}
@media screen and (min-width: 768px) and (min-width: 769px) and (max-width: 1040px) {
  .p-chapter4_img:nth-of-type(4) {
    right: 175px;
  }
}
@media screen and (min-width: 768px) and (min-width: 1440px) {
  .p-chapter4_img:nth-of-type(4) {
    right: 244px;
  }
}
.p-chapter4_img:nth-of-type(4) img {
  height: 100%;
}

.p-chapter4_img:nth-of-type(5) {
  right: 39px;
  bottom: 304px; 
  width: 300px;
  width: 20.83333vw;
  min-width: 216.66667px;
  max-width: 300px;
  height: auto;

  aspect-ratio: 150 / 99.5;
}
.p-chapter4_img:nth-of-type(5) img {
  width: 100%;
}

.p-chapter_illust,
.p-chapter_line {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
}

.p-chapter1 .p-chapter_bg {
  position: absolute;
  top: 165px;
  right: -25px;
  width: 265px;
  height: 423px;
}
@media (min-width: 768px) {
  .p-chapter1 .p-chapter_bg {
    top: 115px;
    right: min(calc(50vw - 720px - 48px), -48px); 
    width: 471px;
    height: 769.41px;
  }
}

.p-chapter1 .p-chapter_illust img {
  position: absolute;
  top: 0;
  right: 0;
  right: 28px; 
  width: 109px;
}
@media (min-width: 768px) {
  .p-chapter1 .p-chapter_illust img {
    right: 95px;
    width: 191px;
  }
}

.p-chapter1 .p-chapter_line svg {
  position: absolute;
  top: 110px; 
  left: 0;
  width: 265px;
}
@media (min-width: 768px) {
  .p-chapter1 .p-chapter_line svg {
    top: auto;
    bottom: 20px; 
    left: 40px;
    width: 471px;
  }
}

.p-chapter2 .p-chapter_bg {
  position: absolute;
  left: 50%;
}

.p-chapter2 .p-chapter_illust img {
  position: absolute;
}

.p-chapter2 .p-chapter_bg {
  top: 228px;
  width: 846.5px;
  height: 1027px;

  translate: calc(-50% + 50px) 0;
}

.p-chapter2 .p-chapter_illust img:nth-child(1) {
  top: 0; 
  left: 190px;
  width: 106px;
}

.p-chapter2 .p-chapter2_line {
  position: absolute;
  bottom: 0; 
  left: 0;
  width: 846px;
}

@media (min-width: 768px) {
  .p-chapter2 .p-chapter_bg {
    top: 92px;
    width: 1783px;
    height: 1019px;

    translate: calc(-50% + 113px) 0;
  }
  .p-chapter2 .p-chapter_illust img:nth-child(1) {
    top: 0px; 
    left: 104px;
    width: 195px;
  }
  .p-chapter2 .p-chapter_illust img:nth-child(2) {
    right: 435px;
    bottom: -15px; 
    width: 194px;
  }
  .p-chapter2 .p-chapter2_line {
    top: 300px;
    top: 183px;
    bottom: auto; 
    left: -140px;
  }
}

.p-chapter3 .p-chapter_bg {
  position: absolute;
  right: -30px;
  bottom: calc(400px - (max(50vw, 190px) - 190px) / 2); 
  width: 190px;
  height: 315px;
}
@media screen and (min-width: 520px) and (max-width: 768px) {
  .p-chapter3 .p-chapter_bg {
    bottom: calc(400px + (50vw - 300px) / 2);
  }
}
@media (min-width: 768px) {
  .p-chapter3 .p-chapter_bg {
    top: 100px;
    right: min(calc(50vw - 720px - 100px), -100px); 
    bottom: auto;
    width: 490.26px;
    height: 827px;
  }
}

.p-chapter3 .p-chapter_illust img {
  position: absolute;
  bottom: -5px;
  left: 25px; 
  width: 121.92px;
}
@media (min-width: 768px) {
  .p-chapter3 .p-chapter_illust img {
    bottom: 0; 
    left: 100px;
    width: 210px;
  }
}

.p-chapter3 .p-chapter_line svg {
  position: absolute;
  top: -5px;
  left: 0; 
  width: 216px;
}
@media (min-width: 768px) {
  .p-chapter3 .p-chapter_line svg {
    width: 490px;
  }
}

.p-chapter3 .p-chapter_illust02 {
  position: absolute;
  top: -87px;
  left: 16px;
  width: 115.45px;
}
@media (min-width: 768px) {
  .p-chapter3 .p-chapter_illust02 {
    top: -220px;
    left: max(calc(50vw - 720px + 50px), 50px);
    width: 210px;
  }
}

.p-chapter4 .p-chapter_illust {
  position: absolute;
  z-index: 1; 
  top: -90px;
  right: 35px;
  bottom: auto;
  left: auto;
  width: 120px;
}
@media (min-width: 768px) {
  .p-chapter4 .p-chapter_illust {
    top: -210px;
    left: max(calc(50vw - 720px + 50px), 50px);
    width: 225px;
  }
}

.p-catch {
  overflow: hidden;
  position: relative;
  z-index: 1; 
  padding-top: 100px;
  background-image: linear-gradient(45deg, rgba(0, 190, 255, 0.75) 0%, rgba(0, 152, 236, 0.75) 35%, rgba(0, 123, 215, 0.75) 55%, rgba(0, 98, 196, 0.75) 75%, rgba(0, 75, 177, 0.75) 100%);

  padding-inline: 32px;
}
@media (min-width: 768px) {
  .p-catch {
    padding-top: 140px;
  }
}
.p-catch::before {
  content: "";
  position: absolute;
  z-index: -1;
  top: 0;
  left: 0;
  width: 104px;
  height: 100%;
  background-image: -webkit-gradient(linear, left top, right top, from(#00b7ff), color-stop(12.5%, #00b7ff), to(rgba(0, 183, 255, 0)));
  background-image: linear-gradient(90deg, #00b7ff 0%, #00b7ff 12.5%, rgba(0, 183, 255, 0) 100%);
}
@media (min-width: 768px) {
  .p-catch::before {
    width: 160px;
  }
}
.p-catch::after {
  content: "";
  position: absolute;
  z-index: -10;
  top: 0;
  right: 0;
  width: 104px;
  height: 100%;
  background-image: -webkit-gradient(linear, left top, right top, from(rgba(0, 75, 177, 0)), color-stop(87.5%, #004bb1), to(#004bb1));
  background-image: linear-gradient(90deg, rgba(0, 75, 177, 0) 0%, #004bb1 87.5%, #004bb1 100%);
}
@media (min-width: 768px) {
  .p-catch::after {
    width: 160px;
  }
}

.p-catch_gradation {
  position: absolute;
  z-index: -1; 
  bottom: 0;
  left: 0;
  width: 100%;
  height: 35.89744vw;
  background-image: -webkit-gradient(linear, left top, left bottom, from(rgba(0, 138, 222, 0)), color-stop(72%, #098ade), to(#098bde));
  background-image: linear-gradient(180deg, rgba(0, 138, 222, 0) 0%, #098ade 72%, #098bde 100%);
}
@media (min-width: 768px) {
  .p-catch_gradation {
    height: 320px;
  }
}

.p-catch_txt {
  text-align: center;
  letter-spacing: 0.22rem;
  color: var(--cyo-color-white);
  font-family: "Hiragino Kaku Gothic W7 JIS2004", "Hiragino Sans", "Hiragino Kaku Gothic ProN", Meiryo, YuGothic, sans-serif;
  font-size: 1.6rem; 
  font-weight: 700;
  line-height: 1.8;
}
@media (min-width: 768px) {
  .p-catch_txt {
    letter-spacing: 0.38rem;
    font-size: 2rem;
    line-height: 2.2;
  }
}
.p-catch_txt img {
  margin-top: 40px;
  width: 326px;
}
@media (min-width: 768px) {
  .p-catch_txt img {
    margin-top: 40px;
    width: 540px;
  }
}

.p-catch_illust {
  width: 69.23077vw;
  pointer-events: none;

  margin-inline: auto;
  -webkit-margin-before: 80px;
          margin-block-start: 80px;
  translate: -8px 0;
}
@media (min-width: 768px) {
  .p-catch_illust {
    width: 486.63px;

    -webkit-margin-before: 88.32px;

            margin-block-start: 88.32px;
    translate: -16px 0;
  }
}
.p-catch_illust img {
  width: 100%;
}

.p-catch_bg {
  position: absolute;
  z-index: -1;
  bottom: 0;
  left: 0;
  width: 100%;
  pointer-events: none;
}
@media (min-width: 768px) {
  .p-catch_bg {
    bottom: -130px;
    left: 50%;
    width: 2320px;
    -webkit-transform: translateX(calc(-50% + 65px));
        -ms-transform: translateX(calc(-50% + 65px));
            transform: translateX(calc(-50% + 65px));
  }
}
.p-catch_bg img {
  width: 100%;
}

/*---------------------------------
    Detail
---------------------------------*/
.p-detail {
  position: relative;
  background-color: var(--cyo-color-white);
  background-image: url(/assets/img/common/bg_blue.png);
  background-repeat: repeat;
  background-position: 50% 20px;
  background-size: 40px 40px; 

  padding-block: 80px 99px;
}
@media (min-width: 768px) {
  .p-detail {
    padding-block: 100px 141px;
  }
}

.p-detailInner {
  padding-inline: 20px;
}
@media (min-width: 768px) {
  .p-detailInner {
    padding: 0;
    max-width: 1120px;

    margin-inline: auto;
  }
}

.p-detail_h {
  position: relative;
  width: -webkit-fit-content;
  width: -moz-fit-content;
  width: fit-content;
  font-family: "Hiragino Kaku Gothic W7 JIS2004", "Hiragino Sans", "Hiragino Kaku Gothic ProN", Meiryo, YuGothic, sans-serif;
  font-size: 2.4rem;
  font-weight: bold; 

  margin-inline: auto;
}
@media (min-width: 768px) {
  .p-detail_h {
    font-family: "Hiragino Kaku Gothic W7 JIS2004", "Hiragino Sans", "Hiragino Kaku Gothic ProN", Meiryo, YuGothic, sans-serif;
    font-size: 4rem;
    font-weight: bold;
  }
}
.p-detail_h::before {
  content: "";
  position: absolute;
  bottom: -6px;
  left: 0;
  border-radius: 999px;
  width: 100%;
  height: 3px;
  background-color: var(--cyo-color-blue);
}

.p-detail_media {
  margin-top: 45px;
}
@media (min-width: 768px) {
  .p-detail_media {
    margin-top: 70px;
  }
}
.p-detail_media:nth-child(2) {
  margin-top: 70px;
}
@media (min-width: 768px) {
  .p-detail_media:nth-child(2) {
    margin-top: 60px;
  }
}

.p-detail_media_h {
  text-align: center;
  font-family: "Hiragino Kaku Gothic W7 JIS2004", "Hiragino Sans", "Hiragino Kaku Gothic ProN", Meiryo, YuGothic, sans-serif;
  font-family: "Hiragino Sans", "Hiragino Kaku Gothic ProN", "Hiragino Kaku Gothic W7 JIS2004", Meiryo, YuGothic, sans-serif;
  font-size: 1.9rem;
  font-weight: bold;
  font-weight: bold;
}
@media (min-width: 768px) {
  .p-detail_media_h {
    font-family: "Hiragino Kaku Gothic W7 JIS2004", "Hiragino Sans", "Hiragino Kaku Gothic ProN", Meiryo, YuGothic, sans-serif;
    font-size: 2.4rem;
    font-weight: bold;
  }
}
.p-detail_media_h .c-headerDecoration::before,
.p-detail_media_h .c-headerDecoration::after {
  bottom: 50%;
  width: 25px;
  height: 35.23px;
  background-size: 25px 35.23px;

  translate: 0 50%;
}
@media (min-width: 768px) {
  .p-detail_media_h .c-headerDecoration::before,
  .p-detail_media_h .c-headerDecoration::after {
    bottom: 0.5rem;

    translate: 0;
  }
}

.p-detail_media_body {
  display: -ms-grid;
  display: grid;
  margin-top: 35px; 

      -ms-grid-columns: 1fr; 

      grid-template-columns: 1fr;
      grid-template-areas: "img" "txt";
}
@media (min-width: 768px) {
  .p-detail_media_body {
    margin-top: 38px; 

        grid-template-areas: "txt img";
    -ms-grid-columns: auto 80px 540px;
    grid-template-columns: auto 540px;
    -webkit-column-gap: 80px;
       -moz-column-gap: 80px;
            column-gap: 80px;
  }
  .p-detail_media:nth-child(2) .p-detail_media_body {
        grid-template-areas: "img txt";
    -ms-grid-columns: 540px auto;
    grid-template-columns: 540px auto;
  }
  .p-detail_media:nth-child(2) .p-detail_media_body .c-balloon {
    right: auto;
    left: var(--x-position);
  }
}

.p-detail_media_img {
  position: relative;
  padding: 7px;
  border-radius: 8px;
  background-color: #fff;
  -webkit-box-shadow: 4px 4px 20px 2px rgba(9, 139, 222, 0.3);
          box-shadow: 4px 4px 20px 2px rgba(9, 139, 222, 0.3); 

  -ms-grid-row: 1; 

  -ms-grid-column: 1; 

  grid-area: img;
}
@media (min-width: 768px) {
  .p-detail_media_img {
    padding: 10px;
  }
}
.p-detail_media_img img:not(.c-balloon) {
  width: 100%;
}

.p-detail_media_txts {
  margin-top: 28px; 
  line-height: 1.6;

  -ms-grid-row: 2;

  -ms-grid-column: 1;

  grid-area: txt;
}

@media (min-width: 768px) {
  .p-detail_media_img {
    -ms-grid-row: 1;
    -ms-grid-column: 3;
  }
  .p-detail_media_txts {
    -ms-grid-row: 1;
    -ms-grid-column: 1;
  }
}
@media (min-width: 768px) {
  .p-detail_media_txts {
    margin-top: 79px;
  }
}
.p-detail_media_txts dt {
  padding-left: 12px;
  border-left: solid 4px #098bde; 
  font-family: "Hiragino Sans", "Hiragino Kaku Gothic ProN", "Hiragino Kaku Gothic W7 JIS2004", Meiryo, YuGothic, sans-serif;
  font-size: 1.4rem;
  font-weight: bold;
}
@media (min-width: 768px) {
  .p-detail_media_txts dt {
    padding-left: 14px; 
    font-size: 1.8rem;
  }
}
.p-detail_media_txts dd {
  position: relative;
  margin-top: 10px;
  padding-left: 13px; 
  font-size: var(--txt-height);

  --txt-height: 1.2rem;
  --dot-position: calc(var(--txt-height) * 1.6 / 2);
}
@media (min-width: 768px) {
  .p-detail_media_txts dd {
    margin-top: 10px;
    padding-left: 16px; 

    --txt-height: 1.6rem;
  }
}
.p-detail_media_txts dd::before {
  content: "";
  position: absolute;
  top: var(--dot-position);
  left: 0;
  border-radius: 50%;
  width: 8px;
  height: 8px;
  -webkit-transform: translate(0, -50%);
      -ms-transform: translate(0, -50%);
          transform: translate(0, -50%); 
  background-color: #098bde;
}

.p-detail_media_btn {
  left: 50%;
  margin-top: 30px;
  min-width: 260px;
  -webkit-transform: translateX(-50%);
      -ms-transform: translateX(-50%);
          transform: translateX(-50%);
  line-height: 1.2;
}
@media (min-width: 768px) {
  .p-detail_media_btn {
    left: 0;
    margin-top: 40px;
    -webkit-transform: none;
        -ms-transform: none;
            transform: none;
  }
}

.p-detail_card {
  display: -ms-grid;
  display: grid;
  overflow: hidden;
  position: relative;
  z-index: 1; 
  margin-top: 70px;
  border-radius: 8px;
  -webkit-transition: opacity 0.3s cubic-bezier(0, 0, 0.58, 1);
  transition: opacity 0.3s cubic-bezier(0, 0, 0.58, 1);
  text-decoration: none !important;
  -webkit-box-shadow: 4px 4px 20px 2px rgba(9, 139, 222, 0.3);
          box-shadow: 4px 4px 20px 2px rgba(9, 139, 222, 0.3);

  -ms-grid-columns: 1fr;

      grid-template-columns: 1fr;
}
@media (min-width: 768px) {
  .p-detail_card {
    margin-top: 120px; 
    max-width: 900px;
    min-height: 265px;

    -ms-grid-columns: 365px auto;

        grid-template-columns: 365px auto;
    margin-inline: auto;
  }
}
.p-detail_card:hover {
  opacity: 0.7;
}
.p-detail_card:hover .c-linkIcon-arw::after {
  opacity: 0;
}

.p-detail_card_img {
  overflow: hidden;
  position: relative;
  height: 100%;
  background-color: #f2f8ff; 
  background-position: center;
  background-size: cover;
}
@media (max-width: 767.98px) {
  .p-detail_card_img {
    width: 100%;
    height: auto;
    background-repeat: no-repeat; 
    background-size: contain;

    aspect-ratio: 350 / 175;
  }
}

.p-detail_card:first-of-type .p-detail_card_img {
  background-image: url(/assets/img/beginning/detail_img_03.webp);
}

.p-detail_card_content {
  padding: 30px; 
  background-color: #fff;
}
@media (min-width: 768px) {
  .p-detail_card_content {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;
    padding: 42px 60px; 

    -webkit-box-pack: justify; 

        -ms-flex-pack: justify; 

            justify-content: space-between;
  }
}

.p-detail_card_tag {
  display: inline-block;
  border-radius: 999px;
  background-color: #ee3556;
  text-decoration: none;
  color: #fff;
  font-family: "Hiragino Sans", "Hiragino Kaku Gothic ProN", "Hiragino Kaku Gothic W7 JIS2004", Meiryo, YuGothic, sans-serif;
  font-size: 1.2rem; 
  font-weight: bold;

  padding-inline: 8px;
}
@media (min-width: 768px) {
  .p-detail_card_tag {
    font-size: 1.4rem;

    padding-inline: 15px;
  }
}

.p-detail_card_h {
  margin-top: 10px; 
  color: #000;
  font-family: "Hiragino Sans", "Hiragino Kaku Gothic ProN", "Hiragino Kaku Gothic W7 JIS2004", Meiryo, YuGothic, sans-serif;
  font-size: 1.6rem;
  font-weight: bold;
  line-height: 1.6;
}
@media (min-width: 768px) {
  .p-detail_card_h {
    font-family: "Hiragino Kaku Gothic W7 JIS2004", "Hiragino Sans", "Hiragino Kaku Gothic ProN", Meiryo, YuGothic, sans-serif;
    font-size: 2.4rem;
    font-weight: bold;
  }
}

.p-detail_card_txt {
  margin-top: 10px; 
  color: #000;
  font-size: 1.2rem;
}
@media (min-width: 768px) {
  .p-detail_card_txt {
    margin-top: 20px; 
    font-size: 1.4rem;
  }
}

.p-detail_card_btn {
  margin-top: 18px; 
  text-align: end;
  font-family: "Hiragino Sans", "Hiragino Kaku Gothic ProN", "Hiragino Kaku Gothic W7 JIS2004", Meiryo, YuGothic, sans-serif;
  font-size: 1.2rem;
  font-weight: bold;
}
@media (min-width: 768px) {
  .p-detail_card_btn {
    margin-top: 0; 
    font-size: 1.4rem;
  }
}
.p-detail_card_btn > span span {
  margin-left: 22px;
}
@media (min-width: 768px) {
  .p-detail_card_btn > span span {
    margin-left: 34px;
  }
}

.p-bg {
  display: none;
  visibility: hidden;
  overflow: hidden;
  opacity: 0.6; 
  position: fixed;
  z-index: -1;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100lvh;
  background-color: var(--cyo-color-blue);
}
.p-bg.is-active {
  display: block;
  visibility: visible;
}

.p-bg_grid {
  display: -ms-grid;
  display: grid;
  position: absolute;
  top: 50%;
  left: 50%;
  -webkit-transform-origin: center;
      -ms-transform-origin: center;
          transform-origin: center; 

  -ms-grid-columns: (240px)[5]; 

      grid-template-columns: repeat(5, 240px);
  translate: -50% -50%;
  gap: 20px;
  rotate: 20deg;
}
@media (min-width: 768px) {
  .p-bg_grid {
    -ms-grid-columns: (400px)[5];
        grid-template-columns: repeat(5, 400px);
    gap: 40px;
  }
}

.p-bg_row {
  display: -ms-grid;
  display: grid;

  --slide-gap: 20px;
  gap: var(--slide-gap);
}
@media (min-width: 768px) {
  .p-bg_row {
    --slide-gap: 40px;
  }
}
.p-bg_row:nth-child(2n+1) {
  -webkit-animation: slide-bg linear infinite;
          animation: slide-bg linear infinite;
}
.p-bg_row:nth-child(2n) {
  animation: slide-bg linear infinite reverse;
}

.p-bg_grid img {
  display: block;
  border-radius: 8px; 
  width: 100%;
  height: 160px;

  -o-object-fit: cover;

     object-fit: cover;
}
@media (min-width: 768px) {
  .p-bg_grid img {
    height: 266px;
  }
}

@-webkit-keyframes slide-bg {
  0% {
    -webkit-transform: translateY(0);
            transform: translateY(0);
  }
  100% {
    -webkit-transform: translateY(calc(-33.33%  - (var(--slide-gap) / 2)));
            transform: translateY(calc(-33.33%  - (var(--slide-gap) / 2)));
  }
}

@keyframes slide-bg {
  0% {
    -webkit-transform: translateY(0);
            transform: translateY(0);
  }
  100% {
    -webkit-transform: translateY(calc(-33.33%  - (var(--slide-gap) / 2)));
            transform: translateY(calc(-33.33%  - (var(--slide-gap) / 2)));
  }
}

[data-bg-observer] {
  visibility: hidden;
  opacity: 0;
  position: absolute;
  z-index: 100; 
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

/**
 * Circle
**/
.p-circles {
  overflow: hidden;
  position: absolute;
  z-index: 0; 
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;

  --circle-color: #fff;
  --circle-opacity: 0.15;
}
.p-circles span {
  opacity: var(--circle-opacity);
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
  position: absolute;
  border-width: calc(var(--circle-width) / 4); 
  border-style: solid;
  border-color: var(--circle-color);
  border-radius: 50%;
  width: var(--circle-width);
  height: var(--circle-width);

  --circle-width: 100px;
}

.p-kv .p-circles {
  z-index: -1; 

  --circle-color: #fff;
  --circle-opacity: 0.15;
}
.p-kv .p-circles span:nth-of-type(1) {
  top: -163px;
  left: -147px; 

  --circle-width: 334px;
}
@media (min-width: 768px) {
  .p-kv .p-circles span:nth-of-type(1) {
    top: -243px;
    left: -268px; 

    --circle-width: 548px;
  }
}
.p-kv .p-circles span:nth-of-type(2) {
  top: 112px;
  right: 34px; 

  --circle-width: 126px;
}
@media (min-width: 768px) {
  .p-kv .p-circles span:nth-of-type(2) {
    top: auto;
    right: auto;
    bottom: 224px;
    left: 209px; 

    --circle-width: 258px;
  }
}
.p-kv .p-circles span:nth-of-type(3) {
  right: -114px; 
  bottom: 150px;

  --circle-width: 217px;
}
@media (min-width: 768px) {
  .p-kv .p-circles span:nth-of-type(3) {
    top: 91px;
    right: 313px; 
    bottom: auto;

    --circle-width: 137px;
  }
}
.p-kv .p-circles span:nth-of-type(4) {
  right: -97px; 
  bottom: 121px;

  --circle-width: 342px;
}

.p-chapter1 .p-circles {
  --circle-color: var(--cyo-color-blue);
  --circle-opacity: 0.1;
}
.p-chapter1 .p-circles span:nth-of-type(1) {
  bottom: 310px; 
  left: 23.28px;

  --circle-width: 63.81px;
}
@media (min-width: 768px) {
  .p-chapter1 .p-circles span:nth-of-type(1) {
    bottom: 710px;
    left: 90px; 

    --circle-width: 136.92px;
  }
}
.p-chapter1 .p-circles span:nth-of-type(2) {
  bottom: 285px; 
  left: -8px;

  --circle-width: 28.78px;
}
@media (min-width: 768px) {
  .p-chapter1 .p-circles span:nth-of-type(2) {
    bottom: 665px;
    left: 26px; 

    --circle-width: 61.75px;
  }
}

.p-chapter2 .p-circles {
  --circle-color: var(--cyo-color-blue);
}
.p-chapter2 .p-circles span:nth-of-type(1) {
  top: 15px;
  right: 48.34px; 

  --circle-width: 69.64px;
}
@media (min-width: 768px) {
  .p-chapter2 .p-circles span:nth-of-type(1) {
    top: 110px;
    right: 73px; 

    --circle-width: 202.11px;
  }
}
.p-chapter2 .p-circles span:nth-of-type(2) {
  top: 75.93px;
  right: 11.51px; 

  --circle-width: 34.15px;
}
@media (min-width: 768px) {
  .p-chapter2 .p-circles span:nth-of-type(2) {
    top: 286px;
    right: -34px; 

    --circle-width: 99.11px;
  }
}
.p-chapter2 .p-circles span:nth-of-type(3) {
  top: 114.77px;
  right: 54.37px; 

  --circle-width: 12.72px;
}
@media (min-width: 768px) {
  .p-chapter2 .p-circles span:nth-of-type(3) {
    top: 399px;
    right: 90px; 
    bottom: auto;

    --circle-width: 36.92px;
  }
}
.p-chapter2 .p-circles span:nth-of-type(4) {
  top: 770px;
  right: -27px; 

  --circle-width: 94.72px;
}
@media (min-width: 768px) {
  .p-chapter2 .p-circles span:nth-of-type(4) {
    top: 633px;
    right: 132px; 

    --circle-width: 146.45px;
  }
}
.p-chapter2 .p-circles span:nth-of-type(5) {
  top: 881px;
  right: 38px; 

  --circle-width: 30px;
}
@media (min-width: 768px) {
  .p-chapter2 .p-circles span:nth-of-type(5) {
    top: 804.61px;
    right: 232.6px; 
    bottom: auto;

    --circle-width: 46.4px;
  }
}

.p-chapter3 .p-circles {
  --circle-color: var(--cyo-color-blue);
  --circle-opacity: 0.1;
}
.p-chapter3 .p-circles span:nth-of-type(1) {
  top: 165px;
  right: -15.92px; 

  --circle-width: 65px;
}
@media (min-width: 768px) {
  .p-chapter3 .p-circles span:nth-of-type(1) {
    top: 87px;
    right: auto; 
    left: 75px;

    --circle-width: 133px;
  }
}
.p-chapter3 .p-circles span:nth-of-type(2) {
  top: 222.67px;
  right: 50.67px; 

  --circle-width: 29.33px;
}
@media (min-width: 768px) {
  .p-chapter3 .p-circles span:nth-of-type(2) {
    top: 207px;
    right: auto; 
    left: 213px;

    --circle-width: 60px;
  }
}
.p-chapter3 .p-circles span:nth-of-type(3) {
  bottom: 310px;
  left: -16px; 

  --circle-width: 93.23px;
}
@media (min-width: 768px) {
  .p-chapter3 .p-circles span:nth-of-type(3) {
    top: 757px;
    bottom: auto;
    left: 214px; 

    --circle-width: 52px;
  }
}
.p-chapter3 .p-circles span:nth-of-type(4) {
  bottom: 282px;
  left: 80px; 

  --circle-width: 45.23px;
}
@media (min-width: 768px) {
  .p-chapter3 .p-circles span:nth-of-type(4) {
    top: 848px;
    bottom: auto;
    left: -113px; 

    --circle-width: 289px;
  }
}
.p-chapter3 .p-circles span:nth-of-type(5) {
  bottom: 260px;
  left: 51.43px; 

  --circle-width: 16.85px;
}
@media (min-width: 768px) {
  .p-chapter3 .p-circles span:nth-of-type(5) {
    right: 150px;
    bottom: 290px;
    left: auto; 

    --circle-width: 147.82px;
  }
}
.p-chapter3 .p-circles span:nth-of-type(6) {
  right: 72px;
  bottom: 236.31px;
  left: auto; 

  --circle-width: 72.49px;
}
.p-chapter3 .p-circles span:nth-of-type(7) {
  right: 163px;
  bottom: 199.33px;
  left: auto; 

  --circle-width: 27px;
}

.p-chapter4 .p-circles {
  --circle-color: var(--cyo-color-blue);
  --circle-opacity: 0.1;
}
.p-chapter4 .p-circles span:nth-of-type(1) {
  top: 73px; 
  left: -51px;

  --circle-width: 148px;
}
@media (min-width: 768px) {
  .p-chapter4 .p-circles span:nth-of-type(1) {
    top: 104px;
    right: 113px; 

    --circle-width: 137px;
  }
}
.p-chapter4 .p-circles span:nth-of-type(2) {
  top: 650px;
  right: -18px; 

  --circle-width: 95px;
}
@media (min-width: 768px) {
  .p-chapter4 .p-circles span:nth-of-type(2) {
    top: 227.5px;
    right: 45.96px; 

    --circle-width: 61.75px;
  }
}
.p-chapter4 .p-circles span:nth-of-type(3) {
  top: 1039px;
  right: 70px; 

  --circle-width: 66.68px;
}
@media (min-width: 768px) {
  .p-chapter4 .p-circles span:nth-of-type(3) {
    top: 283px;
    right: auto; 
    left: -103px;

    --circle-width: 340px;
  }
}
.p-chapter4 .p-circles span:nth-of-type(4) {
  top: 1099px;
  right: 37.33px; 

  --circle-width: 30px;
}
@media (min-width: 768px) {
  .p-chapter4 .p-circles span:nth-of-type(4) {
    top: 513px;
    right: 245px; 

    --circle-width: 95px;
  }
}
.p-chapter4 .p-circles span:nth-of-type(5) {
  bottom: 100px; 
  left: -37px;

  --circle-width: 111.85px;
}
@media (min-width: 768px) {
  .p-chapter4 .p-circles span:nth-of-type(5) {
    bottom: 329.36px;
    left: 94px; 

    --circle-width: 174.64px;
  }
}
.p-chapter4 .p-circles span:nth-of-type(6) {
  bottom: 59.28px;
  left: 79.13px; 

  --circle-width: 54.85px;
}
@media (min-width: 768px) {
  .p-chapter4 .p-circles span:nth-of-type(6) {
    bottom: 265.55px;
    left: 275.34px; 

    --circle-width: 85.64px;
  }
}
.p-chapter4 .p-circles span:nth-of-type(7) {
  bottom: 31.32px; 
  left: 44.71px;

  --circle-width: 20.43px;
}
@media (min-width: 768px) {
  .p-chapter4 .p-circles span:nth-of-type(7) {
    right: 275.34px; 
    bottom: 265.55px;
    left: auto;

    --circle-width: 85.64px;
  }
}
.p-chapter4 .p-circles span:nth-of-type(8) {
  right: -45px; 
  bottom: 396px;

  --circle-width: 140px;
}

.p-detail .p-circles {
  --circle-color: var(--cyo-color-blue);
  --circle-opacity: 0.1;
}
.p-detail .p-circles span:nth-of-type(1) {
  top: -126px;
  left: -90px; 

  --circle-width: 200px;
}
@media (min-width: 768px) {
  .p-detail .p-circles span:nth-of-type(1) {
    top: -250px; 
    left: -189px;

    --circle-width: 450px;
  }
}
.p-detail .p-circles span:nth-of-type(2) {
  right: -170px; 
  bottom: 426px;

  --circle-width: 400px;
}
@media (min-width: 768px) {
  .p-detail .p-circles span:nth-of-type(2) {
    right: -211px; 
    bottom: -86px;

    --circle-width: 600px;
  }
}