@charset "utf-8";

#online.inner { max-width:1000px; margin:0 auto; font-size:1.2em; }

.tit{ font-weight:bold; font-size:2.3em; color:#D60716; margin-bottom:1em; text-align:center;}
.ready{ background-color:#D60716; border-radius:1em; margin-bottom:1em; }
.ready p{ padding:.5em; margin:0; font-size:1.8em; font-weight:bold; color:#fff;}
.step_aria{width:100%;}
.step > div { position:relative; padding-bottom:2em; }
.step > div::after { content:"▼"; position:absolute; bottom:0; right:50%; color:#D60716; }
.step > div:last-child::after { content:"";}
.step > div > * { padding:.5em 1em; }
.step dt{ width:30%; color:#fff; background-color:#D60716; border:2px solid #D60716; border-radius:.5em 0 0 .5em; }
.step dd{ width:70%; border:2px solid #D60716; border-radius:0 .75em .75em 0; }
.txt span{ color:#D60716;}
.contact .btn{clear:both;}
.contact .btn li{ width:100%;background:#2D8CFF;color:#fff; padding:1em;margin:0;font-size:1.4em; }
.contact .btn li::after{content"▶︎";position:absolute;top:20%;right:10%;color:#fff;}
.download li + li{margin-right:.5px;}
.apimg{text-align:center;width:60%;margin:0 auto;}

a.btn  { display:block; width:94%; margin:0 auto; padding:1em 0; color:#fff; font-size:1.2em; text-align:center; text-decoration:none; background-color:#2D8CFF; border-radius:.75em; }
a.btn:hover{background-color:#ffe900;}

/* 各サイトタイトル調整用 以下アクティブコレクションのみ */
.conTtl.ctOnline > span { width: 780px; background: url(./img/ttl_online.png) no-repeat left center / 44px 50px; }

/*タブレット*/
@media screen and (max-width:750px) {
  #online.inner { max-width:90%; margin:0 auto; font-size:1.2em; }
  section{ margin-bottom:4em; }
  .sp_only{ display:none; }
}

/*スマホ*/
@media screen and (max-width:599px){
  #online.inner { max-width:90%; margin:0 auto; font-size:1.2em; }
  section{ margin-bottom:2em; }

  ul.apimg{ text-align:left; }
  .conTitle span { width:100%; padding:0 0 2px; }
  .tit{ text-align:left; font-size:1.6em; line-height:1.5em; }
  .download li { line-height:1.6; }

  /* 各サイトタイトル調整用 以下アクティブコレクションのみ */
  .conTtl.ctOnline > span { width: 95%; background: url(./img/ttl_online.png) no-repeat left center / 19px 22px; }
}