@charset "utf-8";
/* 公式カラーパレット */
/* 仮 */
/* fonts */
/* ========================================
# アプリ版・WEB版
======================================== */
.section {
  font-size: 1.4rem;
}
.appweb-sect-header {
  text-align: center;
  margin: 0 0 30px;
}
@media only screen and (max-width: 780px) {
  .appweb-sect-header {
    margin: 0 0 20px;
  }
}
.appweb-sect-header .sect-title-en {
  display: table;
  border-bottom: 2px solid #000;
  padding: 0 0 5px;
  margin: 0 auto 15px;
  font-size: 1.8rem;
  font-weight: 600;
}
.page-app .appweb-sect-header .sect-title-en {
  color: #52A5DC;
  border-color: #52A5DC;
}
.page-web-ver .appweb-sect-header .sect-title-en {
  color: #ED7980;
  border-color: #ED7980;
}
@media only screen and (max-width: 780px) {
  .appweb-sect-header .sect-title-en {
    font-size: 1.6rem;
  }
}
.appweb-sect-header .sect-title {
  color: #3e3e3e;
  font-size: 3.3rem;
  font-weight: 600;
  line-height: 1;
}
.appweb-sect-header .sect-title small {
  font-size: 2.2rem;
}
@media only screen and (max-width: 780px) {
  .appweb-sect-header .sect-title {
    font-size: 2.4rem;
  }
  .appweb-sect-header .sect-title small {
    font-size: 2rem;
  }
}
.appweb-sect-header .sect-lede {
  margin-top: 15px;
}
@media only screen and (max-width: 780px) {
  .appweb-sect-header .sect-lede {
    text-align: left;
  }
}
/* Main Visual
---------------------------------------- */
.appweb-main-visual {
  position: relative;
  margin-top: -100px;
  padding: 100px 30px 0px;
  /* オーバーレイの高さを指定 */
  /* 画像の位置やサイズの調整 */
  background-size: cover;
  background-repeat: no-repeat;
  background-position: top center;
}
@media screen and (max-width: 1000px) {
  .appweb-main-visual {
    padding: 90px 0px 0px;
    background-size: cover;
    height: auto;
  }
}
@media screen and (max-width: 768px) {
  .appweb-main-visual {
    background-size: cover;
  }
}
@media only screen and (max-width: 780px) {
  .appweb-main-visual {
    margin-top: -58px;
  }
}
.page-app .appweb-main-visual {
  background-image: linear-gradient(rgba(255, 255, 255, 0.7), rgba(255, 255, 255, 0.7)), url(../images/appweb/img_main_app.webp);
}
.page-web-ver .appweb-main-visual {
  background-image: linear-gradient(rgba(255, 255, 255, 0.7), rgba(255, 255, 255, 0.7)), url(../images/appweb/img_main_web.webp);
}
.appweb-main-visual .mv-content {
  position: relative;
  display: flex;
  justify-content: flex-end;
  align-items: stretch;
  width: 100%;
  height: 645px;
  padding: 0 25px;
  box-sizing: border-box;
}
@media screen and (max-width: 1000px) {
  .appweb-main-visual .mv-content {
    flex-direction: column-reverse;
    text-align: center;
    height: auto;
  }
}
@media only screen and (max-width: 780px) {
  .appweb-main-visual .mv-content {
    flex-direction: column-reverse;
    text-align: center;
    height: auto;
    padding: 0;
  }
}
.appweb-main-visual .mv-image {
  position: absolute;
  top: 100px;
  left: 25px;
  width: 38.8%;
  max-width: 380px;
  aspect-ratio: 300 / 511;
}
.appweb-main-visual .mv-image img {
  width: 100%;
  height: auto;
}
@media screen and (max-width: 1000px) {
  .appweb-main-visual .mv-image {
    position: static;
    width: 100%;
    margin: 20px auto 0;
  }
}
@media only screen and (max-width: 780px) {
  .appweb-main-visual .mv-image {
    width: auto;
  }
}
.appweb-main-visual .mv-title-block {
  display: flex;
  flex-direction: column;
  justify-content: center;
  margin-left: auto;
  width: 550px;
}
@media screen and (max-width: 1000px) {
  .appweb-main-visual .mv-title-block {
    margin: 0 auto;
  }
}
@media only screen and (max-width: 780px) {
  .appweb-main-visual .mv-title-block {
    display: block;
    width: 100%;
  }
}
.appweb-main-visual .mv-title {
  aspect-ratio: 550 / 181;
}
.appweb-main-visual .mv-title img {
  width: 100%;
  height: auto;
}
.appweb-main-visual .mv-detail {
  width: 460px;
  margin: 0 45px 0 auto;
}
@media only screen and (max-width: 780px) {
  .appweb-main-visual .mv-detail {
    width: auto;
    margin: 0 0 30px;
  }
}
.appweb-main-visual .sub-title {
  color: #3e3e3e;
  text-align: center;
  font-size: 2.5rem;
  font-weight: 600;
  padding: 10px 0;
  margin-bottom: 15px;
  letter-spacing: 1.5px;
  border-top: 1px solid #3e3e3e;
  border-bottom: 1px solid #3e3e3e;
  filter: drop-shadow(0 0 0.5rem #ffffff);
}
@media only screen and (max-width: 780px) {
  .appweb-main-visual .sub-title {
    font-size: 1.9rem;
    padding: 10px 0;
  }
}
.appweb-main-visual .description {
  margin-bottom: 20px;
  font-size: 1.4rem;
}
@media only screen and (max-width: 780px) {
  .appweb-main-visual .description {
    text-align: left;
  }
}
.appweb-main-visual .point {
  position: relative;
  display: flex;
  justify-content: flex-start;
  align-items: center;
  width: 100%;
  margin-top: 10px;
  min-height: 50px;
  padding: 2px 25px 2px 65px;
  border-radius: 25px;
  background-color: #fff;
  text-align: left;
  font-size: 1.4rem;
  font-weight: 600;
  line-height: 1.4;
  box-sizing: border-box;
}
.appweb-main-visual .point::before {
  content: "";
  display: block;
  position: absolute;
  top: 50%;
  left: 23px;
  width: 36px;
  height: 36px;
  transform: translateY(-50%);
  background-position: 0 0;
  background-repeat: no-repeat;
  background-size: contain;
}
@media only screen and (max-width: 780px) {
  .appweb-main-visual .point {
    font-size: 1.2rem;
  }
}
.appweb-main-visual .point01::before {
  background-image: url(../images/appweb/ico_mv_point01.png);
}
.appweb-main-visual .point02::before {
  background-image: url(../images/appweb/ico_mv_point02.png);
}
.appweb-main-visual .point03::before {
  background-image: url(../images/appweb/ico_mv_point03.png);
}
.appweb-main-visual .point04::before {
  background-image: url(../images/appweb/ico_mv_point04.png);
}
/* スライダー
---------------------------------------- */
.section-slider {
  padding: 100px 50px;
}
.page-app .section-slider {
  background-color: #EAF3FE;
}
.page-web-ver .section-slider {
  background-color: #fdecee;
}
@media screen and (max-width: 960px) {
  .section-slider {
    padding: 80px 0px 50px;
  }
}
@media screen and (max-width: 640px) {
  .section-slider {
    padding: 40px 0px 50px;
  }
}
.slider-contents {
  margin: 0 auto;
}
.slider-contents .slider-container {
  transition: opacity 0.3s ease;
  opacity: 0;
}
.slider-contents .slider-container.init {
  opacity: 1;
}
.slider-contents .slider {
  aspect-ratio: 1200 / 569;
}
@media screen and (max-width: 1200px) {
  .slider-contents .slider {
    aspect-ratio: 1200 / 600;
  }
}
@media screen and (max-width: 640px) {
  .slider-contents .slider {
    aspect-ratio: 640 / 970;
  }
}
.sect-slider-header {
  text-align: center;
  margin-bottom: 40px;
}
@media screen and (max-width: 640px) {
  .sect-slider-header {
    margin-bottom: 0px;
  }
}
.sect-slider-header .sect-title {
  margin-bottom: 2px;
  color: #52a5dc;
  font-size: 4rem;
  font-weight: 800;
}
.page-app .sect-slider-header .sect-title {
  color: #52A5DC;
}
.page-web-ver .sect-slider-header .sect-title {
  color: #ED7980;
}
@media only screen and (max-width: 780px) {
  .sect-slider-header .sect-title {
    font-size: 3rem;
    line-height: 40px;
    margin-bottom: 10px;
  }
}
.sect-slider-header .sect-title-jp {
  font-size: 2rem;
  font-weight: 600;
}
@media only screen and (max-width: 780px) {
  .sect-slider-header .sect-title-jp {
    font-size: 1.8rem;
  }
}
/* slider-item */
.screen-img-wrapper {
  margin: 0 auto;
  padding: 30px 0;
  text-align: center;
}
@media screen and (max-width: 1400px) {
  .screen-img-wrapper {
    padding: 30px 0 10px;
  }
}
.screen-img-wrapper .pict {
  display: flex;
  justify-content: center;
  margin: 0 auto;
  filter: drop-shadow(10px 10px 15px rgba(0, 0, 0, 0.3));
  border-radius: 20px;
}
.screen-img-wrapper .pict img {
  border-radius: inherit;
}
@media screen and (max-width: 1400px) {
  .screen-img-wrapper .pict {
    width: 100%;
  }
}
@media screen and (max-width: 640px) {
  .screen-img-wrapper .pict {
    width: 70%;
    filter: drop-shadow(5px 5px 5px rgba(0, 0, 0, 0.2));
  }
}
.screen-img-wrapper .slider-caption {
  font-size: 1.6rem;
  font-weight: 500;
  margin-top: 20px;
}
.screen-img-wrapper .slider-text {
  margin: 5px auto 0;
  text-align: left;
  font-size: 1.4rem;
}
@media only screen and (max-width: 780px) {
  .screen-img-wrapper .slider-text {
    max-width: 250px;
  }
}
/*prev,nextボタン画像 */
.slick-prev::before {
  content: url(../images/slide-arrow-prev.png);
}
.slick-next::before {
  content: url(../images/slide-arrow-next.png);
}
/*prev,nextボタン位置 */
.slick-prev {
  left: 20px;
  z-index: 100;
}
.slick-next {
  right: 20px;
}
.slick-slide {
  transition: 0.3s ease;
  transform: scale(0.7);
}
.slick-current {
  transform: scale(1);
}
.slick-slide:not(.slick-current) {
  opacity: 0.6;
}
@media screen and (max-width: 640px) {
  .slick-slide:not(.slick-current) {
    opacity: none;
  }
}
/* 参加方法
---------------------------------------- */
.section-join {
  padding: 80px 0;
}
.page-app .section-join {
  background-color: #52A5DC;
}
.page-web-ver .section-join {
  background-color: #ED7980;
}
@media screen and (max-width: 960px) {
  .section-join {
    padding: 50px 0;
  }
}
.section-join .sect-title {
  margin-bottom: 5px;
  color: #fff;
  font-size: 1.8rem;
  font-weight: 700;
}
@media screen and (max-width: 960px) {
  .section-join .sect-title {
    font-size: 1.6rem;
  }
}
.appweb-join-box {
  background-color: #fff;
  padding: 20px;
  border-radius: 20px;
}
@media screen and (max-width: 960px) {
  .appweb-join-box {
    padding: 25px;
  }
}
.appweb-join-box .appweb-join-noneed {
  margin: 20px 0 0;
  padding: 5px;
  border-radius: 50px;
  color: #fff;
  text-align: center;
  font-size: 1.8rem;
  font-weight: 500;
}
.page-app .appweb-join-box .appweb-join-noneed {
  background-color: #52A5DC;
}
.page-web-ver .appweb-join-box .appweb-join-noneed {
  background-color: #ED7980;
}
@media screen and (max-width: 960px) {
  .page-web-ver .appweb-join-box .appweb-join-noneed {
    border-radius: 10px;
  }
}
.appweb-join-box .appweb-join-annotation {
  margin-top: 10px;
  color: #3e3e3e;
  font-size: 1.2rem;
}
.appweb-join-inbox {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
@media screen and (max-width: 960px) {
  .appweb-join-inbox {
    flex-direction: column;
  }
}
.appweb-join-inbox .appweb-join-set {
  display: flex;
  align-items: center;
}
.page-app .appweb-join-inbox .appweb-join-set {
  width: 280px;
}
.page-web-ver .appweb-join-inbox .appweb-join-set {
  width: 400px;
}
@media screen and (max-width: 960px) {
  .appweb-join-inbox .appweb-join-set {
    flex-direction: column;
  }
  .page-app .appweb-join-inbox .appweb-join-set,
  .page-web-ver .appweb-join-inbox .appweb-join-set {
    width: 100%;
  }
}
.appweb-join-inbox .appweb-join-image {
  display: block;
  flex-shrink: 0;
}
.page-app .appweb-join-inbox .appweb-join-image {
  width: 100px;
  aspect-ratio: 100 / 131;
}
.page-web-ver .appweb-join-inbox .appweb-join-image {
  width: 150px;
  aspect-ratio: 150 / 135;
}
.appweb-join-inbox .appweb-join-text {
  margin-left: 10px;
  color: #3e3e3e;
  font-weight: 500;
}
.page-app .appweb-join-inbox .appweb-join-text {
  font-size: 1.4rem;
}
.page-web-ver .appweb-join-inbox .appweb-join-text {
  font-size: 1.6rem;
}
@media screen and (max-width: 960px) {
  .appweb-join-inbox .appweb-join-text {
    margin: 10px 0;
    font-size: 1.4rem;
  }
  .page-app .appweb-join-inbox .appweb-join-text {
    text-align: center;
    font-size: 1.4rem;
  }
  .page-web-ver .appweb-join-inbox .appweb-join-text {
    font-size: 1.4rem;
  }
}
.appweb-join-inbox .app-dl-set {
  text-align: center;
}
.appweb-join-inbox .app-dl-img {
  margin-top: 5px;
}
.appweb-join-inbox .or {
  display: inline-block;
  width: 60px;
  height: 60px;
  border: solid 1px #3e3e3e;
  border-radius: 50%;
  background: fff;
  font-size: 18px;
  font-weight: 500;
  text-align: center;
  line-height: 60px;
  align-items: center;
}
@media screen and (max-width: 960px) {
  .appweb-join-inbox .or {
    margin: 10px 0;
  }
}
.appweb-join-inbox .arrow {
  display: block;
  border: 6px solid transparent;
  border-left: 12px solid #000;
  border-right-width: 0;
}
@media screen and (max-width: 960px) {
  .appweb-join-inbox .arrow {
    margin: 20px 0;
    border: 7px solid transparent;
    border-top: 14px solid #000;
    border-bottom-width: 0;
  }
}
.appweb-join-inbox .dl-banner-block {
  display: none;
}
@media only screen and (max-width: 780px) {
  .appweb-join-inbox .dl-banner-block {
    display: flex;
    justify-content: space-between;
    width: 100%;
    max-width: 330px;
  }
  .appweb-join-inbox .dl-banner-block .dl-banner {
    display: block;
  }
  .appweb-join-inbox .dl-banner-block .dl-banner.-apple {
    width: 45.8%;
    max-width: 150px;
  }
  .appweb-join-inbox .dl-banner-block .dl-banner.-google {
    width: 51.5%;
    max-width: 168px;
  }
}
/* 主な特徴
---------------------------------------- */
.section-feature {
  padding: 140px 0 130px;
  background-color: #fff;
}
@media only screen and (max-width: 780px) {
  .section-feature {
    padding: 80px 0 50px;
  }
}
.feature-box-list > * {
  border-bottom: 1px solid #707070;
}
.feature-box {
  display: flex;
  justify-content: space-between;
  padding: 35px 0;
}
@media screen and (max-width: 960px) {
  .feature-box {
    flex-direction: column;
    padding: 30px 0;
  }
}
.feature-box__l {
  width: 42.9%;
  max-width: 420px;
}
@media screen and (max-width: 960px) {
  .feature-box__l {
    width: 100%;
    max-width: none;
  }
}
.feature-box__r {
  width: 54.9%;
  max-width: 530px;
  color: #3e3e3e;
  font-size: 1.6rem;
  line-height: 1.68;
}
@media screen and (max-width: 960px) {
  .feature-box__r {
    width: 100%;
    max-width: none;
    font-size: 1.4rem;
    margin-top: 10px;
  }
}
.feature-box .box-title {
  padding: 20px;
  border-radius: 10px;
  color: #fff;
  text-align: center;
  font-size: 2.2rem;
  font-weight: 600;
}
.page-app .feature-box .box-title {
  background-color: #52A5DC;
}
.page-web-ver .feature-box .box-title {
  background-color: #ED7980;
}
@media screen and (max-width: 960px) {
  .feature-box .box-title {
    padding: 10px;
    font-size: 2rem;
  }
}
.feature-box .box-left-caption {
  margin-top: 10px;
  font-size: 1.8rem;
  font-weight: 600;
}
.page-app .feature-box .box-left-caption {
  color: #52A5DC;
}
.page-web-ver .feature-box .box-left-caption {
  color: #ED7980;
}
.feature-box .box-left-text {
  font-size: 1.6rem;
}
.feature-box .box-annotation {
  font-size: 1.3rem;
}
.custom-inbox {
  display: flex;
  justify-content: space-between;
  align-items: stretch;
}
@media screen and (max-width: 960px) {
  .custom-inbox {
    flex-direction: column;
    width: 100%;
  }
}
.custom-inbox__item {
  position: relative;
  width: 43.4%;
  max-width: 230px;
}
@media screen and (max-width: 960px) {
  .custom-inbox__item {
    width: auto;
    max-width: none;
  }
}
.custom-inbox hr {
  width: 0;
  border: 0;
  border-right: 1px dotted #3e3e3e;
}
@media screen and (max-width: 960px) {
  .custom-inbox hr {
    display: none;
  }
}
.custom-inbox__title {
  padding: 3px;
  margin-bottom: 15px;
  border: 1px solid #000;
  color: #3e3e3e;
  text-align: center;
  font-size: 1.4rem;
  font-weight: 500;
}
.page-app .custom-inbox__title {
  border-color: #52A5DC;
}
.page-web-ver .custom-inbox__title {
  border-color: #ED7980;
}
@media screen and (max-width: 960px) {
  .custom-inbox__title {
    margin: 30px 0 20px;
  }
}
.custom-inbox__image {
  margin: 0 auto;
  aspect-ratio: 230 / 183;
}
@media screen and (max-width: 960px) {
  .custom-inbox__image {
    width: 80%;
    max-width: 400px;
  }
}
.feature-box-style02 {
  padding: 35px 0;
}
.feature-box-style02::after {
  content: "";
  display: block;
  clear: both;
}
.feature-box-style02 .box-image {
  float: right;
  margin: 0;
  width: 35.62%;
  max-width: 349px;
  padding-right: 3.57%;
}
.feature-box-style02 .box-image01 {
  aspect-ratio: 349 / 266;
}
.feature-box-style02 .box-image02 {
  aspect-ratio: 349 / 253;
}
.feature-box-style02 .box-image03 {
  padding-right: 0;
  width: 40.82%;
  max-width: 400px;
  aspect-ratio: 400 / 296;
}
.feature-box-style02 p {
  float: left;
  width: 57.15%;
  max-width: 560px;
  font-size: 1.4rem;
  line-height: 1.57;
}
.feature-box-style02 .box-title {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
  margin-bottom: 25px;
  font-size: 3rem;
  font-weight: 600;
}
.page-app .feature-box-style02 .box-title {
  color: #52A5DC;
}
.page-web-ver .feature-box-style02 .box-title {
  color: #ED7980;
}
.feature-box-style02 .box-title small {
  font-size: 2rem;
}
.feature-box-style02 .box-caption {
  margin-bottom: 10px;
  font-size: 1.8rem;
  font-weight: 600;
  line-height: 1.3;
}
.feature-box-style02 .ico-new {
  display: inline-block;
  margin-top: 1px;
  padding: 4px 12px 6px;
  border-radius: 14px;
  background-color: #e60023;
  color: #fff;
  font-size: 1.8rem;
  font-weight: 600;
  font-style: normal;
  line-height: 1;
}
@media only screen and (max-width: 780px) {
  .feature-box-style02 + .feature-box-style02 {
    margin-top: 30px;
    padding-top: 30px;
  }
  .feature-box-style02 .box-image {
    float: none;
    width: 100%;
    max-width: 400px;
    padding: 0;
    margin: 0 auto 20px;
  }
  .feature-box-style02 .box-image03 {
    width: 90%;
  }
  .feature-box-style02 p {
    float: none;
    width: 100%;
    max-width: none;
  }
  .feature-box-style02 .box-title {
    flex-direction: column-reverse;
    align-items: center;
    gap: 5px;
    margin-bottom: 22px;
    text-align: center;
    font-size: 2.8rem;
    line-height: 1.5;
  }
  .feature-box-style02 .box-title small {
    display: block;
  }
  .feature-box-style02 .box-caption {
    margin-bottom: 10px;
    font-size: 1.8rem;
    text-align: center;
  }
  .feature-box-style02 .ico-new {
    margin: 0;
    padding: 3px 10px 5px;
    border-radius: 10px;
    font-size: 1.2rem;
  }
}
/* 料金プラン
---------------------------------------- */
.section-price {
  padding: 50px 0 100px;
}
@media screen and (max-width: 960px) {
  .section-price {
    padding: 50px 0;
  }
}
@media only screen and (max-width: 780px) {
  .table-container {
    overflow-x: auto;
  }
  .table-container table {
    width: 820px;
  }
}
.appweb-table {
  border-collapse: collapse;
  margin-bottom: 5px;
  font-size: 1.4rem;
  /* オススメ利用シーン：スマホ */
}
.page-app .appweb-table__header {
  background-color: #52A5DC;
}
.page-web-ver .appweb-table__header {
  background-color: #ED7980;
}
.appweb-table__header th {
  padding: 8px 0 2px;
  border: 1px solid #000;
  color: #fff;
  font-size: 1.6rem;
  font-weight: 500;
}
.page-app .appweb-table__header th {
  border-color: #52A5DC #fff;
}
.page-app .appweb-table__header th:first-child {
  border-left-color: #52A5DC;
}
.page-app .appweb-table__header th:last-child {
  border-right-color: #52A5DC;
}
.page-web-ver .appweb-table__header th {
  border-color: #ED7980 #fff;
}
.page-web-ver .appweb-table__header th:first-child {
  border-left-color: #ED7980;
}
.page-web-ver .appweb-table__header th:last-child {
  border-right-color: #ED7980;
}
.appweb-table .th-box {
  border: 1px solid #000;
  padding: 4px 0 2px;
  font-size: 1.4rem;
}
.page-app .appweb-table .th-box {
  border-color: #52A5DC;
}
.page-web-ver .appweb-table .th-box {
  border-color: #ED7980;
}
.appweb-table td {
  background: #fff;
  padding: 10px;
  border: 1px solid #000;
  text-align: center;
}
.page-app .appweb-table td {
  border-color: #52A5DC;
}
.page-web-ver .appweb-table td {
  border-color: #ED7980;
}
.appweb-table .td-item {
  font-size: 1.5rem;
  font-weight: 500;
}
.appweb-table .td-title {
  font-size: 1.4rem;
  font-weight: 500;
}
.appweb-table .td-price {
  font-size: 1.8rem;
  font-weight: 700;
}
.page-app .appweb-table .td-highlight {
  background-color: #EAF3FE;
}
.page-web-ver .appweb-table .td-highlight {
  background-color: #fdecee;
}
@media only screen and (max-width: 780px) {
  .appweb-table {
    font-size: 1.1rem;
  }
  .appweb-table__header th {
    font-size: 1.3rem;
  }
  .appweb-table .th-box {
    font-size: 1.1rem;
  }
  .appweb-table .td-item {
    font-size: 1.1rem;
  }
  .appweb-table .td-title {
    font-size: 1.1rem;
  }
  .appweb-table .td-price {
    font-size: 1.4rem;
  }
}
.appweb-table .sp-th {
  display: none;
}
@media only screen and (max-width: 780px) {
  .appweb-table.-sp-break {
    display: block;
    width: 100%;
  }
  .appweb-table.-sp-break thead {
    display: none;
  }
  .appweb-table.-sp-break tbody,
  .appweb-table.-sp-break tr,
  .appweb-table.-sp-break td {
    display: block;
    padding: 0;
  }
  .appweb-table.-sp-break .sp-th {
    display: block;
    padding: 10px;
    color: #fff;
    font-size: 1.6rem;
  }
  .page-app .appweb-table.-sp-break .sp-th {
    background-color: #52A5DC;
  }
  .page-web-ver .appweb-table.-sp-break .sp-th {
    background-color: #ED7980;
  }
  .appweb-table.-sp-break .sp-td {
    padding: 10px;
    font-size: 1.4rem;
  }
}
.appweb-table-g {
  border-collapse: collapse;
  margin-bottom: 5px;
  font-size: 1.4rem;
  /*
  .th-border{
    border-right: 1px solid #fff;
  }
  */
}
.appweb-table-g__header th {
  background: #a7a7a7;
}
.appweb-table-g th {
  color: #fff;
  border: 1px solid #767676;
  padding: 4px 0 2px;
}
.appweb-table-g th + th {
  border-left: 1px solid #fff;
}
.appweb-table-g td {
  background: #fff;
  padding: 10px;
  border: 1px solid #707070;
  text-align: left;
}
.appweb-table-g .td-contents {
  font-size: 1.5rem;
  font-weight: 500;
}
.appweb-table-g .td-price {
  font-size: 1.8rem;
  font-weight: 600;
  line-height: 1.2;
}
@media only screen and (max-width: 780px) {
  .appweb-table-g .td-price {
    font-size: 1.5rem;
  }
}
.appweb-table-g .td-estimate {
  font-size: 1.6rem;
}
@media only screen and (max-width: 780px) {
  .appweb-table-g .td-estimate {
    font-size: 1.5rem;
  }
}
.appweb-table-g .td-supplement {
  font-size: 1.4rem;
}
@media only screen and (max-width: 780px) {
  .appweb-table-g .td-supplement {
    font-size: 1.2rem;
  }
}
.appweb-table-g .quantity {
  font-size: 1.4rem;
}
@media only screen and (max-width: 780px) {
  .appweb-table-g .quantity {
    font-size: 1.2rem;
  }
}
.plan-title {
  position: relative;
  margin: 40px 0 10px;
  color: #3e3e3e;
  font-size: 1.9rem;
  font-weight: 500;
  line-height: 1.2;
}
.plan-title.-bullet {
  padding-left: 10px;
}
.plan-title.-bullet::before {
  content: "";
  display: block;
  position: absolute;
  top: 7px;
  left: 0;
  width: 7px;
  height: 12px;
  background-repeat: no-repeat;
  background-size: contain;
}
.page-app .plan-title.-bullet::before {
  background-image: url(../images/appweb/ico_plan_bullet_web.svg);
}
.page-web-ver .plan-title.-bullet::before {
  background-image: url(../images/appweb/ico_plan_bullet_app.svg);
}
.plan-title.-spacing {
  margin-top: 60px;
}
.annotation-b {
  font-size: 1.2rem;
}
.table-bottom {
  margin-top: 30px;
}
.table-bottom .link-style01 {
  color: inherit;
}
@media only screen and (max-width: 780px) {
  .table-bottom {
    display: flex;
    justify-content: center;
  }
}
/* 無料デモ
---------------------------------------- */
.section-demo {
  padding: 100px 0 150px;
}
.page-app .section-demo {
  background-color: #EAF3FE;
}
.page-web-ver .section-demo {
  background-color: #fdecee;
}
@media screen and (max-width: 1000px) {
  .section-demo {
    padding: 80px 0 70px;
  }
}
.section-demo .demo-title {
  margin: 50px 0 30px;
  width: 230px;
  aspect-ratio: 694 / 151;
}
@media only screen and (max-width: 780px) {
  .section-demo .demo-title {
    margin: 0 auto 30px;
  }
}
.demo-box-list {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 18px;
}
.demo-box-list .arrow {
  display: block;
  border: 20px solid transparent;
  border-top: 20px solid #000;
  border-bottom-width: 0;
}
.demo-box {
  width: 100%;
  border-radius: 20px;
  border: 3px solid #dedede;
  background-color: #fff;
}
.demo-box__header {
  text-align: center;
  padding: 15px 0 10px;
  border-radius: 15px 15px 0px 0px;
}
.page-app .demo-box__header {
  background-color: #52A5DC;
}
.page-web-ver .demo-box__header {
  background-color: #ED7980;
}
.demo-box__header .title {
  color: #fff;
  font-size: 2.3rem;
  font-weight: 600;
  letter-spacing: 3px;
}
@media screen and (max-width: 768px) {
  .demo-box__header .title {
    font-size: 1.8rem;
    letter-spacing: 0;
  }
}
.demo-box__body {
  padding: 30px;
}
.demo-box__body hr {
  margin: 40px 0;
  border: 0;
  border-bottom: 1px solid #3e3e3e;
}
@media only screen and (max-width: 780px) {
  .demo-box__body hr {
    margin: 25px 0;
  }
}
.demo-box-detail {
  display: flex;
  gap: 30px;
}
@media only screen and (max-width: 780px) {
  .demo-box-detail {
    flex-direction: column-reverse;
    gap: 20px;
  }
}
.demo-box-detail__l {
  flex: 1;
  width: 100%;
  font-size: 1.6rem;
}
.demo-box-detail__r {
  flex-shrink: 0;
}
.demo-app01 .demo-box-detail__r {
  width: 24.8%;
  max-width: 230px;
}
.demo-app01 .demo-box-detail__r .demo-image {
  aspect-ratio: 1 / 1;
}
@media only screen and (max-width: 780px) {
  .demo-app01 .demo-box-detail__r {
    width: 90%;
    margin: 0 auto;
  }
}
.demo-web01 .demo-box-detail__r {
  width: 10.6%;
  max-width: 98px;
}
.demo-web01 .demo-box-detail__r .demo-image {
  aspect-ratio: 1 / 1;
}
@media only screen and (max-width: 780px) {
  .demo-web01 .demo-box-detail__r {
    width: 60%;
    max-width: 150px;
    margin: 0 auto;
  }
}
.demo-box-detail hr {
  margin: 20px 0;
}
.demo-flow {
  display: flex;
  align-items: flex-start;
  /* スタンプを獲得してみよう */
  /* 特典を使ってみよう */
}
@media screen and (max-width: 1000px) {
  .demo-flow {
    flex-direction: column;
    align-items: center;
    text-align: center;
  }
}
.demo-flow--type01 {
  justify-content: space-between;
}
.demo-flow--type02 {
  justify-content: space-around;
}
@media screen and (max-width: 1000px) {
  .demo-flow--type02 {
    gap: 30px;
  }
}
.demo-flow__item {
  width: 20%;
  max-width: 180px;
}
@media screen and (max-width: 1000px) {
  .demo-flow__item {
    width: 100%;
    max-width: none;
  }
}
.demo-flow__image {
  width: 100%;
  border: 2px solid #dedede;
  border-radius: 15px;
  margin: 0 0 10px;
  overflow: hidden;
  aspect-ratio: 380 / 823;
}
@media screen and (max-width: 1000px) {
  .demo-flow__image {
    max-width: 180px;
    margin: 0 auto 10px;
  }
}
@media only screen and (max-width: 780px) {
  .demo-flow__image {
    width: 90%;
  }
}
.demo-flow__image.image04 {
  border: none;
  border-radius: 0;
}
@media screen and (max-width: 1000px) {
  .demo-flow__image.image04 {
    aspect-ratio: 380 / 545;
  }
}
.demo-flow__text {
  color: #3e3e3e;
  line-height: 20px;
}
@media screen and (max-width: 1000px) {
  .demo-flow__text {
    margin: 10px 0 0;
  }
}
.demo-flow__title {
  margin-bottom: 10px;
  text-align: center;
  font-size: 1.8rem;
  font-weight: 600;
  line-height: 1.2;
}
.demo-flow__title small {
  font-size: 1.5rem;
}
.demo-flow .arrow {
  border: 7px solid transparent;
  border-left: 12px solid #000;
  border-right-width: 0;
  margin-top: 20%;
}
@media screen and (max-width: 1000px) {
  .demo-flow .arrow {
    border: 7px solid transparent;
    border-top: 12px solid #000;
    border-bottom-width: 0;
    margin: 15px auto;
  }
}
/* QR x3 */
.demo-other-qr-wrapper {
  display: flex;
  gap: 15px;
}
@media screen and (max-width: 1000px) {
  .demo-other-qr-wrapper {
    flex-direction: column;
    align-items: center;
  }
}
.demo-other-qr-wrapper .qr-text {
  font-size: 1.4rem;
}
.demo-other-qr-wrapper .qr-code {
  display: flex;
  gap: 25px;
}
.demo-other-qr-wrapper .qr-code figure {
  width: 78px;
  aspect-ratio: 256/320;
}
@media screen and (max-width: 1000px) {
  .demo-other-qr-wrapper .qr-code {
    max-width: 500px;
    margin: 0 auto;
    justify-content: space-between;
    gap: 0;
  }
  .demo-other-qr-wrapper .qr-code figure {
    width: 26%;
  }
}
/* アプリダウンロード */
.dl-container {
  display: flex;
  margin: 20px 0 0;
}
.dl-container .dl-banner-set {
  margin-left: 20px;
}
.dl-container .dl-text {
  font-size: 18px;
  font-weight: 600;
  margin-bottom: 3px;
}
.dl-container .dl-banner {
  display: flex;
  justify-content: space-between;
  gap: 10px;
}
.dl-container .dl-banner a {
  display: block;
  width: auto;
  height: 50px;
  margin: 0 auto;
}
@media only screen and (max-width: 780px) {
  .dl-container {
    flex-direction: column;
    margin: 25px auto 0;
    text-align: center;
  }
  .dl-container .dl-banner-set {
    margin: 0 auto;
  }
  .dl-container .dl-text {
    margin-bottom: 15px;
    margin-top: 10px;
    text-align: center;
    font-size: 1.6rem;
  }
  .dl-container .dl-banner {
    flex-direction: column;
  }
  .dl-container .dl-banner a {
    width: 150px;
    height: auto;
  }
}
/*ビデオ（アプリ用）
---------------------------------------- */
/*
.video-app-wrapper{
  background-color: #fbfbfb;
  background-image: linear-gradient(0deg, transparent calc(100% - 1px), #f0f0f0 calc(100% - 1px)),
          linear-gradient(90deg, transparent calc(100% - 1px), #f0f0f0 calc(100% - 1px));
  background-size: 14px 14px;
  background-repeat: repeat;
  background-position: center center;
  text-align: center;
  margin: 0px auto 30px;
  padding:150px 0 130px;

  .video-title {
    width: 350px;
    margin: 0 auto 20px;
  }
  .video-app-container {
    position: relative;
    width: 100%;
    max-width: 800px;
    margin:0 auto;
    width: 100%;
    aspect-ratio: 16 / 9;
    border-radius: 20px;
    overflow: hidden;
    iframe {
      width: 100%;
      height: 100%;
    }
  }
  @media screen and (max-width: 960px) {
    padding: 50px 30px;
    margin: 0px auto ;
    .video-title {
      width: 230px;
      margin-bottom: 15px;
    }
  }
}
*/