@charset "UTF-8";
html {
  -ms-text-size-adjust: 100%;
  -webkit-text-size-adjust: 100%;
  font-size: 62.5%;
}

a, address, article, aside, audio, b, big, blockquote, body, button, caption, center, cite, code, dd, details, div, dl, dt, em, fieldset, figcaption, figure, footer, form, form, h1, h2, h3, h4, h5, h6, header, i, iframe, img, input, label, li, main, mark, menu, nav, ol, p, pre, q, s, section, select, small, span, strong, summary, table, tbody, td, textarea, tfoot, th, thead, time, tr, u, ul, video {
  margin: 0;
  padding: 0;
  font-size: inherit;
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
}

article, aside, details, figcaption, figure, footer, header, main, menu, nav, section, summary {
  display: block;
}

audio, canvas, progress, video {
  display: inline-block;
}

audio:not([controls]) {
  display: none;
  height: 0;
}

ol,
ul {
  list-style: none;
}

table {
  border-collapse: collapse;
  border-spacing: 0;
}

img {
  max-width: 100%;
  vertical-align: bottom;
  border-style: none;
}

svg:not(:root) {
  overflow: hidden;
}

a {
  background-color: transparent;
}

a:active,
a:hover {
  outline-width: 0;
}

b,
strong {
  font-weight: inherit;
  font-weight: bolder;
}

hr {
  -webkit-box-sizing: content-box;
          box-sizing: content-box;
  height: 0;
  overflow: visible;
}

button,
input,
select,
textarea {
  font: inherit;
  margin: 0;
}

button,
input,
select {
  overflow: visible;
}

button,
select {
  text-transform: none;
}

[type=button],
[type=reset],
[type=submit],
button {
  cursor: pointer;
}

[disabled] {
  cursor: default;
}

[type=reset],
[type=submit],
button,
html [type=button] {
  -webkit-appearance: button;
}

button::-moz-focus-inner,
input::-moz-focus-inner {
  border: 0;
  padding: 0;
}

button:-moz-focusring,
input:-moz-focusring {
  outline: 1px dotted ButtonText;
}

textarea {
  overflow: auto;
}

[type=checkbox],
[type=radio] {
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
  padding: 0;
}

[type=number]::-webkit-inner-spin-button,
[type=number]::-webkit-outer-spin-button {
  height: auto;
}

[type=search] {
  -webkit-appearance: textfield;
}

[type=search]::-webkit-search-cancel-button,
[type=search]::-webkit-search-decoration {
  -webkit-appearance: none;
}

blockquote,
q {
  quotes: none;
}

blockquote:after,
blockquote:before,
q:after,
q:before {
  content: "";
  content: none;
}

body {
  font-family: "Yu Gothic Medium", "游ゴシック Medium", YuGothic, "游ゴシック体", "ヒラギノ角ゴ Pro W3", "メイリオ", sans-serif;
}

[type=button],
[type=reset],
[type=submit],
a,
a img,
button {
  -webkit-transition: 0.5s;
  transition: 0.5s;
}

@font-face {
  font-family: "Font Awesome 5 Brands";
  font-style: normal;
  font-weight: 900;
  src: url("../webfonts/fa-brands-400.eot");
  src: url("../webfonts/fa-brands-400.eot?#iefix") format("embedded-opentype"), url("../webfonts/fa-brands-400.woff2") format("woff2"), url("../webfonts/fa-brands-400.woff") format("woff"), url("../webfonts/fa-brands-400.ttf") format("truetype"), url("../webfonts/fa-brands-400.svg#fontawesome") format("svg");
}
@font-face {
  font-family: "Font Awesome 5 Light";
  font-style: normal;
  font-weight: 300;
  src: url("../webfonts/fa-light-300.eot");
  src: url("../webfonts/fa-light-300.eot?#iefix") format("embedded-opentype"), url("../webfonts/fa-light-300.woff2") format("woff2"), url("../webfonts/fa-light-300.woff") format("woff"), url("../webfonts/fa-light-300.ttf") format("truetype"), url("../webfonts/fa-light-300.svg#fontawesome") format("svg");
}
@font-face {
  font-family: "Font Awesome 5 Regular";
  font-style: normal;
  font-weight: 400;
  src: url("../webfonts/fa-regular-400.eot");
  src: url("../webfonts/fa-regular-400.eot?#iefix") format("embedded-opentype"), url("../webfonts/fa-regular-400.woff2") format("woff2"), url("../webfonts/fa-regular-400.woff") format("woff"), url("../webfonts/fa-regular-400.ttf") format("truetype"), url("../webfonts/fa-regular-400.svg#fontawesome") format("svg");
}
@font-face {
  font-family: "Font Awesome 5 Solid";
  font-style: normal;
  font-weight: 900;
  src: url("../webfonts/fa-solid-900.eot");
  src: url("../webfonts/fa-solid-900.eot?#iefix") format("embedded-opentype"), url("../webfonts/fa-solid-900.woff2") format("woff2"), url("../webfonts/fa-solid-900.woff") format("woff"), url("../webfonts/fa-solid-900.ttf") format("truetype"), url("../webfonts/fa-solid-900.svg#fontawesome") format("svg");
}
/*==================================================================================================
	サイト基礎
==================================================================================================*/
body {
  color: #333333;
  font-size: 1.6rem;
  font-weight: 500;
  letter-spacing: 0.1em;
  line-height: 1.8;
  overflow-x: hidden;
  width: 100%;
  margin: 0;
  padding: 0;
}
body .wrap {
  overflow-x: hidden;
  width: 100%;
}
@media screen and (max-width: 767px) {
  body {
    font-size: 1.5rem;
  }
}
@media screen and (max-width: 560px) {
  body {
    font-size: 1.3rem;
  }
}
body a {
  -webkit-transition: 0.5s;
  transition: 0.5s;
  text-decoration: none;
}
body a:hover {
  text-decoration: none;
  opacity: 0.8;
}
body .inner {
  max-width: 1200px;
  width: 100%;
  margin: 0 auto;
}
@media screen and (max-width: 1280px) {
  body .inner {
    max-width: 100%;
    padding: 0 4vw;
  }
}
body .telLink {
  cursor: default;
  pointer-events: none;
  text-decoration: none;
}
body .telLink _:-ms-fullscreen,
body .telLink :root .selector {
  display: inline-block;
}
@media screen and (max-width: 767px) {
  body .telLink {
    pointer-events: auto;
    letter-spacing: 0.02em;
  }
}

.preload * {
  -webkit-transition: none !important;
  transition: none !important;
}

/*==================================================================================================
	フッター
==================================================================================================*/
footer .footTop {
  padding: 8rem;
}
footer .footTop .contactBox .contactTtl {
  text-align: center;
}
footer .footTop .contactBox .contactTel {
  margin-top: 4rem;
  text-align: center;
}
footer .footBottom {
  padding-bottom: 18rem;
  text-align: center;
}
footer .footBottom .inner {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  max-width: 100%;
  padding: 0 3vw;
}
footer .footBottom .inner .footerLogo {
  margin-right: 5rem;
}
footer .footBottom .inner .copy {
  font-size: 80%;
  font-weight: bold;
  text-align: center;
  letter-spacing: 0;
}
footer .footBottom .inner .copy .companyName {
  margin-right: 0.8rem;
  font-size: 160%;
}
footer .footBottom .inner .copy .forecast {
  margin-right: 1.3rem;
  padding: 0.3rem 0.7rem;
  border: 1px solid #333333;
}
footer .footBottom .inner .copy .address {
  font-size: 110%;
}

@media screen and (max-width: 1200px) {
  footer .footBottom .inner {
    max-width: 100%;
  }
  footer .footBottom .inner .copy .address {
    display: block;
  }
}
@media screen and (max-width: 1160px) {
  .footBottom .inner {
    padding: 0 4vw;
  }
}
@media screen and (max-width: 960px) {
  footer .footBottom .inner {
    display: block;
    max-width: 100%;
  }
  footer .footBottom .inner .copy {
    display: block;
    line-height: 2;
  }
}
@media screen and (max-width: 767px) {
  footer .footTop {
    padding: 3rem 0 5rem 0;
  }
  footer .footTop .contactBox .contactTtl img {
    max-width: 400px;
    width: 100%;
  }
  footer .footTop .contactBox .contactTel {
    max-width: 240px;
    width: 100%;
    margin: 2.5rem auto 0 auto;
  }
  footer .footBottom {
    padding-bottom: 3.5rem;
  }
  footer .footBottom .inner .footerLogo {
    max-width: 180px;
    width: 100%;
    margin: 0 auto 0.5rem auto;
  }
  footer .footBottom .inner .copy .companyName {
    font-size: 100%;
  }
  footer .footBottom .inner .copy .forecast {
    font-size: 85%;
  }
  footer .footBottom .inner .copy .address {
    font-size: 90%;
  }
}
@media screen and (max-width: 560px) {
  footer .footTop .contactBox .contactTtl img {
    max-width: 280px;
  }
}
/*==================================================================================================
	共通 Common
==================================================================================================*/
.mContainer {
  padding: 6rem 0;
}
.mContainer.-orange {
  background: #FFD3A6;
}
.mContainer.-canDoBk {
  padding: 13.5rem 0;
  background-image: url(../images/lp/useful-functionsBk.jpg);
  background-repeat: no-repeat;
  background-size: cover;
}
.mContainer.-canDoListBk {
  padding: 16.5rem 0;
  background-image: url(../images/lp/can-do-Bk.jpg);
  background-repeat: no-repeat;
  background-size: cover;
}

@media screen and (max-width: 767px) {
  .mContainer {
    padding: 3rem 0;
  }
  .mContainer.-canDoBk {
    padding: 8rem 0;
    background-position: 30% 0;
  }
  .mContainer.-canDoListBk {
    padding: 3rem 0;
  }
}
.spShow {
  display: none;
}

@media screen and (max-width: 560px) {
  .pcShow {
    display: none;
  }
  .spShow {
    display: block;
  }
}
.-spShow {
  display: none;
}

@media screen and (max-width: 560px) {
  .-pcShow {
    display: none;
  }
  .-spShow {
    display: block;
  }
}
/*----------------------------------------------------------------------------
問い合わせコンテンツ
----------------------------------------------------------------------------*/
.mContainer .trialBox .trialTtl {
  text-align: center;
  margin-bottom: 3.5rem;
}
.mContainer .trialBox .trialImportant {
  font-size: 140%;
  font-weight: bold;
  text-align: center;
  letter-spacing: 0;
}

@media screen and (max-width: 767px) {
  .mContainer .trialBox .trialTtl {
    margin-bottom: 1.5rem;
  }
  .mContainer .trialBox .trialImportant {
    font-size: 100%;
  }
}
@media screen and (max-width: 560px) {
  .mContainer .trialBox .trialImportant {
    max-width: 345px;
    width: 100%;
    margin: 0 auto;
  }
}
/*==================================================================================================
	タイトル Label
==================================================================================================*/
.mContainer .reasonTtl, .mContainer .informationtTtl {
  text-align: center;
  margin-bottom: 3.5rem;
}

/*==================================================================================================
	ボタン Button
==================================================================================================*/
.btnArea {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  gap: 3rem;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  width: 100%;
}
.btnArea a {
  width: 100%;
  cursor: pointer;
  padding: 1.6rem;
  text-align: center;
  -webkit-transition: all 0.5s ease !important;
  transition: all 0.5s ease !important;
}
.btnArea a img {
  -webkit-transition: none !important;
  transition: none !important;
}
.btnArea.-orangeBtn a {
  max-width: 525px;
  padding: 2.4rem 3rem;
  position: relative;
  border-radius: 100vh;
  background: #EE5F2D;
  -webkit-box-shadow: 5px 6px #91452A;
          box-shadow: 5px 6px #91452A;
}
.btnArea.-orangeBtn a img {
  max-width: 365px;
  width: 1005;
}
.btnArea.-orangeBtn a:before {
  content: "";
  position: absolute;
  z-index: -1;
  top: 4px;
  left: 4px;
  width: 100%;
  height: 100%;
  border-radius: 100vh;
}
.btnArea.-orangeBtn a:hover {
  background-color: #B42F00;
}
.btnArea.-blue a {
  max-width: 525px;
  padding: 2.4rem 3rem;
  position: relative;
  border-radius: 100vh;
  background: #3ABFF2;
  -webkit-box-shadow: 5px 6px #3873B4;
          box-shadow: 5px 6px #3873B4;
}
.btnArea.-blue a:before {
  content: "";
  position: absolute;
  z-index: -1;
  top: 4px;
  left: 4px;
  width: 100%;
  height: 100%;
  border-radius: 100vh;
}
.btnArea.-blue a:hover {
  background-color: #008EC5;
}
.btnArea.-voice a {
  max-width: 440px;
}
.btnArea.-contact {
  margin-top: 3rem;
}
.btnArea.-contact a {
  max-width: 590px;
}
.btnArea.-trial {
  margin-bottom: 4.5rem;
}
.btnArea.-trial a {
  max-width: 1080px;
  padding: 2rem 10rem;
}
.btnArea.-trial a img {
  max-width: 790px;
  width: 100%;
}

@media screen and (max-width: 960px) {
  .btnArea.-voice a {
    max-width: 350px;
    padding: 1.7rem 3rem;
  }
  .btnArea.-voice a img {
    max-width: 270px;
    width: 100%;
  }
}
@media screen and (max-width: 767px) {
  .btnArea.-orangeBtn a {
    max-width: 400px;
    padding: 2rem 3rem;
  }
  .btnArea.-orangeBtn a img {
    max-width: 240px;
    width: 100%;
  }
  .btnArea.-voice a {
    max-width: 400px;
    padding: 1.7rem 3rem;
  }
  .btnArea.-voice a img {
    max-width: 225px;
    width: 100%;
  }
  .btnArea.-contact {
    margin-top: 3rem;
  }
  .btnArea.-contact a {
    max-width: 450px;
    padding: 1.3rem 5rem;
  }
  .btnArea.-contact a img {
    max-width: 215px;
    width: 100%;
  }
  .btnArea.-trial {
    margin-bottom: 2rem;
  }
  .btnArea.-trial a {
    max-width: 530px;
    padding: 1.5rem 5rem;
  }
  .btnArea.-trial a img {
    max-width: 400px;
  }
  .btnArea.-footer {
    margin-top: 1rem;
  }
}
@media screen and (max-width: 560px) {
  .btnArea a {
    max-width: 100%;
  }
  .btnArea.-trial a img {
    max-width: 246px;
  }
}
.scrollTop {
  cursor: pointer;
}

@media screen and (max-width: 960px) {
  .scrollTop img {
    width: 60px;
    height: 60px;
  }
}
@media screen and (max-width: 560px) {
  .scrollTop img {
    width: 50px;
    height: 50px;
  }
}
/*==================================================================================================
	メインビュー
==================================================================================================*/
.lContainer .mainView {
  padding: 6.5rem 10rem 19.5rem 10rem;
  background: url(../images/lp/main.jpg);
  background-repeat: no-repeat;
  background-position: 75% 0%;
  background-size: cover;
}
.lContainer .mainView .logo {
  display: inline-block;
  max-width: 379px;
  width: 100%;
  position: absolute;
}
.lContainer .mainView .mainViewText, .lContainer .mainView .mainViewSubText, .lContainer .mainView .mainViewSubTtl {
  text-align: center;
}
.lContainer .mainView .mainViewText {
  margin: 24rem 0 5rem 0;
}
.lContainer .mainView .mainViewSubText {
  margin-bottom: 1rem;
}

@media screen and (max-width: 1280px) {
  .lContainer .mainView {
    padding: 7rem 8rem 18rem 8rem;
  }
  .lContainer .mainView .logo {
    max-width: 350px;
  }
}
@media screen and (max-width: 1160px) {
  .lContainer .mainView {
    padding: 6rem 7rem 17rem 7rem;
  }
  .lContainer .mainView .logo {
    max-width: 330px;
  }
}
@media screen and (max-width: 1020px) {
  .lContainer .mainView {
    padding: 5rem 6rem 16rem 6rem;
  }
  .lContainer .mainView .logo {
    max-width: 300px;
  }
}
@media screen and (max-width: 960px) {
  .lContainer .mainView {
    padding: 3rem 5rem 12rem 5rem;
  }
  .lContainer .mainView .logo {
    max-width: 300px;
    left: 5%;
  }
  .lContainer .mainView .mainViewText {
    margin: 15rem 0 4rem 0;
  }
}
@media screen and (max-width: 767px) {
  .lContainer .mainView {
    padding: 1rem 4rem 12rem 4rem;
  }
  .lContainer .mainView .logo {
    max-width: 200px;
    width: 100%;
    left: 3%;
  }
  .lContainer .mainView .mainViewText {
    margin-top: 13.5rem;
  }
}
@media screen and (max-width: 480px) {
  .lContainer .mainView {
    padding: 1rem 3.5rem 12rem 3.5rem;
  }
  .lContainer .mainView .logo {
    max-width: 200px;
    width: 100%;
  }
  .lContainer .mainView .mainViewText {
    margin-bottom: 3rem;
  }
}
/*==================================================================================================
	コンテンツ
==================================================================================================*/
.mContainer .reasonBox .reasonImg {
  text-align: center;
  margin-bottom: 5rem;
}
.mContainer .reasonBox .reasonVoice {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  padding: 5rem 3rem;
  margin-bottom: 4rem;
  border: 3px solid #FFFFFF;
  border-radius: 0.5rem;
}
.mContainer .reasonBox .reasonVoice .voiceImg {
  max-width: 207px;
  width: 100%;
  margin-right: 3rem;
}
.mContainer .reasonBox .reasonVoice .voiceCont {
  display: block;
  -webkit-box-flex: 1;
      -ms-flex: 1;
          flex: 1;
}
.mContainer .reasonBox .reasonVoice .voiceCont .voiceText {
  margin-bottom: 3rem;
}
.mContainer .reasonBox .reasonVoice .voiceCont .voiceText p {
  font-size: 145%;
  font-weight: bold;
  letter-spacing: 0;
}
.mContainer .reasonBox .reasonVoice .voiceCont .introduction {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
}
.mContainer .reasonBox .reasonVoice .voiceCont .introduction p {
  max-width: 300px;
  width: 100%;
  margin-right: 2rem;
  font-size: 115%;
  font-weight: bold;
  letter-spacing: 0;
  line-height: 1.5;
}
.mContainer .informationBox .informationImg {
  margin-bottom: 9.5rem;
}
.mContainer .canDoBox {
  display: block;
}
.mContainer .canDoBox .canDoTtl {
  margin-bottom: 9.5rem;
  text-align: center;
}
.mContainer .canDoBox .canDoSubTtl {
  margin-bottom: 4rem;
  text-align: center;
}
.mContainer .canDoBox .canDoArrow {
  margin-bottom: 4rem;
  text-align: center;
}
.mContainer .canDoBox .canDoArrow img {
  max-width: 32px;
  width: 100%;
}
.mContainer .canDoBox .canDoTextList {
  text-align: center;
}
.mContainer .canDoBox .canDoTextList__item {
  margin-bottom: 3rem;
}
.mContainer .canDoBox .canDoTextList__item:last-child {
  margin-bottom: 0;
}
.mContainer .canDoBox .canDoTextList__item a {
  display: inline-block;
}
.mContainer .canDoListBox {
  margin-bottom: 12.5rem;
}
.mContainer .canDoListBox:last-child {
  margin-bottom: 0;
}
.mContainer .canDoListBox:last-child .canDoListCont {
  margin-bottom: 0;
}
.mContainer .canDoListBox .canDoListTtl {
  text-align: center;
  margin-bottom: 3rem;
}
.mContainer .canDoListBox .canDoListCont {
  background: #FFFFFF;
  padding: 6rem;
  margin-bottom: 8rem;
}
.mContainer .canDoListBox .canDoListCont.-permeationBk {
  background-color: transparent;
  padding: 0;
}
.mContainer .canDoListBox .canDoListCont .canDoContTtl {
  text-align: center;
  margin-bottom: 4rem;
}
.mContainer .canDoListBox .canDoListCont .canDoContText {
  margin-bottom: 4.5rem;
  text-align: center;
}
.mContainer .canDoListBox .canDoListCont .exampleBox {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  width: 100%;
  padding-top: 6rem;
  border-top: 1px solid #3873B4;
}
.mContainer .canDoListBox .canDoListCont .exampleBox .exampleList {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  margin-right: 3.5rem;
}
.mContainer .canDoListBox .canDoListCont .exampleBox .exampleList p {
  margin-right: 6rem;
  font-weight: bold;
  white-space: nowrap;
}
.mContainer .canDoListBox .canDoListCont .exampleBox .exampleList p:last-child {
  margin-right: 0;
}
.mContainer .canDoListBox .canDoListCont .exampleBox .exampleImg {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
}
.mContainer .canDoListBox .canDoListCont .exampleBox .exampleImg .informationImg {
  margin-right: 1.5rem;
}
.mContainer .canDoListBox .canDoListCont .exampleBox .exampleImg .informationImg:last-child {
  margin-right: 0;
}
.mContainer .canDoListBox .canDoListCont .tab {
  max-width: 1200px;
  width: 100%;
  position: relative;
}
.mContainer .canDoListBox .canDoListCont .tab .frame {
  position: absolute;
  z-index: 1;
  bottom: -1px;
  opacity: 0.8;
}
.mContainer .canDoListBox .canDoListCont .tab .-spframe {
  display: none;
}
.mContainer .canDoListBox .canDoListCont .tab .paradTab {
  opacity: 0.4;
}
.mContainer .canDoListBox .canDoListCont .tab .paradTabText {
  position: absolute;
  top: 65%;
  left: 3%;
}
.mContainer .canDoListBox .canDoListCont .paradigmBox {
  background: rgba(14, 49, 131, 0.4);
  padding: 6rem;
  border-left: 3px solid rgba(255, 255, 255, 0.7);
  border-right: 3px solid rgba(255, 255, 255, 0.7);
  border-bottom: 3px solid rgba(255, 255, 255, 0.7);
  border-radius: 0 0 10px 10px;
}
.mContainer .canDoListBox .canDoListCont .paradigmBox .paradigmImg {
  margin-bottom: 6rem;
  text-align: center;
}
.mContainer .canDoListBox .canDoListCont .paradigmBox .paradigmImg:last-child {
  margin-bottom: 0;
}
.mContainer .canDoListBox .canDoListText {
  margin-bottom: 6rem;
  text-align: center;
}
.mContainer .canDoListBox .mailNotificationImg {
  padding-top: 6rem;
  border-top: 1px solid #3873B4;
}
.mContainer .canDoListBox .sharingImg {
  padding-top: 6rem;
  border-top: 1px solid #3873B4;
}

@media screen and (max-width: 1160px) {
  .mContainer .canDoListBox .canDoListCont .tab .paradTabText {
    max-width: 270px;
    width: 100%;
  }
}
@media screen and (max-width: 1020px) {
  .mContainer .canDoListBox .canDoListCont .exampleBox {
    display: block;
    padding-top: 2.5rem;
  }
  .mContainer .canDoListBox .canDoListCont .exampleBox .exampleList {
    -webkit-box-pack: justify;
        -ms-flex-pack: justify;
            justify-content: space-between;
    max-width: 450px;
    width: 100%;
    margin: 0 auto;
  }
  .mContainer .canDoListBox .canDoListCont .exampleBox .exampleList p {
    margin: 0 0 1.5rem 0;
  }
  .mContainer .canDoListBox .canDoListCont .exampleBox .exampleList p:last-child {
    margin: 0;
  }
  .mContainer .canDoListBox .canDoListCont .exampleBox .exampleImg {
    -webkit-box-pack: justify;
        -ms-flex-pack: justify;
            justify-content: space-between;
    max-width: 450px;
    width: 100%;
    margin: 0 auto;
  }
  .mContainer .canDoListBox .canDoListCont .tab .paradTabText {
    max-width: 230px;
    top: 70%;
    left: 3%;
  }
}
@media screen and (max-width: 960px) {
  .mContainer .reasonBox .reasonVoice .voiceCont {
    display: block;
  }
  .mContainer .reasonBox .reasonVoice .voiceCont .introduction {
    display: block;
  }
  .mContainer .reasonBox .reasonVoice .voiceCont .introduction p {
    margin-bottom: 3rem;
  }
  .mContainer .canDoListBox .canDoListCont .tab .paradTabText {
    max-width: 200px;
  }
}
@media screen and (max-width: 767px) {
  .mContainer .reasonBox .reasonImg {
    margin-bottom: 5rem;
  }
  .mContainer .reasonBox .reasonVoice {
    display: block;
    padding: 3rem 1.8rem;
    margin-bottom: 3rem;
  }
  .mContainer .reasonBox .reasonVoice .voiceImg {
    max-width: 160px;
    width: 100%;
    margin: 0 auto 3rem auto;
  }
  .mContainer .reasonBox .reasonVoice .voiceCont {
    display: block;
  }
  .mContainer .reasonBox .reasonVoice .voiceCont .voiceText {
    margin-bottom: 1.5rem;
  }
  .mContainer .reasonBox .reasonVoice .voiceCont .voiceText p {
    font-size: 120%;
  }
  .mContainer .reasonBox .reasonVoice .voiceCont .introduction {
    display: block;
  }
  .mContainer .reasonBox .reasonVoice .voiceCont .introduction p {
    max-width: 300px;
    width: 100%;
    margin-bottom: 3rem;
    font-size: 100%;
    letter-spacing: 0;
  }
  .mContainer .informationBox .informationImg {
    margin-bottom: 4rem;
  }
  .mContainer .canDoBox {
    display: block;
  }
  .mContainer .canDoBox .canDoTtl {
    margin-bottom: 5rem;
  }
  .mContainer .canDoBox .canDoSubTtl {
    margin-bottom: 2rem;
  }
  .mContainer .canDoBox .canDoSubTtl img {
    max-width: 320px;
    width: 100%;
  }
  .mContainer .canDoBox .canDoArrow {
    margin-bottom: 2rem;
  }
  .mContainer .canDoBox .canDoArrow img {
    max-width: 20px;
    width: 100%;
  }
  .mContainer .canDoBox .canDoTextList__item {
    margin-bottom: 1.5rem;
  }
  .mContainer .canDoListBox {
    margin-bottom: 3rem;
  }
  .mContainer .canDoListBox .canDoListTtl {
    margin-bottom: 1.5rem;
  }
  .mContainer .canDoListBox .canDoListTtl img {
    margin: 0 auto;
  }
  .mContainer .canDoListBox .canDoListCont {
    padding: 3.5rem 1.8rem 3rem 1.8rem;
    margin-bottom: 3rem;
  }
  .mContainer .canDoListBox .canDoListCont .canDoContTtl {
    margin-bottom: 2rem;
  }
  .mContainer .canDoListBox .canDoListCont .canDoContText {
    margin-bottom: 2rem;
  }
  .mContainer .canDoListBox .canDoListCont .exampleBox {
    display: block;
    padding-top: 2.5rem;
  }
  .mContainer .canDoListBox .canDoListCont .exampleBox .exampleList {
    display: block;
    margin: 0 0 2rem 0;
  }
  .mContainer .canDoListBox .canDoListCont .exampleBox .exampleList p {
    margin: 0 0 1.5rem 0;
    white-space: normal;
  }
  .mContainer .canDoListBox .canDoListCont .exampleBox .exampleList p:last-child {
    margin: 0;
  }
  .mContainer .canDoListBox .canDoListCont .exampleBox .exampleImg .informationImg {
    width: 50%;
  }
  .mContainer .canDoListBox .canDoListCont .exampleBox .exampleImg .informationImg img {
    width: 100%;
  }
  .mContainer .canDoListBox .canDoListCont .tab {
    max-width: 1200px;
    width: 100%;
    position: relative;
  }
  .mContainer .canDoListBox .canDoListCont .tab .frame {
    position: absolute;
    z-index: 1;
    bottom: -1px;
    opacity: 0.8;
  }
  .mContainer .canDoListBox .canDoListCont .tab .-pcframe {
    display: none;
  }
  .mContainer .canDoListBox .canDoListCont .tab .-spframe {
    display: block;
  }
  .mContainer .canDoListBox .canDoListCont .tab .paradTab {
    opacity: 0.4;
  }
  .mContainer .canDoListBox .canDoListCont .tab .paradTabText {
    max-width: 170px;
    left: 4%;
  }
  .mContainer .canDoListBox .canDoListCont .paradigmBox {
    padding: 5rem 1.8rem 3rem 1.8rem;
    border-radius: 0 0 5px 5px;
  }
  .mContainer .canDoListBox .canDoListCont .paradigmBox .paradigmImg {
    margin-bottom: 2rem;
  }
  .mContainer .canDoListBox .canDoListCont .paradigmBox .paradigmImg:last-child {
    margin-bottom: 0;
  }
  .mContainer .canDoListBox .canDoListText {
    margin-bottom: 2rem;
  }
  .mContainer .canDoListBox .mailNotificationImg {
    padding-top: 2.5rem;
  }
  .mContainer .canDoListBox .sharingImg {
    padding-top: 2.5rem;
  }
}
@media screen and (max-width: 700px) {
  .mContainer .canDoListBox .canDoListCont .tab .paradTabText {
    top: 130%;
  }
}
@media screen and (max-width: 560px) {
  .mContainer .canDoListBox .canDoListCont .tab .paradTabText {
    top: 150%;
    left: 5%;
  }
}
@media screen and (max-width: 480px) {
  .mContainer .canDoListBox .canDoListCont .tab .paradTabText {
    left: 6%;
  }
}
.flex {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  gap: 3rem;
}

@media screen and (max-width: 960px) {
  .flex {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
  }
}
.flex .flex__item {
  width: 50%;
}

@media screen and (max-width: 960px) {
  .flex .flex__item {
    width: 100%;
  }
}
.flex .canDoListCont {
  max-height: 777px;
  margin-bottom: 0 !important;
}

@media screen and (max-width: 960px) {
  .flex .canDoListCont {
    max-height: 777px;
    margin-bottom: 4rem;
  }
}
.sharingImg {
  text-align: center;
}

.flex .flex__item:nth-child(2) .sharingImg img {
  max-width: 73%;
}

.flex .flex__item:nth-child(2) .sharingImg {
  padding-top: 4rem;
}

@media screen and (max-width: 960px) {
  .flex .flex__item:nth-child(2) .sharingImg img {
    max-width: 100%;
  }
}
@media screen and (max-width: 960px) {
  .flex .canDoListTtl {
    width: 100%;
    margin-inline: auto;
  }
}
@media screen and (max-width: 960px) {
  .flex .canDoListCont .canDoListTtl {
    width: 59%;
    margin-inline: auto;
  }
}
.btnArea {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: horizontal;
  -webkit-box-direction: normal;
      -ms-flex-direction: row;
          flex-direction: row;
}

@media screen and (max-width: 960px) {
  .btnArea {
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;
  }
}
.btnArea.-orangeBtn a {
  display: block;
}

.btnArea.-orangeBtn a:nth-child(2) {
  background-color: #EE8D58;
}

.btnArea.-orangeBtn a:nth-child(2):hover {
  background-color: #c5591f;
}

.trialTtl {
  margin-top: 4rem;
}

.canDoTextList.-spShow .canDoTextList__item:nth-child(1) a > img {
  width: 72%;
}

.canDoTextList.-spShow .canDoTextList__item:nth-child(4) a > img {
  width: 60%;
}

.canDoTextList.-spShow .canDoTextList__item:nth-child(5) a > img {
  width: 60%;
}

.canDoTextList.-spShow .canDoTextList__item:nth-child(6) a > img {
  width: 60%;
}
/*# sourceMappingURL=base.css.map */