@charset "UTF-8";
@media screen and (max-width: 1023px) {
  .page-heading .introduction {
    display: block;
    width: 87%;
    margin: 0; } }
.page-heading h2 {
  margin-top: 1em;
  white-space: nowrap;
  display: block; }
  .page-heading h2::before {
    display: none; }
  .page-heading h2 div {
    display: flex;
    align-items: center;
    justify-content: center;
    margin: -0.25em 0 0.25em; }
  .page-heading h2 img {
    width: 8em;
    margin-left: 0.25em; }
    @media screen and (max-width: 1023px) {
      .page-heading h2 img {
        width: 7em; } }
  .page-heading h2 .icon-special {
    background: #e4879e;
    height: 2.5em;
    width: 2.5em;
    display: flex;
    justify-content: center;
    align-items: center;
    border-radius: 100%; }
    .page-heading h2 .icon-special span {
      display: flex;
      justify-content: center;
      align-items: center;
      text-align: center;
      color: #fff;
      border-radius: 100%;
      font-size: 60%;
      height: 4em;
      width: 4em;
      border: 2px solid #fff; }
      @media screen and (max-width: 1023px) {
        .page-heading h2 .icon-special span {
          height: 3.8em;
          width: 3.8em; } }

.page-body {
  position: relative; }
  @media screen and (max-width: 1023px) {
    .page-body {
      padding-top: 1.5em; } }
  .page-body section.has-anchor h3.baloon {
    position: absolute;
    z-index: 1;
    top: 5em;
    left: 0; }
    @media screen and (max-width: 1023px) {
      .page-body section.has-anchor h3.baloon {
        top: 4.5em; } }
  .page-body section.has-anchor .box01 {
    background: #fff;
    border-radius: 0.875em;
    padding: 2.5em 1.25em 3em;
    margin-top: 0; }
    @media screen and (max-width: 1023px) {
      .page-body section.has-anchor .box01 {
        padding: 1.5em 1.25em 2em; } }
    .page-body section.has-anchor .box01 h4 {
      border-bottom: 2px solid #e39fb0;
      padding-bottom: 0.35em;
      text-align: center;
      line-height: 1.4;
      font-size: 200%;
      font-weight: 900;
      color: #49aadc;
      margin-bottom: 0.35em; }
      @media screen and (max-width: 1023px) {
        .page-body section.has-anchor .box01 h4 {
          font-size: 6vw; } }
    .page-body section.has-anchor .box01 .box0101 {
      display: flex;
      justify-content: space-between;
      margin-top: 2em; }
      @media screen and (max-width: 1300px) {
        .page-body section.has-anchor .box01 .box0101 {
          display: block; } }
      .page-body section.has-anchor .box01 .box0101 .txt01 {
        /*width: 48%;*/
        width: 100%;
        margin: -0.5em 0; }
        @media screen and (max-width: 1300px) {
          .page-body section.has-anchor .box01 .box0101 .txt01 {
            width: auto; } }
        .page-body section.has-anchor .box01 .box0101 .txt01 p {
          margin: 0 0 1.75em; }
    .page-body section.has-anchor .box01 .box0102 {
      margin-top: 1.5em;
      /*width: 48%;*/
      width: 100%;
      background: #f9eef1;
      box-sizing: border-box;
      padding: 2em;
      border-radius: 0.875em; }
      @media screen and (max-width: 1300px) {
        .page-body section.has-anchor .box01 .box0102 {
          width: auto;
          text-align: center;
          padding: 2em 5%; } }
      .page-body section.has-anchor .box01 .box0102 dl {
        border-bottom: 2px solid #fff;
        padding: 0 0 0.75em;
        margin: 0 0 0.75em; }
        .page-body section.has-anchor .box01 .box0102 dl:last-child {
          border: none;
          padding: 0;
          margin: 0; }
        .page-body section.has-anchor .box01 .box0102 dl dt {
          font-weight: 700; }
          .page-body section.has-anchor .box01 .box0102 dl dt::before {
            content: "●";
            color: #cbb368; }
        .page-body section.has-anchor .box01 .box0102 dl dd {
          margin: 0; }
          .page-body section.has-anchor .box01 .box0102 dl dd ul {
            padding: 0 0 0 1.2em;
            font-size: 0.9375em;
            margin-top: 0.3em;
            list-style-type: none; }
            @media screen and (max-width: 1023px) {
              .page-body section.has-anchor .box01 .box0102 dl dd ul {
                text-align: left;
                display: inline-block; } }
            @media screen and (max-width: 1023px) {
              .page-body section.has-anchor .box01 .box0102 dl dd ul li {
                line-height: 1.5; } }
            @media screen and (max-width: 1023px) {
              .page-body section.has-anchor .box01 .box0102 dl dd ul li:not(:last-child) {
                margin-bottom: 1em; } }
    .page-body section.has-anchor .box01 .box0103 {
      margin-top: 2.5em;
      background: #ebf7ee;
      box-sizing: border-box;
      padding: 2em 2em 1em;
      border-radius: 0.875em;
      position: relative; }
      @media screen and (max-width: 1300px) {
        .page-body section.has-anchor .box01 .box0103 {
          width: auto;
          margin-top: 2.5em;
          text-align: center;
          padding: 2em 5% 1em; } }
      .page-body section.has-anchor .box01 .box0103 h5.baloon {
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        width: fit-content;
        position: absolute;
        top: -0.5em;
        left: 0; }
      .page-body section.has-anchor .box01 .box0103 h5.baloon span {
        display: flex;
        padding: 2px 28px;
        border: 2px solid #49aadc;
        border-radius: 14px;
        background-color: #fff;
        font-size: 1.25rem;
        position: relative;
        font-weight: 600; }
        @media screen and (max-width: 1023px) {
          .page-body section.has-anchor .box01 .box0103 h5.baloon span {
            font-size: 1rem; } }
      .page-body section.has-anchor .box01 .box0103 h5.baloon span::before {
        content: '';
        display: block;
        width: 10px;
        height: 2px;
        background-color: #fff;
        position: absolute;
        left: 10px;
        top: -2px; }
      .page-body section.has-anchor .box01 .box0103 h5.baloon span::after {
        content: '';
        display: block;
        width: 10px;
        height: 2px;
        background-color: #fff;
        position: absolute;
        right: 10px;
        bottom: -2px; }
      .page-body section.has-anchor .box01 .box0103 h5.baloon::after {
        content: '';
        display: block;
        width: 24px;
        height: 17px;
        background: url(../../common/img/balloon_parts.svg) no-repeat center/contain;
        transform: translateY(-6px);
        align-self: center; }
      .page-body section.has-anchor .box01 .box0103 .index01 {
        display: grid;
        grid-template-columns: repeat(auto-fit, 100%);
        justify-content: center;
        grid-gap: 0.5em;
        padding: 0;
        text-align: left; }
        @media screen and (max-width: 1023px) {
          .page-body section.has-anchor .box01 .box0103 .index01 {
            grid-gap: 1em; } }
      .page-body section.has-anchor .box01 .box0103 .index01 li {
        display: grid;
        grid-template-columns: 45% 30%;
        align-items: center;
        white-space: nowrap; }
        @media screen and (max-width: 1300px) {
          .page-body section.has-anchor .box01 .box0103 .index01 li {
            grid-template-columns: 70% 30%; } }
        @media screen and (max-width: 1023px) {
          .page-body section.has-anchor .box01 .box0103 .index01 li {
            display: block;
            line-height: 1.4;
            text-indent: -4em;
            margin-left: 4em; } }
      .page-body section.has-anchor .box01 .box0103 .index01 li .btn01 {
        background-color: #49aadc;
        border-radius: 10px;
        transition: 0.8s;
        cursor: pointer;
        position: relative; }
      .page-body section.has-anchor .box01 .box0103 .index01 li .btn01:hover {
        opacity: 0.5; }
      .page-body section.has-anchor .box01 .box0103 .index01 li .btn01::after {
        content: '';
        position: absolute;
        top: 50%;
        right: 0.5em;
        transform: translate(0, -50%);
        width: 16px;
        border-radius: 0 10px 10px 0;
        background: url("../../common/img/arrow_right_white.svg") no-repeat center;
        background-size: auto;
        background-size: cover;
        width: 0.5em;
        height: 1em; }
      .page-body section.has-anchor .box01 .box0103 .index01 li .btn01 a {
        padding: 0.5em 0;
        display: block;
        text-align: center;
        color: #fff;
        font-weight: 600; }
  .page-body section.has-anchor .link01 {
    margin-top: 2.5em; }
    .page-body section.has-anchor .link01 a {
      display: block;
      width: 25em;
      max-width: 100%;
      margin: 0 auto;
      background: #fff;
      border-radius: 0.75em;
      border: 2px solid #49aadc;
      padding: 0.75em 0;
      font-weight: 700;
      font-size: 125%;
      text-align: center; }
      .page-body section.has-anchor .link01 a img {
        width: 4.5em;
        display: inline-block;
        vertical-align: middle;
        margin: -0.5em 0.5em 0 0; }

@media screen and (max-width: 1023px) {
  .page-content section:not(:first-child) {
    margin-top: 2.5em; } }

.page-content #chapter {
  margin-bottom: 1em; }
  @media screen and (max-width: 1300px) {
    .page-content #chapter {
      display: block; } }
  .page-content #chapter .lead01 {
    text-align: center; }
    .page-content #chapter .lead01 span {
      font-size: 150%;
      display: inline-block;
      border-top: 1px solid #e5283c;
      border-bottom: 1px solid #e5283c;
      padding: 0.5em;
      font-weight: 600;
      color: #e5283c; }
  .page-content #chapter .chapter01 {
    width: 640px;
    max-width: 100%;
    margin: 0 auto; }
    .page-content #chapter .chapter01 .slider01 {
      padding: 0; }
      @media screen and (max-width: 1023px) {
        .page-content #chapter .chapter01 .slider01 {
          font-size: 2.65vw; } }
      .page-content #chapter .chapter01 .slider01 .slick-dots {
        bottom: -2em; }
        @media screen and (max-width: 1023px) {
          .page-content #chapter .chapter01 .slider01 .slick-dots {
            bottom: -30px; } }
      .page-content #chapter .chapter01 .slider01 .slick-dots li {
        height: 1.25rem;
        margin: 0; }
        .page-content #chapter .chapter01 .slider01 .slick-dots li button::before {
          font-size: 30px;
          width: 20px;
          height: 20px; }
      .page-content #chapter .chapter01 .slider01 li {
        list-style-type: none; }
        .page-content #chapter .chapter01 .slider01 li .popup-youtube01 {
          position: relative;
          background: #f8f8f8; }
          .page-content #chapter .chapter01 .slider01 li .popup-youtube01 .thumb01 {
            width: 100%;
            opacity: 0.25; }
          .page-content #chapter .chapter01 .slider01 li .popup-youtube01 .txt {
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            width: 88%;
            background: white;
            box-sizing: border-box;
            padding: 1.5em;
            z-index: 1; }
            .page-content #chapter .chapter01 .slider01 li .popup-youtube01 .txt .txt01 {
              font-size: 1.5em;
              font-weight: 700;
              padding: 0 0 0 1.5em;
              position: relative;
              margin: 0; }
              .page-content #chapter .chapter01 .slider01 li .popup-youtube01 .txt .txt01::before {
                content: "";
                position: absolute;
                top: 50%;
                left: -5.25%;
                width: 2.25em;
                height: 2px;
                transform: translate(0, 50%); }
              .page-content #chapter .chapter01 .slider01 li .popup-youtube01 .txt .txt01.icon01 {
                color: #cbb368; }
                .page-content #chapter .chapter01 .slider01 li .popup-youtube01 .txt .txt01.icon01::before {
                  background: #cbb368; }
              .page-content #chapter .chapter01 .slider01 li .popup-youtube01 .txt .txt01.icon02 {
                color: #a994b7; }
                .page-content #chapter .chapter01 .slider01 li .popup-youtube01 .txt .txt01.icon02::before {
                  background: #a994b7; }
              .page-content #chapter .chapter01 .slider01 li .popup-youtube01 .txt .txt01.icon03 {
                color: #5abdb5; }
                .page-content #chapter .chapter01 .slider01 li .popup-youtube01 .txt .txt01.icon03::before {
                  background: #5abdb5; }
              .page-content #chapter .chapter01 .slider01 li .popup-youtube01 .txt .txt01.icon04 {
                color: #49aadc; }
                .page-content #chapter .chapter01 .slider01 li .popup-youtube01 .txt .txt01.icon04::before {
                  background: #49aadc; }
            .page-content #chapter .chapter01 .slider01 li .popup-youtube01 .txt h6 {
              font-size: 165%;
              font-weight: 900;
              line-height: 1.3;
              color: #333; }
          .page-content #chapter .chapter01 .slider01 li .popup-youtube01 .btnWrap01 {
            position: absolute;
            bottom: 5em;
            left: 50%;
            transform: translate(-50%, 0);
            width: 13em;
            z-index: 2; }
            @media screen and (max-width: 1023px) {
              .page-content #chapter .chapter01 .slider01 li .popup-youtube01 .btnWrap01 {
                bottom: 1.5em; } }
          .page-content #chapter .chapter01 .slider01 li .popup-youtube01 .btn01 {
            display: block;
            padding: 8px 20px 10px;
            background-color: #49aadc;
            border-radius: 10px;
            text-align: center;
            line-height: 1.4;
            cursor: pointer;
            color: #fff;
            position: relative;
            border: 2px solid #fff;
            font-size: 112.5%;
            font-weight: 900; }
            @media screen and (max-width: 1023px) {
              .page-content #chapter .chapter01 .slider01 li .popup-youtube01 .btn01 {
                font-size: 135%;
                padding: 0.5em; } }
            .page-content #chapter .chapter01 .slider01 li .popup-youtube01 .btn01::after {
              content: '';
              position: absolute;
              top: 50%;
              right: 0.5em;
              transform: translate(0, -50%);
              width: 16px;
              border-radius: 0 10px 10px 0;
              background: url("../../common/img/arrow_right_white.svg") no-repeat center;
              background-size: cover;
              width: 0.5em;
              height: 1em; }