/*====================================================
////id |  howto
====================================================*/
.howto-inner {
  padding-bottom: 0;
}
.howto-item-wrapper {
  display: flex;
    flex-wrap: wrap;
  overflow: hidden;
  padding-bottom: 2px;
  position: relative;
  z-index: 0;
}
.howto-item {
  display: grid;
    place-items: center;
    position: relative;
    z-index: 1;
}
.howto-item.show {
  animation: 0.8s ease-in-out forwards sa-show;
}
.howto-item .step {
  background: var(--color_5);
  border-radius: 2px;
  display: flex;
    align-items: center;
    justify-content: center;
    gap: 0 .4em;
  font-weight: 500;
  line-height: 1.2;
}
.howto-item-content {
  background: #fff;
  border: solid 1px var(--color_2);
  border-radius: 4px;
  display: grid;
  font-weight: 500;
  position: relative;
  width: 100%;
  height: 100%;
}
.howto-item-content::after {
  background: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" version="1.1" viewBox="0 0 24 24"><path fill="%23707070" d="M12,0c6.63,0,12,5.37,12,12s-5.37,12-12,12S0,18.63,0,12,5.37,0,12,0Z" /><path fill="%23ffffff" d="M15.04,11.9l-4.27,4.27-1.35-1.34,2.93-2.93-2.93-2.93,1.34-1.34,4.27,4.27Z" /></svg>') no-repeat center;
  background-size: 60%;
  content: '';
  display: block;
  margin: auto;
  position: absolute;
}
.howto-item:last-child .howto-item-content::after {
  display: none;
}

.howto-video-wrapper {
  margin-top: min(14.9vw, 88px);
  position: relative;
}
.howto-video-wrapper::before,
.howto-video-wrapper::after {
  border-top: solid 1px var(--color_2);
  content: '';
  display: block;
  margin: auto;
  position: absolute;
    left: calc(var(--innerBox_margin) * -1);
  width: calc(100% + (var(--innerBox_margin) * 2));
  height: 0;
}
.howto-video-wrapper::before {
  top: 0;
  z-index: -1;
}
.howto-video-wrapper::after {
  bottom: 0;
}

.howto-video {
  border: solid var(--color_2);
  border-width: 0 1px;
  display: flex;
    justify-content: center;
  margin: auto;
  padding: min(7.7vw, 56px);
  width: min(100%, 800px);
}
.howto-video video {
  height: min(70vw, 516px);
}


@keyframes sa-show {
  to {
    opacity: 1;
    transform: none;
  }
}

/* ////////// mobile ////////// */
@media screen and (max-width: 960.0px) {
  .howto-item-wrapper {
    flex-direction: column;
    gap: 26px;
    margin: auto;
    overflow: hidden;
    width: min(100%, 600px);
  }
  .howto-item-wrapper::before {
    border-left: solid 3px var(--color_2);
    content: '';
    display: block;
    margin: auto;
    position: absolute;
      top: 3em;
      left: calc(min(10vw, 60px) / 2);
    width: 0;
    height: 0;
    z-index: -1;
  }
  .howto-item-wrapper.show::before {
    animation: 3s linear forwards howto_before-mob;
  }
  @keyframes howto_before-mob {
    to {
      height: calc(100% - (3em * 2));
    }
  }
  .howto-item {
    grid-gap: 15px;
    grid-template-columns: auto 1fr;
    transform: translateY(20px);
  }
  .howto-item .step {
    flex-direction: column;
    font-size: min(3.7333vw, 20px);
    width: min(10vw, 60px);
    height: min(10vw, 60px);
    position: relative;
  }
  .howto-item:first-child .step::before ,
  .howto-item:last-child .step::before {
    background: #fff;
    content: '';
    display: block;
    margin: auto;
    position: absolute;
      left: 0;
    width: 100%;
    height: 100px;
  }
  .howto-item:first-child .step::before {
    bottom: 100%;
  }
  .howto-item:last-child .step::before {
    top: 100%;
  }
  .howto-item .step .text {
    font-size: .643em;
  }
  .howto-item-content {
    align-items: center;
    font-size: min(3.7333vw, 22px);
    grid-gap: min(8vw, 40px);
    grid-template-columns: auto 1fr;
    line-height: 1.3;
    padding: min(4.266vw, 15px) min(5.6vw, 40px);
  }
  .howto-item-content::after {
    background-size: 50%;
    top: 100%;
    left: 0;
    right: 0;
    transform: rotate(90deg);
    width: 26px;
    height: 26px;
  }
  .howto-item .img {
    width: min(10.5vw, 100px);
  }
}

/* ////////// PC ////////// */
@media print,screen and (min-width: 960.1px) {
  .howto-item-wrapper {
    gap: 60px min(2vw, 40px);
  }
  .howto-item {
    grid-gap: 32px;
    flex-grow: 1;
    width: calc((100% / 4) - (min(2vw, 40px) * 3 / 4));
    opacity: 0;
    position: relative;
    transform: translateX(-30px);
  }
  .howto-item:nth-child(2) ,
  .howto-item:nth-child(6) {
    animation-delay: .8s;
  }
  .howto-item:nth-child(3) ,
  .howto-item:nth-child(7) {
    animation-delay: 1.6s;
  }
  .howto-item:nth-child(4) ,
  .howto-item:nth-child(8) {
    animation-delay: 2.4s;
  }
  .howto-item:nth-child(1)::before,
  .howto-item:nth-child(5)::before {
    border-top: solid 3px var(--color_2);
    content: '';
    display: block;
    margin: auto;
    position: absolute;
      top: 15px;
      left: 0;
    width: 0;
    height: 0;
    z-index: -1;
  }
  .howto-item:nth-child(1).show::before,
  .howto-item:nth-child(5).show::before {
    animation: 3s linear forwards howto_before-pc;
  }
  @keyframes howto_before-pc {
    to {
      width: calc(100vw - (var(--innerBox_margin) * 2));
    }
  }

  .howto-item {
    grid-template-rows: auto 1fr;
  }
  .howto-item .step {
    font-size: min(1.5vw, 2rem);
    height: 32px;
    padding: 0 1.2em .1em;
  }
  .howto-item-content {
    font-size: min(1.6vw, 2.2rem);
    grid-template-rows: auto 1fr;
    grid-gap: min(2vw, 32px);
    padding: min(3vw, 40px) min(1vw, 40px);
    place-items: center;
    text-align: center;
  }
  .howto-item-content::after {
    left: 100%;
    width: min(2vw, 40px);
    height: 100%;
  }
  .howto-item .img {
    width: 110px;
  }

}

@media screen and (min-width: 960.1px) and (max-width: 1330.1px) {
  .howto-item-content::after {
    transform: scale(1.3);
  }
}

@media (hover: hover) {}


/*====================================================
////id |  caution
====================================================*/
.caution-item-wrapper {
  display: grid;
  margin: auto;
  width: min(100%, 1000px);
}
.caution-item {
  background: var(--color_5);
  border-radius: 15px;
  display: grid;
    grid-gap: min(2vw, 32px) min(6vw, 30px);
  font-weight: 500;
}

.caution-detail {
  margin: min(17vw, 64px) auto 0;
  width: min(100%, 1000px);
}
.caution-detail dt {
  background: #fff;
  border: solid 1px #707070;
  border-radius: 2px;
  font-size: min(4.266vw, 2rem);
  font-weight: 500;
  display: flex;
    align-items: center;
  height: 3em;
  padding: .2em 1em;
  position: relative;
  transition: background-color .2s ease-in-out;
}
.caution-detail dt::after {
  background: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" version="1.1" viewBox="0 0 15 10"><path fill="%23676767" d="M0,2.6L2.63,0l4.87,4.82L12.37,0l2.63,2.6-7.5,7.4L0,2.6Z" /></svg>') no-repeat center / contain;
  content: '';
  margin: auto;
  position: absolute;
    top: 0;
    right: min(4.266vw, 24px );
    bottom: 0;
  transition: transform .2s ease-in-out;
  width: .65em;
  height: .655em;
}
.caution-detail .open dt::after {
  transform: rotate(180deg);
}
.caution-detail-item-wrapper {
  display: grid;
    grid-gap: min(8.533vw, 48px);
  padding-top: min(6.4vw, 48px);
}
.caution-detail-item-head {
  border-bottom: solid 1px var(--color_2);
  font-size: min(4.266vw, 1.8rem);
  padding-bottom: .6em;
  margin-bottom: 20px;
}

/* ////////// mobile ////////// */
@media screen and (max-width: 769.0px) {
  .caution-item-wrapper {
    grid-gap: 12px;
    max-width: 500px;
  }
  .caution-item {
    align-items: center;
    font-size: min(4.266vw, 1.8rem);
    grid-template-columns: auto 1fr;
    line-height: 1.375;
    padding: 25px 17px;
  }
  .caution-item .img {
    width: min(26.666vw, 100px);
  }
}

/* ////////// PC ////////// */
@media print,screen and (min-width: 769.1px) {
  .caution-item-wrapper {
    grid-gap: min(1.5vw, 36px);
    grid-template-columns: repeat(3, 1fr);
  }
  .caution-item {
    font-size: min(2vw, 2.2rem);
    grid-template-rows: auto 1fr;
    padding: min(3vw, 40px) min(1vw, 40px);
    place-items: center;
    text-align: center;
  }
  .caution-item .img {
    margin: auto;
    width: min(60%, 140px);
  }

  .caution-detail dt {
    justify-content: center;
  }
}

@media (hover: hover) {
  .caution-detail dt:hover {
    background: var(--color_5);
  }
}