@charset "utf-8";

/*-------------------------------------------------------------- */

* {
  margin: 0;
  padding: 0;
}
html {
  overflow-y: scroll;
  margin: 0;
  padding: 0;
}
a {
  color: #00f;
}
a:hover, a:focus {
  text-decoration: none;
}
body {
  font-family: -apple-system,BlinkMacSystemFont,"游ゴシック Medium",Yu Gothic Medium,"游ゴシック体",YuGothic,"ヒラギノ角ゴ ProN",Hiragino Kaku Gothic ProN,"メイリオ","Meiryo","ＭＳ Ｐゴシック",sans-serif;
  -webkit-text-size-adjust: 100%;
  -webkit-touch-callout: none;
  word-break: break-all;
  line-height: 1.5;
	text-align: center;
	color: #333;
	background-color: #fff;
}
/* ie6,ie7,ie8 fix */
#ie6 body, #ie7 body, #ie8 body {
}
h1, h2, h3, h4, h5, h6 {
  font-size: 100%;
  line-height: 1.1;
  font-weight: normal;
}
small {
  font-size: 100%;
}
em {
  font-style: normal;
}
table, th, td {
  border: none;
  font-size: 100%;
  line-height: 1.2;
  text-align: left;
  font-weight: normal;
  color: #333;
}
input[type=text], textarea, select {
  font-family: -apple-system,BlinkMacSystemFont,"游ゴシック Medium",Yu Gothic Medium,"游ゴシック体",YuGothic,"ヒラギノ角ゴ ProN",Hiragino Kaku Gothic ProN,"メイリオ","Meiryo","ＭＳ Ｐゴシック",sans-serif;
  font-size: 100%;
  padding: 5px 0;
}
input[type=submit],
input[type=button] {
  padding: 0;
  cursor: pointer;
}
option {
  padding: 0 3px;
}
img {
  border: none;
  vertical-align: bottom;
}

/* =wrapper
----------------------------------------------- */
#wrapper {
  padding: 0 0 45px;
  text-align: center;
}

.downloadBtn,
.navigation ul {
  margin: 0 auto;
  text-align: left;
}
.tabContainers .atContent {
  padding: 0 2%;
  margin: 0 auto 50px;
  text-align: left;
}

/* topImg */
.topImg { }

/* appImg */
.appImg { }
.appImg img {
  width: 25%;
}

@media screen and (max-width:641px) {
/* smartphone fix */
#wrapper {
  margin-right: 0;
}
.tabContainers {
  padding: 10px 0;
}
}

/* =header common
----------------------------------------------- */
/* =header
----------------------------------------------- */
#header {
  text-align: center;
  background-color: #ddebdc;
}

#header h1 {
  text-align: center;
  text-indent: -9999px;
  font-size: 1px;
  height: 0;
  overflow: hidden;
}

/* =navigation
----------------------------------------------- */
#sideNav {
  display: block;
}
#footNav { }

.navigation li {
  float: left;
  width: 20%;
  list-style: none;
}
.navigation li a {
  display: block;
  padding: 20px 20px 20px 0;
  font-weight: bold;
  text-align: center;
  font-size: 81.81%;
  color: #fff;
  border-top: 1px solid #fff;
  border-left: 1px solid #fff;
  background-color: #7b5443;
  text-decoration: none;
  position: relative;
  z-index: 10;
}
.navigation li a:after {
  content: "＞";
  margin-top: -0.7em;
  width: 1.2em;
  height: 1.2em;
  line-height: 1.3;
  font-size: 75%;
  text-align: center;
  color: #fff;
  border: 1px solid #fff;
  -webkit-border-radius: 20px;
  -moz-border-radius: 20px;
  border-radius: 20px;
  position: absolute;
  top: 50%;
  right: 10px;
}
.navigation li:focus,
.navigation li:hover {
  filter: alpha(opacity=80);
  -moz-opacity:0.80;
  opacity:0.80;
}

@media screen and (max-width:641px) {
/* smartphone fix */
#sideNav {
  display: none;
}
#footNav {
  display: block;
}
#footNav.navigation li {
  float: left;
  width: 50%;
}
#footNav.navigation li.inquiryBtn {
  clear: both;
  width: 100%;
}
}

/* =appHowto
----------------------------------------------- */
.appHowto {
  text-align: center;
  background-color: #fef1df;
}
.appHowto h3 {
  padding: 5px 0;
  color: #fff;
  background-color: #333;
  position: relative;
}
.appHowto h3.active:before,
.appHowto h3:before {
  content: "▼";
  margin-left: -0.5em;
  font-size: 125%;
  color: #333;
  line-height: 1;
  position: absolute;
  bottom: -0.8em;
  left: 50%;
  z-index: 100;
}
.appHowto h3.active {
  margin-bottom: 2em;
}

.appIcon {
  float: left;
  width: 20%;
  max-width: 90px;
  margin: 10px 0 10px 5%;
}
.appHowto p {
  float: left;
  width: 100%;
  margin: 20px -30% 10px -25%;
  text-align: left;
}
.appHowto p span {
  display: block;
  padding: 0 25% 0 28%;
}

/* downloadBtn */
.downloadBtn {
  float: right;
  width: 35%;
  margin: 20px 0 0;
}
.downloadBtn ul {
  width: 100%;
  text-align: center;
}
.downloadBtn li {
  float: left;
  width: 45%;
  max-width: 200px;
  margin: 0 auto;
  text-align: center;
  list-style: none;
}
.downloadBtn img {
  width: 100%;
  margin: 0 auto;
}
.downloadBtn a:focus,
.downloadBtn a:hover {
  filter: alpha(opacity=80);
  -moz-opacity:0.80;
  opacity:0.80;
}

@media screen and (max-width:850px) {
.downloadBtn {
  width: 20%;
  margin-right: 5%;
}
.downloadBtn li {
  float: none;
  width: auto;
}
.appIcon {
  margin-top: 20px;
}
}

@media screen and (max-width:641px) {
/* smartphone fix */
.appHowto {
}
.downloadBtn {
  float: none;
  width: 100%;
  margin-right: 0;
  padding-bottom: 15px;
}
.downloadBtn li {
  float: none;
  display: inline-block;
  width: 45%;
}
.appHowto p span,
.appHowto p {
  padding-right: 0;
  margin-right: 0;
}
.appIcon,
.appHowto p {
  margin-top: 0;
}
}

/* =footer
----------------------------------------------- */
#footer {
  width: 100%;
  padding: 10px 0;
  text-align: center;
  font-size: 81.81%;
  color: #7b5443;
}

/* =contents
----------------------------------------------- */
/* common */
.cap {
  width: 100%;
  padding: 15px 0;
  margin: 20px 0;
  background-color: #fd9946;
}
.cap span {
  display: block;
  font-weight: bold;
  text-align: center;
  font-size: 150%;
  color: #fff;
}
.atContent .lead {
  margin: 10px;
}

@media screen and (max-width:641px) {
.cap {
  margin: 0 0 20px;
}
}

/* backBtn */
.backBtn {
  margin-bottom: 20px;
  margin-right: 2%;
  text-align: right;
  font-size: 81.81%;
  position: relative;
}
.backBtn a {
  display: inline-block;
  padding: 5px 2.5em 5px 1em;
  color: #fff;
  background-color: #7b5443;
  -webkit-border-radius: 5px;
  -moz-border-radius: 5px;
  border-radius: 5px;
  text-decoration: none;
}
.backBtn a:after {
  content: "＞";
  margin-top: -0.7em;
  width: 1.2em;
  height: 1.2em;
  line-height: 1.3;
  font-size: 75%;
  text-align: center;
  color: #fff;
  border: 1px solid #fff;
  -webkit-border-radius: 20px;
  -moz-border-radius: 20px;
  border-radius: 20px;
  position: absolute;
  top: 50%;
  right: 10px;
}
.backBtn a:focus,
.backBtn a:hover {
  filter: alpha(opacity=80);
  -moz-opacity:0.80;
  opacity:0.80;
}

/* homeCt */
.section {
  float: left;
  width: 49%;
  margin: 0 0.5%;
  font-size: 90.90%;
  line-height: 1.5;
}
.section h3 {
	padding: 5px 0.5em;
  margin-bottom: 10px;
  text-align: left;
  background-color: #fef1df;
}
.section p {
  padding: 0 1em;
  margin-bottom: 15px;
}
.point5,
.point0 {
  clear: both;
  width: 100%;
}

@media screen and (max-width:641px) {
/* smartphone fix */
.section {
  float: none;
  width: auto;
}
.point3,
.point2,
.point1 {
  margin: 0;
}
}

/* etc contents */
#privacyCt .atContent,
#tokushoCt .atContent,
#agreeCt .atContent {
  font-size: 90.90%;
}
#contents dt {
  padding: 5px 1em;
  margin-bottom: 10px;
  background-color: #fef1df;
}
#contents dd dt {
  background-color: #f0f2f2;
}
#contents dd {
  padding: 0 1em;
  margin-bottom: 15px;
}
#contents dd dd {
  margin-bottom: 5px;
}

/* agreeCt */
#agreeCt ol {
  margin-left: 2em;
}
#agreeCt ul {
  margin-top: 5px;
  margin-left: 1.5em;
}
#agreeCt ol ul {
  margin-top: 5px;
  margin-bottom: 10px;
}

/* fix */
#agreeCt li dl {
  margin-left: 0 !important;
  margin-right: 0 !important;
  margin-bottom: 1em;
  border: none !important;
}
#agreeCt li dt {
  padding: 2px 10px !important;
  margin: 10px 0 2px !important;
  background-color: #f0f2f2 !important;
  border: none !important;
  -webkit-border-radius: 40px;
  -moz-border-radius: 40px;
  border-radius: 40px;
}
#agreeCt li dt:before {
  content: "■";
}
#agreeCt li dd {
  margin-bottom: 0 !important;
  margin-left: 1em;
}

/* privacyCt */
#privacyCt ul {
  margin-top: 5px;
  margin-left: 1.5em;
}

@media screen and (max-width:641px) {
/* smartphone fix */
.cap span {
  padding-left: 10px;
  text-align: center;
  font-size: 100%;
}
}

/*---------------------
   clearfix
---------------------*/
#homeCt .atContent:after,
.downloadBtn ul:after,
.toggleBox:after,
.navigation ul:after,
.clearfix:after {
  content: "";
  display: block;
  clear: both;
}
#homeCt .atContent,
.downloadBtn ul,
.toggleBox,
.navigation ul,
.clearfix {
  zoom: 1;
}