#main {
  width: 960px;
  margin: auto auto;
  color: #333;
  /* common */
  /* ------ SP ------*/
  /* ===========================================
		aboutAR
	=========================================== */
  /* ===========================================
		howtoapp
	=========================================== */
  /* ===========================================
		contactAR
	=========================================== */
}

#main a {
  color: #333;
}

#main a:hover {
  opacity: 0.8;
}

#main img {
  height: auto;
  vertical-align: bottom;
  line-height: 0;
}

#main .spView {
  display: none;
}

#main dl.applink {
  *zoom: 1;
  padding: 3%;
  padding-bottom: 2.5%;
  border: 1px #F7B52C solid;
  text-align: center;
}

#main dl.applink:after {
  content: ".";
  display: block;
  visibility: hidden;
  clear: both;
  height: 0;
  font-size: 0;
  line-height: 0;
}

#main dl.applink dt {
  float: left;
  width: 40%;
  text-align: center;
}

#main dl.applink .applink_link {
  float: left;
  width: 30%;
  text-align: center;
  font-weight: bold;
  padding: 0 1%;
}

#main dl.applink .applink_link img {
  width: 60%;
  vertical-align: middle;
}

#main dl.applink .applink_link img.qr {
  width: 35%;
  float: right;
  border: 1px #666 solid;
}

#main dl.applink .applink_text {
  clear: both;
  width: 100%;
  text-align: center;
  line-height: 1.4em;
  padding-top: 1.5em;
}

#main dl.applink .applink_text strong {
  display: inline-block;
  margin-top: 0.75em;
  font-size: 1.2em;
}

@media screen and (max-width: 768px) {
  #main {
    width: 100%;
    padding: 0 5%;
    padding-top: 8%;
  }
  #main img {
    width: 100%;
  }
  #main .pcView {
    display: none;
  }
  #main .spView {
    display: block;
  }
  #main dl.applink {
    padding: 3%;
    padding-bottom: 2.5%;
    border: 1px #F7B52C solid;
    text-align: center;
  }
  #main dl.applink dt {
    float: none;
    width: 100%;
  }
  #main dl.applink dt img {
    width: 80%;
    margin: 3% 0;
  }
  #main dl.applink dd .applink_link {
    float: left;
    width: 50%;
    padding: 0;
  }
  #main dl.applink dd .applink_link img {
    width: 100%;
    vertical-align: middle;
  }
}

#main #topicpath {
  font-size: 1.2rem;
}

#main #topicpath ul > li {
  display: inline-block;
}

#main #topicpath ul > li a {
  text-decoration: underline;
  color: #55698A;
}

#main #topicpath ul > li::after {
  display: inline;
  content: " > ";
  margin: 0 0.5em;
}

#main #topicpath ul > li:last-of-type::after {
  display: none;
}

#main #aboutAR {
  *zoom: 1;
  /* ------ SP ------*/
}

#main #aboutAR:after {
  content: ".";
  display: block;
  visibility: hidden;
  clear: both;
  height: 0;
  font-size: 0;
  line-height: 0;
}

#main #aboutAR h2 {
  margin-bottom: 2%;
}

#main #aboutAR h2 img:nth-of-type(1) {
  max-width: 100%;
  margin-right: 2%;
}

#main #aboutAR h2 img:nth-of-type(2) {
  width: 40%;
  padding-bottom: 15px;
}

#main #aboutAR figure {
  float: left;
  width: 53.5%;
  margin-bottom: 2%;
}

#main #aboutAR figure img {
  width: 100%;
}

#main #aboutAR .txt {
  float: right;
  width: 46%;
  font-size: 1.6rem;
  line-height: 1.8em;
  padding: 3%;
}

#main #aboutAR .txt h3 {
  margin: 5% 0;
}

#main #aboutAR .applink {
  clear: both;
}

@media screen and (max-width: 768px) {
  #main #aboutAR h2 {
    margin-bottom: 2%;
  }
  #main #aboutAR h2 img:nth-of-type(1) {
    margin-right: 0;
    margin-bottom: 8%;
  }
  #main #aboutAR h2 img:nth-of-type(2) {
    width: 100%;
    padding-bottom: 0;
    margin-bottom: 3%;
  }
  #main #aboutAR figure {
    float: none;
    width: 100%;
    margin-bottom: 2%;
  }
  #main #aboutAR .txt {
    float: none;
    width: 100%;
    font-size: 1.4rem;
    line-height: 1.8em;
    padding: 0;
  }
  #main #aboutAR .txt h3 {
    margin: 3% 0;
    text-align: center;
  }
  #main #aboutAR .txt h3 img {
    width: 50%;
  }
  #main #aboutAR .txt p {
    margin-bottom: 3%;
  }
}

#main .howto {
  margin: 5% 0 10%;
  /* ------ SP ------*/
}

#main .howto p {
  line-height: 1.8em;
}

#main .howto h3.ttl {
  padding: 2% 0;
  margin-bottom: 3%;
  text-align: center;
  line-height: 0;
  background-color: #FDF0D5;
}

#main .howto .step {
  display: flex;
  flex-wrap: wrap;
  margin-top: 5%;
}

#main .howto .step li {
  width: 50%;
  display: flex;
  flex-wrap: wrap;
}

#main .howto .step li span {
  margin: 10% 0 5%;
  display: flex;
  justify-content: center;
}

#main .howto .step li .step_text {
  width: 50%;
}

#main .howto .step li .step_img {
  width: 50%;
}

#main .howto .step li .step_img img {
  width: 100%;
}

#main .howto .step li:nth-of-type(1) .step_text, #main .howto .step li:nth-of-type(2) .step_text {
  position: relative;
  top: -2%;
}

#main .howto .step li:nth-of-type(1) .step_img, #main .howto .step li:nth-of-type(2) .step_img {
  padding-bottom: 0.8em;
}

#main .howto .step li:nth-of-type(3) .step_img, #main .howto .step li:nth-of-type(4) .step_img {
  padding-top: 0.8em;
}

#main .howto .step li:nth-of-type(2) .step_ttl, #main .howto .step li:nth-of-type(4) .step_ttl {
  display: flex;
  justify-content: flex-end;
}

@media screen and (max-width: 768px) {
  #main .howto {
    margin-top: 10%;
  }
  #main .howto .step {
    display: block;
  }
  #main .howto .step li {
    width: 100%;
    margin-right: 0;
    margin-bottom: 10%;
  }
}

#main #aboutARfoot {
  *zoom: 1;
  /* ------ SP ------*/
}

#main #aboutARfoot:after {
  content: ".";
  display: block;
  visibility: hidden;
  clear: both;
  height: 0;
  font-size: 0;
  line-height: 0;
}

#main #aboutARfoot h2 {
  margin-top: 5%;
}

#main #aboutARfoot h2 img:nth-of-type(1) {
  max-width: 100%;
  margin-right: 2%;
}

#main #aboutARfoot h2 img:nth-of-type(2) {
  width: 40%;
  padding-bottom: 15px;
}

#main #aboutARfoot .applink {
  margin: 2% 0;
}

@media screen and (max-width: 768px) {
  #main #aboutARfoot header {
    padding: 5%;
    margin-bottom: 10%;
  }
  #main #aboutARfoot header h3 {
    margin: 5% 0;
  }
  #main #aboutARfoot header figure {
    float: none;
    width: 100%;
  }
  #main #aboutARfoot header p {
    float: none;
    width: 100%;
    margin-bottom: 0.5em;
  }
  #main #aboutARfoot header p span {
    font-size: 1.2rem;
  }
  #main #aboutARfoot .step {
    display: block;
  }
  #main #aboutARfoot .step li {
    width: 100%;
    margin-right: 0;
  }
  #main #aboutARfoot .applink {
    margin: 5% 0;
  }
}

#main footer#contactAR {
  background-color: transparent;
  font-size: 1.4rem;
  line-height: 1.8em;
  margin-top: 0;
  text-align: center;
}

#main footer#contactAR dl {
  margin-bottom: 8%;
  padding: 3%;
  border: 1px #A5A5A5 solid;
}

#main footer#contactAR dl dd {
  margin-top: 2%;
}

#main footer#contactAR dl dd strong {
  font-size: 1.6rem;
}

body footer#common-footer {
  margin-top: 100px;
}