@charset "UTF-8";

#electronic-catalog .sec-title{ margin:0 0 70px; }
#electronic-catalog .lead{
  font-size:1.125rem;
  margin:0 0 40px;
  line-height:1.9;
}
#electronic-catalog .lead .note{
  color:#F02A2A;
  font-size:1rem;
}
.catalog_top{
  background-color:#63C9E0;
  padding:35px 55px 50px;
  position:relative;
  margin:0 0 70px;
  overflow:hidden;
}
.catalog_top h3{
  color:#FFF;
  text-align:center;
  font-family: "Hiragino Kaku Gothic Pro", "ヒラギノ角ゴ Pro W3", "メイリオ", sans-serif;  
  font-weight:bold;
  font-size:3.75rem;
  margin:0 0 20px;
}
.catalog_top h3 span{ 
  font-size:4rem; 
  position:relative;
  line-height:1;
  display:inline-block;
}
.catalog_top h3 span:after{
  content:"プラス";
  position:absolute;
  top:-18px;
  left:0;
  font-size:1.25rem;
  font-weight:normal;
  line-height:1;
}
.catalog_top h4{
  text-align:center;
  color:#0793B4;
  font-size:1.375rem;
  font-family: "Hiragino Kaku Gothic Pro", "ヒラギノ角ゴ Pro W3", "メイリオ", sans-serif;  
  font-weight:bold;
  margin:0 0 25px;
}
.catalog_top .img{
  width:390px;
  position:absolute;
  top:220px;
  left:-58px;
}
.catalog_top .txt{ margin:0 0 0 340px; }
.catalog_top .txt h5{
  font-family: "Hiragino Kaku Gothic Pro", "ヒラギノ角ゴ Pro W3", "メイリオ", sans-serif;  
  font-weight:bold;
  font-size:2.125rem;
  line-height:1.7;
  margin:0 0 20px;
}
.catalog_top .txt p{
  text-indent:-1.3em;
  padding-left:1.3em;
  margin:0 0 15px;
  line-height:1.57;
  font-size:0.875rem;
}
.catalog_top .txt p:last-of-type{margin:0 0 35px;}
.catalog_top .txt .btn{
  width:100%;
  height:80px;
  line-height:80px;
  font-family: "Hiragino Kaku Gothic Pro", "ヒラギノ角ゴ Pro W3", "メイリオ", sans-serif;  
  font-weight:bold;
  font-size:1.438rem;
  background-color:#333333;
  color:#FFF;
  border-radius:4px;
}
.catalog_top .txt .btn:hover{opacity:0.7;}

@media only screen and (max-width: 640px) {
  #electronic-catalog .sec-title{ margin:0 0 40px; }
  #electronic-catalog .lead{ margin:0 0 30px; }
  .catalog_top{
    padding:20px 10px;
    margin:0 0 40px;
  }
  .catalog_top h3{
    font-size:2.1rem;
    margin:0 0 15px;
  }
  .catalog_top h3 span{ font-size:2.4rem; }
  .catalog_top h3 span:after{
    font-size:0.7rem;
    top:-12px;
  }
  .catalog_top h4{
    font-size:1.125rem;
    margin:0 0 20px;
  }
  .catalog_top .img{
    top:auto;
    width:60%;
    left:0;
    position:static;
    margin:0 auto 20px;
  }
  .catalog_top .txt{ margin:0 ; }
  .catalog_top .txt h5{
    font-size:1.3rem;
    margin:0 0 15px;
  }
  .catalog_top .txt p{ margin:0 0 10px; }
  .catalog_top .txt p:last-of-type{margin:0 0 20px;}
  .catalog_top .txt .btn{
    height:70px;
    line-height:70px;
    font-size:0.9rem;
  }
}

#catalog_area{ padding:0 0 100px; }
#catalog_area h3{
  border-top:#71C4D7 3px solid;
  border-bottom:1px #E9E9E9 solid;
  line-height:1;
  padding:40px 0;
  font-family: "Hiragino Kaku Gothic Pro", "ヒラギノ角ゴ Pro W3", "メイリオ", sans-serif;  
  font-weight:bold;
  font-size:1.875rem;
  margin:0 0 40px;
}
.catalog_tabbtn{ border-bottom:1px #707070 solid; }
.catalog_tabbtn a{
  display:inline-block;
  padding:20px 65px;
  border-top:1px #707070 solid;
  border-left:1px #707070 solid;
  border-right:1px #707070 solid;
  border-radius:8px 8px 0 0 ;
  background-color:#E9E9E9;
  color:#333333;
  margin:0 18px -1px 0 ;
  text-align:center;
  cursor:pointer;
}
.catalog_tabbtn a.active{background-color:#FFF;}
.catalog_tabbtn a:hover{opacity:0.7;}
.catalog_page{ 
  padding:65px 0 0 ; 
  display:none;
}
.catalog_page:first-of-type{display:block;}
.catalog_page h4{
  font-family: "Hiragino Kaku Gothic Pro", "ヒラギノ角ゴ Pro W3", "メイリオ", sans-serif;  
  font-weight:bold;
  margin:0 0 60px;
  font-size:1.875rem;
  color:#707070;
}
.catalog_page ul{
  border-top:#DDDDDD 1px solid;
  border-left:#DDDDDD 1px solid;
  margin:0 0 110px;
  display:flex;
  justify-content:flex-start;
  flex-wrap:wrap;
}
.catalog_page li{
  list-style-type:none;
  border-right:#DDDDDD 1px solid;
  border-bottom:#DDDDDD 1px solid;
  flex:0 1 25%;
  padding:40px 30px;
  box-sizing:border-box;
  max-width:25%;
  text-align:center;
}
.catalog_page li figure{ margin:0 0 20px; }
.catalog_page li h5{
  font-family: "Hiragino Kaku Gothic Pro", "ヒラギノ角ゴ Pro W3", "メイリオ", sans-serif;  
  font-weight:bold;
  font-size:1.25rem;
  line-height:1.5;
  margin:0 0 5px;
}
.catalog_page li .num{
  font-family: "Hiragino Kaku Gothic Pro", "ヒラギノ角ゴ Pro W3", "メイリオ", sans-serif;  
  font-weight:bold;
  font-size:0.875rem;
  line-height:1;
  margin:0 0 12px;
}
.catalog_page li .date{
  font-size:0.875rem;
  line-height:1;
  margin:0 0 30px;
}
.catalog_page li .txt{
  text-align:left;
  font-size:0.875rem;
  color:#666666;
  line-height:1.7;
  margin:0 0 25px;
}
.catalog_page li .btn{
  font-family: "Hiragino Kaku Gothic Pro", "ヒラギノ角ゴ Pro W3", "メイリオ", sans-serif;  
  font-weight:bold;
  font-size:0.875rem;
  width:240px;
  height:50px;
  line-height:50px;
  background-color:#71C4D7;
  color:#FFF;
  border-radius:4px;
}
.catalog_page li .btn:hover{opacity:0.7;}
.catalog_pagebtn{ text-align:center; }
.catalog_pagebtn a{
  display:inline-block;
  width:30%;
  line-height:72px;
  border:1px #707070 solid;
  border-radius:4px;
  font-size:1.125rem;
  color:#333333;
  margin:0 15px;
  position:relative;
  cursor:pointer;
}
.catalog_pagebtn a:after{
  position:absolute;
  content:"";
  width:7px;
  height:19px;
  background:url(../images/catalog/arrow.svg) no-repeat;
  background-size:cover;
  right:25px;
  top:50%;
  margin-top:-10px;
}
.catalog_pagebtn a:hover{opacity:0.7;}

@media only screen and (max-width: 640px) {
  #catalog_area{ padding:0 0 50px; }
  #catalog_area h3{
    padding:25px 0;
    font-size:1.2rem;
    margin:0 0 25px;
  }
  .catalog_tabbtn a{
    padding:15px 12px;
    font-size:0.875rem;
    margin:0 2px -1px 0 ;
  }
  .catalog_page{ 
    padding:35px 0 0 ; 
  }
  .catalog_page h4{
    margin:0 0 30px;
    font-size:1.3rem;
  }
  .catalog_page ul{
    margin:0 0 50px;
    display:block;
  }
  .catalog_page li{
    padding:20px 20px;
    max-width:100%;
  }
  .catalog_page li figure{ margin:0 0 15px; }
  .catalog_page li .date{
    font-size:0.875rem;
    line-height:1;
    margin:0 0 20px;
  }
  .catalog_page li .txt{
    margin:0 0 15px;
  }
  .catalog_page li .btn{
    width:100%;
  }
  .catalog_pagebtn a{
    display:block;
    width:100%;
    line-height:60px;
    font-size:1rem;
    margin:0 0 15px;
  }


  .catalog_pagebtn a:after{
    position:absolute;
    content:"";
    width:7px;
    height:19px;
    background:url(../images/catalog/arrow.svg) no-repeat;
    background-size:cover;
    right:25px;
    top:50%;
    margin-top:-10px;
  }
  .catalog_pagebtn a:hover{opacity:0.7;}
}