/* スマートフォン用 */
@media screen and (max-width: 767px) {}
/* タブレット用 */
@media screen and (max-width: 1023px) {}
:root {
  --fsize1: min(5.0vw , 4.8rem);
  --fsize2: min(4.2vw , 3.6rem);
  --fsize3: min(3.8vw , 2.8rem);
  --fsize4: min(3.75vw , 1.6rem);

  --c_gold: #b8a451;
  --c_orange:#f15a24;
  --c_yellow:#ffff64;
}
.pc{
  @media screen and (max-width: 767px) {
    display: none;
  }
}
.sp{
  @media screen and (min-width: 768px) {
    display: none !important;
  }
} 
 body{
  padding: 0;
  margin: 0;
  font-size: var(--fsize4);
 }
    * {
  font-family:YakuHanJP, "Noto Sans JP", sans-serif;
  font-weight: 400;
  font-style: normal;
  line-height: 1.5;
    }
.footer{
  position: relative;
  z-index: 5 !important;
}
h2{
  text-align: center;
  font-size: var(--fsize1);
  margin-bottom: 2%;
}
section{
  position: relative;
  z-index: 3;
}
img{
  height: auto;
}
.main a:hover{
  opacity:0.6;
}
.inner{
  width: 1000px;
/* スマートフォン用 */
@media screen and (max-width: 767px) {
  width: 96%;
}
/* タブレット用 */
@media screen and (max-width: 1023px) {
  width: 96%;
  max-width: 1000px;
}
  margin: 0 auto;
}
.main{
  position: relative;
}
.uicolor{
  display:block;
  border-radius: 10px;
  text-align: center;
  color: #fff;
  background-image:linear-gradient(15deg, #72a1c0, #29ab9f, #29ab9f) ;
  padding: 3% 0;
  filter: drop-shadow(2px 2px 3px rgba(0,0,0,0.3));
}
.subuicolor{
  display:block;
  border-radius: 10px;
  text-align: center;
  background-image:linear-gradient(15deg, #d4e3ec, #bee6e2) ;
  padding: 2% 0;
  filter: drop-shadow(2px 2px 3px rgba(0,0,0,0.3));
}
.mv{
  background-image: url(../images/reform/mv_bg.webp), url(../images/reform/bg_particle.png);
  background-blend-mode: multiply;
  background-repeat: no-repeat , repeat;
  background-size: cover, auto;
  background-position: center center;
  min-height:calc(100vh - 140px);
  position: relative;
  overflow: hidden;
  z-index:5;
  @media screen and (max-width: 767px) {
    min-height:auto;
  }
/*  @media screen and (max-width: 64em) {
  min-height:inherit;
  box-sizing: border-box;
  padding-bottom: 38%;
  }
  */
  p.copy{
    text-align: center;
    max-width: 80%;
    width: 700px;
    display: block;
    margin-right: auto;
    margin-left: auto;
    padding: 30px 0 20px;
    z-index: 2;
    position: relative;
    @media screen and (max-width: 1023px) {
      padding: 8% 0 4%;
    }
  }
  h1{
    text-align: center;
    width: min(30%, 280px);
    margin-right: auto;
    margin-left: auto;
    color: #5c68a8;
    font-size: min(1.6vw , 1.7rem);
    margin-bottom:-160px;
    position:relative;
    z-index:2;
    @media screen and (max-width: 1023px) {
      margin-bottom:-20%;
		font-size: min(2.4vw , 2.4rem);
    }
    span{
      padding-top: 10px;
      display: block;
    }
    & + p{
      text-align: center;
      background-image: url(../images/reform/mv_ba.webp);
      background-repeat: no-repeat;
      background-position: center center;
      background-size: min(120%, 1250px); auto;
      padding: 200px 0 80px 0;
      margin-bottom: 2%;
      position:relative;
      z-index:1;
      img{
        width: 276px;
      }
      @media screen and (max-width: 1023px) {
        background-image: url(../images/reform/sp_mv_ba.webp);
        padding: 23% 0 25% 0;
        background-position: center bottom;
        img{
          width: 40%;
        }
      }
    }
  }
  .strongpoint{
    display: flex;
    flex-wrap: nowrap;
    gap: 20px;
    justify-content: flex-end;
    max-width: 80%;
    margin-left: auto;
    margin-right: auto;
    padding-bottom: 12%;
    position: relative;
    z-index: 2;
    @media screen and (max-width: 1023px) {
      max-width: 100%;
      gap:2%;
    }
    @media screen and (max-width: 767px) {
      flex-wrap: wrap;
      gap:8px 2% ;
      justify-content: center;
    }
    li{
      width: calc((100% - 40px) / 3);
      display: flex;
      align-items: self-end;
      filter: drop-shadow(2px 2px 3px rgba(0,0,0,0.3));
      @media screen and (max-width: 767px) {
        width: calc((100% - 4%) / 2);
      }
      img{
        width: 100%;
      }
    }
  }
  .downs{
    position: absolute;
    width: 100%;
    min-height:calc(100vh - 140px);
    pointer-events: none;
    top: 0;
    .down{
      background-repeat: no-repeat;
      background-size: 100% auto;
      background-position: center;
      mix-blend-mode: screen;
      position: absolute;
      z-index: 1;
    }
    .downl{
      background-image: url(../images/reform/down_left.webp);
      background-size: auto 100%;
      background-position: left center;
      width: 50vw;
      min-height:100vh;
      left: 0;
      top: 0;
      position: absolute;
      @media screen and (max-width: 767px) {
        transform: rotate(90deg);
        background-position: bottom left;
        width: 86vh;
        height: 100vw;
        min-height: 100vw;
        background-size: auto 100%;
        transform-origin: left top;
        top: 0vw;
        left: 100vw;
      }
    }
    .downr{
      background-image: url(../images/reform/down_right.webp);
      background-size: auto 100%;
      background-position: bottom right;
      width: 50vw;
      min-height:calc(100vh);
      right: 0;
      top: 0;
      @media screen and (max-width: 767px) {
        transform: rotate(90deg);
        background-position: bottom right;
        width: 86vh;
        height: 100vw;
        min-height: 100vw;
        background-size: auto 100%;
        transform-origin: left top;
        top: 0vw;
        left: 100vw;
      }
    }
    .down01{
      animation: fuwafuwa 21s ease-in-out infinite alternate;
      background-image: url(../images/reform/down01.webp);
      width: 10vw;
      height: 10vw;
      left: 10%;
      top: 8%;
      @media screen and (max-width: 767px) {
        width: 15vw;
        height: 15vw;
        left: 10%;
        top: 15%;
      }
    }
    .down02{
      animation: fuwafuwa 18s ease-in-out infinite alternate;
      background-image: url(../images/reform/down02.webp);
      width: 12vw;
      height: 12vw;
      right: 6%;
      bottom: 2%;
      transform: rotate(88deg);
      @media screen and (max-width: 767px) {
      }
    }
    .down03{
      animation: fuwafuwa 28s ease-in-out infinite alternate;
      background-image: url(../images/reform/down03.webp);
      width: 8vw;
      height: 8vw;
      right: 15%;
      transform: rotate(30deg);
      top: 8%;
      @media screen and (max-width: 767px) {
        width: 10vw;
        height: 10vw;
        right: 15%;
        top: 12%;
      }
    }
    .down04{
      animation: fuwafuwa 22s ease-in-out infinite alternate;
      background-image: url(../images/reform/down01.webp);
      width: 10vw;
      height: 10vw;
      left: 22%;
      top: 54%;
      transform: rotate(180deg);
      filter: blur(3px);
    }
    .down05{
      animation: fuwafuwa 36s ease-in-out infinite alternate;
      background-image: url(../images/reform/down02.webp);
      width: 8vw;
      height: 8vw;
      left: 12%;
      bottom: 13%;
      transform: rotate(294deg);
    }
    .down06{
      animation: fuwafuwa 26s ease-in-out infinite alternate;
      background-image: url(../images/reform/down03.webp);
      width: 13vw;
      height: 13vw;
      right: 16%;
      bottom: 29%;
      transform: rotate(59deg);
      filter: blur(3px);
    }
    .down07{
      animation: fuwafuwa 20s ease-in-out infinite alternate;
      background-image: url(../images/reform/down02.webp);
      width: 16vw;
      height: 16vw;
      left: 13%;
      top: -15%;
      transform: rotate(240deg);
      filter: blur(2px);
      @media screen and (max-width: 767px) {
        width: 18vw;
        height: 18vw;
        left: 13%;
        top: 36%;
      }
    }
  }
}/* mv */
/* 羽毛アニメーション */
@keyframes fuwafuwa {
  0% {
    transform:translate(0, 0) rotate(-6deg);
  }
  50% {
    transform:translate(0, -15px) rotate(0deg) ;
  }
  100% {
    transform:translate(0, 0) rotate(-6deg);
  }
}

.reformnav{
  position:absolute;
  bottom:20px;
  width:100%;
  z-index:3;
  height:60px;
    @media screen and (max-width: 767px) {
    height:auto;
    margin-bottom:2%;
    position:relative;
  }
  &.fixed{
    position: fixed;
    top: 100px;
    z-index: 3;
    @media screen and (max-width: 767px) {
      position:relative;
      top: inherit;
      }
  }
  nav{
    border-radius: 10px;
    background-color: #fff;
    box-shadow:2px 2px 3px rgba(0,0,0,0.2);
      @media screen and (max-width: 767px) {
      background-color:transparent;
      box-shadow:none;
    }
    & > ul{
      display: flex;
      justify-content:space-around;
      padding:5px 0;

      @media screen and (max-width: 767px) {
        flex-wrap: wrap;
     gap:5px 1%;
      }
      & > li{
        text-align: center;
        border-right:1px solid #333;
        width:100%;
        display:flex;
        flex-wrap:wrap;
        justify-content:center;
        align-items:center;
      @media screen and (max-width: 767px) {
        border-right:none;
    background-color:#fff;
    border-radius:6px;
    box-shadow:1px 1px 2px rgba(0,0,0,0.2);
      }
        &:last-child{
        border-right:none;
        }

        @media screen and (max-width: 767px) {
         &:nth-child(1),
         &:nth-child(2){
          width: 49.5%;
         }
         &:nth-child(2){
          border-right: none;
         }
         &:nth-child(3),
         &:nth-child(4),
         &:nth-child(5){
          width: calc(98% / 3);
         }
        }
        & > a{
          padding: 5px 10px;
          display: block;
          line-height: 1.2;
          font-size: 1.4rem;
          @media screen and (max-width: 767px) {
            padding: 5px 0;
          }
        }
        ul{
          display: flex;
          width:100%;
          justify-content:space-around;
          @media screen and (max-width: 767px) {
            display: block;
            padding: 0 3%;
          }
          li{
            padding:0 1px;
            box-sizing:border-box;
            width: 50%;
            @media screen and (max-width: 767px) {
              margin-bottom: 3px;
        width:100%;
            }
            a{
              font-size: 1.2rem;
              background-color: #5c68a8;
              color: #fff;
              display: block;
              padding: 2px 5px;
            }
          }
        }
      }
    }
  }
}
.lead{
  padding-bottom:11%;
  margin-bottom: -11%;
  background-image:url(../images/reform/lead_footbg.svg);
  background-repeat:no-repeat;
  background-position:bottom;
  background-size:100% auto;
  filter: drop-shadow(2px 2px 3px rgba(0,0,0,0.3));
  z-index: 4;
  position: relative;
  .leadcontainer{
  padding-top: 50px;
  background-color: #f6f6f8;
/*  border-radius: 0 0 100% 100% / 0 0 100% 100%;
  box-shadow:2px 2px 2px rgba(0,0,0,0.3); */
    .inner{
      & > div{
        display:flex;
        position:relative;
        &:after{
          content: "";
          background-image: url(../images/reform/lead_futon.webp);
          background-repeat: no-repeat;
          background-size: 100% auto;
          width: 1px;
          padding-left: 70%;
          padding-top: 24%;
          position: absolute;
          left: -7%;
          bottom: -8%;
        }
        h2{
          font-size: var(--fsize3);
          text-align:center;
          padding-top: 3%;
          width:56%;
          span{
            color: #b8a451;
            font-size: 1.6em;
          }
        }
        ul{
          width: 44%;
          background-image:linear-gradient(-115deg, #5c68a8,  #9dc0c1) ;
          border-radius: 10px;
          padding:0 0 4% 5%;
          position:relative;
          &:after{
            content: "";
            background-image: url(../images/reform/lead_arrow.webp);
            background-repeat: no-repeat;
            background-size: 100% 100%;
            width: 24%;
            padding-top: 25%;
            display: block;
            position: absolute;
            right: 30%;
            bottom: -22%;
          }
          li{
            background-image: url(../images/reform/lead_checkbox.webp);
            background-repeat: no-repeat;
            background-position: left bottom;
            background-size: 12%;
            padding: 10% 0 0 12%;
            color: #fff;
            font-size: min(2.6vw , 2.6rem);
            vertical-align: bottom;
            span{
              color: var(--c_yellow);
            }
          }
        }
        & + p{
          text-align: center;
          padding-top: 5%;
          margin-bottom: 2%;
          line-height: 1.0;
          font-size: var(--fsize2);
          color: var(--c_gold);
          span{
            font-size: 1.4em;
          }
          & + p{
            text-align: center;
            margin-bottom: 2%;
            & + ul{
              padding: 3% 0 0 20%;
              width: 100%;
              box-sizing: border-box;
              margin-bottom:3%;
              display: flex;
              flex-wrap: nowrap;
              background-image:url(../images/reform/lead_face.webp);
              background-repeat:no-repeat;
              background-size:16%;
              background-position:left bottom;
              @media screen and (max-width: 767px) {
                padding: 3% 0 0 0;
                flex-wrap: wrap;
                justify-content: flex-end;
                background-size: 30% auto;
                background-position: left 7.5% bottom 4%;
              }
              li{
                width:calc(100% / 3) ;
                text-align: center;
                padding:6px;
                box-sizing:border-box;
                @media screen and (max-width: 767px) {
                  width:calc(100% / 2) ;
                  margin-bottom: 3%;
                  padding: 0;
                }
                h3{
                  background-color: var(--c_gold);
                  border-radius: 100px;
                  padding: 10px 0;
                  color: #fff;
                  margin-bottom: 5%;
                  position:relative;
                  width: 90%;
                  margin: 0 auto 5%;
                  @media screen and (max-width: 767px) {
                    font-size: var(--fsize4);
                    padding: 4% 0;
                  }
                  &:after{
                    content: url(../images/reform/lead_baloon.webp);
                    position: absolute;
                    left: 0;
                    bottom: -35px;
                    @media screen and (max-width: 767px) {
                      transform: scale(0.4);
                      left: -2px;
                      bottom: -25px;
                    }
                  }
                }
                p{
                  @media screen and (max-width: 767px) {
                    font-size:0.9em;
                  }
                  span{
                    background-color: var(--c_yellow);
                    margin-bottom: 3%;
                  }
                  span.small{
          background-color:transparent;
                    font-size:80%;
                    margin-bottom: 3%;
                  }
                }
              }
              & + p{
                text-align: center;
                font-size: var(--fsize2);
                color: var(--c_gold);
                strong{
                  font-weight: normal;
                }
              }
            }
          }
        }
      }
    }/* inner  */
  }/* leadcontainer  */
}/* lead */

.about{
  padding-top: 13%;
  padding-bottom: 18%;
  margin-bottom: -18%;
  background-image:linear-gradient(-15deg, #b8bca2, #d9e3ca , #d9e3ca) , url(../images/reform/bg_particle.png);
  background-repeat:repeat;
  background-blend-mode: multiply;
  .outline{
    .inner{
      border-radius: 10px;
      background-color: #fff;
      padding:30px 20px;
      margin-bottom: 3%;
      @media screen and (max-width: 767px) {
        width:85%;
      }
      p{
        text-align: center;
        @media screen and (max-width: 767px) {
          text-align: left;
          margin-bottom: 5%;
        }
      }
      div{
        display: flex;
        flex-wrap: nowrap;
        justify-content:space-around;
        @media screen and (max-width: 767px) {
          flex-wrap: wrap;
        }
        & > img{
          width: 25%;
          height: auto;
          @media screen and (max-width: 767px) {
            width: 40%;
          }
        }
        ul{
          display: flex;
          flex-wrap: nowrap;
          justify-content:space-between;
          @media screen and (max-width: 767px) {
            gap:3%;
          }
          li{
            @media screen and (max-width: 767px) {
              width: calc((100% - 6%) / 3);
            }
            p{
              font-size: 0.8em;
            }
          }
        }
      }
      & + p{
        text-align: center;
        font-size: var(--fsize3);
        span{
          font-size: 1.2em;
          font-weight: bold;
        }
      }
    }/* inner */
  }/* outline */
  .strongpoint{
    ul{
      position:relative;
      li{
        &:nth-child(1){
          text-align:left ;
          background-image:url(../images/reform/about_plant.webp);
          background-repeat:no-repeat;
          background-position: left -5% bottom 40%;
          background-size: 50% auto;
          width:100%;
          padding-left:50%;
          padding-top: 7%;
          margin-bottom: 5%;
          box-sizing:border-box;
          @media screen and (min-width: 1024px) {
          height: 25vw;
          }
          @media screen and (max-width: 767px) {
            padding-left:7.5%;
            padding-bottom: 2%;
            background-position: right 60vw bottom 0;
            background-size: auto 48%;
          }
          h3{
            background-color: #fff;
            display: inline-block;
            border-radius: 10px 0 0 10px;
            text-align: left;
            box-sizing: border-box;
            margin-bottom: 2%;
            width:100%;
            @media screen and (max-width: 767px) {
              text-align: right;
              width:70%;
              margin-left: 30%;
            }
            & > span{
              color: var(--c_gold);
              font-size: var(--fsize3);
              padding:10px 30px;
              display:block;
              & > span{
                font-size: 1.4em;
              }
            }
          }
          P{
            padding:10px 30px;
            display: inline-block;
            text-align: left;
            @media screen and (max-width: 767px) {
              padding: 3% 3% 3% 40%;
            }
          }
        }
        &:nth-child(2){
          overflow: hidden;
          @media screen and (max-width: 767px) {
            width: 100%;
            padding-right: 7.5%;
          }
          h3{
            background-color: #fff;
            display: inline-block;
            border-radius: 0 10px 10px 0;
            text-align: left;
            box-sizing: border-box;
            margin-bottom: 2%;
            width:45%;
            padding-left:calc(50% - 500px);
            @media screen and (max-width: 767px) {
              width: 70%;
            }
            & > span{
              color: var(--c_gold);
              font-size: var(--fsize3);
              padding:10px 30px;
              display:block;
              & > span{
                font-size: 1.4em;
              }
            }
          }
          & > div{
            width: 1150px;
            margin: 0 auto 3%;
            display: flex;
            flex-wrap: nowrap;
            align-items: flex-end;
            justify-content: center;
            @media screen and (max-width: 1199px) {
              margin-left: calc((100% - 1150px) / 2 );
            }
            @media screen and (max-width: 767px) {
              width: 130%;
              margin-left: -15%;
              margin-bottom: 8%;
            }
            div{
              width: 600px;
              h4{
                color: #fff;
                font-size: var(--fsize2);
                font-weight: bold;
                text-shadow: 2px 2px 2px rgba(0, 0, 0, 0.6);
                padding-left: 100px;
                margin-bottom: -6%;
                @media screen and (min-width: 768px) and (max-width: 1199px) {
                  margin-left: calc((1200px - 100vw) / 2);
                  padding-left: 0;
                }
                @media screen and (max-width: 767px) {
                  padding-left: 0;
                  margin-left: 18vw;
                }
              }
              img{
                height: auto;
              }
            }
            .before{
              position:relative;
              &:after{
                content:"";
                display: block;
                background-image: url(../images/reform/about_arrow.svg);
                width: 50%;
                padding-top: 20%;
                background-repeat: no-repeat;
                background-size: 100% auto;
                position: absolute;
                right: -14%;
                bottom: 0%;
                z-index: 2;
              }
            }
            .after{
              position:relative;
              &:after{
                content:"";
                display: block;
                background-image: url(../images/reform/about_badge.webp);
                width: 185px;
                height: 185px;
                background-repeat: no-repeat;
                background-size: 100% auto;
                position: absolute;
                right:120px;
                top: -50px;
                @media screen and (max-width: 1023px) {
                  right: calc((1200px - 100vw) / 2);
                }
                @media screen and (max-width: 767px) {
                  width: 40%;
                  height: 0;
                  padding-top: 100%;
                  right: 12%;
                  top:-8vw;
                }
              }
              h4{
                margin-left: 100px;
                padding-left: 0;
                @media screen and (max-width: 767px) {
                  margin-left: 20%;
                  position: relative;
                  top:5%;
                }
              }
            }
          }
        }
      }
    }
  }/* strongpoint */
  .movie{
    .inner{
      background-color: #fff;
      border-radius: 10px 10px 0 0;
      padding: 15px 20px;
      @media screen and (max-width: 767px) {
        padding: 2%;
      }
      h3{
        text-align: center;
        font-size: var(--fsize3);
      }
    }
    @media screen and (max-width: 1023px) {
      margin-bottom: 5%;
      width: 85%;
      margin-left: auto;
      margin-right: auto;
    }
  }
}/* about */

.voice{
  padding-top: 18%;
  margin-bottom: -15%;
  text-align: center;
  background-image:url(../images/reform/voice_topbg.svg);
  filter: drop-shadow(2px 2px 3px rgba(0,0,0,0.3));
  background-repeat:no-repeat;
  background-size:100% auto;
  background-position:top center;
  .voicecontainer{
    background-color:#f3f0ec;
    padding-bottom: 20%;
  }/* voicecontainer */
  h3{
    text-align: center;
    background-color: #b8a451;
    border-radius: 10px;
    display: inline-block;
    color: #fff;
    padding: 8px 30px;
    margin: 0 auto 30px auto;
    @media screen and (max-width: 767px) {
      margin-bottom: 3%;
    }
  }
    .scroll-container {
      width: 100%;
      overflow: hidden;
      margin-bottom: 40px;
      @media screen and (max-width: 767px) {
        margin-bottom: 5%;
      }
    }
    .scroll-wrapper {
      display: flex;
      /* 各ループ速度を --duration で設定可能 */
      animation-duration: var(--duration, 50s);
      animation-timing-function: linear;
      animation-iteration-count: infinite;
      padding: 0 0 20px 0;
    }
    .scroll-set {
      display: flex;
    }
    .item {
      margin: 0 15px;
      padding: 15px 20px;
      background-color: #fff;
      border-radius: 10px;
      text-align: left;
      filter: drop-shadow(2px 2px 3px rgba(0,0,0,0.3));
      position:relative;
      width:300px;
      @media screen and (max-width: 767px) {
        width: 50vw;
        padding: 3vw 4vw;
        margin: 0 2vw;
      }
      &:after{
        content: "";
        display: block;
        clip-path: polygon(0 0, 100% 0, 0 100%);
        position:absolute;
        left: 30px;
        bottom: -14px;
        background-color: #fff;
        height: 15px;
        width: 20px;
      }
      p{
      margin: 0;
      font-size: var(--fsize4);
      color: #666;
      vertical-align:middle;
      @media screen and (max-width: 767px) {
        font-size: 1.3rem;
      }
      span{
        color: #f15a24;
        font-size:1.4em ;
        vertical-align:baseline;
        @media screen and (max-width: 767px) {
          font-size:1.2em ;
        }
      }

      }
    }
}/* voice */
.features{
  padding-top: 16%;
  position: relative;
  z-index: 4;
  background-image:url(../images/reform/features_bg03.webp),url(../images/reform/features_bg02.webp),url(../images/reform/features_bg01.webp);
  background-repeat:no-repeat,no-repeat,no-repeat;
  background-size:45% auto,40% auto,100% 100%;
  background-position:left,right top,top;
  margin-bottom: -36%;
  @media screen and (max-width: 767px) {
    background-size:45% auto,40% auto,auto 100%;
  }
  & > div{
    position:relative;
    &:after{
      position: absolute;
      content: "";
      width: 45%;
      padding-top: 60%;
      display: block;
      background-size: 100% auto;
      background-repeat:  no-repeat;
    }
    &:before{
      display: block;
      font-size: var(--fsize1);
      font-weight: bold;
      text-shadow: 2px 2px 2px rgba(0, 0, 0, 0.3);
      color: #fff;
      position: absolute;
      font-size: 8vw;
      z-index: 3;
      @media screen and (max-width: 1023px) {
        font-size: 8vw;
      }
      @media screen and (max-width: 767px) {
        left:5% !important;
      }
    }
    &.f1{
      margin-bottom:270px;
      @media screen and (max-width: 1023px) {
        margin-bottom: 15%;
      }
      @media screen and (max-width: 767px) {
        margin-bottom: 18%;
      }
      &:after{
        background-image: url(../images/reform/features_image01.webp);
        right: 57%;
        top: -125px;
        width: max(735px , 50%);
        @media screen and (max-width: 1023px) {
          width: min(50% , 50%);
          top:-2vw;
        }
        @media screen and (max-width: 767px) {
          width: 80%;
          left: 0;
          right: inherit;
          padding-top: 64%;
        }
      }
      &:before{
        content: "1";
        left: 39%;
        top: 2%;
        @media screen and (max-width: 1023px) {
          top: 12%;
        }
        @media screen and (max-width: 767px) {
          top:56%;
          font-size: 10vw;
        }
      }
      .inner{
        padding-left: min(45%, 450px);
        padding-top: min(5% , 200px);
        @media screen and (max-width: 767px) {
          padding-left: 10%;
          padding-top: 30%;
        }

        h3{
          @media screen and (max-width: 767px) {
            padding-top: 40%;
          }
        }
        a{
          background-color: #fff;
          filter: drop-shadow(2px 2px 3px rgba(0, 0, 0, 0.3));
          border-radius: 6px;
          width: 100%;
          display: inline;
          padding: 5px 20px;
          color: #29ab9f;
        }
      }
    }
    &.f2{
      margin-bottom:300px;
      @media screen and (max-width: 1023px) {
        margin-bottom: 18%;
      }
      &:after{
        background-image: url(../images/reform/features_image02.webp);
        left: 45%;
        top: -125px;
        width: max(800px , 60%);
        @media screen and (max-width: 1023px) {
          width: min(70% , 70%);
          top:-15vw;
        }
        @media screen and (max-width: 767px) {
          width: 80%;
          right: 0;
          left: inherit;
          top:-12vw;
        }
      }
      &:before{
        content: "2";
        left: 44%;
        top: -33%;
        @media screen and (max-width: 767px) {
          top:55%;
          font-size: 10vw;
        }
      }
      .inner{
        @media screen and (max-width: 767px) {
          padding-left: 10%;
          padding-top: 45%;
        }
      }
    }
    &.f3{
      @media screen and (max-width: 767px) {
        padding-bottom: 8%;
      }
      &:after{
        background-image: url(../images/reform/features_image03.webp);
        right: 57%;
        top: -125px;
        width: max(735px , 50%);
        @media screen and (max-width: 1023px) {
          width: min(50% , 50%);
          top:-2vw;
        }
        @media screen and (max-width: 767px) {
          width: 80%;
          left: 0;
          right: inherit;
          top:-12vw;
        }
      }
      &:before{
        content: "3";
        left: 39%;
        top: 4%;
        @media screen and (max-width: 767px) {
          top:35%;
          font-size: 10vw;
        }
      }
      .inner{
        padding-left: min(45%, 450px);
        padding-top: 5%;
        padding-bottom: 24%;
        @media screen and (max-width: 767px) {
          padding-left: 10%;
          padding-top: 48%;
        }
      }
    }
    .inner{
      box-sizing: border-box;
      h3{
        font-size: var(--fsize3);
        margin-bottom: 10px;
        @media screen and (max-width: 1023px) {
          font-size: 3.2vw;
        }
        @media screen and (max-width: 767px) {
          font-size: 5.0vw;
        }
      }
      p{
        margin-bottom: 3%;
        span{
          display: block;
          padding-top: 2%;
          font-size: 0.8em;
        }
      }
    }
  }
}/* features */
    @keyframes scroll-left {
      0%   { transform: translateX(0); }
      100% { transform: translateX(-50%); }
    }
    @keyframes scroll-right {
      /* 先頭にコピーを置いたので -50→0 で右へループ */
      0%   { transform: translateX(-50%); }
      100% { transform: translateX(0); }
    }

    /* ここでそれぞれの速さを秒数で設定 */
    .wrapper-1 { --duration: 80s; }
    .wrapper-2 { --duration: 120s; }
    .wrapper-3 { --duration: 120s; }
     /*   #wrapper-1 { --duration: 100s; }
    .wrapper-2 { --duration: 135s; }
    .wrapper-3 { --duration: 85s; }*/

    /* 工程 */
.process {
  z-index: 1;
  font-family: Arial, sans-serif;
  position: relative;
  background-image: linear-gradient(-15deg, #a3cee5, #cdecff);
  &:before{
    position: absolute;
    z-index: 2;
    content: "";
    display: block;
    width: 100%;
    padding-top: 12%;
    background-repeat: no-repeat;
    background-size: 100% auto;
    filter: drop-shadow(2px 2px 3px rgba(0, 0, 0, 0.3));
    background-image: url(../images/reform/process_bgtop.svg);
    background-position: top center;
  }
  .processcontainer{
    padding-top: 15%;
    position:relative;
    z-index:1;
    .bubblebg{
      overflow: hidden;
      position: relative;
      z-index: 1;
      background: linear-gradient(135deg, #cdecff 0%, #a3cee5 100%);
      opacity: 0;
      transition: opacity 1.0s ease; /* フェード効果 */
    }
    p{
      text-align: center;
      margin-bottom: 3%;
    }
    .quality{
      background-color:#fff;
      border-radius:10px;
      width:min(80% , 900px);
      margin:0 auto 5%;
      padding:20px;
      position: relative;
      z-index: 2;
      h3{
        margin-bottom: 3%;
        text-align: center;
        font-size: var(--fsize2);
      }
      ul{
        display:flex;
        flex-wrap:nowrap;
        gap:20px;
        @media screen and (max-width: 767px) {
          display: block;
        }
        li{
          width: calc((100% - 40px) / 3);
          @media screen and (max-width: 767px) {
            width: 100%;
            display: flex;
            flex-wrap: wrap;
            align-items: center;
            justify-content: space-between;
            background-color: #f2f2f2;
          }
          img{
            @media screen and (max-width: 767px) {
              width: 35%;
            }
          }
          h4{
            font-weight: bold;
            margin-bottom: 6px;
            @media screen and (max-width: 767px) {
              width: 65%;
              padding-left: 5%;
              margin-bottom: 0;
            }
          }
          p{
            text-align: left;
            @media screen and (max-width: 767px) {
              padding-bottom: 6%;
              margin-bottom: 0;
              padding-top: 2%;
              background-color: #fff;
            }
          }
        }
      }
    }/* quality */
  }/* processcontainer */




    /* サムネイル */
    .thumbnails {
      display: flex;
      justify-content: space-between;
      width:min(80% , 900px);
      gap: 4%;
      margin: 20px auto;
      position: relative;
      z-index: 2;
      &:before{
        content: "";
        display: block;
        position: absolute;
        border-top: 6px solid #29ab9f;
        width: 90%;
        left: 5%;
        top: calc(50% - 3px);
        z-index: 1;
      }
      @media screen and (max-width: 767px) {
        gap: 2%;
      }
      .thumbnail {
        position: relative;
        z-index: 2;
        width: calc((80%) / 6);
        height: auto;
        aspect-ratio: 1 / 1;
        background-color: #29ab9f;
        color: white;
        display: flex;
        align-items: center;
        text-align: center;
        justify-content: center;
        border-radius: 50%;
        cursor: pointer;
        transition: transform .3s, background-color .3s, color .3s;
        line-height: 1.2;
        font-size: var(--fsize3);
        @media screen and (max-width: 767px) {
          font-size: 3.0vw;
          width: calc((90%) / 6);
        }
      }/* thumbnail */
    }/* thumbnails */
    .thumbnail.active {
      background-color: white;
      color: #29ab9f;
      transform: scale(1.1);
      border: 4px solid #29ab9f;
      box-sizing: border-box;
    }

    /* スライダー */
    .slider-container {
      position: relative;
      width: 100%;
      overflow: hidden;
      margin: 0 auto;
      z-index: 2;
      .slider-arrow {
        position: absolute;
        top: calc(50% - 50px);
        width: 0;
        height: 0;
        border-left: 30px solid transparent;
        border-right: 30px solid transparent;
        border-top: 30px solid #fff;
        transform: translateY(-50%);
        cursor: pointer;
        transition: opacity 0.3s;
        &.left {
          left: calc(( 100% - 670px) / 2);
          transform: translateY(-50%) rotate(90deg);
          z-index: 2;
          @media screen and (max-width: 767px) {
            left: 0;
          }
        }
        &.right {
          right: calc(( 100% - 670px) / 2);
          transform: translateY(-50%) rotate(-90deg);
          @media screen and (max-width: 767px) {
            right: 0;
          }
        }
        &.disabled {
          opacity: 0;
          pointer-events: none;
        }
      }
      .slider-track {
        display: flex;
        transition: transform .5s ease;
        .slide {
          flex: 0 0 80%;
          max-width: 560px;
          margin: 0 30px;
          box-sizing: border-box;
          text-align: center;
          position:relative;
          opacity:0.3;
          transition: opacity 0.3s;
          &.active{
            opacity: 1.0;
          }
          img{
            width: 100%;
            display: block;
            background-color: #fff;
          }
          h3{
            position: absolute;
            left: 0;
            top: 20px;
            background-color: #fff;
            color: #29ab9f;
            border-radius: 0 5px 5px 0;
            padding: 5px 25px;
            font-weight: bold;
          }
          .caption {
            padding: 15px;
            font-size: 16px;
            color: #333;
          }
          .badge{
            position: absolute;
            bottom:10%;
            left: -30px;
            width: 120px;
            background-image: url(../images/reform/process_badge.svg);
            background-size: 100% auto;
            aspect-ratio: 1 / 1;
            display:flex;
            align-items:center;
            justify-content: center;
            text-align:center;
            @media screen and (max-width: 767px) {
              width: 30%;
              bottom: inherit;
              top: 40%;
            }
            p{
              font-size: min(1.4rem , 3vw);
              line-height: 1.2;
              color: #fff;
              font-weight: bold;
            }
          }
        }
      }/* slider-track */
    }/* slider-container */
    .finish{
      position: relative;
      z-index: 3;
      text-align: right;
      padding-bottom:14vw;
      .inner{
        position:relative;
        padding-top:5%;
        p{
          text-align: right;
          font-size: var(--fsize3);
          margin-bottom: 12vw;
          font-weight: bold;
        }
        &:before{
          content:"";
          background-image: url(../images/reform/about_after.webp);
          background-repeat: no-repeat;
          background-size: 100% auto;
          display: block;
          width: min(750px , 75%);
          padding-top: 48%;
          position: absolute;
          top: 0;
          right: 40%;
        }
      }
      img{
        right: 0;
        width: 55%;
        height: auto;
      }
    }
    .outro{
      position: relative;
      z-index: 2;
      text-align: right;
      padding-bottom: 5%;
      background-image: linear-gradient(180deg, rgba(255, 255, 255, 0) 11vw, rgba(255, 255, 255, 1) 11vw);
      &:before{
        position: absolute;
        z-index: 1;
        content: "";
        display: block;
        width: 100%;
        padding-top: 12%;
        background-repeat: no-repeat;
        background-size: 100% auto;
        background-image: url(../images/reform/process_bgbottom.svg);
        background-position: top center;
      }
      .oimage{
        position: relative;
        margin-bottom: -2.5rem;
        @media screen and (max-width: 767px) {
          margin-bottom: -1.5rem;
        }
        img{
          width: 55%;
          position: relative;
          z-index: 1;
          top:-19vw;
          margin-bottom: -19vw;
          @media screen and (max-width: 767px) {
            width: 58%;
          }
        }
      }
      .otxt{
        position:relative;
        z-index:2;
        .inner{
          display:flex;
          flex-wrap: nowrap;
          align-items:center;
          img{
            width: 35%;
          }
          p{
            width: 65%;
            text-align: center;
            font-size: var(--fsize2);
            color: #5c68a8;
          }
        }
      }
    }
}/* process */

    /* 背景バブル */
    .background-bubble {
      position: fixed; /* バブルを固定位置に */
      z-index: 1;
      background-repeat: no-repeat;
      background-size: 90% auto;
      background-position: center;
      opacity: 0.7;
      pointer-events: none; /* バブルがクリックイベントに影響しないように */
    }
    /* 背景バブル */
    .background-bubble2 {
      position: fixed; /* バブルを固定位置に */
      z-index: 1;
      background-repeat: no-repeat;
      background-size: 90% auto;
      background-position: center;
      opacity: 1.0;
      pointer-events: none; /* バブルがクリックイベントに影響しないように */
      mix-blend-mode: screen;
    }
    /* 各バブルのアニメーション */
    @keyframes bubbleAnimation {
      0% {
        transform: translate(0, 0) scale(1) rotate(20deg);
      }
      50% {
        transform: translate( 0 , 3vw) scale(1.1) rotate(0deg);
      }
      100% {
        transform: translate(0, 0) scale(1) rotate(20deg);
      }
    }

    /* 各バブルに異なるサイズとアニメーションのタイミングを設定 */
    .bubble1 { 
      width: 4vw; 
      height: 4vw;
      top: 60%; 
      left: 10%; 
      background-image: url(../images/reform/bubble01.svg);
      animation: bubbleAnimation 15s infinite alternate ease-in-out;
    }
    .bubble2 { 
      width: 8vw; 
      height: 8vw;
      top: 60%; 
      left: 30%; 
      animation: bubbleAnimation 14s infinite alternate ease-in-out;
      background-image: url(../images/reform/bubble02.svg);
    }
    .bubble3 { 
      width: 10vw; 
      height: 10vw;
      top: 70%; 
      left: 80%; 
      animation: bubbleAnimation 20s infinite alternate ease-in-out;
      background-image: url(../images/reform/bubble03.svg);
    }
    .bubble4 { 
      width: 5vw; 
      height: 5vw;
      top: 80%; 
      left: -2%; 
      animation: bubbleAnimation 25s infinite alternate ease-in-out;
      background-image: url(../images/reform/bubble04.svg);
    }
    .bubble5 { 
      width: 7vw; 
      height: 7vw;
      top: 40%; 
      left: 60%; 
      animation: bubbleAnimation 8s infinite alternate ease-in-out;
      background-image: url(../images/reform/bubble05.svg);
    }
    .bubble6 { 
      width: 10vw; 
      height: 10vw;
      top: 20%; 
      left: 2%; 
      animation: bubbleAnimation 10s infinite alternate ease-in-out;
      background-image: url(../images/reform/bubble02.svg);
    }


    @keyframes bubbleAnimation2 {
      0% {
        transform: translate(0, 0) scale(1) rotate(0deg);
      }
      50% {
        transform: translate( 0 , -10vw) scale(1.1) rotate(360deg);
      }
      100% {
        transform: translate(0, 0) scale(1) rotate(0deg);
      }
    }
    /* 各バブルに異なるサイズとアニメーションのタイミングを設定 */
    .bubble7 { 
      width: 6vw; 
      height: 6vw;
      top: 20%; 
      left: 30%; 
      background-image: url(../images/reform/down01.webp);
      animation: bubbleAnimation2 136s infinite alternate ease-in-out;
      @media screen and (max-width: 767px) {
        width: 17vw; 
        height: 17vw;
      }
    }
    .bubble8 { 
      width: 16vw; 
      height: 16vw;
      top: 42%; 
      left: 90%; 
      animation: bubbleAnimation2 165s infinite alternate ease-in-out;
      background-image: url(../images/reform/down03.webp);
      @media screen and (max-width: 767px) {
        width: 25vw; 
        height: 25vw;
      }
    }
    .bubble9 { 
      width: 5vw; 
      height: 5vw;
      top: 75%; 
      left: 10%; 
      animation: bubbleAnimation2 120s infinite alternate ease-in-out;
      background-image: url(../images/reform/down02.webp);
      @media screen and (max-width: 767px) {
        width: 12vw; 
        height: 12vw;
      }
    }
    .bubble10 { 
      width: 18vw; 
      height: 18vw;
      top: 90%; 
      left: 30%; 
      animation: bubbleAnimation2 145s infinite alternate ease-in-out;
      background-image: url(../images/reform/down01.webp);
      @media screen and (max-width: 767px) {
        width: 20vw; 
        height: 20vw;
      }
    }
    .bubble11 { 
      width: 10vw; 
      height: 10vw;
      top: 60%; 
      left: 60%; 
      animation: bubbleAnimation2 92s infinite alternate ease-in-out;
      background-image: url(../images/reform/down03.webp);
      @media screen and (max-width: 767px) {
        width: 14vw; 
        height: 14vw;
      }
    }
    .bubble12 { 
      width: 14vw; 
      height: 14vw;
      top: 30%; 
      left: 15%; 
      animation: bubbleAnimation2 105s infinite alternate ease-in-out;
      background-image: url(../images/reform/down02.webp);
      @media screen and (max-width: 767px) {
        width: 18vw; 
        height: 18vw;
      }
    }

    /* コース紹介 */
.cource{
  background-color:#f3f0ec;
  padding-top: 36%;
  @media screen and (max-width: 767px) {
    padding-top:28%;
  }
  h2{
    margin-bottom: 100px;
  }
  .inner{
    & > div{
      border-radius: 10px;
      padding: 20px 5%;
      position:relative;
      background-repeat:repeat;
      background-blend-mode: multiply;
      &:before{
        content: "＼　こんな方にオススメ ／ ";
        position: relative;
        display: block;
        text-align: center; 
        top:-100px;
        font-size: var(--fsize3);
      }
      & > ul{
        position:relative;
        top:-90px;
        margin-bottom:90px;
        @media screen and (max-width: 767px) {
          margin-bottom: 18vw;
        }
        li{
          width: 40%;
          text-align:center;
          background-color: var(--c_yellow);
          filter: drop-shadow(2px 2px 3px rgba(0, 0, 0, 0.3));
          border-radius: 100px;
          display: block;
          padding: 15px 30px;
          position:absolute;
          @media screen and (max-width: 767px) {
            width: 80%;
            padding: 3% 2%;
          }
          span{
            @media screen and (max-width: 1023px) {
              font-size: 1.7vw;
            }
            @media screen and (max-width: 767px) {
              font-size: 3.6vw;
            }
          }
          &:nth-child(1){
            top: 0;
            left: 10%;
            @media screen and (max-width: 767px) {
              left: 0;
            }
          }
          &:nth-child(2){
            top: 20px;
            left: 51%;
            @media screen and (max-width: 767px) {
              top:12vw;
              left: 23%;
              &:after{
                left: 56vw;
              }
            }
          }
          &:nth-child(3){
            top: 85px;
            left: 21%;
            @media screen and (max-width: 767px) {
              top:24vw;
              left: 5%;
            }
          }
          &:after{
            content: "";
            display: block;
            clip-path: polygon(40% 0, 100% 0, 0 100%);
            position: absolute;
            left: 120px;
            bottom: -14px;
            background-color: var(--c_yellow);
            height: 15px;
            width: 20px;
            @media screen and (max-width: 767px) {
              left: 10vw;
            }
          }
        }
        & + h3{
          text-align: center;
          margin-bottom:15px;
          span{
            display: block;
            padding:0 0 5px 0;
            & + span{
              font-size: var(--fsize3);
              display: inline-block;
              padding-left: 2.5em;
              @media screen and (max-width: 767px) {
                font-size: 1.3em;
              }
            }
          }
        }
      }
      .cources{
        li:last-child{
          margin-bottom: 0;
        }
        & > span{
          text-align: right;
          display: block;
          font-size: 0.8em;
          margin-bottom: 3%;
        }
        & > a{
          font-size: var(--fsize3);
        }
        .cource_name{
          h4{
            display:flex;
            align-items:center;
            @media screen and (max-width: 767px) {
              display: block;
              text-align: center;
              width: 90%;
            }
            span{
              &:nth-child(1){
                background-color: #29ab9f;
                border-radius: 6px;
                color: #fff;
                font-size: 0.8em;
                text-align: center;
                padding: 5px 10px;
                line-height: 1.2;
                display: block;
                min-width: 240px;
                @media screen and (max-width: 767px) {
                  width: 100%;
                }
              }
              &:nth-child(2){
                padding-left: 20px;
                @media screen and (max-width: 767px) {
                  padding-left: 0;
                }
              }
            }
          }
        }/* cource_name */
        .cource_exp{
          .outline{
            display: flex;
            justify-content:space-between;
            align-items:end;
            margin-bottom: 30px;
            @media screen and (max-width: 767px) {
              display: block;
            }
            p{
              width: 70%;
              @media screen and (max-width: 767px) {
                width: 100%;
                margin-bottom: 3%;
              }
            }
            .data{
              .size{
                display:flex;
                flex-wrap:wrap;
                justify-content: right;
                gap:4px;
                @media screen and (max-width: 767px) {
                  justify-content: flex-end;
                }
                li{
                  background-color: var(--c_gold);
                  color: #fff;
                  font-weight: bold;
                  font-size: var(--fsize4);
                  text-align: center;
                  margin-bottom: 3px;
                  font-size: 0.8em;
                  width: calc(50% - 2px);
                  display: block;
                }
              }
              .price{
                color: var(--c_gold);
                font-weight: bold;
                font-size: var(--fsize2);
         line-height:1.1;
         margin-bottom:10px;
         text-align:right;
                @media screen and (max-width: 767px) {
                  font-size: var(--fsize1);
                  text-align: right;
                }
          & + .uicolor{
          padding-left:5px;
          padding-right:5px;
          }
                span{
                  font-size: 0.4em;
          &.plus{
            display:block;
            @media screen and (max-width: 767px) {
             display:inline-block;
            }
          }
                }
              }
            }/* data */
          }/* outline */
          .gore{
            margin-bottom:30px;
            h5{
              margin-bottom: 30px;
            }
            ul{
              display: flex;
              flex-wrap: wrap;
              gap:30px;
              li{
                width: 100%;
                display: flex;
                flex-wrap: nowrap;
                align-items: center;
                justify-content:space-between;
                @media screen and (max-width: 767px) {
                  display: block;
                  width: 100%;
                }
                h6{
                  background-color: #af194a;
                  font-size: 1.6rem;
                  font-weight: bold;
                  aspect-ratio: 1 / 1;
                  display: block;
                  color: #fff;
                  border-radius: 100%;
                  width: 12%;
                  display: flex;
                  align-items: center;
                  justify-content: center;
                  text-align: center;
                  @media screen and (max-width: 767px) {
                    width: 100%;
                    border-radius: 4px;
                    aspect-ratio: auto;
                    margin-bottom: 2%;
                    padding: 2% 0;
                  }
                }
                p{
                  width: 42%;
                  @media screen and (max-width: 767px) {
                    width: 100%;
                    margin-bottom: 2%;
                  }
                }
                img{
                  width: 40%;
                  @media screen and (max-width: 767px) {
                    width: 100%;
                  }
                }
              }
            }
          }/* gore */
          .quilt,
          .material{
            background-color: #fff;
            padding: 10px;
            display: flex;
            flex-wrap: nowrap;
            justify-content:space-between;
			align-items: flex-start;
            @media screen and (max-width: 767px) {
              display: block;
            }
            .movie,
            img{
              width: 50%;
              @media screen and (max-width: 767px) {
                width: 100%;
              }
              & + div{
                width: 45%;
                @media screen and (max-width: 767px) {
                  width: 100%;
                }
                h5{
                  font-size: var(--fsize3);
                  font-weight: bold;
                  margin-bottom: 2%;
                }
                ul{
                  padding:2% 0;
                  li{
                    color: var(--c_gold);
                  }
                }
                p{
                  span{
                    background-color: var(--c_gold);
                    color: #fff;
                    font-size: var(--fsize3);
                    padding: 5px 15px;
                    display: inline-block;
                    margin-top: 2%;
                    @media screen and (max-width: 767px) {
                      display: block;
                      text-align: center;
                    }
                  }
                }
              }
            }
            .movie{
             img{
             width:100%;
             }
            }
          }/* quilt,material */
          .quilt{
            margin-bottom: 15px;
            @media screen and (max-width: 767px) {
              margin-bottom: 3%;
            }
            .hadakake{
              display: flex;
              gap: 20px;
              width:100%;
              @media screen and (max-width: 767px) {
                flex-wrap: wrap;
                gap: 2vw;
              }
              h5{
                background-color: #f2f2f2;
                padding: 3% 0;
                width:calc((100% - 20px) / 2) ;
                text-align: center;
                font-size: var(--fsize4);
                @media screen and (max-width: 767px) {
                  width: 100%;
                }
              }
            }
          }
        }/* cource_exp */
        .doc{
          display: flex;
          width: 100%;
          gap:2%;
          margin-bottom:2%;
          a{
            display: block;
            width: 49%;
          }
        }
      }/* cources */
    }
    .cource_online{
      background-image:linear-gradient(-15deg, #b8bca2, #d9e3ca , #d9e3ca) , url(../images/reform/bg_particle.png);
      margin-bottom: 140px;
      h3{
        span + span{
          background-image: url(../images/reform/icon_online.svg);
        }
      }
    }
    .cource_shop{
      background-image:linear-gradient(-15deg, #94bdd3, #bcdeed , #bcdeed) , url(../images/reform/bg_particle.png);
      h3{
        span + span{
          background-image: url(../images/reform/icon_shop.svg);
        }
      }
    }

  }/* inner */
  .cource_item { 
    background-color: #fff;
    border-radius: 10px;
    box-shadow: 2px 2px 3px rgba(0, 0, 0, 0.3);
    margin-bottom: 20px;
    &.recommend{
      position:relative;
      &:after{
        content: "";
        width: 72px;
        display: block;
        padding-top: 72px;
        background-image: url(../images/reform/cource_badge.webp);
        background-size: 100% auto;
        position: absolute;
        top: -20px;
        left: -4%;
        @media screen and (max-width: 767px) {
          width: 18%;
          padding-top: 18%;
          top: -5vw;
          left: -5%;
        }
      }
    }
    &:last-child {
      border-bottom: none;
      margin-bottom: 20px;
      @media screen and (max-width: 767px) {
        margin-bottom: 0;
      }
    }
  }

}
  /* コース名 */
  .accordion_tit {
    padding: 0;
    cursor: pointer;
    position: relative;
    font-size: 1.125em;
    font-weight: bold;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding:12px 15px;
  }
  .accordion_tit span {
    pointer-events: none;
  }
  .accordion_tit::after {
    content: '';
    transition: transform 0.3s;
    background-image: url(../images/reform/icon_open.svg);
    background-size: 100% auto;
    background-repeat: no-repeat;
    background-position: center;
    width: min(6%, 30px);
    padding-top: min(6%, 30px);
  }
  .accordion_tit.active::after {
    content: '';
    transition: transform 0.3s;
    transform: rotate(180deg);
    background-image: url(../images/reform/icon_close.svg);
    background-size: 100% 20%;
  }


  .accordion_cont {
    max-height: 0;
  overflow-anchor:none;
    background-color: #f3f0ec;
    border-radius: 0 0 10px 10px;
    overflow: hidden;
    padding: 0 20px 0 20px;
    transition: max-height 0.35s ease, padding 0.35s ease;
        &:before{
        }
  }
  .accordion_cont.open {
    max-height: 2500px;
    padding: 20px 20px 20px 20px;
  }

/* FLOW */
.flow{
  background-color:#f3f0ec;
  padding-bottom:10%;
  &:before{
    content: "";
    background-image: url(../images/reform/flow_bgtop.svg);
    background-repeat: no-repeat;
    background-position: top center;
    background-size: 100% auto;
    filter: drop-shadow(1px 2px 1px rgba(0, 0, 0, 0.2));
    display: block;
    padding-top: 13%;
    width: 100%;
  }
  h2{
    & + p{
      text-align: center;
      margin-bottom: 2%;
    }
  }
  .inner{
    .flow_container{
      display:flex;   
      flex-wrap:nowrap;
      gap:40px;
      padding-bottom:60px;
      @media screen and (max-width: 767px) {
        display: block;
        padding-bottom: 0;
      }
      .online,
      .shop{
        width: calc((100% - 40px) / 2);
        padding: 40px 40px 20px;
        border-radius: 10px;
        background-repeat: repeat;
        background-blend-mode: multiply;
         @media screen and (max-width: 767px) {
          width: 90%;
          margin-left: auto;
          margin-right: auto;
          padding: 10% 6% 10%;
          margin-bottom: 15%;
         }
        .recommend{
          position:relative;
          h3{
            text-align:center;
            margin-bottom:20px;
            &:before{
              content:"＼ ";
            }
            &:after{
              content:" ／";
            }
            & + ul{
              margin-bottom:8%;
              li{
                background-color: var(--c_yellow);
                filter: drop-shadow(2px 2px 3px rgba(0, 0, 0, 0.3));
                border-radius: 100px;
                display: block;
                padding: 15px 30px;
                text-align: center;
                margin-bottom: 10px;
                width: 80%;
                margin-left: auto;
                margin-right: auto;
                @media screen and (max-width: 1023px) {
                  padding: 5% 0;
                  width: 95%;
                }
              }
              & + h3{
                margin-bottom:-40px;
                background-repeat: no-repeat;
                background-size: 10% auto;
                background-position: top center;
                padding-top:10%;
                &:before,
                &:after{
                  content: none;
                }
                span{
                  font-size: 1.4em;
                  display: block;
                }
              }
            }
          }
          .flow_items{
            position: relative;
            top: 60px;
            background-color: #fff;
            border-radius: 10px;
            padding: 20px 20px;
            ul{
              li{
                text-align: center;
                margin-bottom:10%;
                position:relative;
                &:after{
                  content: "";
                  display: block;
                  width: 20%;
                  background-image: url(../images/reform/flow_arrow.svg);
                  background-repeat: no-repeat;
                  padding-top: 12%;
                  margin: 0 auto -16%;
                  position:relative;
                  z-index: 3;
                }
                &:last-child:after{
                  content: none;
                }
                img{
                  display: block;
                  width: 100%;
                  background-color: gray;
                  margin-bottom: 3%;
                }
                p{
                  margin-bottom: 5%;
                  &.noimg{
                    background-color: #f3f0ec;
                    padding: 6% 0;
                    width: 85%;
                    margin-right: auto;
                    margin-left: auto;
                  }
                }
              }
            }
          }
        }/* recommend */
      }
      .online{
        background-image: linear-gradient(-15deg, #b8bca2, #d9e3ca, #d9e3ca), url(../images/reform/bg_particle.png);
        ul + h3{
          background-image: url(../images/reform/icon_online.svg);
        }
      }
      .shop{
        background-image: linear-gradient(-15deg, #94bdd3, #bcdeed, #bcdeed), url(../images/reform/bg_particle.png);
        ul + h3{
          background-image: url(../images/reform/icon_shop.svg);
        }
      }
    }
  }
  .subuicolor{
    width: 90%;
    margin-left: auto;
    margin-right: auto;
  }
}
/* FAQ */
.faq{
  background-color:#fff;
  padding-top:6%;
  padding-bottom:10%;
  .faq-item {
    background: #f3f0ec; 
    border-radius: 10px;
    box-shadow: 2px 2px 3px rgba(0, 0, 0, 0.3);
    margin-bottom: 20px;
    padding: 0 20px 10px 20px;
    @media screen and (max-width: 767px) {
      margin-bottom: 4%;
    }
    .faq-question{
      & > span{
        display:flex;
        align-items: center;
        @media screen and (max-width: 767px) {
          width: 85%;
          flex-wrap:wrap;
        }
        &:before{
          content:"Q";
          display: inline;
          font-size: 160%;
          font-weight: bold;
          padding-right: 10px;
        }
        & > span:nth-child(1){
          border-radius: 6px;
          background-color: #000;
          color:#fff;
          font-size: 60%;
          text-align: center;
          padding:5px 0;
          width:80px;
          margin-right:15px;
          @media screen and (max-width: 767px) {
            width: 30%;
            display: inline-block;
          }
          &.common{
            line-height: 2.2;
      background-color:#5c68a8;
          }
          &.shop{
            line-height: 2.2;
      background-color:#72a1c0
          }
          &.online{
            line-height: 1.1;
      background-color:#a0b769;
          }
          & + span{
            display: inline-block;
            width: 100%;
          }
        }
      }
    }
   }
  .faq-item:last-child {
    border-bottom: none;
    margin-bottom: 0;
  }

  /* 質問 */
  .faq-question {
    padding: 0;
    cursor: pointer;
    position: relative;
    font-size: 1.125em;
    font-weight: bold;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 10px 0 0 0;
  }

  /* 回答 */
  .faq-answer {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.5s ease, padding 0.5s ease;
    @media screen and (max-width: 767px) {

    }
        &:before{
          content:"A ";
          display: inline;
          font-size: 160%;
          font-weight: bold;
        }
  }
  .faq-answer.open {
    max-height: 300px;
  }
}
.order{
  background-color: #f3f0ec;
  padding-top:6%;
  padding-bottom:10%;
  li{
    border-radius: 10px;
    background-repeat: repeat;
    background-blend-mode: multiply;
    padding:20px 40px;
    margin-bottom:20px;
    text-align: center;
    @media screen and (max-width: 767px) {
      padding:5%;
    }
    &.online{
      h3{
        background-image: url(../images/reform/icon_online.svg);
      }
    }
    &.shop{
      h3{
        background-image: url(../images/reform/icon_shop.svg);
      }
    }
    h3{
      margin-bottom: 20px;
      font-size: var(--fsize3);
      background-repeat: no-repeat;
      background-position: bottom center;
      background-size: 50px;
      padding-bottom: 50px;
      @media screen and (max-width: 767px) {
        font-size: var(--fsize2);
        font-weight: bold;
      }
    }
    p{
      margin-bottom: 20px;
    }
    a{
      padding: 20px;
    }
    &.online{
      background-image: linear-gradient(-15deg, #b8bca2, #d9e3ca, #d9e3ca), url(../images/reform/bg_particle.png);
    }
    &.shop{
      background-image: linear-gradient(-15deg, #94bdd3, #bcdeed, #bcdeed), url(../images/reform/bg_particle.png);
    }
  }
}
.chain{
  background-color: #fff;
  padding-top:6%;
  padding-bottom:2%;
}
.notes{
  position: relative;
  z-index: 2;
  padding: 10px 0;
  background-color: #fff;
  width: 100%;
  span{
    display: block;
    text-align: right;
  }
}
.fixednav{
  position: fixed;
  right: 90px;
  bottom: 10px;
  z-index: 5;
  @media screen and (max-width: 767px) {
    bottom: 0;
    right: inherit;
    left: 0;
    width: 83%;
    background-color: #fff;
  }
  ul{
    display: flex;
    gap:10px;
    @media screen and (max-width: 767px) {
      gap:2px;
    }
    li{
      filter: drop-shadow(2px 2px 3px rgba(0,0,0,0.3));
      @media screen and (max-width: 767px) {
        margin-bottom: 0;
        filter: none;
        width: calc((100% - 2px) / 2);
      }
      a{
        background-image:linear-gradient(15deg, #72a1c0, #29ab9f, #29ab9f) ;
        display: block;
        border-radius: 10px;
        padding: 10px 15px;
        color: #fff;
        @media screen and (max-width: 767px) {
          border-radius: 0;
          padding: 15% 0 2% 0;
        }
        span:nth-child(1){
          padding-left: 50px;
          display: block;
          background-repeat: no-repeat;
          background-size: 40px auto;
          background-position: left center;
          line-height: 1.2;
          @media screen and (max-width: 767px) {
            padding-left: 0;
            text-align: center;    
            font-size: 1.4rem;
            background-image: none !important;
          }
          & + span{
            text-align: center;
            color: var(--c_yellow);
            text-align: center;
            display: block;
            font-size: 2.2rem;
            @media screen and (max-width: 767px) {
              font-size: 1.4rem;
            }
          }
        }
        &.online{
          @media screen and (max-width: 767px) {
            background-image: url(../images/reform/icon_online_w.svg) , linear-gradient(15deg, #72a1c0, #29ab9f, #29ab9f);
            background-repeat: no-repeat,no-repeat;
            background-position:center top 8% ,center top;
            background-size:12%, 100% ;
          }
          span:nth-child(1){
            background-image: url(../images/reform/icon_online_w.svg);
            & + span{
              letter-spacing: 0.4rem;
            }
          }
        }
        &.shop{
          @media screen and (max-width: 767px) {
            background-image: url(../images/reform/icon_shop_w.svg) , linear-gradient(15deg, #72a1c0, #29ab9f, #29ab9f);
            background-repeat: no-repeat,no-repeat;
            background-position:center top 8% ,center top;
            background-size:12%, 100% ;
          }
          span:nth-child(1){
            background-image: url(../images/reform/icon_shop_w.svg);
            & + span{
              letter-spacing: 0;
            }
          }
        }
      }
    }
  }
}