@charset "utf-8";
/*
Technology
tech.html
========================================================= */
/*#tech .conBox .img{
  position:relative;
  }
#tech .conBox .img:after{
  position:absolute;
  top: 0;left: 0;
  display: block;
  content: '';
  width: 100%;
  height: 100%;
  }*/

/*
con0
========================================================= */
#tech #con0{
  margin-bottom: 0;
  padding-bottom: 30px;
  }
#tech #con0 p{
  margin-bottom: 1em;
  text-align:center;
  font-size: 3.2rem;
  line-height:1.2;
  }
  
#tech #con0 ul{
  margin: 0 10%;
  }
#tech #con0 li{

  }
#tech #con0 li a{
  display: block;
  padding: 10px;
  box-sizing:border-box;
  text-align:center;
  font-weight: 600;
  text-decoration: none;
  font-size: 1.5rem;
  padding: 10px;
  box-sizing:border-box;
  
  background: url(../common/img/ar_anc.png) right 20px center no-repeat;
  background-size: 20px auto;
  background-color: #e6e0e0;
  }
#tech #con0 li:nth-child(2) a{
  margin: 2px 0;
  } 
@media print, screen and (min-width: 769px) {
  #tech #con0 p{
    margin-bottom: 2em;
    font-size: 5rem;
    }
 
  #tech #con0 ul{
    margin: 0;
    letter-spacing: -.4em;
    }
  #tech #con0 li{
    display:inline-block;
    width : -webkit-calc(100% / 3);
    width : calc(100% / 3);
    letter-spacing: normal;
    }
  #tech #con0 li a{
    font-size: 2rem;
    background-size: 28px auto;
    }
  #tech #con0 li:nth-child(2) a{
    margin: 0 2px;
    }   
  }



/*
con1
========================================================= */
#tech #con1{
  margin-bottom: 0;
  }
#tech #con1 p{
  margin-bottom: 2em;
  }

#tech #con1 ul{
  max-width: 750px;
  margin: 0 20px 30px;
  padding: 20px;
  box-sizing:border-box;
  background-color: #fbfbfb;
  }
#tech #con1 li{
  margin-bottom: .5em;
  text-indent: -1em;
  padding-left: 1em;
  }
#tech #con1 li .num{
  color: #203864;
  font-weight: 600;
  }
#tech #con1 .img{
  width: 90%;
  max-width: 750px;
  margin: 0 auto;
  }
@media print, screen and (min-width: 769px) {
  #tech #con1 p{
    margin-bottom: 4em;
    }

  #tech #con1 ul{
    margin: 0 auto 60px;
    padding: 50px;

    }
    
    
  #tech #con1 .img{
    width: 100%;
    }
  }


/*
con2
========================================================= */
#tech #con2{
  margin-bottom: 0;
  }
#tech #con2 p{
  margin-bottom: 2em;
  }
#tech #con2 .img{
  width: 80%;
  max-width: 620px;
  margin: 0 auto 80px;
  }
#tech #con2 .lineBox{
  position:relative;
  max-width: 800px;
  margin: 0 20px;
  padding: 40px 30px;
  border: solid 1px #ccc;
  box-sizing:border-box;
  }
#tech #con2 .lineBox h3{
  position:absolute;
  left: 0;right: 0;top: -1em;
  width: 250px;
  margin: auto;
  font-size: 2rem;
  text-align:center;
  font-weight: 600;
  background-color: #fff;
  }
#tech #con2 .lineBox dl{

  }
#tech #con2 .lineBox dt{
  position:relative;
  padding-left: 12px;
  font-weight: 600;
  color: #203864;
  }
#tech #con2 .lineBox dt:before{
  position:absolute;
  left: 0;
  top: .4em;
  display:block;
  content: '';
  width: 5px;
  height: 20px;  
  background-color:#e6e0e0;
  }
#tech #con2 .lineBox dd{
  margin-bottom: 1.5em;
  padding-left: 12px;
  font-size: 1.3rem;
  }

@media print, screen and (min-width: 769px) {
  #tech #con2 p{
    margin-bottom: 3em;
    }
  #tech #con2 .img{
    width: 100%;
    margin: 0 auto 80px;
    }
  #tech #con2 .lineBox{
    margin: 0 auto;
    padding: 60px 50px;
    }
  #tech #con2 .lineBox h3{
    width: 300px;
    font-size: 2.4rem;
    }
  #tech #con2 .lineBox dt{
    padding-left: 15px;
    } 
  #tech #con2 .lineBox dt:before{
    top: .4em;
    width: 7px;
    height: 24px;  
    }
  #tech #con2 .lineBox dd{
    padding-left: 15px;
    font-size: 1.6rem;
    }  
  }

/*
con3
========================================================= */
#tech #con3 p{
  margin-bottom: 2em;
  }



#tech #con3 .img{
  width: 80%;
  max-width: 540px;
  margin: 0 auto;
  }
@media print, screen and (min-width: 769px) {
  #tech #con3 p{
    margin-bottom: 4em;
    }



  #tech #con3 .img{
    width: 100%;
    }
  }