@charset "UTF-8";
/*▼△▼△▼△▼△▼△▼△▼△▼△▼△▼△▼△▼△▼△▼△▼△▼△▼△▼△▼△▼△▼△▼△▼△▼△▼△▼△▼△▼△▼△▼△▼△▼△▼△▼△▼▼△▼△▼△▼△▼△▼△▼△▼△▼△▼△▼△▼△▼△▼△▼△▼△▼△▼△▼△▼△▼△▼△▼
▼ フォントの設定
▼△▼△▼△▼△▼△▼△▼△▼△▼△▼△▼△▼△▼△▼△▼△▼△▼△▼△▼△▼△▼△▼△▼△▼△▼△▼△▼△▼△▼△▼△▼△▼△▼△▼△▼▼△▼△▼△▼△▼△▼△▼△▼△▼△▼△▼△▼△▼△▼△▼△▼△▼△▼△▼△▼△▼△▼△▼*/
html:root {
  font-size: 62.5%;
  padding: 0;
  background-color: #000;
}

body {
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4, h5, h6, p, a, blockquote, pre, abbr, address, cite, code, dt, dd, li, fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, figcaption, figure {
  color: #fff;
  font-family: "游ゴシック体", "YuGothic", "ヒラギノ角ゴシック", "Hiragino Sans", "ヒラギノ角ゴ ProN W3", "HiraKakuProN-W3", "メイリオ", Meiryo, "ＭＳ Ｐゴシック", sans-serif;
  font-size: 1.5rem;
  line-height: 1.5em;
  font-weight: 400;
  letter-spacing: 0;
  list-style-type: none;
  word-wrap: break-word;
}

/*▼△▼△▼△▼△▼△▼△▼△▼△▼△▼△▼△▼△▼△▼△▼△▼△▼△▼△▼△▼△▼△▼△▼△▼△▼△▼△▼△▼△▼△▼△▼△▼△▼△▼△▼▼△▼△▼△▼△▼△▼△▼△▼△▼△▼△▼△▼△▼△▼△▼△▼△▼△▼△▼△▼△▼△▼△▼
▼ 基本    
▼△▼△▼△▼△▼△▼△▼△▼△▼△▼△▼△▼△▼△▼△▼△▼△▼△▼△▼△▼△▼△▼△▼△▼△▼△▼△▼△▼△▼△▼△▼△▼△▼△▼△▼▼△▼△▼△▼△▼△▼△▼△▼△▼△▼△▼△▼△▼△▼△▼△▼△▼△▼△▼△▼△▼△▼△▼*/
html, body {
  position: relative;
}

main {
  max-width: 640px;
  margin: 0 auto;
}

.sticky {
  position: -webkit-sticky; /* Safariに対応する */
  position: sticky; /* 要素を固定/解除する */
  top: 0; /* 縦方向の閾値 */
  left: 0; /* 横方向の閾値 */
  background-color: #1a2f3e;
  margin: 0 -15px 0; 
  padding: 15px 0;
  box-shadow: 0 2px 2px rgba(0,0,0,.25);
}

.site-title {
  font-size: 2.5rem;
  line-height: 1.5em;
  font-weight: 700;
  text-align: center;
  padding: 2.5rem 0;
}

.textArea {
  padding: 15px 15px 45px;
}

.textArea > *:not(:last-child) {
  margin-bottom: 20px;
}

.jacket img {
  width: 100%;
}

.thumb {
  margin: 0 auto;
  text-align: center;
}

.thumb img {
  width: 100%;
}

.thumb img.half {
  width: 50%;
}

.red {
  color: #FF6000;
}
.yellow {
  color: #FFFF00;
}
.bold {
  font-weight: bold;
}
.version {
  font-size: 1.2rem;
  text-align: center;
  color: #c0c0c0;
}

.btnList{
  padding: 0 15px 30px;
}
.btnList * {
  color: #FFFF00;
  text-align: center;
}

.btnList__item:not(:last-child) {
  margin-bottom: 20px;
}

.btn > * {
  display: block;
  color: #000;
  font-weight: 700;
  line-height: 1em;
  padding: 12.5px 0;
  background-color: #FFFF00;
  position: relative;
  border-radius: 40px;
}

.btn > *:after {
  content: "";
  display: block;
  width: 0;
  height: 0;
  border: .35em solid transparent;
  border-left: .5em solid #000;
  border-right: 0;
  position: absolute;
  top: 50%;
  right: 10px;
  -webkit-transform: translateY(-50%);
          transform: translateY(-50%);
}

pre.license {
  white-space: pre-wrap ;
  width: 100%;
  font-size: 1.2rem;
  line-height: 1.4rem;
  color:#c0c0c0;
}

.license-text dt {
  color:#fff;
  font-size: 1.5rem;
  line-height: 1.6em;
  font-weight: 700;
  margin-bottom: 1em;
}
.license-text dd{
  color:#ccc;
  font-weight: 400;
  font-size: 1.3rem;
  line-height: 1.4em;
  margin-bottom: 2em;
}
.license-text dd a{
  color:#ccc;
  font-weight: 400;
  font-size: 1.3rem;
}

.explain-dl dt{
  font-weight: 700;
  color: #ff0;
}
.explain-dl dd{
  font-weight: 400;
  color: #c0c0c0;
}
.explain-dl dd p{
  margin-bottom: 1em;
}
.explain-dl dd:not(:last-child){
  margin-bottom: 20px;
}

.explain-dl dd ol{
  margin-bottom: 1em;
}
.explain-dl dd ol li{
  list-style-type: decimal;
  font-weight: 400;
  margin-left: 2.5rem;
}
.explain-dl dt.dl-title{
  font-size: 1.9rem;
  margin-bottom: 1em;
  font-weight: 700;
  color: #ff0;
  text-align: center;
}

.download h3 {
  font-size: 1.9rem;
  font-weight: 700;
  color: #ff0;
  text-align: center;
}
.download ul{
  display:flex;
}
.download ul li{
  width:100%;
  text-align: center;
}
.download img.badge{
  height: 45px;
}

.menu_title{
  font-size: 1.9rem;
  font-weight: 700;
  color: #ff0;
}
img.menu_icon{
  width: 32px;
  height: 32px;
  margin-right: 8px;
}

.howto{
  background-color: #ffffff;
  border-radius: 8px;
  box-shadow: 0 1px 5px rgba(0,0,0,.25);
  padding: 10px;
}
.howto h3{
  font-size: 2.1rem;
  line-height: 3.1rem;
  font-weight: 700;
  color: #FE6600;
  text-align: center;
  margin-bottom: 1rem;
}
.howto figure img{
  width: 100%;
  margin-bottom: 1rem;
}
.howto p{
  color:#303030;
  font-size: 1.7rem;
  line-height: 2.5rem;
  font-weight: 700;
  margin-bottom: 1rem;
}

.indent-1{
  padding-left:1em;
  text-indent:-1em;
}

ul.list_o{
  margin-bottom: 1em;
}
ul.list_o li{
  list-style-type: disc;
  margin-left: 2.5rem;
  margin-bottom: 1rem;
}
ul.list_o li a{
  font-weight: 700;
  color:#ff0;
  text-decoration: underline;
}