@charset "UTF-8";
/*======================================================================
Font
======================================================================*/
@import url("https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@400;500;700&display=swap");

@font-face {
  font-family: "NotoB";
  src: url("/app/font/NotoB.eot");
  src: url("/app/font/NotoB.eot?#iefix") format("embedded-opentype"),
    url("/app/font/NotoB.woff") format("woff"),
    url("/app/font/NotoB.otf") format("opentype");
}
@font-face {
  font-family: "NotoM";
  src: url("/app/font/NotoM.eot");
  src: url("/app/font/NotoM.eot?#iefix") format("embedded-opentype"),
    url("/app/font/NotoM.woff") format("woff"),
    url("/app/font/NotoM.otf") format("opentype");
}
@font-face {
  font-family: "NotoR";
  src: url("/app/font/NotoR.eot");
  src: url("/app/font/NotoR.eot?#iefix") format("embedded-opentype"),
    url("/app/font/NotoR.woff") format("woff"),
    url("/app/font/NotoR.otf") format("opentype");
}
@font-face {
  font-family: "RoundB";
  src: url("/app/font/RoundB.eot");
  src: url("/app/font/RoundB.eot?#iefix") format("embedded-opentype"),
    url("/app/font/RoundB.woff") format("woff"),
    url("/app/font/RoundB.ttf") format("truetype");
}
@font-face {
  font-family: "RoundM";
  src: url("/app/font/RoundM.eot");
  src: url("/app/font/RoundM.eot?#iefix") format("embedded-opentype"),
    url("/app/font/RoundM.woff") format("woff"),
    url("/app/font/RoundM.ttf") format("truetype");
}
@font-face {
  font-family: "RoundR";
  src: url("/app/font/RoundR.eot");
  src: url("/app/font/RoundR.eot?#iefix") format("embedded-opentype"),
    url("/app/font/RoundR.woff") format("woff"),
    url("/app/font/RoundR.ttf") format("truetype");
}
/*======================================================================
Layout
======================================================================*/
html {
  overflow: auto;
  font-family: "Hiragino Kaku Gothic Pro", "ヒラギノ角ゴ Pro", Meiryo, メイリオ,
    Osaka, "MS PGothic", arial, helvetica, sans-serif;
  font-size: 62.5%;
}
@media screen and (max-width: 750px) {
  html {
    font-size: 62.5%;
  }
}
@media screen and (max-width: 700px) {
  html {
    font-size: 58.33333333%;
  }
}
@media screen and (max-width: 650px) {
  html {
    font-size: 54.16666667%;
  }
}
@media screen and (max-width: 600px) {
  html {
    font-size: 50%;
  }
}
@media screen and (max-width: 550px) {
  html {
    font-size: 45.83333333%;
  }
}
@media screen and (max-width: 500px) {
  html {
    font-size: 41.66666667%;
  }
}
@media screen and (max-width: 450px) {
  html {
    font-size: 37.5%;
  }
}
@media screen and (max-width: 414px) {
  html {
    font-size: 34.5%;
  }
}
@media screen and (max-width: 375px) {
  html {
    font-size: 31.25%;
  }
}
@media screen and (max-width: 320px) {
  html {
    font-size: 26.66666667%;
  }
}

body {
  color: #000;
}

main {
  display: block;
}

#HAE_Note {
  min-width: 1200px;
  padding-bottom: 52px;
}
@media screen and (max-width: 750px) {
  #HAE_Note {
    min-width: 320px;
  }
}

@media screen and (max-width: 750px) {
  .pc-block {
    display: none;
  }
}
@media screen and (min-width: 751px) {
  .sp-block {
    display: none;
  }
}
/*======================================================================
Section
======================================================================*/
.section .section-inner {
  width: 1200px;
  margin: auto;
  padding-left: 20px;
  padding-right: 20px;
}
@media screen and (max-width: 750px) {
  .section .section-inner {
    width: auto;
    padding-left: 0;
    padding-right: 0;
  }
  .section .blocks {
    max-width: 100%;
    padding-left: 4.53333333%;
    padding-right: 4.53333333%;
  }
}

.section-line {
  width: 1160px;
  height: 2px;
  margin: auto;
  margin-top: 72px;
  background-color: #eee;
}
@media screen and (max-width: 750px) {
  .section-line {
    width: auto;
  }
}

/*======================================================================
Main
======================================================================*/
#Main {
  background: url(/app/img/pc/main_bg.jpg);
}
#Main .blocks {
  position: relative;
  width: 980px;
  margin: auto;
  padding-top: 366px;
  padding-bottom: 24px;
}
#Main .block-supported,
#Main .block-app_image,
#Main .block-title {
  position: absolute;
}
#Main .block-supported {
  top: 30px;
  right: 0;
}
#Main .block-app_image {
  top: 30px;
  left: 40px;
  z-index: 2;
}
#Main .block-app_image .icon {
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}
#Main .block-app_image.icon {
  z-index: 10;
}
#Main .block-title {
  top: 73px;
  right: 7px;
  z-index: 1;
}
#Main .block-dl_app {
  padding: 27px 25px 27px 34px;
  background-color: rgba(222, 79, 52, 0.1);
  border-radius: 10px;
}
#Main .block-foot,
#Main .block-foot .text {
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-align-content: center;
  -ms-flex-line-pack: center;
  align-content: center;
  -webkit-box-align: center;
  -webkit-align-items: center;
  -ms-flex-align: center;
  align-items: center;
  -webkit-box-pack: center;
  -webkit-justify-content: center;
  -ms-flex-pack: center;
  justify-content: center;
}
#Main .block-foot {
  margin-top: 22px;
}
#Main .block-foot .text {
  padding: 0 12px;
  color: #333;
  font-family: "Noto Sans JP", sans-serif;
  font-size: 1.4rem;
}
#Main .block-foot .text img {
  margin-left: 12px;
}
@media screen and (max-width: 750px) {
  #Main .blocks {
    width: auto;
    padding-top: calc(782 / 750 * 100vw);
    padding-bottom: 3.46666667%;
  }
  #Main .block-supported {
    top: 0;
    right: auto;
    left: 1.73333333%;
    -webkit-transform: translateY(41.17647059%);
    -ms-transform: translateY(41.17647059%);
    transform: translateY(41.17647059%);
    width: 21.6%;
  }
  #Main .block-title {
    top: 0;
    right: auto;
    left: calc(62 / 750 * 100vw);
    z-index: 3;
    -webkit-transform: translateY(calc(42 / 750 * 100vw));
    -ms-transform: translateY(calc(42 / 750 * 100vw));
    transform: translateY(calc(42 / 750 * 100vw));
    width: calc(629 / 750 * 100vw);
  }
  #Main .block-app_image {
    top: 0;
    left: calc(32 / 750 * 100vw);
    -webkit-transform: translateY(calc(276 / 750 * 100vw));
    -ms-transform: translateY(calc(276 / 750 * 100vw));
    transform: translateY(calc(276 / 750 * 100vw));
    width: calc(682 / 750 * 100vw);
  }
  #Main .block-dl_app {
    padding: 5.27859238% 6.4516129%;
  }
  #Main .block-foot {
    margin-top: 3.66568915%;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -webkit-flex-direction: column;
    -ms-flex-direction: column;
    flex-direction: column;
  }
  #Main .block-foot .text {
    width: 100%;
    padding: 0;
    font-family: "Noto Sans JP", sans-serif;
    font-size: 2.2rem;
  }
  #Main .block-foot .text + .text {
    margin-top: 0.73313783%;
  }
  #Main .block-foot .text img {
    width: 14.6627566%;
  }
}

#Pankuzu .blocks {
  width: auto;
  margin-top: 20px;
}
#Pankuzu .blocks li {
  display: inline-block;
}
#Pankuzu .blocks li a {
  text-decoration: none;
}
#Pankuzu .blocks li span {
  color: #333;
  font-family: "Noto Sans JP", sans-serif;
  font-size: 1.2rem;
  font-weight: 500;
}
@media screen and (max-width: 750px) {
  #Pankuzu .blocks {
    width: auto;
    margin-top: 3.2%;
  }
  #Pankuzu .blocks li span {
    font-size: 2.4rem;
  }
}

/*======================================================================
Parts Chatch
======================================================================*/
.parts-catch {
  position: relative;
  width: 980px;
  margin: auto;
}
.parts-catch .catch-chara {
  position: absolute;
  z-index: 1;
}
.parts-catch .catch-ribon {
  position: relative;
  z-index: 2;
}

/*======================================================================
Catch1
======================================================================*/
#Catch1 .blocks {
  margin-top: 56px;
}
#Catch1 .catch-chara {
  top: 75px;
  right: 44px;
}
@media screen and (max-width: 750px) {
  #Catch1 .blocks {
    margin-top: 9.33333333%;
  }
  #Catch1 .catch-chara {
    top: 0;
    left: 75.2%;
    -webkit-transform: translateY(51.6025641%);
    -ms-transform: translateY(51.6025641%);
    transform: translateY(51.6025641%);
    width: 20.66666667%;
  }
  #Catch1 .catch-note {
    -webkit-transform: translateX(-1.60583942%);
    -ms-transform: translateX(-1.60583942%);
    transform: translateX(-1.60583942%);
    width: 100.4398827%;
  }
  #Catch1 .catch-ribon {
    margin-top: 4.39882698%;
  }
}

/*======================================================================
Catch2
======================================================================*/
#Catch2 .blocks {
  margin-top: 72px;
}
#Catch2 .catch-chara {
  top: -28px;
  right: 48px;
}
#Catch2 .catch-ribon {
  margin-top: 10px;
}
@media screen and (max-width: 750px) {
  #Catch2 .blocks {
    margin-top: 9.6%;
  }
  #Catch2 .catch-chara {
    top: 0;
    left: 64%;
    -webkit-transform: translateY(26.34408602%);
    -ms-transform: translateY(26.34408602%);
    transform: translateY(26.34408602%);
    width: 33.06666667%;
  }
  #Catch2 .catch-note {
    -webkit-transform: translateX(-1.179941%);
    -ms-transform: translateX(-1.179941%);
    transform: translateX(-1.179941%);
    width: 99.41348974%;
  }
  #Catch2 .catch-ribon {
    margin-top: 3.95894428%;
  }
}

/*======================================================================
Parts Titles
======================================================================*/
.parts-titles {
  width: 980px;
  margin: auto;
  text-align: center;
}
.parts-titles .title-title {
  color: #d85246;
  font-family: "Noto Sans JP", sans-serif;
  font-size: 6rem;
  font-weight: 500;
  line-height: 1;
}
.parts-titles .title-text {
  color: #333;
  font-family: "Noto Sans JP", sans-serif;
  font-size: 2rem;
}
@media screen and (max-width: 750px) {
  .parts-titles {
    width: auto;
  }
  .parts-titles .title-head {
    width: 70%;
    margin: auto;
  }
  .parts-titles .title-title {
    font-size: 7.3rem;
  }
  .parts-titles .title-text {
    text-align: left;
    font-size: 3rem;
  }
}

/*======================================================================
Titles About
======================================================================*/
#About .blocks {
  margin-top: 82px;
}
#About .title-title {
  margin-top: 8px;
}
#About .title-text {
  margin-top: 40px;
}
@media screen and (max-width: 750px) {
  #About .blocks {
    margin-top: 14.4%;
  }
  #About .title-title {
    margin-top: 4.83870968%;
  }
  #About .title-text {
    margin-top: 8.06451613%;
  }
}

/*======================================================================
Titles How To Use
======================================================================*/
#HowTo .title-title {
  margin-top: 12px;
}
#HowTo .title-text {
  margin-top: 22px;
}
@media screen and (max-width: 750px) {
  #HowTo .title-title {
    margin-top: 4.39882698%;
  }
  #HowTo .title-text {
    margin-top: 7.3313783%;
  }
}

/*======================================================================
How To Use
======================================================================*/
#HowTo .blocks {
  margin-top: 86px;
}
#HowTo .block-howto {
  margin-top: 60px;
}
#HowTo .howto {
  position: relative;
}
#HowTo .howto + .howto {
  margin-top: 85px;
}
#HowTo .howto1 {
  padding-top: 440px;
}
#HowTo .howto2 {
  padding-top: 455px;
}
#HowTo .howto3 {
  padding-top: 660px;
}
#HowTo .howto4 {
  padding-top: 460px;
}
#HowTo .howto5,
#HowTo .howto6 {
  padding-top: 400px;
}
#HowTo .howto7 {
  padding-top: 300px;
}
#HowTo .howto-texts,
#HowTo .howto-phone,
#HowTo .howto-chara {
  position: absolute;
}
#HowTo .howto-texts .title {
  position: relative;
  padding-left: 70px;
  color: #333;
  font-family: "Noto Sans JP", sans-serif;
  font-size: 1.8rem;
  font-weight: 500;
}
#HowTo .howto-texts .title span {
  color: #de5e42;
  font-size: 3.6rem;
}
#HowTo .howto-texts .title:before {
  content: "";
  position: absolute;
  top: 50%;
  left: 0;
  -webkit-transform: translateY(-50%);
  -ms-transform: translateY(-50%);
  transform: translateY(-50%);
  width: 52px;
  height: 52px;
  background-repeat: no-repeat;
  background-size: contain;
}
#HowTo .howto-texts .text {
  margin-top: 20px;
  color: #333;
  font-family: "Noto Sans JP", sans-serif;
  font-size: 1.6rem;
  font-weight: normal;
}
#HowTo .howto-texts .movie-title {
  margin-top: 30px;
  color: #de5e41;
  font-family: "Noto Sans JP", sans-serif;
  font-size: 2.4rem;
  font-weight: 500;
}
#HowTo .howto-texts .movie-title + .text {
  margin-top: 30px;
}
#HowTo #mv.movie-title {
  margin: 30px 0 0 0;
  text-align: left;
}
#HowTo .howto-texts .movies-wrap {
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  margin-top: 20px;
  text-align: center;
  -webkit-box-pack: justify;
  -webkit-justify-content: space-between;
  -ms-flex-pack: justify;
  justify-content: space-between;
}
#HowTo .howto-texts .movie-image a,
#HowTo .howto-texts .movie-image img {
  display: block;
}
#HowTo .howto-texts .movie-name {
  margin-top: 20px;
  color: #333;
  font-family: "Noto Sans JP", sans-serif;
  font-size: 1.5rem;
}
#HowTo .howto-texts .family-image {
  margin-top: 40px;
  margin-left: 154px;
}
#HowTo .howto-lesson {
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  height: 160px;
  background-color: #fff2e5;
  border-radius: 10px;
  -webkit-box-align: center;
  -webkit-align-items: center;
  -ms-flex-align: center;
  align-items: center;
}
#HowTo .howto-lesson .lesson-icon {
  min-width: 74px;
  height: 74px;
  margin-right: 14px;
}
#HowTo .howto-lesson .lesson-text {
  color: #333;
  font-size: 1.6rem;
}
#HowTo .howto-lesson .lesson-text .title {
  font-family: "Noto Sans JP", sans-serif;
  font-weight: bold;
}
#HowTo .howto-lesson .lesson-text .list li {
  display: inline-block;
  margin-right: 15px;
  font-family: "Noto Sans JP", sans-serif;
}
#HowTo .howto-lesson .lesson-text .text {
  font-family: "Noto Sans JP", sans-serif;
}
#HowTo .howto1 .howto-texts {
  top: 73px;
  left: 795px;
}
#HowTo .howto1 .howto-texts .title:before {
  background-image: url(/app/img/pc/howto1_icon.png);
}
#HowTo .howto1 .howto-phone {
  top: 45px;
  left: 96px;
}
#HowTo .howto1 .howto-chara {
  top: 40px;
  left: 395px;
}
#HowTo .howto1 .howto-lesson {
  padding-left: 442px;
  padding-right: 190px;
}
#HowTo .howto2 .howto-texts {
  top: 30px;
  right: 58px;
}
#HowTo .howto2 .howto-texts .title:before {
  background-image: url(/app/img/pc/howto2_icon.png);
}
#HowTo .howto2 .howto-phone {
  top: 0;
  left: 58px;
}
#HowTo .howto2 .howto-chara {
  top: 230px;
  right: 152px;
}
#HowTo .howto2 .howto-lesson {
  padding-left: 505px;
}
#HowTo .howto3 .howto-texts {
  top: 0;
  left: 58px;
  width: 550px;
}
#HowTo .howto3 .howto-texts .title:before {
  background-image: url(/app/img/pc/howto3_icon.png);
}
#HowTo .howto3 .howto-chara {
  top: 100px;
  right: 96px;
}
#HowTo .howto3 .howto-lesson {
  padding-left: 58px;
  padding-right: 100px;
}
#HowTo .howto4 .howto-texts {
  top: 0;
  right: 68px;
}
#HowTo .howto4 .howto-texts .title:before {
  background-image: url(/app/img/pc/howto4_icon.png);
}
#HowTo .howto4 .howto-chara {
  top: 40px;
  left: 58px;
}
#HowTo .howto4 .howto-lesson {
  padding-left: 517px;
}
#HowTo .howto5 .howto-texts {
  top: 73px;
  left: 710px;
}
#HowTo .howto5 .howto-texts .title:before {
  background-image: url(/app/img/pc/howto5_icon.png);
  width: 60px;
  height: 60px;
}
#HowTo .howto5 .howto-phone {
  top: 0;
  left: 50px;
}
#HowTo .howto5 .howto-lesson {
  padding-left: 442px;
  padding-right: 100px;
}
#HowTo .howto6 .howto-texts {
  top: 33px;
  left: 57px;
}
#HowTo .howto7 .howto-texts {
  top: 33px;
  left: 57px;
}
#HowTo .howto6 .howto-texts .title:before {
  background-image: url(/app/img/pc/howto6_icon.png);
}
#HowTo .howto7 .howto-texts .title:before {
  width: 65px;
  height: 40px;
  background-image: url(/app/img/pc/howto7_icon.png);
}
#HowTo .howto6 .howto-phone {
  top: 0;
  left: 600px;
}
#HowTo .howto7 .howto-phone {
  top: 0;
  left: 600px;
}
#HowTo .howto6 .howto-lesson {
  padding-left: 57px;
}
#HowTo .howto7 .howto-lesson {
  padding-left: 57px;
}
@media screen and (max-width: 750px) {
  #HowTo .blocks {
    margin-top: 13.6%;
  }
  #HowTo .block-howto {
    margin-top: 8.79765396%;
  }
  #HowTo .howto {
    position: relative;
  }
  #HowTo .howto + .howto {
    margin-top: 12.31671554%;
  }
  #HowTo .howto1,
  #HowTo .howto2,
  #HowTo .howto5,
  #HowTo .howto6,
  #HowTo .howto7 {
    padding-top: 110.85043988%;
  }
  #HowTo .howto3 {
    padding-top: 300%;
  }
  #HowTo .howto4 {
    padding-top: 100%;
  }
  #HowTo .howto-texts .title {
    position: static;
    padding-left: 18.47507331%;
    font-family: "Noto Sans JP", sans-serif;
    font-size: 3rem;
  }
  #HowTo .howto-texts .title span {
    font-family: "Noto Sans JP", sans-serif;
    font-size: 5rem;
    font-weight: 500;
    line-height: 1.3;
  }
  #HowTo .howto-texts .title:before {
    position: absolute;
    top: 10px;
    left: 0;
    -webkit-transform: none;
    -ms-transform: none;
    transform: none;
    width: 11.29032258%;
    height: 0;
    padding-top: 11.29032258%;
  }
  #HowTo .howto-texts .text {
    margin-top: 4.39882698%;
    font-size: 3rem;
  }
  #HowTo .howto-texts .movie-title {
    margin-top: 4.39882698%;
    font-size: 3.4rem;
  }
  #HowTo .howto-texts .movie-title + .text {
    margin-top: 4.39882698%;
  }
  #HowTo .howto-texts .movies-wrap {
    display: block;
    width: 44.57478006%;
    margin-top: 13.19648094%;
    margin-left: auto;
  }
  #HowTo .howto-texts .movie {
    display: block;
    text-align: center;
  }
  #HowTo .howto-texts .movie + .movie {
    margin-top: 13.15789474%;
  }
  #HowTo .howto-texts .movie-image img {
    width: 100%;
  }
  #HowTo .howto-texts .movie-name {
    margin-top: 5.92105263%;
    font-size: 2.8rem;
  }
  #HowTo .howto-texts .family-image {
    width: 61.58357771%;
    margin-top: 8.79765396%;
    margin-left: 1.46627566%;
  }
  #HowTo .howto-texts .family-image img {
    width: 100%;
  }
  #HowTo .howto-lesson {
    height: auto;
  }
  #HowTo .howto-lesson .lesson-icon {
    min-width: 12.05211726%;
    height: auto;
    margin-right: 1.6286645%;
  }
  #HowTo .howto-lesson .lesson-text .title {
    font-family: "Noto Sans JP", sans-serif;
    font-size: 3rem;
  }
  #HowTo .howto-lesson .lesson-text .list li {
    display: inline-block;
    margin-right: 15px;
    font-size: 2.8rem;
  }
  #HowTo .howto-lesson .lesson-text .text {
    font-size: 2.8rem;
  }
  #HowTo .howto1 .howto-texts,
  #HowTo .howto2 .howto-texts,
  #HowTo .howto3 .howto-texts,
  #HowTo .howto4 .howto-texts,
  #HowTo .howto5 .howto-texts,
  #HowTo .howto6 .howto-texts,
  #HowTo .howto7 .howto-texts {
    top: 0;
    left: 0;
    width: 100%;
  }
  #HowTo .howto1 .howto-texts .title,
  #HowTo .howto2 .howto-texts .title,
  #HowTo .howto3 .howto-texts .title,
  #HowTo .howto4 .howto-texts .title,
  #HowTo .howto5 .howto-texts .title,
  #HowTo .howto6 .howto-texts .title,
  #HowTo .howto7 .howto-texts .title {
    display: inline-block;
    text-align: center;
  }
  #HowTo .howto1 .howto-lesson,
  #HowTo .howto2 .howto-lesson,
  #HowTo .howto3 .howto-lesson,
  #HowTo .howto4 .howto-lesson,
  #HowTo .howto5 .howto-lesson,
  #HowTo .howto6 .howto-lesson,
  #HowTo .howto7 .howto-lesson {
    padding-bottom: 8.79765396%;
    padding-left: 4.98533724%;
    padding-right: 4.98533724%;
  }
  #HowTo .howto1 .howto-phone {
    top: 0;
    left: 3.95894428%;
    -webkit-transform: translateY(calc(400 / 750 * 100vw));
    -ms-transform: translateY(calc(400 / 750 * 100vw));
    transform: translateY(calc(400 / 750 * 100vw));
    width: 39.08211144%;
  }
  #HowTo .howto1 .howto-chara {
    top: 0;
    left: 50%;
    -webkit-transform: translateY(95.08599509%);
    -ms-transform: translateY(95.08599509%);
    transform: translateY(95.08599509%);
    width: 42.228739%;
  }
  #HowTo .howto1 .howto-lesson {
    padding-top: 21.40762463%;
  }
  #HowTo .howto2 .howto-phone {
    top: 10px;
    left: 53.81231672%;
    z-index: 2;
    -webkit-transform: translateY(57.97101449%);
    -ms-transform: translateY(57.97101449%);
    transform: translateY(57.97101449%);
    width: 42.08211144%;
  }
  #HowTo .howto2 .howto-chara {
    top: 0;
    left: 0.4398827%;
    -webkit-transform: translateY(85.03401361%);
    -ms-transform: translateY(85.03401361%);
    transform: translateY(85.03401361%);
    width: 63.63636364%;
  }
  #HowTo .howto2 .howto-chara img {
    width: 100%;
  }
  #HowTo .howto2 .howto-lesson {
    padding-top: 24.04692082%;
  }
  #HowTo .howto3 .howto-chara {
    top: 0;
    left: 0;
    right: 0;
    margin: auto;
    -webkit-transform: translateY(262%);
    -ms-transform: translateY(262%);
    transform: translateY(262%);
    width: 32.11143695%;
  }
  #HowTo .howto3 .howto-lesson {
    padding-top: 13.92961877%;
  }
  #HowTo .howto4 .howto-texts .title {
    padding-left: 12.02346041%;
  }
  #HowTo .howto4 .howto-chara {
    top: 0;
    left: 63.7829912%;
    -webkit-transform: translateY(86%);
    -ms-transform: translateY(86%);
    transform: translateY(86%);
    width: 35.7771261%;
  }
  #HowTo .howto4 .howto-lesson {
    padding-top: 10.85043988%;
  }
  #HowTo .howto5 .howto-phone {
    top: 0;
    left: 0;
    -webkit-transform: translateY(57.63636364%);
    -ms-transform: translateY(57.63636364%);
    transform: translateY(57.63636364%);
    width: 100%;
  }
  #HowTo .howto5 .howto-lesson {
    padding-top: 10%;
  }
  #HowTo .howto6 .howto-phone {
    top: -80px;
    left: 0;
    -webkit-transform: translateY(57.63636364%);
    -ms-transform: translateY(57.63636364%);
    transform: translateY(57.63636364%);
    width: 100%;
  }
  #HowTo .howto7 .howto-phone {
    top: 0;
    left: 0;
    -webkit-transform: translateY(57.63636364%);
    -ms-transform: translateY(57.63636364%);
    transform: translateY(57.63636364%);
    width: 100%;
  }
  #HowTo .howto6 .howto-lesson {
    padding-top: 15%;
  }
  #HowTo .howto7 .howto-lesson {
    padding-top: 15%;
  }
}
@media screen and (max-width: 350px) {
  #HowTo .howto3 {
    padding-top: 326%;
  }
  #HowTo .howto3 .howto-chara {
    -webkit-transform: translateY(300%);
    -ms-transform: translateY(300%);
    transform: translateY(300%);
  }
}
@media screen and (max-width: 520px) {
  #HowTo .howto3 {
    padding-top: 230%;
  }
  #HowTo .howto3 .howto-chara {
    -webkit-transform: translateY(184%);
    -ms-transform: translateY(184%);
    transform: translateY(184%);
  }
}
@media screen and (max-width: 350px) {
  #HowTo .howto3 {
    padding-top: 326%;
  }
  #HowTo .howto3 .howto-chara {
    -webkit-transform: translateY(300%);
    -ms-transform: translateY(300%);
    transform: translateY(300%);
  }
}
/*======================================================================
Supports
======================================================================*/
#Supports .blocks {
  width: 1160px;
  margin: auto;
  margin-top: 56px;
}
#Supports .block-head {
  text-align: center;
}
#Supports .block-head .text {
  color: #333;
  font-family: "Noto Sans JP", sans-serif;
  font-weight: 500;
  font-size: 1.8rem;
}
#Supports .block-head .title {
  color: #de5e42;
  font-family: "Noto Sans JP", sans-serif;
  font-weight: 500;
  font-size: 3.6rem;
}
#Supports .block-troubles {
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-flex-wrap: wrap;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;
  margin-top: 48px;
  -webkit-box-pack: justify;
  -webkit-justify-content: space-between;
  -ms-flex-pack: justify;
  justify-content: space-between;
}
#Supports .block-troubles2 {
  margin-top: 48px;
  background-color: #fff2e5;
}
#Supports .block-troubles2_title {
  padding: 30px 30px 0 30px;
}
#Supports .block-troubles2_inner {
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-flex-wrap: wrap;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;
  -webkit-box-pack: justify;
  -webkit-justify-content: space-between;
  -ms-flex-pack: justify;
  justify-content: space-between;
}
#Supports .troubles {
  width: 554px;
  padding: 25px 17px 18px 20px;
  background-color: #fff2e5;
  border-radius: 5px;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
}
#Supports .troubles_2 {
  width: 580px;
  padding: 0px 17px 18px 20px;
  background-color: #fff2e5;
  border-radius: 5px;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
}
#Supports .troubles:nth-child(n + 3) {
  margin-top: 42px;
}
#Supports .trouble-title {
  position: relative;
  height: 46px;
  padding-left: 76px;
  vertical-align: middle;
  color: #333;
  font-family: "Noto Sans JP", sans-serif;
  font-size: 2.1rem;
  font-weight: 500;
}
#Supports .trouble-title:before {
  content: "";
  position: absolute;
  top: 50%;
  left: 0;
  -webkit-transform: translateY(-50%);
  -ms-transform: translateY(-50%);
  transform: translateY(-50%);
  width: 62px;
  height: 46px;
  background-image: url(/app/img/pc/troubles_title_nayami.png);
  background-repeat: no-repeat;
}
#Supports .trouble-title span {
  position: absolute;
  top: 50%;
  -webkit-transform: translateY(-60%);
  -ms-transform: translateY(-60%);
  transform: translateY(-60%);
}
#Supports .trouble-wrap {
  margin-top: 16px;
  padding: 30px 25px 0;
  background-image: url(/app/img/pc/troubles-wrap_bg.jpg);
  border-radius: 5px;
  text-align: center;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
}
#Supports .troubles1 .trouble-wrap {
  height: 252px;
}
#Supports .troubles2 .trouble-wrap,
#Supports .troubles3 .trouble-wrap,
#Supports .troubles4 .trouble-wrap {
  height: 282px;
}
#Supports .troubles5 .trouble-wrap,
#Supports .troubles6 .trouble-wrap,
#Supports .troubles7 .trouble-wrap {
  height: 252px;
}
#Supports .trouble-HAE_note {
  position: relative;
  margin-left: 10px;
  padding: 10px;
  background-color: #de5e41;
  border-radius: 5px;
  text-align: center;
  color: #fff;
  font-family: "Noto Sans JP", sans-serif;
  font-size: 1.8rem;
  font-weight: normal;
  line-height: 1;
}
#Supports .trouble-HAE_note:before {
  content: "";
  position: absolute;
  top: 50%;
  left: -10px;
  -webkit-transform: translateY(-50%);
  -ms-transform: translateY(-50%);
  transform: translateY(-50%);
  width: 31px;
  height: 52px;
  background-image: url(/app/img/pc/trouble_HAE_note.png);
}
#Supports .trouble-method {
  position: relative;
  display: inline-block;
  margin-top: 32px;
  padding-left: 42px;
  text-align: center;
  color: #de5e41;
  font-family: "Noto Sans JP", sans-serif;
  font-weight: 500;
  font-size: 1.8rem;
}
#Supports .trouble-method:before {
  content: "";
  position: absolute;
  top: 50%;
  left: 0;
  -webkit-transform: translateY(-50%);
  -ms-transform: translateY(-50%);
  transform: translateY(-50%);
  width: 36px;
  height: 36px;
}
#Supports .troubles1 .trouble-method:before {
  background-image: url(/app/img/pc/trouble_method_icon1.png);
}
#Supports .troubles2 .trouble-method:before {
  background-image: url(/app/img/pc/trouble_method_icon2.png);
}
#Supports .troubles3 .trouble-method:before {
  background-image: url(/app/img/pc/trouble_method_icon3.png);
}
#Supports .troubles4 .trouble-method:before {
  background-image: url(/app/img/pc/trouble_method_icon4.png);
}
#Supports .troubles5 .trouble-method:before {
  background-image: url(/app/img/pc/trouble_method_icon5.png);
}
#Supports .troubles6 .trouble-method:before {
  background-image: url(/app/img/pc/trouble_method_icon6.png);
}
#Supports .troubles7 .trouble-method {
  padding-left: 54px;
}
@media screen and (max-width: 750px) {
  #Supports .troubles7 .trouble-method {
    padding-left: 0;
  }
}
#Supports .troubles7 .trouble-method:before {
  width: 45px;
  height: 36px;
  background: url(/app/img/pc/trouble_method_icon7.png) center center no-repeat;
  background-size: contain;
}
@media screen and (max-width: 750px) {
  #Supports .troubles7 .trouble-method:before {
    height: auto;
  }
}
#Supports .trouble-text {
  margin-top: 28px;
  text-align: left;
  color: #333;
  font-family: "Noto Sans JP", sans-serif;
  font-size: 1.6rem;
  font-weight: normal;
}
#Supports .block-troubles_under-text {
  margin-top: 10px;
  text-align: right;
  color: #333;
  font-family: "Noto Sans JP", sans-serif;
  font-size: 1rem;
}
@media screen and (max-width: 750px) {
  #Supports .blocks {
    margin-top: 10%;
  }
  #Supports .block-head .text {
    font-family: "Noto Sans JP", sans-serif;
    font-size: 3rem;
  }
  #Supports .block-head .title {
    font-size: 5rem;
  }
  #Supports .block-troubles {
    display: block;
    margin-top: 6.66666667%;
  }
  #Supports .troubles {
    width: auto;
    padding: 6.15835777% 5.42521994% 4.39882698% 4.98533724%;
    border-radius: 10px;
  }
  #Supports .troubles:nth-child(n + 3) {
    margin-top: auto;
  }
  #Supports .troubles + .troubles {
    margin-top: 4.69208211%;
  }
  #Supports .trouble-title {
    height: auto;
    padding-left: 17.30205279%;
    font-size: 3rem;
  }
  #Supports .trouble-title:before {
    width: 17.34860884%;
    height: auto;
    padding-top: 10.96563011%;
    background-size: contain;
  }
  #Supports .trouble-title span {
    position: static;
    -webkit-transform: none;
    -ms-transform: none;
    transform: none;
  }
  #Supports .trouble-wrap {
    margin-top: 5.89198036%;
    padding: 6.54664484%;
    border-radius: 10px;
  }
  #Supports .troubles1 .trouble-wrap,
  #Supports .troubles2 .trouble-wrap {
    height: auto;
  }
  #Supports .troubles3 .trouble-wrap,
  #Supports .troubles4 .trouble-wrap {
    height: auto;
  }
  #Supports .troubles5 .trouble-wrap,
  #Supports .troubles6 .trouble-wrap,
  #Supports .troubles7 .trouble-wrap {
    height: auto;
  }
  #Supports .trouble-HAE_note {
    margin-left: 10px;
    padding: 10px;
    font-size: 3rem;
  }
  #Supports .trouble-HAE_note:before {
    left: -10px;
    width: 8.4452975%;
    height: auto;
    padding-top: 14.20345489%;
    background-repeat: no-repeat;
    background-size: contain;
  }
  #Supports .trouble-method {
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    margin-top: 5.27306968%;
    padding-left: 0;
    font-size: 3.3rem;
    -webkit-box-align: center;
    -webkit-align-items: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-box-pack: center;
    -webkit-justify-content: center;
    -ms-flex-pack: center;
    justify-content: center;
  }
  #Supports .trouble-method:before {
    position: static;
    -webkit-transform: none;
    -ms-transform: none;
    transform: none;
    display: block;
    width: 9.79284369%;
    height: 0;
    padding-top: 9.79284369%;
    background-size: contain;
  }
  #Supports .trouble-method span {
    margin-left: 1.88323917%;
  }
  #Supports .trouble-text {
    margin-top: 5.27306968%;
    font-size: 3rem;
  }
}

/*======================================================================
Parts Download App
======================================================================*/
.parts-dl_app .dl_app-head,
.parts-dl_app .dl_app-wrap,
.parts-dl_app .dl_app-store {
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-align-content: center;
  -ms-flex-line-pack: center;
  align-content: center;
}
.parts-dl_app .dl_app-head {
  color: #d85246;
  font-family: "RoundM", sans-serif;
  font-size: 3.5rem;
  font-weight: normal;
  -webkit-box-align: center;
  -webkit-align-items: center;
  -ms-flex-align: center;
  align-items: center;
  -webkit-box-pack: center;
  -webkit-justify-content: center;
  -ms-flex-pack: center;
  justify-content: center;
}
.parts-dl_app .dl_app-wrap {
  margin-top: 20px;
  -webkit-box-align: center;
  -webkit-align-items: center;
  -ms-flex-align: center;
  align-items: center;
  -webkit-box-pack: justify;
  -webkit-justify-content: space-between;
  -ms-flex-pack: justify;
  justify-content: space-between;
}
.parts-dl_app .dl_app-store {
  -webkit-box-align: end;
  -webkit-align-items: flex-end;
  -ms-flex-align: end;
  align-items: flex-end;
  -webkit-box-pack: justify;
  -webkit-justify-content: space-between;
  -ms-flex-pack: justify;
  justify-content: space-between;
}
.parts-dl_app .dl_app-buttons .text {
  color: #333;
  font-family: "Noto Sans JP", sans-serif;
  font-size: 1.4rem;
}
.parts-dl_app .dl_app-buttons .buttons {
  margin-top: 13px;
  font-size: 0;
}
.parts-dl_app .dl_app-buttons .buttons a {
  display: inline-block;
}
.parts-dl_app .dl_app-buttons .buttons a + a {
  margin-left: 11px;
}
.parts-dl_app .dl_app-qr {
  margin-left: 13px;
}
.parts-dl_app .dl_app-qr img {
  display: block;
}
.parts-dl_app .dl_app-or {
  color: #d85246;
  font-family: "RoundM", sans-serif;
  font-size: 2.2rem;
}
.parts-dl_app .dl_app-search .text {
  color: #333;
  font-family: "Noto Sans JP", sans-serif;
  font-size: 1.4rem;
}
.parts-dl_app .dl_app-search .image {
  margin-top: 10px;
}
.parts-dl_app .dl_app-foot {
  margin-top: 12px;
  color: #333;
  font-family: "Noto Sans JP", sans-serif;
  font-size: 1.3rem;
  letter-spacing: -0.2px;
}
@media screen and (max-width: 750px) {
  .parts-dl_app .dl_app-head {
    font-family: "RoundB", sans-serif;
    font-size: 3.8rem;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -webkit-flex-direction: column;
    -ms-flex-direction: column;
    flex-direction: column;
  }
  .parts-dl_app .dl_app-wrap {
    margin-top: auto;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -webkit-flex-direction: column;
    -ms-flex-direction: column;
    flex-direction: column;
  }
  .parts-dl_app .dl_app-store {
    display: block;
    width: 100%;
  }
  .parts-dl_app .dl_app-buttons {
    margin-top: 3.36700337%;
  }
  .parts-dl_app .dl_app-buttons .text {
    text-align: center;
    font-size: 2.4rem;
  }
  .parts-dl_app .dl_app-buttons .buttons {
    margin-top: 3.36700337%;
  }
  .parts-dl_app .dl_app-buttons .buttons a {
    width: 48.82154882%;
  }
  .parts-dl_app .dl_app-buttons .buttons a + a {
    margin-left: 2.18855219%;
  }
  .parts-dl_app .dl_app-qr {
    display: none;
  }
  .parts-dl_app .dl_app-or {
    width: 100%;
    margin-top: 1.68350168%;
    text-align: center;
    color: #d85246;
    font-family: "RoundB", sans-serif;
    font-size: 3.2rem;
  }
  .parts-dl_app .dl_app-search {
    position: relative;
    width: 100%;
    margin-top: 1.68350168%;
  }
  .parts-dl_app .dl_app-search .text {
    padding-left: 51.17845118%;
    font-size: 2.4rem;
  }
  .parts-dl_app .dl_app-search .image {
    position: absolute;
    top: 50%;
    left: 0;
    -webkit-transform: translateY(-50%);
    -ms-transform: translateY(-50%);
    transform: translateY(-50%);
    width: 48.65319865%;
    margin-top: auto;
  }
  .parts-dl_app .dl_app-foot {
    margin-top: 3.03030303%;
    font-size: 2.2rem;
  }
}

/*======================================================================
Section DL_App
======================================================================*/
.section-dl_app .blocks {
  margin-top: 70px;
  padding: 56px 92px 60px 130px;
  background-color: #fcedea;
  border-radius: 10px;
}
.section-dl_app .dl_app-head {
  padding-left: 26px;
  -webkit-box-pack: left;
  -webkit-justify-content: left;
  -ms-flex-pack: left;
  justify-content: left;
}
.section-dl_app .dl_app-head img {
  margin-right: 18px;
}
@media screen and (max-width: 750px) {
  .section-dl_app .blocks {
    width: 90.93333333%;
    margin-top: 8.8%;
    margin-left: auto;
    margin-right: auto;
    padding: 6.66666667% 5.6% 5.33333333%;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
  }
  .section-dl_app .dl_app-head {
    padding-left: 0;
    -webkit-box-pack: center;
    -webkit-justify-content: center;
    -ms-flex-pack: center;
    justify-content: center;
  }
  .section-dl_app .dl_app-head span {
    display: block;
    margin-top: 2.5083612%;
  }
}

/*======================================================================
Q and A
======================================================================*/
#QandA .blocks {
  width: 1044px;
  margin: auto;
  margin-top: 70px;
}
#QandA .block-title .title {
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;

  -webkit-align-items: center;
  -ms-flex-align: center;

  align-items: center;
  -webkit-box-pack: center;
  -webkit-justify-content: center;
  -ms-flex-pack: center;
  justify-content: center;
}
#QandA .block-title .title img {
  margin-right: 15px;
}
#QandA .block-title .title span {
  color: #d85246;
  font-family: "Noto Sans JP", sans-serif;
  font-size: 6rem;
  font-weight: 500;
}
#QandA .block-title .text {
  margin-top: 12px;
  text-align: center;
  color: #333;
  font-family: "Noto Sans JP", sans-serif;
  font-size: 1.6rem;
}
#QandA .block-QandA {
  margin-top: 60px;
}
#QandA .QandA-question .question,
#QandA .QandA-answer {
  width: 835px;
}
#QandA .QandA-question {
  position: relative;
}
#QandA .QandA-question .question {
  padding: 36px 32px;
  background-color: #ffefde;
  border-radius: 5px;
  color: #d85246;
  font-family: "Noto Sans JP", sans-serif;
  font-size: 2.1rem;
  font-weight: 500;
  line-height: 1;
}
#QandA .QandA-question .chara {
  position: absolute;
  top: 0;
}
#QandA .QandA-answer {
  position: relative;
  margin-top: 25px;
  padding-left: 70px;
}
#QandA .QandA-answer .icon {
  position: absolute;
  top: 50%;
  left: 0;
  -webkit-transform: translateY(-50%);
  -ms-transform: translateY(-50%);
  transform: translateY(-50%);
  display: block;
  width: 59px;
  height: 59px;
}
#QandA .QandA-answer .text {
  color: #333333;
  font-family: "Noto Sans JP", sans-serif;
  font-size: 1.6rem;
}
#QandA .block-QandA1 .QandA-question .chara {
  left: 818px;
}
#QandA .block-QandA2 .QandA-question .question {
  margin-left: auto;
}
#QandA .block-QandA2 .QandA-question .chara {
  right: 818px;
}
#QandA .block-QandA2 .QandA-answer {
  margin-left: auto;
}
@media screen and (max-width: 750px) {
  #QandA .blocks {
    width: auto;
    margin-top: 9.33333333%;
  }
  #QandA .block-title .title {
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: left;
    -webkit-justify-content: left;
    -ms-flex-pack: left;
    justify-content: left;
  }
  #QandA .block-title .title img {
    width: 19.50146628%;
    margin-right: 2.19941349%;
  }
  #QandA .block-title .title span {
    font-size: 7.3rem;
  }
  #QandA .block-title .text {
    margin-top: 6.74486804%;
    text-align: left;
    font-size: 3rem;
  }
  #QandA .block-QandA {
    margin-top: 7.3313783%;
  }
  #QandA .QandA-question .question {
    width: 74.19354839%;
  }
  #QandA .QandA-answer {
    width: auto;
  }
  #QandA .QandA-question .question {
    padding: 7.03812317% 4.98533724%;
    font-size: 3.6rem;
    line-height: 1.38888889;
  }
  #QandA .QandA-question .chara {
    position: absolute;
    top: 0;
  }
  #QandA .QandA-answer {
    position: relative;
    margin-top: 4.39882698%;
    padding-left: 18.32844575%;
  }
  #QandA .QandA-answer .icon {
    top: 0;
    -webkit-transform: none;
    -ms-transform: none;
    transform: none;
    width: 12.90322581%;
    height: auto;
  }
  #QandA .QandA-answer .icon img {
    display: block;
    width: 100%;
  }
  #QandA .QandA-answer .text {
    font-size: 3rem;
  }
  #QandA .block-QandA .QandA-question .chara img {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
  }
  #QandA .block-QandA1 .QandA-question .chara {
    top: auto;
    right: 0;
    bottom: 0;
    left: auto;
    -webkit-transform: translateY(8.58585859%);
    -ms-transform: translateY(8.58585859%);
    transform: translateY(8.58585859%);
    width: 28.4457478%;
    height: 0;
    padding-top: 29.03225806%;
  }
  #QandA .block-QandA2 .QandA-question .question {
    margin-left: auto;
  }
  #QandA .block-QandA2 .QandA-question .chara {
    top: auto;
    right: auto;
    bottom: 0;
    left: 0;
    -webkit-transform: translateY(8.62944162%);
    -ms-transform: translateY(8.62944162%);
    transform: translateY(8.62944162%);
    width: 28.4457478%;
    height: 0;
    padding-top: 28.8856305%;
  }
  #QandA .block-QandA2 .QandA-answer {
    margin-left: auto;
  }
}

.howto-mov-area {
  margin-top: 25px;
}
.howto-mov-area .howto-mov-item {
  padding: 0;
  margin: 0;
  width: 100%;
  max-width: 480px;
}
.howto-mov-area .howto-mov-item + .howto-mov-item {
  margin-top: 35px;
}
.howto-mov-area .howto-mov-item > dt {
  padding: 0;
  margin: 0;
}
.howto-mov-area .howto-mov-item > dd {
  padding: 0;
  margin: 0;
  margin-top: 12px;
  font-size: 16px;
  text-align: center;
}
.howto-mov-area .text-note {
  margin-top: 40px;
}
@media screen and (max-width: 750px) {
  .howto-mov-area .howto-mov-item {
    max-width: none;
  }
  .howto-mov-area .howto-mov-item + .howto-mov-item {
    margin-top: 15px;
  }
  .howto-mov-area .howto-mov-item > dd {
    margin-top: 8px;
    font-size: 15px;
  }
  .howto-mov-area .text-note {
    margin-top: 20px;
    font-size: 14px;
  }
}