/* ------ */
/* ---Win10改修--- */

    /* ---20210727 「サイズで選ぶ」タブ ここから--- */
    .w10-wrap{

    }
    .w10-title-h2{
      margin: 3px 0;
      padding: 2px 0 2px 15px;
      background-color: #525252;
      text-align: left;
      font-size: 18px;
      font-weight: bold;
      color: #ffffff;
    }
    
    .w10-caseInfo-imgarea{
      display: inline-block;
      vertical-align: top;
      margin-left: 22px;
      width:16%;
    }
    .w10-caseInfo-img{
      width: 80%;
    }
    .w10-caseInfo-wrap{
      margin-top: 3px;
      margin-bottom: 4px;
      font-weight: bold;
      display: inline-block;
      width: 80%;
    }
    .cacseInfo-table{
    margin-top: 3px;
      width: 98%;
      border-spacing: 0;
      font-size: 15px;
    }
    
    .cacseInfo-table th{
      border-bottom: solid 1.5px #fb7e44;
      padding: 1px 10px;
    }
    
    .cacseInfo-table td{
      border-bottom: solid 1px #ddd;
      text-align: left;
      padding: 1px 30px;
    }
    
    .cacseInfo-text{
      font-weight: normal;
      font-size: 14px;
    }
    
    
    
    
    .w10-itemcard-wrap{
      text-align: center;
    }
    .itemcard-size{
      margin: 3px;
      display: inline-block;
      border: solid 1px #1e78ff;
      border-radius: 5px;
      width:48%;
    
    }
    .itemcard-size-title{
      text-align: center;
      background-color: #1e78ff;
      border-radius: 4px 4px 0 0;
      color: #fff;
      font-size:18px;
      font-weight: bold;
    }
    .itemcard-size-content{
      margin-top: 3px;
      margin-bottom: 3px;
    }
    .itemcard-size-img{
      display: inline-block;
      width: 18%;
    }
    .itemcard-size-specarea{
      display: inline-block;
      vertical-align: top;
      width: 70%;
      margin-left: 10px;
    }
    .itemcard-size-specarea-title{
      color: #4d4d4d;
      font-size: 20px;
      font-weight: bold;
      text-decoration:underline;
    }
    .itemcard-size-specarea-specwrap{
      text-align: left;
      padding: 3px;
    
    }
    .itemcard-size-specarea-spec{
      display: inline-block;
      margin-left: 10px;
      font-size: 15px;
      color: #333;
    }
    .itemcard-size-button{
      text-align: center;
      width:100%;
      display: inline-block;
      margin-top: 3px;
      font-size: 14px;
      text-decoration: none;
      background-color: #1e78ff;
      color: #ffffff;
      border: solid 2px #1e78ff;
      border-radius: 3px;
      transition: .2s;
    }
    .itemcard-size-button:hover {
      background: #ffca67;
      color: white;
    }
        /* ---202107 「サイズで選ぶ」タブ ここまで--- */

/* ---20201026Win7改修20201026--- */
.win7-hr{
    margin: 0;
    border-style: none;
    border-top: 1px solid #9e9e9e;
}
.win7-banner-content{
    text-align: center;
    padding: 10px ;
    margin-bottom: 6px;
}
.win7-banner-title01{
    background-color: #fd4885;
    color: #ffffff;
    border-radius: 5px;
    display: inline-block;
    font-size: 26px;
    padding: 4px;
    font-weight: bold;

}
.win7-banner-title02{
    display: inline-block;
    font-size: 26px;
    font-weight: bold;
    margin-left: 10px;
}
.win7-banner-text{
    font-size: 18px;
    padding: 25px 40px;

}

.win7-banner-imgarea{
    text-align: center;
    border: solid 1px #9e9e9e;
    padding: 10px 0;
    margin-bottom: 10px;
    
}
.win7-banner-img{
    width: 30%;
}
.win7-banner-btnarea{
    margin-top: 5px;
    margin-bottom: 2px;
    text-align: center;
}
.win7-banner-btnarea-txt{
    font-size: 18px;
    font-weight: bold;
    color: #51a8ff;
}
/* ここから下がボタンのCSS　*/
.win7-btn-border {
    margin: 5px;
    width:200px;
    display: inline-block;
    text-align: center;
    border: 2px solid#ffffff;
    font-size: 15px;
    color: #ffffff;
    text-decoration: none;
    font-weight: bold;
    padding: 8px 16px;
    border-radius: 8px;
    transition: .3s;
    background-color:#51a8ff;

  }
  
  .win7-btn-border:hover {
    background-color:#fc8e6d;
    border-color:#fc8e6d;
    color:#ffffff;
  }
/* ---win7商品バナーボタンのスタイル20210210 ここから--- */
.itembanner-w7-wrap{
    border: solid 1px #6091d3;
    border-radius: 5px;
    width:49%;
    display: inline-block;
}
.itembanner-w7-os{
    text-align: center;
    background-color: #1e78ff;
    border-radius: 4px 4px 0 0;
    color: #fff;
    font-size:28px;
    font-weight: bold;
}
.itembanner-w7-content{
    padding: 10px;
}
.itembanner-w7-content-l{
    display: inline-block;
    text-align: center;
    width: 75%;
}
.itembanner-w7-content-r{
    display: inline-block;
    vertical-align: top;
    padding-top: 10px;
    width: 19%;
}
.itembanner-w7-prname{
    display: block;
    color: #1e78ff;
    font-size: 36px;
    font-weight: bold;
}
.itembanner-w7-discription{
    display: block;
    margin-bottom: 5px;
    font-size: 20px;
    font-weight: bold;
    color: #777777;
}
.itembanner-w7-btn{
    display: inline-block;
    font-size: 16px;
    width: 80%;

    padding: 0.3em 1em;
    text-decoration: none;
    color: #67c5ff;
    border: solid 2px #67c5ff;
    border-radius: 3px;
    transition: .4s;
}
.itembanner-w7-btn:hover {
    background: #67c5ff;
    color: white;
  }

/* ---win7商品バナーボタンのスタイル20210210 ここまで--- */

/* ---win10商品バナーボタンのスタイル20210622 ここから--- */
.itembanner-w10-wrap{
    border: solid 1px #6091d3;
    border-radius: 5px;
    width:49%;
    display: inline-block;
    margin-top:8px;
  }
  .itembanner-w10-os{
    text-align: center;
    background-color: #1e78ff;
    border-radius: 4px 4px 0 0;
    color: #fff;
    font-size:20px;
    font-weight: bold;
  }
  .itembanner-w10-content{
    padding: 10px;
  }
  .itembanner-w10-content-l{
    display: inline-block;
    text-align: center;
    width: 75%;
  }
  .itembanner-w10-content-r{
    display: inline-block;
    vertical-align: top;
    padding-top: 8px;
    width: 15%;
  }
  .itembanner-w10-prname{
    display: block;
    color: #1e78ff;
    font-size: 22px;
    font-weight: bold;
  }
  .itembanner-w10-discription{
    display: block;
    margin-bottom: 5px;
    font-size: 16px;
    font-weight: bold;
    color: #777777;
  }
  .itembanner-w10-btn{
    display: inline-block;
    font-size: 12px;
    width: 80%;
  
    padding: 0.3em 1em;
    text-decoration: none;
    color: #67c5ff;
    border: solid 2px #67c5ff;
    border-radius: 3px;
    transition: .4s;
  }
  .itembanner-w10-btn:hover {
    background: #67c5ff;
    color: white;
  }
  
  /* ---win10商品バナーボタンのスタイル20210622 ここまで--- */

/* ---全体--- */
.main-contents-wrapper{
    width:100%;
}
/* ---テキスト修飾スタイル--- */
/* ---太字・マーカー--- */
.font-bold{
    font-weight: bold;
}
.marker-yel{
    background:linear-gradient(transparent 70%, #FFFF00 0%); 
    font-weight:bold;
}
.marker-red{
    background:linear-gradient(transparent 70%, #ff0062 0%); 
    font-weight:bold;
}
.font-blue{
    color: #39a6ff;
    font-weight:bold;
    font-size: 22px;
}

/* ---カテゴリ概要エリア--- */
.category-discription-area{
    width:100%;
    text-align: center;
    padding: 10px 10px;
    margin:0;
}
.discription-text{
    padding:0 30px;
    border: 1px solid #ccc;
    border-radius: 0 0 5px 5px;
    margin: 0;
}
/* カテゴリ概要エリアのスタイル　ここから */
.category-title-h1{
    font-weight: bold;
    font-size: 20px;
}
.category-title-h2{
    font-weight: bold;
    font-size: 18px;
    text-align: left;
    margin: 10px 0 5px 0;
}
.category-title-p{
    font-size: 16px;
    text-align: left;
    margin:0 0 15px 0;
}
    /* カテゴリ概要エリア--リボン見出しのスタイル-- */
.ribbon5{
    margin-top: 0;
    margin-bottom: 3px;
    margin-bottom: 0;
    vertical-align: top;
    display: inline-block;
    position: relative;
    width:100%;
    line-height: 40px;/*高さ*/
    text-align: left;
    padding: 0 40px 0 18px;/*文字の左右の余白*/
    font-size: 22px;/*文字サイズ*/
    font-weight: bold;
    background: #1e78ff;/*背景色*/
    color: #FFF;/*文字色*/
    box-sizing: border-box;
  }
  .ribbon5:after {
    position: absolute;
    content: '';
    width: 0px;
    height: 0px;
    z-index: 1;
  }
  .ribbon5:after {
    top: 0;
    right: 0;
    border-width: 20px 10px 20px 0px;
    border-color: transparent #fff transparent transparent;
    border-style: solid;
  }
/* カテゴリ概要エリアのスタイル　ここまで */


/* カテゴリ概要エリア(画像リンクエリア）のスタイル　ここから */
.category-imglink-wrap{
    position: relative;/*相対配置*/
    width:100%;
    margin-bottom: 20px;
}
.category-imglink-img{
    width: 100%;
}
    /* 画像に文字を重ねる */
.category-imglink-text{
    position: absolute;
    color: #fff;
    background: rgba(0,0,0,.6);
    width: 100%;
    padding: 1em 0;
    top:50%;
    transform: translateY(-50%)
  }
  .category-imglink-text p{
    margin: 0;
    padding: 0 0.8em;
    font-size: 210%;
    text-align: center;
  }
  .category-imglink-wrap:hover{
    opacity:0.5;
    transition: 0.2s;
}

/* カテゴリ概要エリア(画像リンクエリア）のスタイル　ここまで*/


/* ---タブエリアのスタイル　ここから--- */
.tab-area-wrap{
    width:100%;
    padding: 0 0 0 10px;
    margin:0 auto;
}
    /* タブ表示のスタイルここから */
input[type="radio"]{
    display:none;
}
.tab_area{
    font-size:0; 
    margin:0 0;
}
.tab_area label{
    font-size: 14px;
    font-weight: bold;
    width:13.5%; 
    margin:0 2.5px; 
    display:inline-block; 
    padding:12px 0; 
    color:#fc8e6d;  
    background:#c3e1ff; 
    text-align:center; 
    font-size:13px; 
    cursor:pointer; 
    transition:ease 0.2s opacity;
    border-top-left-radius:4px; 
    border-top-right-radius:4px; 
}
.tab_area label:hover{
    opacity:0.5;
    transition: 0.2s;
}
.panel_area{
    width: 100%;
    border: 1px solid #ccc;
    background:#fff; 
    border-bottom-right-radius:10px; 
    border-bottom-left-radius:10px; 
    border-top:8px solid #c3e1ff;
    padding:0 15px;
}
.tab_panel{
    width:100%; 
    padding:20px 0; 
    display:none;
}
#tab1:checked ~ .tab_area .tab1_label{
    background:#51a8ff; 
    color:#ffffff;
    font-size: 14px;
    font-weight: bold;
}
#tab1:checked ~ .panel_area #panel1{
    display:block;
}
#tab2:checked ~ .tab_area .tab2_label{
    background:#51a8ff; 
    color:#ffffff;
    font-size: 14px;
    font-weight: bold;
}
#tab2:checked ~ .panel_area #panel2{
    display:block;
}
#tab3:checked ~ .tab_area .tab3_label{
    background:#51a8ff; 
    color:#ffffff;
    font-size: 14px;
    font-weight: bold;
}
#tab3:checked ~ .panel_area #panel3{
    display:block;
}
#tab4:checked ~ .tab_area .tab4_label{
    background:#51a8ff; 
    color:#ffffff;
    font-size: 14px;
    font-weight: bold;
}
#tab4:checked ~ .panel_area #panel4{
    display:block;
}
#tab5:checked ~ .tab_area .tab5_label{
    background:#51a8ff; 
    color:#ffffff;
    font-size: 14px;
    font-weight: bold;
}
#tab5:checked ~ .panel_area #panel5{
    display:block;
}
#tab6:checked ~ .tab_area .tab6_label{
    background:#51a8ff; 
    color:#ffffff;
    font-size: 14px;
    font-weight: bold;
}
#tab6:checked ~ .panel_area #panel6{
    display:block;
}
#tab7:checked ~ .tab_area .tab7_label{
    background:#51a8ff; 
    color:#ffffff;
    font-size: 14px;
    font-weight: bold;
}
#tab7:checked ~ .panel_area #panel7{
    display:block;
}
    /* ---タブ表示のスタイル　ここまで--- */

    /* ---スペックエリア　ここから--- */
.spec-ara{
    display: inline-block;
    width: 28%;
    vertical-align: top;
    padding:0 0 10px 0;
}
    /* スペックエリア--製品型番見出しのスタイル-- */
.series_title{
    padding: 0.25em 0.5em;/*上下 左右の余白*/
    color: #494949;/*文字色*/
    background: transparent;/*背景透明に*/
    border-left: solid 5px #51a8ff;/*左線*/
    font-weight: bold;
    font-size: 18px;
}
            /* スペックエリア--オープンテーブルのスタイル-- */
.spec_table{
    vertical-align: top;
    display: inline-block;
    margin-left:15px;
    margin-right:15px;
}
.table8 {
    display: inline-block;
    font-size: 12.5px;
    border-collapse: collapse;
    border-spacing: 0;
    width: 100%;
    }
.table8 tr{
    border-bottom: solid 1.5px #ccc;
    cursor: pointer;
    }
table tr:hover{
    background-color: #d4f0fd;
    }   
.table8 th {
    font-weight: bold;
    text-align: left;
    width: 25%;
    padding: 5px;
    }
.table8 td {
    color: #333;
    width: 75%;
    padding: 5px;
    }
        /* スペックエリア--リンクのスタイル --*/
a.a8:hover{
    color : #ff7043;
    }
    /* ---スペックエリア　ここまで--- */

    /* ---アイテムカードエリア　ここから--- */
.itemCard-area{
    vertical-align: top;
    display: inline-block;
    width:25%;
    text-align: center;
    border: solid 1px #ccc;
}
.itemCard-area-slim{
    vertical-align: top;
    display: inline-block;
    width:23%;
    text-align: center;
    border: solid 1px #ccc;
}

   /* アイテムカードエリアのスタイル ここから*/
.p1 {
    display: inline-block;
    text-align: center;
    background-color: #38393d;
    color: #fff;
    font-size: 15px;
    font-weight: normal;
    text-transform: uppercase;
    padding: 4px 20px;
}
.item img {
    display:inline-block;
    text-align: center;
    width:35%;
    margin-bottom: 15px;
}




.p2 {
    font-size: 12px;
    border-bottom: 1px solid #ccc;
    margin: 0 0 10px 0;
    padding: 0 0 5px 0;
}
        /* アイテムカードエリア--リストテーブルのスタイル-- */
.material_table{
    display:inline-block;
    text-align: center;
    margin-bottom: 15px;
}
.table7_title{
    font-weight: bold;
    font-size: 14px;
    color: #333;
    margin: 0;
}
.table7 {
    border-collapse: collapse;
    width: 100%;
    border: 1px solid #ccc;
    }
.table7 th {
    width:25%;
    border-bottom: #51a8ff 4px solid;
    text-align: left;
    padding: 5px;
    font-size: 12px;
    color: #333;
    font-weight: bold;
    background-color:#fde4bf;
    }
.table7 td {
    width:75%;
    font-size: 12px;
    color: #333;
    border: 1px solid #ccc;
    text-align: left;
    padding: 5px;
    background-color:#fff8ec;
}
        /* アイテムカードエリア--リンクのスタイル-- */
a.a-orange:hover{
    color : #ff7043;
  }

    /* アイテムカードエリア--商品リンクボタンのスタイル-- */
.material_button {
    display:inline-block;
    text-align: center;
    width: 85%;
    margin-bottom: 15px;
    padding: 4px 14px;
    font-size: 14px;
    background: #f5f7ff;
    border: solid 1px #ccc;
    border-left: solid 6px #51a8ff;/*左線*/
    color: #38393d;/*文字色*/
    font-weight: bold;   
}
  .material_button:hover {
    background-color: #ff7043;
    color: #fff;
}

        /* ---バナーエリアのスタイル--- */

.banner-img {
    display:inline-block;
    text-align: center;
    width:65%;
    margin-bottom: 5px;
}
.banner-img-min {
    display:inline-block;
    text-align: center;
    width:44%;
    margin-bottom: 15px;
}
.banner-img-min02 {
    display:inline-block;
    text-align: center;
    width:34%;
    margin-bottom: 15px;
}
.banner-img-min03 {
    display:inline-block;
    text-align: center;
    width:80%;
    margin-bottom: 15px;
}
.banner-title{
    background-color: #51a8ff;
    font-weight: bold;
    font-size: 16px;
    color:#ffffff;
    padding:10px 10px;
    text-align: left;
    margin:0;
}
.banner-title-min{
    background-color: #51a8ff;
    font-weight: bold;
    font-size: 14px;
    color:#ffffff;
    padding:20px 10px;
    text-align: left;
    margin:0 0 25px 0;
    line-height: 25px;
}
.banner-title-min02{
    background-color: #51a8ff;
    text-align: center;
    font-weight: bold;
    font-size: 18px;
    color:#ffffff;
    padding:10px 10px;
    margin:0 0 25px 0;
    line-height: 25px;
}
.banner-title-min03{
    background-color: #38393d;
    text-align: center;
    font-weight: bold;
    font-size: 18px;
    color:#ffffff;
    padding:10px 10px;
    margin:0 0 25px 0;
    line-height: 25px;
}
.banner-discription-title{
    border: solid 2px #51a8ff;
    border-radius: 8px;
    font-size:14px; 
    font-weight: bold;
    margin:0 10px 5px 10px; 
    text-align:left;
    padding:5px 10px;
}
.banner-discription{
    border: solid 1px #ccc;
    border-radius: 5px;
    padding:0 5px;
    font-size: 14px;
    margin:0 10px 0 10px;
    text-align: left;
    line-height: 20px;
}
.banner-btn {  
    display: inline-block;
    color: #FFF;
    background-color: #fd9535;/*背景色*/
    border-radius: 8px;/*角の丸み*/
    padding: 10px 20px;
    font-weight: bold;
    font-size: 14px;
    margin: 10px 0;
    width:90%;
  }

  .banner-btn:hover {
    background-color: #ffd6af;
  }

        /* --デフォルトボタンスタイルの除--- */
  button{
        background-color: transparent;
        border: none;
        cursor: pointer;
        outline: none;
        padding: 0;
        appearance: none;
}

        /* --細長バナーエリア--- */
.banner-slim-wrap{
    vertical-align: top;
    display: inline-block;
    width:20%;
    text-align: center;
    border: solid 1px #ccc;
    margin-left:5px;
}
.banner-slim-title{
    background-color: #38393d;
    font-weight: bold;
    font-size: 18px;
    color:#ffffff;
    padding:10px 10px;
    text-align: left;
    margin:0;
}

.banner-slim-img{
    display:inline-block;
    text-align: center;
    width:100%;
    margin-bottom: 5px;
}
.banner-slim-img:hover {
    opacity: 0.6;
    transition: 0.2s;
  }

.banner-slim-btn {  
    display: inline-block;
    color: #FFF;
    background-color: #fd9535;/*背景色*/
    border-radius: 8px;/*角の丸み*/
    padding: 10px 0;
    font-weight: bold;
    font-size: 14px;
    width:80%;
    margin:10px 0;
  }

  .banner-slim-btn:hover {
    background-color: #ffd6af;
  }

    /* ---アイテムカードエリア　ここまで--- */


    /* ---リンクボタンエリア--- */
.linkButton-area{
    vertical-align: top;
    display: inline-block;
    width: 20%;
    padding: 0 15px;
}
.linkButton-area02{
    vertical-align: top;
    display: inline-block;
    width: 23%;
    padding: 0 15px;
}
.listlink_button{
    text-align: center;
    width: 100%;
    margin:5px 0;
    padding: 8px 14px;
    font-size: 13px;
    background: #f7f7f7;
    border: solid 1px #ccc;
    border-left: solid 6px #3a9cfd;/*左線*/
    color: #38393d;/*文字色*/
    font-weight: bold;
}
.listlink_button:hover {
    background-color: #ff7043;
    color: #fff;
}
.discriotion01{
    border: solid 1px #ccc;
    font-size: 12px;
    padding: 5px;

}

/* ---デザインボタン20250424--- */
a.btn_01 {
    display: inline-block;
	text-align: center;
	text-decoration: none;
    width: 100%;
    margin:5px 0;
    padding: 8px 14px;
    font-size: 15px;
	font-weight: bold;
	border: 2px solid #27acd9;
	color: #27acd9;
	transition: 0.5s;
}
a.btn_01:hover {
	color: #fff;
	background: #27acd9;
}


/* ---ボタンエリアのスタイル　ここまで--- */


/* ---インフォメーションエリア--- */
.info-area{
    width: 100%;
    margin-top: 15px;
    display: inline-block;
    text-align: center;  
    z-index: 0;
}
.info-content-area{
    vertical-align: top;
    display: inline-block; 
    text-align: center;  
    width: 32%;
    z-index: 1;
    margin: 0 2px 25px 2px;
    padding:0 15px 0 15px;
    border: 1px solid #ccc;
    border-radius: 6px;
}
    /*インフォメーションエリア--見出し：文字と丸スタイル--*/
.info-title {
    font-weight: bold;
    color:#113382;
    font-size:22px;
    position: relative;
    color: #333;
    display: inline-block;
    margin: 65px 0 0 0;
    text-shadow: 0 0 2px white;
    z-index: 2;
  }
.info-title:before {
    content: "";
    position: absolute;
    background: #9accff;
    width: 100px;
    height: 100px;
    border-radius: 50%;
    top: 50%;
    left: 50%;
    -webkit-transform: translate(-50%,-50%);
    transform: translate(-50%,-50%);
    z-index: -1;
  }
.info-description{
    text-align: center;
    padding:0 30px 0 30px;
    font-size: 15px;
    padding: 25px 15px 30px 15px;
    border-radius: 8px;
}
    /* インフォメーションエリア--太い下線のスタイル-- */
.bold-01{
    font-weight: bold;
    color: royalblue;
    background: linear-gradient(transparent 80%, #ffff00 20%);
}
.under-line {
    background: linear-gradient(transparent 50%, #ffff00 50%);
}
    /* インフォメーションエリア--リボン見出しのスタイル-- */
  .ribbon4 {
    display: inline-block;
    margin-top: 0;
    margin-bottom: 3px;
    vertical-align: top;
    position: relative;
    width:100%;
    height: 40px;/*高さ*/
    line-height: 40px;/*高さ*/
    text-align: left;
    padding: 0 40px 0 18px;/*文字の左右の余白*/
    font-size: 18px;/*文字サイズ*/
    font-weight: bold;
    background: #1e78ff;/*背景色*/
    color: #FFF;/*文字色*/
    box-sizing: border-box;
}
  .ribbon4:after {
    position: absolute;
    content: '';
    width: 0px;
    height: 0px;
    z-index: 1;
}
  .ribbon4:after {
    top: 0;
    right: 0;
    border-width: 20px 10px 20px 0px;
    border-color: transparent #fff transparent transparent;
    border-style: solid;
}

/* ---画像インフォエリア--- */

.imgInfo-wrap-win7{
    display: inline-block;
    width:22%;
    text-align: center;
}

.imgInfo-wrap{
    display: inline-block;
    width:28%;
    text-align: center;
}
.imgInfo-text-area{
    display: inline-block;
    width: 100%;
    text-align: center;
}
.imgInfo-title{
    display: inline-block;
    width:95%;
    color:#fff;
    font-size: 16.5px;
    background-color: #38393d;
    padding:5px 0;
}
.imgInfo-text{
    display: inline-block;
    width:95%;
    text-align: left;
    margin:15px 0 0 0;
}
.imgInfo-img-area{
    display: inline-block;
    width:100%;
    text-align: center;
}
.imgInfo-img{
    display: inline-block;
    width:100%;
    text-align: center;
    margin:15px 0 0 0;
}

.imgInfo-button {  
    display: inline-block;
    width: 80%;
    color: #FFF;
    background-color: #fd9535;/*背景色*/
    border-radius: 8px;/*角の丸み*/
    padding: 10px 0;
    font-weight: bold;
    font-size: 14px;
    text-align: center;
    margin:15px 0 0 0;
  }

  .imgInfo-button:hover {
    background-color: #ffd6af;
  }


/* ---ポートPCI紹介エリア--- */
.explainItem-wrap{
    display: inline-block;
    width:25%;
    text-align: center;
    padding:15px 15px;
}
.explainItem-title{
    display: inline-block;
    width:100%;
    padding: 0.25em 0.5em;/*上下 左右の余白*/
    color: #494949;/*文字色*/
    background: transparent;/*背景透明に*/
    border-left: solid 5px #51a8ff;/*左線*/
    color:#51a8ff;
    font-weight: bold;
    font-size: 17.5px;
    text-align: left;
}
.explainItem-img img{
    display: inline-block;
    width:50%;
    margin:40px 0 0 0;
}
.explainItem-img p{
    display: inline-block;
    width:80%;
}
.explainItem-text{
    display: inline-block;
    width:95%;
    border: 2px solid #ccc;
    border-radius: 3px;
    padding: 10px 10px;
    text-align: left;
    margin:10px 0 25px 0;
    line-height: 25px;
}
.explainItem-button{
    width:90%;
    display: inline-block;
    color: #FFF;
    background-color: #fd9535;/*背景色*/
    border-radius: 8px;/*角の丸み*/
    padding: 10px 10px;
    font-weight: bold;
    font-size: 13px;
}
.explainItem-button:hover {
    background-color: #ffd6af;
}


.explainItem-wrap02{
    display: inline-block;
    width:28%;
    text-align: center;
    padding:15px 15px;
}
.explainItem-title02{
    display: inline-block;
    text-align: center;
    background-color: #38393d;
    color: #fff;
    font-size: 18px;
    font-weight: normal;
    width:95%;
    padding: 8px 0;
}
.explainItem-img02 img{
    display: inline-block;
    width:90%;
    margin: 5px 0;
    
}

.explainItem-text02{
    display: inline-block;
    width:100%;
    border: 2px solid #ccc;
    border-radius: 3px;
    padding: 10px 10px;
    text-align: left;
    line-height: 25px;
    margin-bottom: 20px;
    font-weight: bold;
    font-size: 15px;
}
.explainItem-button02{
    width:90%;

    display: inline-block;
    color: #FFF;
    background-color: #fd9535;/*背景色*/
    border-radius: 8px;/*角の丸み*/
    padding: 10px 10px;
    font-weight: bold;
    font-size: 16px;
}
.explainItem-button02:hover {
    background-color: #ffd6af;
}


/* ---****************************************************--- */

/* ---レスポンシブ対応--- */

@media screen and (max-width: 767px) {
    .spec-ara {
        width: 100%;
    }
    .linkButton-area {
        width: 100%;
    }
    .linkButton-area02 {
        width: 100%;
    }
    a.btn_01{
        width: 100%;
    }

    .info-area {
        display:none;
        width: 100%;
    }
    .info-content-area {
        width: 100%;
    }
    .ribbon5 { 
        width: 100%;
    }
    .tab_area label {
        width: 98%;
    }
    .spec_table {
        width: 100%;
    }
    .table8 {
        width: 100%;
    }
    .itemCard-area {  
        width: 100%;
        margin: 10px 0;
    }
    .p1 {
        width: 100%;
    }
    .item img {
        width: 50%;
        text-align: center;
    }

    .material_table {
        width: 100%;
    }
    .ribbon5 {
        width: 100%;
    }
    .ribbon5 {    
        width: 100%;
    }
    .ribbon5 {      
        width: 100%;
    }
    .panel_area{
        padding:0 10px;
    }
    .imgInfo-wrap{
        width: 100%;
    }
    .banner-slim-wrap{
        width: 100%;
    }
    .category-imglink-wrap{
        width: 100%;
    }
    .category-imglink-text p{
        font-size:100%;
    }
    .imgInfo-button{
        width:100%;
        padding:20px;
    }
    .banner-slim-btn{
        width:95%;
        padding:20px;
    }


    .explainItem-wrap{
        width:100%;
    }
    .explainItem-img img{
        text-align: center;
    }
    .explainItem-text{
        width:100%;
    }
    .explainItem-button{
        width:100%;
        text-align: center;
    }

    .explainItem-wrap02{
        width:100%;
    }

.imgInfo-wrap-win7{
    width: 100%;
}

.win7-banner-title01{
    width: 100%;
    font-size: 22px;
}
.win7-banner-title02{
    font-size: 24px;
}
.win7-banner-text{
    font-size: 18px; 
}

.win7-btn-border{
    width: 80%;
}
.win7-banner-btnarea-txt{
    font-size: 16px;
}
.font-blue{
    font-size: 18px;
}

/* ---win7商品バナーボタンのスタイル(レスポンシブ)20210210 ここから--- */
.itembanner-w7-wrap{
    width: 100%;
    display: block;
    text-align: center;
}
.itembanner-w7-content-l{
    width: 100%;
}
.itembanner-w7-content-r{

    width: 50%;
}
.itembanner-w7-img{
    display: inline-block;

}
.itembanner-w7-prname{
    font-size: 28px;
}
.itembanner-w7-discription{
    display: block;
    font-size: 18px;
}
/* ---win7商品バナーボタンのスタイル20210210 ここまで--- */
/* ---winXPtabエリアのスタイル20210210 ここから--- */
.itemCard-area-slim{
    width: 100%;
}
/* ---winXPtabエリアのスタイル20210210 ここまで--- */

/* ---win10商品バナーボタンのスタイル20210622 ここから--- */
.itembanner-w10-wrap{
    width: 100%;
    display: block;
    text-align: center;
    margin-top: 10px;
  }
  .itembanner-w10-os{
    font-size:28px;
  }
  .itembanner-w10-content-l{
    width: 100%;
  }
  .itembanner-w10-content-r{
    width: 50%;
  }
  .itembanner-w10-img{
    display: inline-block;
  
  }
  .itembanner-w10-prname{
    font-size: 36px;
  }
  .itembanner-w10-discription{
    display: block;
    font-size: 18px;
  }
  .itembanner-w10-btn{
    font-size: 18px;
  }
  
  .win7-banner-title01{
  margin-top: 5px;
  
  }
  /* ---win10商品バナーボタンのスタイル20210622 ここまで--- */

  /* ---win10商品　筐体サイズで選ぶ　ココから--- */
  .w10-wrap{
        width:100%;
    }
    .itemcard-size{
        width:100%;
    }

  /* ---win10商品　筐体サイズで選ぶ　ココから--- */
  
}