main h2{
 font-size: 1.4rem;
 font-weight: normal;
 color: #333;
 text-align: center;
 margin: 80px 0;
}
main h2 span {
  display: block;
  color: #e60012;
  font-size: 4.4rem;
 line-height: 4.4rem;
 font-weight: bold;
 margin-bottom: 20px;
}

/*

rankingBox

*/

  /*JS*/
.rankingMoreBtn {
  display: none;}

.rankingBox input {/*input要素は隠しておく*/
  visibility: hidden;
 pointer-events: none;
}
.rankingBox{
 background-color: #f3f5f7;
 padding-top: 50px;
 padding-bottom: 30px;
 color: #333;
}
.rankingBox h3{
 text-align:center;
 font-size: 2.8rem;
 font-weight: normal;
 margin-bottom: 30px;
}
.rankingBox h4{
 font-size: 1.4rem;
 line-height: 2.2rem;
 font-weight: normal;
}
.rankingBox .rankingContents{
 counter-reset: number 0;
 padding: 0 45px;
 height: 400px;
 /*display: flex;
  flex-wrap: wrap;
 flex-direction: column;
  align-content: space-between;*/
 width: 100%;
 column-count: 2;
 column-gap: 2em;
}
.rankingBox .list {
  list-style-type: none;
  position: relative;
 border-top: 1px solid #e1e5e8;
 width: 100%;
 height: 80px;
}
.rankingBox .rankingContents > .list:first-child{
 border-top: none;
}
.rankingBox .moreList .list:nth-child(3){
 border-top: none;
}

.rankingBox .list:before {
  counter-increment: number 1;
  content: counter(number) " ";
  color: #e60012;
 text-align: center;
 letter-spacing: -0.6rem;
  font-size: 4.4rem;
  position: absolute;
 display: block;
 height: 44px;
  width: 44px;
 font-family: Arial, Helvetica, "sans-serif";
  top: 20px;
  left: 0;
 z-index: 0;
 line-height: 44px;
}
.rankingBox .list a{
 display: inline-block;
 padding: 20px 0 0 70px;
 z-index: 10;
}
.rankingBox .list a.hover{
 color: #e60012;
}

/*

searchBox

*/
.searchForm {
 margin: 40px 0 120px 0;
}
.searchForm h3{
 font-size: 2.2rem;
 line-height: 2.2rem;
 font-weight: normal;
 margin-bottom: 20px;
 text-align: center;
}
.searchForm .localNav-search{
 display: flex;
		justify-content: center;
}
.searchForm .localNav-search form{
 margin: 0;
}
.searchForm .localNav-search input {
	max-width: none;
	min-width: 630px;
	font-size: 2.0rem;
	border: 1px solid #e60012;}
.searchForm .localNav-search button {
	border: 1px solid #e60012;
	background-color: #e60012;
	transition-duration: 0.2s;}
	.searchForm .localNav-search button:hover {opacity: 0.7;}
.searchForm .localNav-search button .icon-search {
background-image:  url("/images/common/icon-search-active.png");}
.searchForm article{
 font-size: 1.4rem;
 padding-top: 20px;
 width: 714px;
 margin: 0 auto;
}
.searchForm h4{
 font-weight: normal;
}
.searchForm ul{
 color: #333;
 display: flex;
 flex-wrap: wrap;
}
.searchForm ul li{
 margin-right: 45px;
 margin-top: 20px;
}
.searchForm ul a{
 display: inline-block;
 position: relative;
 padding-left: 20px;
}
.searchForm ul a .redArrowS{
 left:0px;
}
.searchForm ul a.hover{color: #e60012;}
/*

etcFAQBox

*/
.etcFAQBox{
 color: #333;
margin-bottom: 120px;}
.etcFAQBox h5{
 color: #000;
 font-size: 2.8rem;
 line-height: 2.8rem;
 font-weight: normal;
 border-top: 1px solid #d0d5da;
 padding: 40px 0 80px 0;
}
.etcFAQBox ul{
 display: flex;
font-size: 1.4rem;
line-height: 1.4rem;}
.etcFAQBox ul li{
 margin-right: 100px;
 display: inline-block;
 position: relative;
 padding-left: 20px;
}
.etcFAQBox ul li a{
}
.etcFAQBox ul li .redArrowS{
 left:0px;
}
.etcFAQBox ul li a.hover{ color: #e60012;}
.etcFAQBox ul li a.linkC{
 color: #e60012;
 text-decoration: underline;
}
.etcFAQBox ul li a.linkC.hover{text-decoration:none;}
/*

contactBox

*/
.contactBox{
 color: #333;
}
.contactBox h5{
 color: #000;
 font-size: 2.8rem;
 line-height: 2.8rem;
 font-weight: normal;
 border-top: 1px solid #d0d5da;
 padding: 40px 0 60px 0;
}
.contactBox h6{
 font-size: 2.2rem;
 line-height: 2.2rem;
 margin-bottom: 60px;
}
.contactBox .telArea{
 margin-bottom: 80px;
}
.contactBox .telArea h6::before{
 content:  '';
    height: 23px;
    width: 23px;
    display:  inline-block;
    background-image:  url("/support/images/ico_tel.gif");
    background-size:  contain;
    background-repeat:  no-repeat;
    background-position:  center;
    vertical-align:  bottom;
    margin-right:  10px; 

}
.contactBox .mailArea h6::before{
 content:  '';
    height: 16px;
    width: 24px;
    display:  inline-block;
    background-image:url("/support/images/icon_mail.gif");
    background-size:  contain;
    background-repeat:  no-repeat;
    background-position:  center;
    vertical-align:  baseline;
    margin-right:  10px;
}


.contactBox .telNum{
 font-size: 2.6rem;
 line-height: 2.6rem;
 margin-bottom: 60px;
 display: inline-block;
}
.contactBox .telNum a[href^="tel:"] {
    pointer-events: none;
}
.contactBox .telNum > a:first-child::after{
 content:"　／　"
}

.contactBox address{
 font-style:normal !important;
 font-size: 1.2rem;
 line-height: 1.8rem;
}
.contactBox .notice{
 font-size: 1.2rem;
 line-height: 1.8rem;
 margin-top: 20px;
 display: block;
 text-indent: -1.4rem;
 padding-left: 1.4rem;
}
.contactBox .mailArea ul{
 display: flex;
 justify-content:space-between;
 flex-wrap: wrap;
}
.contactBox .mailArea ul:after{
    content:"";
    display:block;
    width: 375px;
    height:0;
  }
.contactBox .mailArea ul li{
 width: 375px;
    height: 80px;
 margin-top: 25px;
}
.contactBox .mailArea ul li a{
 display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    height: 100%;
 text-align: center;
    box-sizing: border-box;
    border: 1px solid #e60012;
    color: #e60012 !important;
    font-size: 1.4rem;
 line-height: 2.2rem;
    position: relative;
 -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
}


.contactBox .mailArea ul li a .redArrowS{ right: 35px; transition-property: border-color, margin-right;}
.contactBox .mailArea ul li a.hover{
 color: #fff !important;
 background-color: #e60012;
}
.contactBox .mailArea ul li a.hover .redArrowS{ border-color: #fff; margin-right: -5px;}






/*

tab
 to common.css
*/

/*content*/
.tab-content-wrap {
	width: 1180px;
	margin: 0 auto;
padding-bottom: 60px;}
.tab-content {
 color: #333;}





/*

product tab area
purpose tab area
case tab ara

common
*/
main #Product .contentWrap,
main #Purpose .contentWrap,
main #Case .contentWrap{
 display: flex;
 justify-content:space-between;
 flex-wrap:wrap;}
main #Product .contentWrap:after,
main #Purpose .contentWrap:after,
main #Case .contentWrap:after{
    content:"";
    display:block;
    width: 366px;
    height:0;
  }
main #Product dl{
 width: 366px;
 margin-bottom: 60px;
}
main #Purpose dl,
main #Case dl{
 width: calc(100% / 2 - 30px);
	margin-bottom: 80px;
}
main #Product dl dt,
main #Purpose dl dt,
main #Case dl dt{
 font-weight: bold;
 font-size: 1.8rem;
 line-height: 1.8rem;
}
main #Product dl dt img{
 display: block;
 width: 366px;
 margin-bottom: 20px;
 transition: opacity 0.12s;
}
main #Product dl dt img{
 border: 1px solid #e9ecee;
}
main #Product ul,
main #Purpose ul,
main #Case ul{
 display: flex;
 flex-wrap:wrap;

}
main #Product ul li,
main #Purpose ul li,
main #Case ul li{
 font-size: 1.4rem;
 line-height: 1.8rem;
 width: 50%;
 padding-right: 20px;
 margin-top: 20px;
}
main #Product ul li a,
main #Purpose ul li a,
main #Case ul li a{
 display: inline-block;
 position: relative;
 padding-left: 20px;
}
main #Product ul li .redArrowS,
main #Purpose ul li .redArrowS,
main #Case ul li .redArrowS{
 left:0px;
 top:5px;
}
main #Product ul li a.hover,
main #Purpose ul li a.hover,
main #Case ul li a.hover{
 color: #e60012;
}






main #Product h3{
 font-size:2.8rem;
 line-height: 2.8rem;
 width: 100%;
 margin-top: 60px;
 margin-bottom: 40px;
 font-weight: normal;
}