@charset "utf-8";

/*.top_wrapper{margin:0 auto;text-align:left;}
@media screen and (min-width:768px){
.top_wrapper{width:1080px!important;}
}*/


#topimg {
  text-align: center;
  position: relative;
  width: 1280px;
  margin: 0 -100px;
}
#topimg div.topimg_frame {
  position: absolute;
  top: 70px;
  left: 165px;
  width: 949px;
  height: 579px;
}
#topimg div.topimg_frame img {
  width: 100%;
  height: auto;
}
#topimg .caption{
  position: absolute;
  top: 510px;
  right: 350px;
  font-size: 1.2rem;
  color: #666;
}
#topimg ul{
  position: absolute;
  top:70px;
  left:0; right:0;
  margin:0 auto;
  width: 949px;
  height: 579px;
}
#topimg ul li{position: absolute;}
#topimg ul li:nth-of-type(1){top:70px; left:0;}
#topimg ul li:nth-of-type(2){top:67px; right:0;}
#topimg ul li:nth-of-type(3){bottom:0; left:0;}
#topimg ul li:nth-of-type(4){bottom:0; right:0;}
#topimg ul li img{width:90px;}

@media(min-width: 769px) {
  #topimg ul li a img{transition:all .3s cubic-bezier(0.170, 0.935, 0.305, 1.000);;}
  #topimg ul li a:hover img{transform:scale(1.1);}
}

.toplead {
  text-align: center;
  color: #004095;
  margin: 80px 15px 35px;
}
.topscroll {
  text-align: center;
  margin-bottom: 60px;
  color: #004091;
  -webkit-animation: scrlBtn 1.0s infinite;
  animation: scrlBtn 1.0s infinite;
  cursor: pointer;
}
.topscroll img {
  width: 32px;
  height: auto;
}
@-webkit-keyframes scrlBtn {
  0% {-webkit-transform: translate(0, 0);opacity: 0;}
  40% {opacity: 1;}
  80% {-webkit-transform: translate(0, 15px);opacity: 0;}
  100% {opacity: 0;}
}
@keyframes scrlBtn {
  0% {transform: translate(0, 0);opacity: 0;}
  40% {opacity: 1;}
  80% {transform: translate(0, 15px);opacity: 0;}
  100% {opacity: 0;}
}



/* ===== feature ====== */
div#feature_section {
  margin-bottom: 90px;
}
div#feature_section:after {
  content: ".";
  display: block;
  clear: both;
  height: 0;
  visibility: hidden;
}

.feature_col {
  display: block;
  float: left;
  width: 50%;
  box-sizing: border-box;
  padding: 26px 36px;
  min-height: 300px;
}
.feature_col:hover{text-decoration: none;}
.feature_col.solution,
.feature_col.rd {
  background: #004091;
  color: #FFF;
}
.feature_col.application,
.feature_col.technology {
  background: #E9E9E9;
  color: #004091;
}
.feature_col.solution h2 a,
.feature_col.rd h2 a {
  color: #FFF;
  text-decoration: none;
}
.feature_col.application h2 a,
.feature_col.technology h2 a {
  color: #004091;
  text-decoration: none;
}
.feature_col.solution {
  background: #004091 url(../images/feature01_bg.png) no-repeat right bottom;
  background-size: 146px;
}
.feature_col.application {
  background: #E9E9E9 url(../images/feature02_bg.png) no-repeat right bottom;
  background-size: 146px;
}
.feature_col.technology {
  background: #E9E9E9 url(../images/feature03_bg.png) no-repeat right bottom;
  background-size: 146px;
}
.feature_col.rd {
  background: #004091 url(../images/feature04_bg.png) no-repeat right bottom;
  background-size: 146px;
}

.feature_col.technology {
  clear: both;
}
p.col_no {
  margin: 0 0 30px -23px;
  position: relative;
  font-family: 'Roboto', sans-serif;
  font-weight: 600;
}
p.col_no:after {
  position: absolute;
  content: '';
  top: 25px;
  left: 8px;
  display: block;
  height: 1px;
  width: 55px;
  background: #FFF;
  -webkit-transform: rotate(-45deg);
  transform: rotate(-45deg);
}
.feature_col.application p.col_no:after ,
.feature_col.technology p.col_no:after {
  background: #004091;
}

.feature_col h2 {
  font-weight: bold;
  font-size: 1.7em;
  margin-bottom: 10px;
}
p.col_caption {
  margin-right: 130px;
}
span.extra_bar {
  position: relative;
}
span.extra_bar:after {
  content: '';
  display: block;
  position: absolute;
  top: 0.5em;
  left: 6em;
  width: 2em;
  height: 1px;
  background: #FFF;
}

@media(min-width: 769px) {
  .feature_col {
    cursor: pointer;
  }
  .feature_col:hover {
    opacity: 0.8;/* 0.0～1.0 */
    filter: alpha(opacity=80);/* 0～100 */
  }
}


@media(max-width: 768px) {
  #topimg {
    margin:0 0 30px;
    position: static;
    width: auto;
  }
  #topimg img {
    width: 100%;
    height: auto;
  }
  #topimg .caption{
    top: 90vw;
    right: 17vw;
    font-size: 1rem;
  }
  div.topimg_frame {
    display: none;
  }
  .toplead {
    margin-top: 0;
  }
  #topimg ul{
    top:70px;
    width: 100%;
    height: auto;
  }
  #topimg ul li:nth-of-type(1){top:16vw; left:5vw;}
  #topimg ul li:nth-of-type(2){top:16vw; right:6vw;}
  #topimg ul li:nth-of-type(3){top:73vw; left:5vw; bottom:auto;}
  #topimg ul li:nth-of-type(4){top:73vw; right:6vw; bottom:auto;}
  #topimg ul li a{
    display: block;
    width:14vw;
    height:22vw;
  }
  #topimg ul li img{display: none;}

  div#feature_section {
    margin-bottom: 30px;
  }
  .feature_col {
    float: none;
    width: auto;
    box-sizing: border-box;
    padding: 10px  20px 25vw;
    min-height: inherit;
  }
  .feature_col p br {
    display: none;
  }
  .feature_col p .extra_bar + br {
    display: block;
  }
  span.extra_bar:after {
    width: 1.5em;
  }
  p.col_caption {
    margin-right: 0;
  }
  .feature_col.solution,
  .feature_col.technology {
    background: #004091;
    color: #FFF;
  }
  .feature_col.application,
  .feature_col.rd {
    background: #E9E9E9;
    color: #004091;
  }
  .feature_col.solution h2 a,
  .feature_col.technology h2 a {
    color: #FFF;
  }
  .feature_col.application h2 a,
  .feature_col.rd h2 a {
    color: #004091;
  }
  .feature_col.solution {
    background: #004091 url(../images/feature01_bg_sp.png) no-repeat right bottom;
    background-size: 32vw;
  }
  .feature_col.application {
    background: #E9E9E9 url(../images/feature02_bg_sp.png) no-repeat right bottom;
    background-size: 32vw;
  }
  .feature_col.technology {
    background: #004091 url(../images/feature03_bg_sp.png) no-repeat right bottom;
    background-size: 32vw;
  }
  .feature_col.rd {
    background: #E9E9E9 url(../images/feature04_bg_sp.png) no-repeat right bottom;
    background-size: 32vw;
  }

  p.col_no {
    margin: 0 0 15px -10px;
    position: relative;
  }
  p.col_no:after {
    position: absolute;
    content: '';
    top: 25px;
    left: 8px;
    display: block;
    height: 1px;
    width: 40px;
    background: #FFF;
    -webkit-transform: rotate(-45deg);
    transform: rotate(-45deg);
  }
  .feature_col.technology p.col_no:after {
    background: #FFF;
  }

  .feature_col.application p.col_no:after,
  .feature_col.rd p.col_no:after {
    background: #004091;
  }
}


/* ===== News ====== */
.news_section {
  clear: both;
  padding-bottom: 37px;
  border-bottom: 1px solid #004091;
}
.news_section:after {
  content: ".";
  display: block;
  clear: both;
  height: 0;
  visibility: hidden;
}

.top_news {
  clear: both;
  width: 820px;
  margin: 0 auto;
  position: relative;
}
div.news_header {
  float: left;
  width: 140px;
  color: #004091;
}
div.news_header h2 {
  font-weight: bold;
  font-size: 1.7em;
  margin-bottom: 10px;
  position: relative;
}

div.news_header h2:after {
  position: absolute;
  content: '';
  top: 25px;
  left: 90px;
  display: block;
  height: 1px;
  width: 55px;
  background: #004091;
  -webkit-transform: rotate(-45deg);
  transform: rotate(-45deg);
}
.top_news p.detail {
  position: absolute;
  bottom: 10px;
  left: 0;
  font-size: 0.8em;
}
.top_news p.detail a {
  color: #004091;
  text-decoration: none;
  padding-left: 14px;
  background: url(../images/news_arrow.png) no-repeat left center;
  background-size: 7px;
}

div.news_table {
  margin-left: 193px;
}
div.news_table table {
  width: 100%;
}
div.news_table th,
div.news_table td {
  text-align: left;
  vertical-align: top;
  padding-bottom: 10px;
  font-weight: normal;
}
div.news_table th {
  color: #004095;
  width: 120px;
}
div.news_table td a {
  color: #000;
  text-decoration: none;
}
div.news_table td a:hover {
  color: #004091;
  text-decoration: underline;
}


@media(max-width: 768px) {
  .top_news {
    width: auto;
  }
  div.news_header {
    float: none;
    width: auto;
  }
  div.news_header h2 {
    margin-bottom: 20px;
  }
  div.news_header h2:after {
    position: absolute;
    content: '';
    top: 25px;
    left: 76px;
    display: block;
    height: 1px;
    width: 40px;
    background: #004091;
    -webkit-transform: rotate(-45deg);
    transform: rotate(-45deg);
  }
  .top_news p.detail {
    position: static;
    margin-top: 20px;
  }
  div.news_header p a {
    color: #004091;
    text-decoration: none;
    padding-left: 14px;
    background: url(images/news_arrow.png) no-repeat left center;
    background-size: 7px;
  }
  div.news_table {
    margin-left: 0;
  }
  div.news_table th,
  div.news_table td {
    display: block;
    padding: 0;
    width: auto;
  }
  div.news_table th {
    padding-bottom: 3px;
  }
  div.news_table td {
    padding-bottom: 10px;
  }

}