@charset "utf-8";

/* h1 */
#nmlContent .head h1 img {
  width: 45.3623%;
  max-width: 313px;
}
@media screen and (min-width: 751px) {
  #nmlContent .head h1 img {
    width: 100%;
  }
}

/* contain fix */
#nmlContent .body .contain {
  margin-top: 5.3vw;
  padding: 5.3vw;
}
@media screen and (min-width: 751px) {
  #nmlContent .body .contain {
    margin-top: 30px;
    padding: 60px;
  }
}


/* contents */
.tabIndex {
  margin-top: 8.5vw;
  width: 100%;
  border: solid 1px #ebebeb;
  border-width: 1px 0 0 1px;
  box-sizing: border-box;
  overflow: hidden;
}
.tabIndex li {
  float: left;
  border: solid 1px #ebebeb;
  border-width: 0 1px 1px 0;
  width: 50%;
  padding: 5.5% 0;
  text-align: center;
  box-sizing: border-box;
}
.tabIndex li img {
  width: 69%;
  max-width: 210px;
}

#nmlContent .lead,
#nmlContent .text,
#nmlContent .money,
#nmlContent .subtitle,
#nmlContent h2 {
  font-size: 3.066vw;
  line-height: 1.5625;
}
#nmlContent .lead,
#reference h2 {
  letter-spacing: -0.08em;
}
#nmlContent h2 {
  font-weight: bold;
}

/* error */
#error{
    margin-top:13vw;
    text-align: center;
}

#error .lead{
    margin-top:0.3em;
}

#error ul{
    margin-top:0.5em;
    margin-bottom:0.5em;
    text-align: left;
    
}
#error ul li{
    list-style-type: decimal;
    font-size: 3.066vw;
}

#error .postscript{
    font-size: 3.066vw;
}

#error .error_img{
    margin-top:0.5em;
    margin-bottom:0.5em;
}

/* reference */
#reference {
  margin-top: 13vw;
  text-align: center;
}
#reference .lead {
  margin-top: 0.3em;
}
#reference .tabIndex {
  margin-top: 2.8vw;
}
#reference .tabIndex li {
  padding: 0;
}
#reference .tabIndex li a {
  display: block;
  padding: 29% 0;
}

@media screen and (min-width: 751px) {
  .tabIndex {
    margin-top: 20px;
  }
  .tabIndex li {
    width: 16.6666%;
    padding: 4% 5px;
    cursor: pointer;
  }
  .tabIndex li img {
    width: 100%;
    max-width: 138px;
  }

  #nmlContent .lead,
  #nmlContent .text,
  #nmlContent .subtitle,
  #nmlContent h2 {
    font-size: 16px;
    line-height: 1.5;
  }
  #nmlContent .lead,
  #reference h2 {
    letter-spacing: 0;
  }


    /* error */
    #error{
        margin-top:60px;
    }
    
    #error ul li{
    list-style-type: decimal;
    font-size: 16px;
}

#error .postscript{
    font-size: 16px;
}
    
  /* reference */
  #reference {
    margin-top: 60px;
  }
  #reference .lead {
    margin-top: 0.2em;
  }
  #reference .tabIndex {
    margin-top: 18px;
  }
  #reference .tabIndex li a {
    padding: 24% 5px;
  }
}

/* maker */

.maker{
    margin-top: 1.5em;
    text-align: center;
}

.maker .title{
    color: #0e82d0;
    font-size: 4.066vw;
    font-weight: bold;
}

.maker .subtitle{
    margin-top: 0.2em;
    margin-bottom: 1em;
}




/* form */
input[type="text"]{
    
    width:190px;
    height:36px;
    background: #eee;
    border:1px solid #bebebe;
    font-size:16px;
    text-indent:0.7em;
    
}


input[type="text"]:focus {
    
  background: #edf4ff;
  border: 1px solid #4881d9;
}

input[type="button"]{
    -webkit-appearance: none;
    padding:6px 15px;
    font-size:1em;
    background-color: #0e82d0;
    color:#fff;
    border-style:none;
}

form{
    margin-bottom:1em;
}

/* code error */

.code_error{
    color:#ee0000;
    font-weight: bold;
    font-size: 3.066vw;
    margin-top:0.5em;
}

/* code */
.code {
  clear: both;
  clear: both;
}

.code li {
  border: solid 1px #ebebeb;
  border-width: 0 1px 1px 1px;
overflow: hidden;
}

.code li:first-child{
    
    border-width: 1px 1px 1px 1px;
}

.code h2{
    float:left;
    width:9%;
    padding:2%;
}

.code h2 p{
    color: #ee0000;
}

.code .text{
    float:left;
    width:53%;
    padding:2%;
}

.code .money{
    float:left;
    text-align: right;
    width:25%;
    font-weight: bold;
    padding:2%;
    color:#ff0000;
}

.code .auto-after{
    background-color: #e7f2fa;
}

/*特殊サイズ*/
.code .auto_2 h2{
    
    float:left;
    width:40%;
    padding:2%;
}

.code .auto_2 .text{
    
    float:left;
    width:22%;
    padding:2%;
}



@media screen and (min-width: 751px) {
  .code li {
    position: relative;
    text-align: left;
  }
  .code li h2 {
    top: 1.6em;
    left: 1.5em;
    font-weight: normal!important;
  }
    
  #nmlContent .code li .text {
    font-size: 14px;
  }
    
    
    #nmlContent .code li .money{
        font-size:16px;
    }
    
    .maker{
    margin-top: 40px;
    text-align: center;
    }
    
  .maker .title{
    color: #0e82d0;
    font-size: 18px;
    font-weight: bold;
  }
    
    input[type="text"]{
    
    width:330px;
    height:36px;
    background: #eee;
    border:1px solid #bebebe;
    font-size:1em;
    text-indent:0.7em;
    
}
    
    input[type="button"]{
    
    padding:7px 25px;
    font-size:1em;
    background-color: #0e82d0;
    color:#fff;
    border-style:none;
}
    
    /* code error */

.code_error{
    font-size: 16px;
    margin-top:0.5em;
}
    
    
}
@media screen and (min-width: 1001px) {
  .code {
    overflow: hidden;
    border-left: solid 1px #ebebeb;
    box-sizing: border-box;
  }
  .code li {
    float: left;
    width: 50%;
    border-width: 0 1px 1px 0;
    box-sizing: border-box;
  }
  #nmlContent .code li .text {
      float:left;
  }
    
    .code li:nth-child(2){
    
    border-width: 1px 1px 1px 0px;
    }
    
}



/* tabIndex current */
.tabIndex li {
  position: relative;
}
.tabIndex li:after {
  position: absolute;
  bottom: 0;
  left: 0;
  content: '';
  display: block;
  width: 100%;
  height: 4px;
  background: #ffffff;
  -webkit-transition: all 0.3s;
  transition: all 0.3s;
}
.tabIndex li:hover:after,
.tabIndex li.current:after {
  background: #0085d0;
}