@charset "UTF-8";

a.btn{
  font-family: YuGothic, "Yu Gothic medium", "Hiragino Sans", Meiryo, "sans-serif";
  font-size:18px;
}

.code-list{
  display: inline-block;
  width: 45%;
}

#preview,#code,#terms,#setting-form{
  max-width: 814px;
}

.code-wrap{
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
}


#setting-form label{
  display: inline-block;
  width: 30%;
  margin:5px 0;
}

#setting-form .radio-wrap input[type="radio"] + label{width: auto;}
#setting-form .radio-wrap input[type="checkbox"] + label{width: auto;}


#setting-form label.preview-label{
  width: 90%;
  vertical-align: middle;
}

.radio-wrap input[type="radio"] {
    margin-left: 20px;
}
.radio-wrap input[type="radio"]:nth-child(2) {
    margin-left: 0;
}

#set-url,#set-strings{
  width: 300px;
  box-sizing: border-box;
  max-width: 100%;
}
.button-wrap{
  padding-bottom:50px;
}
.button-wrap h3{
  margin-top:50px;
  margin-bottom:10px;
}

.button-wrap h3:first-child{
  margin-top:0;
}

.span-wrap{
  position: relative;
  margin-top:20px;
}

#span-url,#span-strings{
  color:#ff0000;
  font-weight: bold;
  font-size:0.8em;
  display: none;
  position: absolute;
  top:-10px;
  left:30%;
}


.red{
  color:#ff0000;
}
.red-box{
  font-size:0.8em;
  font-weight: bold;
  line-height:1.5em;
  margin-top:10px;
  color:#ff0000;
}
.red-box div{
  padding-left:6.25em;
  text-indent:-6.25em;
}
.set-preview-wrap{
  padding:20px 0;
}
#preview-area{
  text-align: center;
}

.main-code textarea{
  width: 100%;
  box-sizing: border-box;
  padding:5px;
}
.center{text-align: center;}
.right{text-align: right;}

#copy-alert{display: none;}
.cell-wrap{
  text-align: center;
  line-height:1.8;
  margin:20px 0;
}

.cell-wrap button{
  margin:0 5px;
}

/*共有*/
@media only screen and (min-width: 768px) {
}
@media only screen and (max-width: 767px) {
  
  .ad-side{margin-top:20px; width: 100%; float: none;}

  #setting-form ul li{
    width: 100%;
  }
  .code-list{
    width: 100%;
  }
  #setting-form{
    margin-right:0;
  }
  #setting-form label{
    width: 100%;
  }
  .red{
    display: inline-block;
    margin-top:20px;
    line-height: 1.5;
  }
  #span-url,#span-strings{
    position: relative;
    top:0;
    left:0;
  }
  .radio-wrap input[type="radio"] { margin-left: 0; }
}