/************************************************/

@charset "UTF-8";

/************************************************/

  #container_wrap {
    overflow: unset;
  }

  .list_navi_fixed {
    display: none;
  }

/************************************************/

  :root {
    --mv_size_h_pc: 100vw;
    --mv_size_v_pc: calc(100vh - 68px);
    --mv_size_h_sp: 100vw;
    --mv_size_v_sp: calc(100vh * 0.512);
    --fontcolor_01: #595757;
    --fontsize: 1.2em;
    --fontsize_sp: 3.6vw;
    --fullsize_h: 100vw;
    --fullsize_v: 1024px;
    --fullsize_v_sp: 90vw;
    --fullsize_v_ex: 1240px;
    --fullsize_v_ex_sp: 100vw;
    --highlightcolor: #7bafc9;
    --vividcolor: #94b200;
    --basecolor: #f1ede3;
    --point_head_si_size_pc: 85px;
    --point_head_si_size_sp: 16vw;
    --mb_size_base: 100px;
    --mb_size_base_sp: 10vh;
    --point_nav_size: 768px;
    --point_nav_size_sp: 90vw;
    --point_nav_gap: 48px;
    --point_nav_gap_sp: 2.2vw;
    --points_nav_fix_size_sp: 35px;
    --contents_01_cases_h: 3100px;
    --contents_01_cases_h_sp: 468vw;
  }

/************************************************/

  .text_ll {
    font-size: calc(var(--fontsize) * 1.4);
    font-family: "Noto Serif JP", serif;
    font-optical-sizing: auto;
    font-style: normal;
    color: var(--fontcolor_01);
  }

  .text_l {
    font-size: calc(var(--fontsize) * 1.2);
    font-family: "Noto Serif JP", serif;
    font-optical-sizing: auto;
    font-style: normal;
    color: var(--fontcolor_01);
  }

  .text_m {
    font-size: calc(var(--fontsize) * 1.0);
    font-family: "Noto Serif JP", serif;
    font-optical-sizing: auto;
    font-style: normal;
    color: var(--fontcolor_01);
  }

  .text_s {
    font-size: calc(var(--fontsize) * 0.9);
    font-family: "Noto Serif JP", serif;
    font-optical-sizing: auto;
    font-style: normal;
    color: var(--fontcolor_01);
  }

  .text_ss {
    font-size: calc(var(--fontsize) * 0.8);
    font-family: "Noto Serif JP", serif;
    font-optical-sizing: auto;
    font-style: normal;
    color: var(--fontcolor_01);
  }

  .text_sss {
    font-size: calc(var(--fontsize) * 0.6);
  }

  .cl_01 {
    color: var(--highlightcolor);
  }

  .fw_7 {
    font-weight: 700;
  }

  .fw_6 {
    font-weight: 600;
  }

  .fw_5 {
    font-weight: 500;
  }

  .fw_4 {
    font-weight: 400;
  }

  .fw_3 {
    font-weight: 300;
  }

  .fw_2 {
    font-weight: 200;
  }

  .mb_100 {
    margin-block-end: calc(var(--mb_size_base) * 1.0);
  }

  .mb_90 {
    margin-block-end: calc(var(--mb_size_base) * 0.9);
  }

  .mb_80 {
    margin-block-end: calc(var(--mb_size_base) * 0.8);
  }

  .mb_70 {
    margin-block-end: calc(var(--mb_size_base) * 0.7);
  }

  .mb_60 {
    margin-block-end: calc(var(--mb_size_base) * 0.6);
  }

  .mb_50 {
    margin-block-end: calc(var(--mb_size_base) * 0.5);
  }

  .mb_40 {
    margin-block-end: calc(var(--mb_size_base) * 0.4);
  }

  .mb_30 {
    margin-block-end: calc(var(--mb_size_base) * 0.3);
  }

  .mb_20 {
    margin-block-end: calc(var(--mb_size_base) * 0.2);
  }

  .mb_10 {
    margin-block-end: calc(var(--mb_size_base) * 0.1);
  }

  .mb_0 {
    margin-block-end: 0;
  }

  .moreover {
    &::before {
      position: relative;
      display: inline-block;
      content: "";
      background: var(--vividcolor);/*斜め線の色*/
      width: 2px;/*斜め線の太さ*/
      height: 1.2em;/*斜め線の長さ*/
      margin: 0 0.5em;/*テキストとの間に左右余白をつくる*/
      margin-top: -.2em;/*斜め線の位置調整*/
      vertical-align: middle;
      transform: rotate(-35deg);/*角度調整*/
    }
    &::after {
      position: relative;
      display: inline-block;
      content: "";
      background: var(--vividcolor);/*斜め線の色*/
      width: 2px;/*斜め線の太さ*/
      height: 1.2em;/*斜め線の長さ*/
      margin: 0 0.5em;/*テキストとの間に左右余白をつくる*/
      margin-top: -.2em;/*斜め線の位置調整*/
      vertical-align: middle;
      transform: rotate(35deg);/*角度調整*/
    }
  }

  .txt_l-align_c {
    display: block;
    inline-size: fit-content;
    margin-inline: auto;
    text-align: initial;
  }

  & .button_open {
    display: block;
    inline-size: fit-content;
    margin-inline: auto;

    & a {
      font-family: "Noto Sans JP", sans-serif;
      display: block;
      color: #fff;
      background: #717071;
      inline-size: fit-content;
      line-height: 1.0;
      padding-inline: 1.8em;
      padding-block: 1.0em;

      & > span {

        &.material-symbols-outlined {
          vertical-align: sub;
          font-size: var(--fontsize);
        }
      }
    }
  }


@media screen and (width <= 768px) {

  .text_ll {
    font-size: calc(var(--fontsize_sp) * 1.4);
  }

  .text_l {
    font-size: calc(var(--fontsize_sp) * 1.2);
  }

  .text_m {
    font-size: calc(var(--fontsize_sp) * 1.0);
  }

  .text_s {
    font-size: calc(var(--fontsize_sp) * 0.9);
  }

  .text_ss {
    font-size: calc(var(--fontsize_sp) * 0.8);
  }

  .text_sss {
    font-size: calc(var(--fontsize_sp) * 0.6);
  }

  .mb_100 {
    margin-block-end: calc(var(--mb_size_base_sp) * 1.0);
  }

  .mb_90 {
    margin-block-end: calc(var(--mb_size_base_sp) * 0.9);
  }

  .mb_80 {
    margin-block-end: calc(var(--mb_size_base_sp) * 0.8);
  }

  .mb_70 {
    margin-block-end: calc(var(--mb_size_base_sp) * 0.7);
  }

  .mb_60 {
    margin-block-end: calc(var(--mb_size_base_sp) * 0.6);
  }

  .mb_50 {
    margin-block-end: calc(var(--mb_size_base_sp) * 0.5);
  }

  .mb_40 {
    margin-block-end: calc(var(--mb_size_base_sp) * 0.4);
  }

  .mb_30 {
    margin-block-end: calc(var(--mb_size_base_sp) * 0.3);
  }

  .mb_20 {
    margin-block-end: calc(var(--mb_size_base_sp) * 0.2);
  }

  .mb_10 {
    margin-block-end: calc(var(--mb_size_base_sp) * 0.1);
  }

  .mb_0 {
    margin-block-end: 0;
  }

  & .button_open {

    & a {

      & > span {

        &.material-symbols-outlined {
          font-size: var(--fontsize_sp);
        }
      }
    }
  }

}

/************************************************/

  .canael_2026 {
    display: block;
    inline-size: 100%;

    font-size: var(--fontsize);

    font-family: "Noto Sans JP", sans-serif;
    font-optical-sizing: auto;
    font-weight: 200;
    font-style: normal;
    color: var(--fontcolor_01) !important;

    /*------------------------------------------*/

    & h2 {
      font-family: "Noto Serif JP", serif;
      font-optical-sizing: auto;
      font-weight: 500;
      font-style: normal;
      color: var(--fontcolor_01);
    }

    /*------------------------------------------*/

    & #canael_mv {
      display: block;
      inline-size: 100%;

      & .mv_wrap {
        display: block;
        inline-size: var(--mv_size_h_pc);
        block-size: var(--mv_size_v_pc);
        background: var(--basecolor);
        position: relative;
      }

      & h1 {
        inline-size: calc(var(--mv_size_h_pc) * 0.427);
        block-size: calc(var(--mv_size_h_pc) * 0.178);
        background-image: url(../img/canael_2026/mv_logo.svg);
        background-repeat: no-repeat;
        background-position: center center;
        background-size: contain;
        text-indent: -9999px;
        position: absolute;
        inset-inline-start: 50%;
        inset-block-start: 50%;
        transform: translate(-50%, -50%);
        -webkit-transform: translate(-50%, -50%);
        -ms-transform: translate(-50%, -50%);
        z-index: 1;
      }

      & ul {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        gap: 0;
        position: absolute;
        inset-inline-start: 0;
        inset-block-start: 0;

        & li {
          display: block;
          inline-size: calc(var(--mv_size_h_pc) / 2);
          block-size: calc(var(--mv_size_v_pc) / 2);

          & > img {
            inline-size: 100%;
            block-size: 100%;
            opacity: 0.15;
            object-fit: cover;
          }
        }
      }
    }

    /*------------------------------------------*/

    & #canael_desc {
      display: block;
      inline-size: 100%;

      & .desc_wrap {

      }

      & strong {
        display: block;
        padding-block: 100px 150px;
        font-size: 1.4em;
        line-height: 2.2;
        font-family: "Noto Serif JP", serif;
        font-optical-sizing: auto;
        font-weight: 500;
        font-style: normal;
        text-align: center;
      }

      & .desc_image {

        &::after {
          display: block;
          content: " ";
          inline-size: 80%;
          block-size: 1px;
          background-color: var(--fontcolor_01);

          margin-inline: auto;
          margin-block: 16px;
        }
      }
    }

    /*------------------------------------------*/

    & #canael_points {
      display: block;
      inline-size: 100%;

      & .points_wrap {
        padding-block: 100px 150px;
      }

      /*----------------------------------------*/

      & h2 {
        inline-size: 512px;
        block-size: 45px;
        background-image: url(../img/canael_2026/title_01.svg);
        background-repeat: no-repeat;
        background-position: center center;
        background-size: contain;
        text-indent: -9999px;

        margin-inline: auto;
        margin-block: 0 68px;
      }

      /*----------------------------------------*/

      & .points_nav_fix {
        position: sticky;
        inset-block-start: 0;
        inline-size: 100%;
        margin-inline: auto;
        margin-block-end: -6vw;
        padding-block-start: 68px;
        transform: scale(0.8);
        z-index: 1;

        & > ul {
          display: grid;
          grid-template-columns: repeat(5, 1fr);
          gap: 1px;
          inline-size: 90%;
          margin-inline: auto;

          & li {
            display: block;
            inline-size: 100%;
            text-align: center;

            font-family: "Noto Serif JP", serif;
            font-optical-sizing: auto;
            font-weight: 500;
            font-style: normal;

            background: rgba(255, 255, 255, 0.9);
            padding: 0.5em 0.5em;

            transition: 0.3s;

            & a {
              display: block;
            }

            & .title {
              display: block;
              inline-size: 100%;
              margin-inline: auto;
              font-size: 1.35vw;
              color: var(--highlightcolor);
              font-weight: 600;
              line-height: 2.0;

              &::after {
                content: " ";
                display: block;
                inline-size: 0;
                block-size: 0;
                border-style: solid;
                border-right: 1vw solid transparent;
                border-left: 1vw solid transparent;
                border-top: 0.5vw solid var(--vividcolor);
                border-bottom: 0;
                margin-inline: auto;
                margin-block: 0.5vw 0;
              }
            }

            &:hover {
              background: var(--highlightcolor);
              color: #fff;

              & .title {
                color: #fff;

                &::after {
                  border-top: 0.5vw solid #fff;
                }
              }
            }

            &.active {
              background: var(--highlightcolor);
              color: #fff;

              & .title {
                color: #fff;

                &::after {
                  border-top: 0.5vw solid #fff;
                }
              }
            }
          }
        }
      }

      /*----------------------------------------*/

      & .points_nav {
        inline-size: 100%;
        margin-inline: auto;
        margin-block-end: 150px;
        background: rgba(255, 255, 255, 1.0);
        position: relative;
        z-index: 2;

        & > ul {
          display: grid;
          grid-template-columns: repeat(5, 1fr);
          gap: 0;
          inline-size: 90%;
          margin-inline: auto;

          & li {
            display: block;
            inline-size: 100%;
            text-align: center;

            font-family: "Noto Serif JP", serif;
            font-optical-sizing: auto;
            font-weight: 500;
            font-style: normal;

            & a {
              display: block;
            }

            & .icon {
              display: block;
              inline-size: 100%;
              margin-inline: auto;

              & img:first-of-type {
                display: block;
                inline-size: 20%;
                margin-inline: auto;
              }
            }

            & .title {
              display: block;
              inline-size: 100%;
              margin-inline: auto;
              font-size: 1.5vw;
              color: var(--highlightcolor);
              font-weight: 600;
              line-height: 2.0;
            }

            & .text {
              display: block;
              inline-size: 100%;
              margin-inline: auto;
              font-size: 0.95vw;
              line-height: 2.0;
            }

            & .more {
              display: block;
              inline-size: 100%;
              margin-inline: auto;
              font-size: 1.2vw;

              &::before {
                content: " ";
                display: block;
                inline-size: 1px;
                block-size: 6vw;
                background: var(--vividcolor);
                margin-inline: auto;
                margin-block: 1vw;
              }

              &::after {
                content: " ";
                display: block;
                inline-size: 0;
                block-size: 0;
                border-style: solid;
                border-right: 1vw solid transparent;
                border-left: 1vw solid transparent;
                border-top: 0.5vw solid var(--vividcolor);
                border-bottom: 0;
                margin-inline: auto;
                margin-block: 0.5vw 0;
              }
            }
          }
        }
      }

      /*----------------------------------------*/

      & .point_anchor {
        display: block;
        block-size: var(--point_head_si_size_pc);
      }

      & .point_head {
        width: 100%;
        background: var(--basecolor);
        position: relative;
        block-size: var(--point_head_si_size_pc);

        &::before {
          content: "";
          display: block;
          block-size: var(--point_head_si_size_pc);
        }

        & h3 {
          display: block;
          font-size: 1.4em;
          line-height: 1.4;
          font-family: "Noto Serif JP", serif;
          font-optical-sizing: auto;
          font-weight: 500;
          font-style: normal;
          color: var(--highlightcolor);
          position: absolute;
          top: 50%;
          transform: translate(0,-50%);
          padding-inline-start: calc(var(--point_head_si_size_pc) * 1.2);
        }

        &::before {
          content: " ";
          display: block;
          inline-size: var(--point_head_si_size_pc);
          block-size: var(--point_head_si_size_pc);
          position: absolute;
          background: var(--highlightcolor);
        }

        &.point01 {
          &::before {
            background: url(/wp2024/wp-content/themes/noblehome_2023/lineup/img/canael_2026/point_01_tile.svg);
          }
        }

        &.point02 {
          &::before {
            background: url(/wp2024/wp-content/themes/noblehome_2023/lineup/img/canael_2026/point_02_tile.svg);
          }
        }

        &.point03 {
          &::before {
            background: url(/wp2024/wp-content/themes/noblehome_2023/lineup/img/canael_2026/point_03_tile.svg);
          }
        }

        &.point04 {
          &::before {
            background: url(/wp2024/wp-content/themes/noblehome_2023/lineup/img/canael_2026/point_04_tile.svg);
          }
        }

        &.point05 {
          &::before {
            background: url(/wp2024/wp-content/themes/noblehome_2023/lineup/img/canael_2026/point_05_tile.svg);
          }
        }

        &::after {
          content: " ";
          display: block;
          inline-size: calc(var(--point_head_si_size_pc) * 1.6 * 1.618);
          block-size: calc(var(--point_head_si_size_pc) * 1.6);
          position: absolute;
          inset-inline-end: 0;
          background-size: contain !important;
          background-position: center center !important;
          background-repeat: no-repeat !important;
        }

        &.point01 {
          &::after {
            background: url(/wp2024/wp-content/themes/noblehome_2023/lineup/img/canael_2026/point_01_pict.svg);
          }
        }

        &.point02 {
          &::after {
            background: url(/wp2024/wp-content/themes/noblehome_2023/lineup/img/canael_2026/point_02_pict.svg);
          }
        }

        &.point03 {
          &::after {
            background: url(/wp2024/wp-content/themes/noblehome_2023/lineup/img/canael_2026/point_03_pict.svg);
          }
        }

        &.point04 {
          &::after {
            background: url(/wp2024/wp-content/themes/noblehome_2023/lineup/img/canael_2026/point_04_pict.svg);
          }
        }

        &.point05 {
          &::after {
            background: url(/wp2024/wp-content/themes/noblehome_2023/lineup/img/canael_2026/point_05_pict.svg);
          }
        }
      }

      /*----------------------------------------*/

      & .point_contents {
        padding-block: 68px 108px;

      }

      /*----------------------------------------*/

      & .point_contents_01 {
        text-align: center;

        & .contents_01_wrap {
          background: var(--basecolor);
        }

        & .contents_01_nav {
          display: grid;
          grid-template-columns: repeat(4, 1fr);
          gap: var(--point_nav_gap);
          inline-size: var(--point_nav_size);
          margin-inline: auto;
          transform: translateY(calc(var(--point_nav_gap) * -1));
          margin-block-start: calc(var(--point_nav_gap) * 2);

          & li {
            display: block;

            & > a {
              display: block;
              inline-size: calc((var(--point_nav_size) - (var(--point_nav_gap) * (4 - 1))) / 4);
              block-size: calc((var(--point_nav_size) - (var(--point_nav_gap) * (4 - 1))) / 4);
              text-indent: -9999px;
              background-size: contain;
              background-repeat: no-repeat;
              background-position: center center;
              cursor: pointer;
              transition-property: background-image;/*変化させたいプロパティを指定*/
              transition-duration: 0.3s;/*要素が変化するまでの時間を指定*/

              &.case_01_button {
                background-image: url(../img/canael_2026/case_icon_01.svg);
                &:hover {
                  background-image: url(../img/canael_2026/case_icon_01_active.svg);
                }
                &.active {
                  background-image: url(../img/canael_2026/case_icon_01_active.svg);
                }
              }

              &.case_02_button {
                background-image: url(../img/canael_2026/case_icon_02.svg);
                &:hover {
                  background-image: url(../img/canael_2026/case_icon_02_active.svg);
                }
                &.active {
                  background-image: url(../img/canael_2026/case_icon_02_active.svg);
                }
              }

              &.case_03_button {
                background-image: url(../img/canael_2026/case_icon_03.svg);
                &:hover {
                  background-image: url(../img/canael_2026/case_icon_03_active.svg);
                }
                &.active {
                  background-image: url(../img/canael_2026/case_icon_03_active.svg);
                }
              }

              &.case_04_button {
                background-image: url(../img/canael_2026/case_icon_04.svg);
                &:hover {
                  background-image: url(../img/canael_2026/case_icon_04_active.svg);
                }
                &.active {
                  background-image: url(../img/canael_2026/case_icon_04_active.svg);
                }
              }
            }
          }
        }

        & .contents_01_cases {
          display: block;
          inline-size: var(--fullsize_v);
          margin-inline: auto;
          position: relative;
          block-size: var(--contents_01_cases_h);

          & > li {
            display: block;
            opacity: 0;
            transition: .4s;
            position: absolute;
            inset-inline: 0;
            inset-block: 0;
            z-index: -1;

            &.active {
              opacity: 1;
              z-index: 0;
            }
          }
        }

        & .pict_wrap {
          padding-block-start: calc(var(--mb_size_base) * 0.5);

          & ul {
            & li {
              text-align: start;

              & figure {
                aspect-ratio: 1.5 / 1;
                overflow: hidden;
                margin-block-end: 0.6em;

                & img {
                  object-fit: contain;
                  max-height: 666px;
                }
              }

              & h5 {
                margin-block-end: 0.2em;
                color: var(--highlightcolor);
                font-weight: 500;
              }
            }
          }
        }
      }

      /*----------------------------------------*/

      & .point_contents_02 {
        text-align: center;
      }

      /*----------------------------------------*/

      & .point_contents_03 {
        text-align: center;
      }

      /*----------------------------------------*/

      & .point_contents_04 {
        text-align: center;
      }

      /*----------------------------------------*/

      & .point_contents_05 {
        text-align: center;

        & .spec_list {
          display: block;
          inline-size: var(--fullsize_v_ex);
          margin-inline: auto;

          & ul {
            display: grid;
            grid-template-columns: repeat(2, 1fr);
            gap: 0;
            inline-size: var(--fullsize_v_ex);
            margin-inline: auto;

            & li {
              display: block;
              box-sizing: border-box;
              inline-size: calc(var(--fullsize_v_ex) / 2);
              padding: 0;

              & h5 {
                inline-size: fit-content;
                position: relative;
                padding-inline-start: 3.0em;
                line-height: 1.5;
                margin-inline: auto;
                text-align: start;

                &::before {
                  display: block;
                  position: absolute;
                  content: "";
                  inline-size: 2.6em;
                  block-size: 2.6em;
                  inset-inline-start: 0;
                  inset-block-start: -0.25em;
                  background-repeat: no-repeat;
                  background-size: 2.6em;
                  background-position: 0 0;
                }
              }

              &.spec_01 {
                & h5 {
                  &::before {
                    background-image: url(../img/canael_2026/num-par_01.svg);
                  }
                }
              }

              &.spec_02 {
                & h5 {
                  &::before {
                    background-image: url(../img/canael_2026/num-par_02.svg);
                  }
                }
              }

              &.spec_03 {
                & h5 {
                  &::before {
                    background-image: url(../img/canael_2026/num-par_03.svg);
                  }
                }
              }

              &.spec_04 {
                & h5 {
                  &::before {
                    background-image: url(../img/canael_2026/num-par_04.svg);
                  }
                }
              }

              &::before {
                content: "";
                display: block;
                inline-size: 80%;
                block-size: 1px;
                background: var(--fontcolor_01);
                margin-inline: auto;
              }

              & .spec_wrap {
                display: block;
                box-sizing: border-box;
                padding-inline: 2.4em;
                margin-block: 2.4em;
                border-inline-end: solid 1px var(--fontcolor_01);
              }

              &.spec_01 {
                &::before {
                  background: transparent;
                }
              }

              &.spec_02 {
                &::before {
                  background: transparent;
                }
                & .spec_wrap {
                  border-inline-end: none;
                }
              }

              &.spec_04 {
                & .spec_wrap {
                  border-inline-end: none;
                }
              }
            }
          }
        }
      }

      /*----------------------------------------*/

    }

    /*------------------------------------------*/

    & #canael_cta {
      display: block;
      inline-size: 100%;
      background: #eeeeee;

      & .cta_wrap {
        inline-size: var(--fullsize_v);
        padding-block: 88px;
        text-align: center;
        margin-inline: auto;
      }

      & .cta_title {
        inline-size: 512px;
        margin-inline: auto;
        padding-block-end: 40px;
      }

      & figure {
        inline-size: 100%;
        margin-inline: auto;
        padding-block-end: 50px;
      }

      & .cta_button {
        padding-block-end: 45px;

        & a {
          font-family: "Noto Sans JP", sans-serif;
          display: block;
          color: #fff;
          background: #717071;
          inline-size: 512px;
          font-size: 1.2em;
          line-height: 78px;
          margin-inline: auto;

          & > span {

            &.material-symbols-outlined {
              vertical-align: sub;
              font-size: 1.2em;
            }
          }
        }
      }

      & .cta_note {
        font-family: "Noto Serif JP", serif;
        font-size: 1.2em;
        line-height: 1.4;
      }
    }

    /*------------------------------------------*/

    & #cta_other {
      display: block;
      inline-size: 100%;

      & .cta_other_wrap {
        inline-size: var(--fullsize_v);
        padding-block: 44px 88px;
        text-align: center;
        margin-inline: auto;
      }

      & .cta_other {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        gap: 28px;
        margin-inline: auto;

        & li {
          display: block;
          inline-size: 100%;

          & a {
            display: block;
            box-sizing: border-box;
            inline-size: 100%;
            margin: 0;
            padding-inline: 1.4em;
            padding-block: 0.4em;
            background: var(--highlightcolor);
            color: #fff;
            line-height: 78px;
          }
        }

        & span {

          &.material-symbols-outlined {
            vertical-align: sub;
            font-size: 1.2em;
          }
        }
      }
    }

    /*------------------------------------------*/

  }

/************************************************/

@media screen and (width <= 768px) {

  .canael_2026 {
    font-size: var(--fontsize_sp);

    /*------------------------------------------*/

    & #canael_mv {

      & .mv_wrap {
        inline-size: var(--mv_size_h_sp);
        block-size: var(--mv_size_v_sp);
      }

      & h1 {
        inline-size: calc(var(--mv_size_h_sp) * 0.427 * 1.5);
        block-size: calc(var(--mv_size_h_sp) * 0.178 * 1.5);
      }

      & ul {
        grid-template-columns: repeat(2, 1fr);

        & li {
          inline-size: calc(var(--mv_size_h_sp) / 2);
          block-size: calc(var(--mv_size_v_sp) / 2);

        }
      }
    }

    /*------------------------------------------*/

    & #canael_desc {

      & .desc_wrap {
        overflow: hidden;
      }

      & strong {
        padding-block: 15vw 18vw;
        font-size: 1.4em;
      }

      & .desc_image {
        margin-inline: -28vw;

        &::after {
          inline-size: 80vw;
        }
      }
    }

    /*------------------------------------------*/

    & #canael_points {

      & .points_wrap {
        padding-block: 15vw 18vw;
      }

      /*----------------------------------------*/

      & h2 {
        inline-size: calc(var(--mv_size_h_sp) * 0.512 * 1.2);
        block-size: calc(var(--mv_size_h_sp) * 0.045 * 1.2);
        margin-block: 0 8vw;
      }

      /*----------------------------------------*/

      & .points_nav_fix {
        margin-inline: auto 0;
        margin-block-end: -18vw;
        padding-block-start: 68px;
        transform: scale(1.0);

        & > ul {
          inline-size: calc(var(--points_nav_fix_size_sp) * 5 + 4px);
          gap: 1px;
          margin-inline: auto 0;

          & li {
            inline-size: var(--points_nav_fix_size_sp);
            block-size: var(--points_nav_fix_size_sp);
            background: unset;
            padding: 0;
            opacity: 0.6;
            transition: 0.3s;

            & a {
              display: block;
              inline-size: var(--points_nav_fix_size_sp);
              block-size: var(--points_nav_fix_size_sp);
              background-repeat: no-repeat;
              background-position: center center;
              background-size: contain;
            }

            & .title {
              display: none;
            }

            &.point_01 {
              & a {
                background-image: url(../img/canael_2026/nav_num_01.svg);
              }
            }

            &.point_02 {
              & a {
                background-image: url(../img/canael_2026/nav_num_02.svg);
              }
            }

            &.point_03 {
              & a {
                background-image: url(../img/canael_2026/nav_num_03.svg);
              }
            }

            &.point_04 {
              & a {
                background-image: url(../img/canael_2026/nav_num_04.svg);
              }
            }

            &.point_05 {
              & a {
                background-image: url(../img/canael_2026/nav_num_05.svg);
              }
            }

            &:hover {
              opacity: 1.0;
            }

            &.active {
              background: unset;
              color: unset;
              opacity: 1.0;
            }
          }
        }
      }

      /*----------------------------------------*/

      & .points_nav {
        margin-block-end: 20vw;

        & > ul {
          grid-template-columns: repeat(2, 1fr);
          gap:1%;
          inline-size: 90%;

          & li {
            padding-block-end: 3vw;

            & .title {
              font-size: 3.5vw;
            }

            & .text {
              font-size: 2.4vw;
            }

            & .more {
              font-size: 3.2vw;

              &::before {
                block-size: 0;
                margin-block: 0;
              }

              &::after {
                border-right: 2vw solid transparent;
                border-left: 2vw solid transparent;
                border-top: 1vw solid var(--vividcolor);
                margin-block: 0.5vw 3vw;
              }
            }
          }
        }
      }

      /*----------------------------------------*/

      & .point_anchor {
        block-size: var(--point_head_si_size_sp);
      }

      & .point_head {
        block-size: var(--point_head_si_size_sp);

        &::before {
          block-size: var(--point_head_si_size_sp);
        }

        & h3 {
          font-size: 1.2em;
          padding-inline-start: calc(var(--point_head_si_size_sp) * 1.2);
        }

        &::before {
          inline-size: var(--point_head_si_size_sp);
          block-size: var(--point_head_si_size_sp);
        }

        &::after {
          display: none;
        }

      }

      /*----------------------------------------*/

      & .point_contents {
        padding-block: 8vw 16vw;

      }

      /*----------------------------------------*/

      & .point_contents_01 {

        & .contents_01_nav {
          gap: var(--point_nav_gap_sp);
          inline-size: var(--point_nav_size_sp);
          transform: translateY(calc(var(--point_nav_gap_sp) * -2.9));
          margin-block-start: calc(var(--point_nav_gap_sp) * 5.8);

          & li {

            & > a {
              display: block;
              inline-size: calc((var(--point_nav_size_sp) - (var(--point_nav_gap_sp) * (4 - 1))) / 4);
              block-size: calc((var(--point_nav_size_sp) - (var(--point_nav_gap_sp) * (4 - 1))) / 4);
            }
          }
        }

        & .contents_01_cases {
          inline-size: var(--fullsize_v_sp);
          block-size: var(--contents_01_cases_h_sp);
        }

        & .pict_wrap {
          padding-block-start: calc(var(--mb_size_base_sp) * 0.5);

          & ul {
            & li {
              & figure {
                & img {
                  max-height: 55vw;
                }
              }
            }
          }
        }
      }

      /*----------------------------------------*/

      & .point_contents_02 {

        & .time_pfmc_fig {
          overflow: scroll;

          & figure {
            inline-size: 240vw;
            border: solid 1px rgba(0, 0, 0, 0.5);
          }
        }

        & .text_sss {

          &::before {
            display: block;
            content: " ";
            inline-size: 80%;
            block-size: 1px;
            background-color: var(--fontcolor_01);

            margin-inline: auto;
            margin-block: 16px;
          }
        }
      }

      /*----------------------------------------*/

      & .point_contents_03 {
      }

      /*----------------------------------------*/

      & .point_contents_04 {
      }

      /*----------------------------------------*/

      & .point_contents_05 {

        & .spec_list {
          inline-size: var(--fullsize_v_ex_sp);

          & ul {
            grid-template-columns: repeat(1, 1fr);
            inline-size: var(--fullsize_v_ex_sp);

            & li {
              inline-size: calc(var(--fullsize_v_ex_sp));

              & .spec_wrap {
                border-inline-end: none;
              }

              &.spec_02 {
                &::before {
                  background: var(--fontcolor_01);
                }
              }
            }
          }
        }
      }

      /*----------------------------------------*/

    }

    /*------------------------------------------*/

    & #canael_cta {

      & .cta_wrap {
        inline-size: var(--fullsize_v_sp);
        padding-block: 15vw;
      }

      & .cta_title {
        inline-size: 74%;
        padding-block-end: 4vw;
      }

      & figure {
        inline-size: 100%;
        padding-block-end: 5vw;
      }

      & .cta_button {
        padding-block-end: 4.5vw;

        & a {
          inline-size: 74vw;
          line-height: 14vw;

          & > span {

            &.material-symbols-outlined {
            }
          }
        }
      }

      & .cta_note {
        font-size: 1.0em;
      }
    }

    /*------------------------------------------*/

    & #cta_other {

      & .cta_other_wrap {
        inline-size: var(--fullsize_v_sp);
        padding-block: 8vw 15vw;
      }

      & .cta_other {
        grid-template-columns: repeat(1, 1fr);
        gap: 3vw;
        inline-size: 74vw;

        & li {

          & a {
            line-height: 10vw;
          }
        }

        & span {

          &.material-symbols-outlined {
          }
        }
      }
    }

    /*------------------------------------------*/

  }

}

/************************************************/

  .contents_01_cases {

    & .ideal_wrap {
      inline-size: var(--fullsize_v);
      margin-inline: auto;

      & .profile {
        inline-size: 100%;

        & ul {
          display: grid;
          grid-template-columns: repeat(3, 1fr);
          gap: 0;

          & li {
            display: block;
            text-align: justify;

            &:nth-of-type(1) {
              grid-column: 1 / 2;
              grid-row: 1 / 4;
            }

            &:nth-of-type(2) {
              grid-column: 2 / 4;
              grid-row: 1 / 2;
              justify-items: start;
              align-content: end;
            }

            &:nth-of-type(3) {
              grid-column: 2 / 4;
              grid-row: 2 / 4;
              justify-items: start;
            }
          }
        }
      }

      & .likethis {
        position: relative;
        inline-size: fit-content;
        margin-inline: auto;
        margin-block-end: 34px;
        padding-inline-start: 220px;

        &::before {
          position: absolute;
          inset-inline-start: 0;
          inset-block-start: -30px;
          display: inline-block;
          content: "";
          inline-size: 180px;
          block-size: 180px;
          background-image: url(../img/canael_2026/case_pict_01.svg);
          background-size: contain;
          background-position: center center;
          background-repeat: no-repeat;
        }

        & ul {
          inline-size: fit-content;

          & li {
            inline-size: fit-content;
            color: #53a4b2;
            text-align: start;
            font-weight: 700;
          }
        }
      }

      & .exterior {
        inline-size: 80%;
        margin-inline: auto;
        padding-block-end: 1.8em;
      }

      & .feeling_wrap {
        inline-size: 60%;
        margin-inline: auto;
        margin-block-start: 50px;
      }

      & .feeling {
        display: block;
        padding: 1.0em 1.4em;
        border: solid 2px var(--vividcolor);
        text-align: start;
        position: relative;
        margin-inline-start: 130px;

        &::before {
          position: absolute;
          inset-inline-start: -150px;
          inset-block-start: -55px;
          display: inline-block;
          content: "";
          inline-size: 180px;
          block-size: 180px;
          background-image: url(../img/canael_2026/case_pict_02.svg);
          background-size: contain;
          background-position: center center;
          background-repeat: no-repeat;
        }
      }

      & .adddata {
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        gap: 20px;

        & .feeling_wrap {
          inline-size: 100%;
          grid-column: 1 / 3;
        }

        & .data {
          grid-column: 3 / 4;
        }
      }
    }
  }

  /**********************************************/

@media screen and (width <= 768px) {

  .contents_01_cases {

    & .ideal_wrap {
      inline-size: var(--fullsize_v_sp);

      & .profile {
        padding-block-end: 5vw;

        & ul {
          grid-template-columns: repeat(3, 1fr);

          & li {

            &:nth-of-type(1) {
              grid-column: 1 / 2;
              grid-row: 2 / 4;
            }

            &:nth-of-type(2) {
              grid-column: 1 / 4;
              grid-row: 1 / 2;
              justify-items: center;
            }

            &:nth-of-type(3) {
              grid-column: 2 / 4;
              grid-row: 2 / 4;
            }
          }
        }
      }

      & .likethis {
        margin-block-end: 6vw;
        padding-inline-start: 22vw;

        &::before {
          inset-inline-start: -2vw;
          inset-block-start: -3vw;
          inline-size: 22vw;
          block-size: 22vw;
        }
      }

      & .exterior {
        inline-size: 90%;
      }

      & .feeling_wrap {
        inline-size: 100%;
        margin-block-start: 2vw;
      }

      & .feeling {
        margin-inline-start: 12vw;

        &::before {
          inset-inline-start: -17vw;
          inset-block-start: -6vw;
          inline-size: 22vw;
          block-size: 22vw;
        }
      }

      & .adddata {
        display: grid;
        grid-template-columns: repeat(1, 1fr);
        gap: 2vw;

        & .feeling_wrap {
          inline-size: 100%;
          grid-column: 1 / 2;
        }

        & .data {
          grid-column: 1 / 2;
          inline-size: 90%;
          margin-inline: auto;
          padding-inline-start: 21%;
        }
      }
    }
  }

}

/************************************************/

/*
  body {
    height: 50vh;
  }

  .points_nav_fix {
    transform-origin: bottom; /* 下部を変形の基準にしておく

    /* スクロールアニメーションの設定 
    animation: grow-progress linear; /* アニメーションを指定。イージングはlinear
    animation-timeline: scroll();
  }

@keyframes grow-progress {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}
*/

/************************************************/

.material-symbols-outlined {
  font-variation-settings:
  'FILL' 0,
  'wght' 0,
  'GRAD' 0,
  'opsz' 24
}