@charset "UTF-8";

/* RESET */
html, body, h1, h2, h3, h4, h5, h6, ul, ol, dl, li, dt, dd, p {
  margin: 0;
  padding: 0;
  border: 0;
  font-size: 100%;
  vertical-align: baseline;
  font-family: 'proxima-nova', 'Proxima Nova', 'Noto Sans Japanese', -apple-system, BlinkMacSystemFont, 'Hiragino Kaku Gothic ProN', Meiryo, sans-serif;
  }

body {
  line-height: 1.0;
  }

img {
  height: auto;
  vertical-align: top;
  font-size: 0;
  line-height: 0;
  border: 0;
  }

ol, ul {
  list-style: none;
  }

a:hover img {
  -webkit-opacity: 0.7;
  -moz-opacity: 0.7;
  -o-opacity: 0.7;
  filter: alpha(opacity=70); /* IE lt 8 */
  -ms-filter: "alpha(opacity=70)"; /* IE 8 */
  opacity: 0.7;
  }

a img {
  -webkit-transition: opacity 0.4s ease-out;
  -moz-transition: opacity 0.4s ease-out;
  -ms-transition: opacity 0.4s ease-out;
  -o-transition: opacity 0.4s ease-out;
  transition: opacity 0.4s ease-out;
  }


/* COMMON */
.text-white {
    color: #ffffff;
  }

.text-red {
  color: #E83534;
  }

.inline-block{
  display: inline-block;
  }

.os-info ul li a, .subscription-link a {
  color : #269DFF;
  font-weight : 600;
  text-decoration : none;
  }

.attention {
  padding-bottom : 20px;
  }

footer p{
  text-align : center;
  }

/* MainVisual */
.main-visual {
  background-color : #E83534;
  }

/* Feature */
.feature {
  background-color :#E83534;
  }

/* Premium */
.premium {
  background: linear-gradient(45deg, #D0EBFF, #EAECFF) fixed;
  }

.small_txt {
  display : block;
  margin-top : 8px;
  font-size : 9px;
  }

.subscription-txt{
  font-weight:600;
  padding:12px 0 10px;
  }

/* OS-Info */
.os-info > hr {
  border: none;
  height: 2px;
  background-color: #000000;
  }


.notes-text > .small {
  display:block;
  margin-top:12px;
  font-size:15px;
  }

  

/*レスポンシブ*/
@media screen and (max-width:768px) {
  /*画面サイズが〜768px*/

.pc {
  display: none !important;
  }


.section-inner {
  width : 90%;
  margin : 0 auto;
  }

/* MainVisual */
.main-visual {
  padding : 50px 0 0;
  }

.visual-info p {
  text-align : center;
  font-size : 13px;
  font-weight : 600;
  margin-bottom : 12px;
  line-height:1.5;
  }

.logo {
  display : block;
  max-width : 370px;
  width : 80%;
  margin : 0 auto 24px;
  }

.letsdl{
  max-width : 360px;
  width : 90%;
  display: block;
  margin : 20px auto;
  }

.visual-main > img {
  max-width : 360px;
  width : 80%;
  display : block;
  margin : 0 auto;
 }

.fix-footer-forsp {
  width :100%;
  background-color : rgba(255, 255, 255, 0.8);
  position : fixed;
  bottom : 0 ;
  z-index : 999;
  }

.fix-footer-forsp:before{
  content: '';
  -webkit-filter: blur(5px);
  -moz-filter: blur(5px);
  -o-filter: blur(5px);
  -ms-filter: blur(5px);
  filter: blur(5px);
  }

.fix-footer-forsp > ul > li {
  display : inline-block;
  margin : 0 auto;
  }

.fix-footer-forsp > ul {
  width : 90%;
  display : block;
  margin : 10px auto;
  text-align:center;
  }

/* Intro */

.intro {
  margin:80px auto;
  }

.intro h1{
  max-width: 380px;
  width : 80% ;
  margin : 0 auto;
  text-align : center;
  }

.intro video{
  display:block;
  width : 90%;
  margin : 20px auto 0;
  background-color: #111;
  }

/* Content */
.contents-list {
  margin : 30px auto;
  }

.contents-blk {
  margin : 0 auto 40px;
  }

.contents-blk img {
  display : block;
  max-width : 416px;
  width : 100%;
  margin: 0 auto;
  }

.contents-blk h2 {
  font-size : 24px;
  text-align : center;
  font-weight : 600;
  margin : 25px auto 10px;
  }

.contents-blk p {
  text-align : center;
  line-height: 1.6;
  color : #9c9c9c;
  }

.notes-text {
  font-size : 16px;
  line-height : 1.6;
  font-weight : 600;
  margin : 40px 0 30px;
  }

.price-blk {
  margin :0 auto 20px;
  max-width: 400px;
  }

.webbilling-sp{
  text-align: center;
  margin-bottom:60px;
  }

.notes-text > .small {
  text-align : center;
  }

.os-info h2{
  font-size:20px;
  }

.os-info ul > li {
  word-wrap : break-word;
  }

.android p, .ios p {
  font-size :18px;
  font-weight : 600;
  margin : 30px 0 0;
  }

.os-info ul{
  margin-bottom : 10px;
  }

.os-info ul li {
  margin-top : 15px;
    }

footer{
  margin-top:80px;
  padding:40px 0 100px;
  background-color : #EEEEEE;
  }

}


@media screen and (min-width:769px) {
    /*画面サイズが769px~ */

/* COMMON */

.pc {
  display: block !important;
  }

.sp {
  display: none !important;
  }

.section-inner {
  width: 900px;
  margin: 0 auto;
  }

/* MainVisual */
.main-visual {
  padding : 40px 0 0;
  }

.main-visual > .section-inner{
  position : relative;
  padding-top : 80px;
  }

.visual-info {
  width : 410px;
  margin-left : 80px;
  }

.visual-info p {
  font-size : 15px;
  text-align : center;
  margin: 20px 0 20px 24px;
  line-height: 1.8;
  font-weight: 600;
  }

.dl-btn > li {
  margin : 0 auto 100px;
  display: inline-block;
  }

.dl-btn li {
  margin-left : 18px;
  }

.visual-main {
  position : absolute;
  right : 0;
  bottom : 0;
  }

/* intro */
.intro{
  margin-top: 120px;
  }

.intro h1{
  display: block;
  width: 374px;
  margin: 0 auto;
  }

.intro video{
  display: block;
  width : 770px;
  margin : 30px auto 0;
  background : #000000;
}

/* Contents */
.members-contents h1{
  display : block;
  width : 540px;
  margin : 80px auto 0;
  }

.contents-blk h2{
  font-size : 22px;
  font-weight :600;
  text-align : center;
  }

.contents-blk p{
  margin-top :12px;
  color : #9c9c9c;
  font-size : 14px;
  line-height : 1.5;
  text-align : center;
  }

.contents-blk img {
  width : 416px;
  }

.contents-info{
  width :391px;
  margin:35px 0 0 25px;
  }

.contents-list{
  width : 900px ;
  margin-top : 40px;
  display:-webkit-box;
  display:-moz-box;
  display:-ms-flexbox;
  display:-webkit-flex;
  display:-moz-flex;
  display:flex;
  -webkit-flex-pack:distribute;
  -moz-flex-pack:distribute;
  -ms-flex-pack:distribute;
  -webkit-justify-content:space-around;
  -moz-justify-content:space-around;
  justify-content:space-around;
  flex-wrap: wrap;
  justify-content: center;
  }

.c02 {
  margin-top : 80px;
  margin-left : 60px;
  }

.c03 {
  margin-top : -20px;
  }

.c04 {
  margin-top : 40px;
  margin-left : 60px;
  }

.c05 {
  margin-top : 20px;
  }

.c06 {
  margin-top : 60px;
  margin-left : 60px;
  }

.c07 {
  margin-top : -120px;
  }

.c08 {
  margin-top : 30px;
  margin-left : 60px;
  }

/* App-Info */
.notes-text {
  font-size : 16px;
  font-weight : 600;
  line-height : 1.8;
  width : 730px;
  margin : 30px auto 50px;
  text-align : center;
  }

.webbilling {
  margin: 20px 0 0;
  }

/* App-Info-Box */
.price-blk {
  margin-top : 80px;
  }

.app-info-box {
  width : 816px;
  margin : 20px auto;
  padding : 50px 42px;
  background-color : #EEEEEE;
  }

.info-dl-btn > li {
  margin : 30px auto 0px;
  display: inline-block;
  }

.info-dl-btn li:first-child {
  margin-right : 10px;
  }

.info-line {
  margin : 0 30px;
  }

.qr{
  width : 356px;
  margin-top : 36px;
  }

.os-info {
  width : 740px;
  margin : 80px auto 40px;
  }

.os-info h2{
  font-size:22px;
  font-weight:600;
  }

.android p, .ios p {
  font-size :18px;
  font-weight : 600;
  margin : 30px 0 0;
  }

.os-info ul{
  margin-bottom : 10px;
  }

.os-info ul li {
  margin-top : 15px;
    }

footer{
  margin-top:80px;
  padding:40px 0 60px;
  background-color : #EEEEEE;
  }

}