@charset "UTF-8";
/* TVSV basic08.css */

#contents ol.explanation {
  counter-reset:num;
  list-style-type: none!important;
  padding:0;
  margin-left: 1.3em;
}
#contents ol.explanation li {
  position: relative;
  line-height: 1.5em;
  padding: 0 0 0 2.5em;
  font-size: 1rem;
}

#contents ol.explanation li::before{
  position: absolute;
  counter-increment: num;
  content: counter(num);
  display:inline-block;
  background:transparent;
  border:#C00000 2px solid;
  color: #C00000;
  font-weight:bold;
  font-size: 16px;
  left: 0;
  width: 22px;
  height: 22px;
  text-align: center;
}

#contents .explanation li:not(:first-child){
    margin-top: 1.5em;
}

#contents p.item{
        margin: 1em 0 1em 0.8em;
    }

#contents dt{
    font-weight: bold;
}

#contents dd{
    margin-bottom: 1em;
}

#contents .w_65{
    width: 65%;
}

#contents div.number {
    list-style-type: none!important;
    margin-left: 1.3em;
    position: relative;
    line-height: 1.8em;
    padding: 0 0 0 2em;
}

#contents div.number::before{
    position: absolute;
    display:inline-block;
    background:transparent;
    border:#C00000 2px solid;
    color: #C00000;
    font-weight:bold;
    font-size: 16px;
    left: 0;
    width: 22px;
    height: 22px;
    text-align: center;
}

#contents div.number.four {
    counter-reset: section 3; 
}

#contents div.number.four::before{
    counter-increment: section;
    content: counter(section) "";
}

#contents div.number.five {
    counter-reset: section 4; 
}

#contents div.number.five::before{
    counter-increment: section;
    content: counter(section) "";
}

#contents div.number.six {
    counter-reset: section 5; 
}

#contents div.number.six::before{
    counter-increment: section;
    content: counter(section) "";
}

#contents div.number.seven {
    counter-reset: section 6; 
}

#contents div.number.seven::before{
    counter-increment: section;
    content: counter(section) "";
}

#contents div.number dl{
    font-size: 1rem;
    margin-left: 1em;
}

#contents .f-img {
    display: flex;
    margin: 1em auto 2em;
    align-items: center;
}

#contents img.pc_arrow1 {
    width: 58px!important;
    height: 38px;
    margin: 0 3em;
}


@media (max-width: 640px){ 
    
    #contents p.item{
        margin-top: 1em;
        margin-left: 0;
    }
    
    #contents p.item > img.icon{
        margin-left: 0;
    }
    
    #contents ol.explanation {
        margin: 1em 0 0;
    }
    
    #contents p.mq {
        margin: 1em 0;
    }
    
    #contents .w_65{
        width: auto;
    }
    
    .d_flex img {
        margin-left: 0;
        }
    
    .d_flex img.w20 {
        width: 20px;
    }
    
    .no_maxw {
        max-width: 100%;
    }
    
    #contents div.number {
        margin-left: 0;
        padding: 0 0 0 3em;
    }
    
    #contents div.number dl{
        margin-left: 0;
    }
    
    #contents div.number.six dl,
    #contents div.number.seven dl {
        margin-top: 1em;
    }
    
    #contents .detailArea2 .hint{
        margin: 0;
    }
    
    #contents .f-img {
        flex-direction: column;
        align-items: start;
    }

    #contents img.pc_arrow1 {
        transform: rotate( 90deg );
        display: block;
        margin: 1em 0 1em 5em;
    }
    
    #contents img.mqw80{
        width: 80%;
        max-width: 300px;
    }
    
    #contents img.mqw93{
        width: 93%;
        max-width: 363px;
    }
    
    #contents img.mqw105{
        max-width: 105%;
    }
}