@charset "utf-8";
#fullWrap {
  z-index: 0;
  background-color: #fff;
}
#fullWrap::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0;
  right: 0;
  bottom: 0;
  z-index: -1;
  background: url(../../img/common/pattern_bg.png) repeat center top / min(calc(80 / var(--vw-min) * 100vw), 80px) auto;
  opacity: .2;
  pointer-events: none;
}
.mainTitle,
.howto {
  width: min(calc(1366 / var(--vw-min) * 100vw),1366px);
  margin: 0 auto;
  padding: 0 min(calc(83 / var(--vw-min) * 100vw),83px);
  @media screen and (max-width:768px) {
    width: 100%;
    padding: 0 calc(20 / var(--vw-min) * 100vw);
  }
}
.mainTitle {
  padding-top: min(calc(110 / var(--vw-min) * 100vw),110px);
  position: relative;
  @media screen and (max-width:768px) {
    padding-top: calc(63 / var(--vw-min) * 100vw);
  }
}
.mainTitle__title {
  width:min(calc(656 / var(--vw-min) * 100vw),592px);
  height:min(calc(80 / var(--vw-min) * 100vw),80px);
  margin: 0 auto min(calc(47 / var(--vw-min) * 100vw),47px);
  background: url(../../img/howto/title.png) no-repeat center center / contain;
  position: relative;
  z-index: 1;
  @media screen and (max-width:768px) {
    width: calc(328 / var(--vw-min) * 100vw);
    height: calc(36 / var(--vw-min) * 100vw);
    margin-bottom: calc(41 / var(--vw-min) * 100vw);
  }
}
.mainTitle__textBox {
  width: min(calc(800 / var(--vw-min) * 100vw),880px);
  margin: 0 auto min(calc(20 / var(--vw-min) * 100vw),20px);
  @media screen and (max-width:768px) {
    width: 100%;
    margin-bottom: calc(20 / var(--vw-min) * 100vw);
  }
}
.mainTitle__textBox:last-child {
  margin-bottom: 0;
}
.mainTitle__lead,
.mainTitle__text {
  text-align: center;
  @media screen and (max-width:768px) {
    text-align: left;
  }
}
.mainTitle__lead {
  margin-bottom: min(calc(15 / var(--vw-min) * 100vw),15px);
  font-size: min(calc(28 / var(--vw-min) * 100vw),28px);
  letter-spacing: 0.02em;
  line-height: min(calc(38 / var(--vw-min) * 100vw),38x);
  color: #8373FF;
  font-weight: 900;
  @media screen and (max-width:768px) {
    margin-bottom: calc(13 / var(--vw-min) * 100vw);
    font-size: calc(17 / var(--vw-min) * 100vw);
    line-height: calc(26 / var(--vw-min) * 100vw);
  }
}
.mainTitle__text {
  font-size: min(calc(16 / var(--vw-min) * 100vw),16px);
  letter-spacing: 0.02em;
  line-height: min(calc(32 / var(--vw-min) * 100vw),32px);
  color: #8373FF;
  font-weight: 500;
  @media screen and (max-width:768px) {
    font-size: calc(13 / var(--vw-min) * 100vw);
    line-height: calc(25 / var(--vw-min) * 100vw);
  }
}
.mainTitle__text a {
  color: #8373FF;
  font-weight: 500;
}
.howto {
  margin-top: min(calc(75 / var(--vw-min) * 100vw),75px);
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  column-gap: min(calc(40 / var(--vw-min) * 100vw),40px);
  @media screen and (max-width:768px) {
    margin-top: calc(27 / var(--vw-min) * 100vw);
    flex-direction: column;
    row-gap: calc(31 / var(--vw-min) * 100vw);
  }
}
.localNav {
  margin-bottom: 0;
  flex-shrink: 0;
}
.localNav__lists {
  flex-direction: column;
  align-items: stretch;
  justify-content: flex-start;
  gap: min(calc(22 / var(--vw-min) * 100vw),22px);
  @media screen and (max-width:768px) {
    flex-direction: row;
    flex-wrap: wrap;
    gap: calc(9 / var(--vw-min) * 100vw);
  }
}
.localNav__item {
  width: min(calc(240 / var(--vw-min) * 100vw),240px);
  height: min(calc(52 / var(--vw-min) * 100vw),52px);
  @media screen and (max-width:768px) {
    width: calc((100% - calc(9 / var(--vw-min) * 100vw)) / 2);
    height: calc(40 / var(--vw-min) * 100vw);
  }
}
.localNav__item:hover {
  background: #FF5FBD;
}
.localNav__item:hover .localNav__link {
  background: #FF7ABB;
}
.localNav__item:hover .localNav__link::before {
  background: #FFC0F7;
}

.localNav__link {
  font-size: min(calc(15 / var(--vw-min) * 100vw),15px);
  @media screen and (max-width:768px) {
    font-size: calc(12 / var(--vw-min) * 100vw);
    letter-spacing: 0;
    line-height: calc(20 / var(--vw-min) * 100vw);
    font-weight: 500;
  }
}
.localNav__link::before {
  left: calc(6 / var(--vw-min) * 100vw);
  bottom: calc(4 / var(--vw-min) * 100vw)
}
.localNav__link::after {
  display: none;
}
.localNav__link--current {
  transform: translateY(0);
  background: #FF7ABB;
}
.localNav__link--current::before {
  background: #FFC0F7;
}
.howto__main {
  width: calc(100% - min(calc(240 / var(--vw-min) * 100vw),240px));
  min-width: 0;
  @media screen and (max-width:768px) {
    width: 100%;
  }
}
.spec,
.install,
.setting,
.join,
.other {
  scroll-margin-top: min(calc(40 / var(--vw-min) * 100vw),40px);
  @media screen and (max-width:768px) {
    scroll-margin-top: calc(24 / var(--vw-min) * 100vw);
  }
}
.commonSubSection__title {
  padding: min(calc(24 / var(--vw-min) * 100vw),24px) min(calc(80 / var(--vw-min) * 100vw),80px);
  font-size: min(calc(30 / var(--vw-min) * 100vw),30px);
  letter-spacing: 0.02em;
  line-height: min(calc(40 / var(--vw-min) * 100vw),40px);
  color: #fff;
  font-weight: 700;
  text-align: center;
  @media screen and (max-width:768px) {
    padding: calc(9 / var(--vw-min) * 100vw) calc(17 / var(--vw-min) * 100vw);
    font-size: calc(18 / var(--vw-min) * 100vw);
    line-height: calc(30 / var(--vw-min) * 100vw);
  }
}
.spec__content {
  @media screen and (max-width:768px) {
    padding: calc(24 / var(--vw-min) * 100vw) calc(14 / var(--vw-min) * 100vw) calc(32 / var(--vw-min) * 100vw);
  }
}
.spec__block {
  margin-bottom: min(calc(64 / var(--vw-min) * 100vw),64px);
  @media screen and (max-width:768px) {
    margin-bottom: calc(24 / var(--vw-min) * 100vw);
  }
}
.spec__block:last-child {
  margin-bottom: 0;
}
.spec__subTitle {
  margin-bottom: min(calc(16 / var(--vw-min) * 100vw),16px);
  font-size: min(calc(24 / var(--vw-min) * 100vw),24px);
  letter-spacing: 0.02em;
  line-height: min(calc(34 / var(--vw-min) * 100vw),34px);
  color: #8373FF;
  font-weight: 700;
  @media screen and (max-width:768px) {
    margin-bottom: calc(12 / var(--vw-min) * 100vw);
    font-size: calc(17 / var(--vw-min) * 100vw);
    line-height: calc(26 / var(--vw-min) * 100vw);
    font-weight: 900;
  }
}
.spec__block--recommend > .spec__subTitle {
  margin-bottom: min(calc(24 / var(--vw-min) * 100vw),24px);
  @media screen and (max-width:768px) {
    margin-bottom: calc(16 / var(--vw-min) * 100vw);
  }
}
.spec__recommendBox {
  margin-bottom: min(calc(24 / var(--vw-min) * 100vw),24px);
  padding: min(calc(24 / var(--vw-min) * 100vw),24px);
  background: #fff;
  border: 1px solid #BFCDFF;
  border-radius: 6px;
  @media screen and (max-width:768px) {
    margin-bottom: calc(16 / var(--vw-min) * 100vw);
    padding: calc(14 / var(--vw-min) * 100vw);
    border-radius: 8px;
  }
}
.spec__recommendBox:last-child {
  margin-bottom: 0;
}
.spec__lead {
  margin-bottom: min(calc(16 / var(--vw-min) * 100vw),16px);
  padding: min(calc(10 / var(--vw-min) * 100vw),10px) min(calc(16 / var(--vw-min) * 100vw),16px);
  font-size: min(calc(18 / var(--vw-min) * 100vw),18px);
  letter-spacing: 0.02em;
  line-height: min(calc(26 / var(--vw-min) * 100vw),26px);
  color: #8373FF;
  font-weight: 700;
  background: #CFC8FF;
  border-radius: 4px;
  @media screen and (max-width:768px) {
    margin-bottom: calc(12 / var(--vw-min) * 100vw);
    padding: calc(8 / var(--vw-min) * 100vw) calc(10 / var(--vw-min) * 100vw);
    font-size: calc(13 / var(--vw-min) * 100vw);
    line-height: calc(22 / var(--vw-min) * 100vw);
    font-weight: 900;
  }
}
.spec__recommendBox > .spec__lists {
  margin-bottom: min(calc(24 / var(--vw-min) * 100vw),24px);
  @media screen and (max-width:768px) {
    margin-bottom: calc(16 / var(--vw-min) * 100vw);
  }
}
.spec__recommendPc {
  padding-top: min(calc(24 / var(--vw-min) * 100vw),24px);
  border-top: 1px solid #BFCDFF;
  @media screen and (max-width:768px) {
    padding-top: calc(16 / var(--vw-min) * 100vw);
  }
}
.spec__recommendPcTitle {
  margin-bottom: min(calc(8 / var(--vw-min) * 100vw),8px);
  font-size: min(calc(16 / var(--vw-min) * 100vw),16px);
  letter-spacing: 0.02em;
  line-height: min(calc(24 / var(--vw-min) * 100vw),24px);
  color: #8373FF;
  font-weight: 700;
  @media screen and (max-width:768px) {
    margin-bottom: calc(6 / var(--vw-min) * 100vw);
    font-size: calc(13 / var(--vw-min) * 100vw);
    line-height: calc(20 / var(--vw-min) * 100vw);
    font-weight: 900;
  }
}
.spec__recommendPcLink {
  display: inline-block;
  margin-bottom: min(calc(16 / var(--vw-min) * 100vw),16px);
  font-size: min(calc(14 / var(--vw-min) * 100vw),14px);
  letter-spacing: 0.02em;
  line-height: min(calc(24 / var(--vw-min) * 100vw),24px);
  color: #8373FF;
  font-weight: 500;
  text-decoration: underline;
  word-break: break-all;
  transition: color 0.3s ease;
  @media screen and (max-width:768px) {
    margin-bottom: calc(12 / var(--vw-min) * 100vw);
    font-size: calc(12 / var(--vw-min) * 100vw);
    line-height: calc(20 / var(--vw-min) * 100vw);
  }
}
.spec__recommendPcLink:hover {
  color: #FF95C9;
}
.spec__recommendPcLink::after {
  content: '';
  display: inline-block;
  width: min(calc(13 / var(--vw-min) * 100vw),13px);
  height: min(calc(11 / var(--vw-min) * 100vw),11px);
  margin-left: min(calc(5 / var(--vw-min) * 100vw),5px);
  background: #8373FF;
  mask: url(../../img/news/icon_link.svg) no-repeat center center / contain;
  -webkit-mask: url(../../img/news/icon_link.svg) no-repeat center center / contain;
  vertical-align: middle;
  transition: background 0.3s ease;
}
.spec__recommendPcLink:hover::after {
  background: #FF95C9;
}
.spec__subTitle--color-purple {
  font-size: min(calc(18 / var(--vw-min) * 100vw),18px);
  line-height: min(calc(26 / var(--vw-min) * 100vw),26px);
  @media screen and (max-width:768px) {
    font-size: calc(15 / var(--vw-min) * 100vw);
    line-height: calc(22 / var(--vw-min) * 100vw);
  }
}
.spec__recommendPc .spec__lists {
  margin-bottom: 0;
}
.spec__lists {
  margin-bottom: min(calc(16 / var(--vw-min) * 100vw),16px);
  border: 1px solid #DDD;
}
.spec__item {
  display: flex;
  border-bottom: 1px solid #e5e5e5;
}
.spec__item:last-child {
  border-bottom: none;
}
.spec__itemTitle,
.spec__itemDetail {
  height: auto;
  padding: min(calc(12 / var(--vw-min) * 100vw),12px) min(calc(20 / var(--vw-min) * 100vw),20px);
  color: #555555;
  font-size: min(calc(14 / var(--vw-min) * 100vw),14px);
  letter-spacing: 0.02em;
  line-height: min(calc(24 / var(--vw-min) * 100vw),24px);
  font-weight: 400;
  @media screen and (max-width:768px) {
    padding: calc(10 / var(--vw-min) * 100vw) calc(8 / var(--vw-min) * 100vw);
    font-size: calc(12 / var(--vw-min) * 100vw);
    line-height: calc(18 / var(--vw-min) * 100vw);
  }
}
.spec__itemTitle {
  display: flex;
  align-items: center;
  width: min(calc(200 / var(--vw-min) * 100vw), 200px);
  background: #F6F6F9;
  border-right: 1px solid #DDD;
  @media screen and (max-width:768px) {
    width: calc(96 / var(--vw-min) * 100vw);
  }
}
.spec__itemDetail {
  width: calc(100% - min(calc(200 / var(--vw-min) * 100vw), 200px));
  @media screen and (max-width:768px) {
    width: calc(100% - calc(96 / var(--vw-min) * 100vw));
  }
}
.spec__note {
  font-size: min(calc(14 / var(--vw-min) * 100vw),14px);
  list-style: min(calc(24 / var(--vw-min) * 100vw),24px);
  font-weight: 400;
  color: #555555;
}
.localNav--bottom {
  @media screen and (max-width:768px) {
    margin-top: calc(9 / var(--vw-min) * 100vw);
  }
}


.install__item,
.setting__item,
.join__item,
.other__item {
  margin-bottom: min(calc(74 / var(--vw-min) * 100vw),74px);
  @media screen and (max-width:768px) {
    margin-bottom: calc(40 / var(--vw-min) * 100vw);
  }
}
.install__item:last-of-type,
.setting__item:last-of-type,
.join__item:last-of-type,
.other__item:last-of-type {
  margin-bottom: 0;
}
.install__itemTitle,
.setting__itemTitle,
.join__itemTitle,
.other__itemTitle {
  margin-bottom: min(calc(16 / var(--vw-min) * 100vw),16px);
  font-size: min(calc(24 / var(--vw-min) * 100vw),24px);
  letter-spacing: 0.02em;
  line-height: min(calc(34 / var(--vw-min) * 100vw),34px);
  color: #8373FF;
  font-weight: 700;
  @media screen and (max-width:768px) {
    margin-bottom: calc(8 / var(--vw-min) * 100vw);
    font-size: calc(17 / var(--vw-min) * 100vw);
    line-height: calc(26 / var(--vw-min) * 100vw);
    font-weight: 900;
  }
}
.install__itemTextBox,
.setting__itemTextBox,
.join__itemTextBox,
.other__itemTextBox {
  margin-bottom: min(calc(16 / var(--vw-min) * 100vw),16px);
  @media screen and (max-width:768px) {
    margin-bottom: calc(8 / var(--vw-min) * 100vw);
  }
}
.install__itemTextBox:last-of-type,
.setting__itemTextBox:last-of-type,
.join__itemTextBox:last-of-type,
.other__itemTextBox:last-of-type {
  margin-bottom: 0;
}
.install__itemImage,
.setting__itemImage,
.join__itemImage,
.other__itemImage {
  margin-bottom: min(calc(16 / var(--vw-min) * 100vw),16px);
  width: min(calc(360 / var(--vw-min) * 100vw),360px);
  height: auto;
  @media screen and (max-width:768px) {
    width: 100%;
    margin-bottom: calc(8 / var(--vw-min) * 100vw);
  }
}
.install__itemImage img,
.setting__itemImage img,
.join__itemImage img,
.other__itemImage img {
  width: 100%;
  object-fit: contain;
}
.install__itemText,
.setting__itemText,
.join__itemText,
.other__itemText {
  font-size: min(calc(16 / var(--vw-min) * 100vw),16px);
  letter-spacing: 0.02em;
  line-height: min(calc(28 / var(--vw-min) * 100vw),28px);
  font-weight: 400;
  color: #555555;
  @media screen and (max-width:768px) {
    font-size: calc(13 / var(--vw-min) * 100vw);
    line-height: calc(24 / var(--vw-min) * 100vw);
  }
}
.setting__intro,
.join__intro {
  margin-bottom: min(calc(40 / var(--vw-min) * 100vw),40px);
  @media screen and (max-width:768px) {
    margin-bottom: calc(24 / var(--vw-min) * 100vw);
  }
}
.setting__intro .setting__itemText,
.join__intro .join__itemText {
  margin-bottom: min(calc(16 / var(--vw-min) * 100vw),16px);
  @media screen and (max-width:768px) {
    margin-bottom: calc(8 / var(--vw-min) * 100vw);
  }
}
.setting__intro .setting__itemText:last-child,
.join__intro .join__itemText:last-child {
  margin-bottom: 0;
}
.setting__itemLink,
.join__itemLink {
  color: #8373FF;
  text-decoration: underline;
  word-break: break-all;
}
.setting__subTitle,
.join__subTitle {
  margin-bottom: min(calc(12 / var(--vw-min) * 100vw),12px);
  font-size: min(calc(18 / var(--vw-min) * 100vw),18px);
  letter-spacing: 0.02em;
  line-height: min(calc(26 / var(--vw-min) * 100vw),26px);
  color: #8373FF;
  font-weight: 700;
  @media screen and (max-width:768px) {
    margin-bottom: calc(8 / var(--vw-min) * 100vw);
    font-size: calc(15 / var(--vw-min) * 100vw);
    line-height: calc(22 / var(--vw-min) * 100vw);
    font-weight: 900;
  }
}
.join__itemTextBox + .join__itemTextBox > .join__subTitle {
  margin-top: min(calc(24 / var(--vw-min) * 100vw),24px);
  @media screen and (max-width:768px) {
    margin-top: calc(16 / var(--vw-min) * 100vw);
  }
}
.join__itemLists,
.other__itemLists {
  margin-top: min(calc(8 / var(--vw-min) * 100vw),8px);
}
.join__itemLists li,
.other__itemLists li {
  text-indent: -1em;
  padding-left: 1em;
  font-size: min(calc(16 / var(--vw-min) * 100vw),16px);
  letter-spacing: 0.02em;
  line-height: min(calc(28 / var(--vw-min) * 100vw),28px);
  color: #555555;
  @media screen and (max-width:768px) {
    font-size: calc(13 / var(--vw-min) * 100vw);
    line-height: calc(24 / var(--vw-min) * 100vw);
  }
}
.join__block .join__intro .join__introImage {
  width: min(calc(460 / var(--vw-min) * 100vw),460px);
  @media screen and (max-width:768px) {
    width: 100%;
  }
}
.join__block.join__intro.join__introImage img {
  width: 100%;
  object-fit: contain;
}