@charset "UTF-8";


/* =================================================================
トップページ、ビジュアル画像の上に要素を配置するスタイル(PC、TBのみ)
=================================================================*/

/* ひとり情シス知っ得コラム
=================================================================*/

.bnr_word_box{position:absolute; top:30px; left:30px;}
.bnr_word_box h2{font-size:32px;color:#fff; background-color:#a30b1a ;margin-top: 16px;margin-right: 16px;margin-left: 16px;; padding:8px 16px; text-align:center;width:auto;-webkit-border-radius:8px; -moz-border-radius:8px; -o-border-radius:8px; border-radius:8px; float:left;}
.bnr_word_box h3{color:#000; font-size:52px; font-weight:normal; margin:16px 0 16px 16px;}
.bnr_word_box .catch_list{margin:0 0 0 15px;}
.bnr_word_box .catch_list li{margin:0 10px 10px 0; color:#fff; background-color:#cc4654; font-size:16px; width:300px; padding:7px 5px 8px 5px; text-align:center; -webkit-border-radius:4px; -moz-border-radius:4px; -o-border-radius:4px; border-radius:4px; float:left;}

/* ウィンドウ幅が641px~1020pxの場合に適用するスタイル(TB) */
@media screen and (min-width:641px) and (max-width:1020px){
	.bnr_word_box{top:18px; left:23px; }
	.bnr_word_box h2{font-size:28px;color:#fff; background-color:#a30b1a ;margin-top: 16px;margin-right: 16px;margin-left: 16px;; padding:8px 16px; text-align:center;width:auto;-webkit-border-radius:8px; -moz-border-radius:8px; -o-border-radius:8px; border-radius:8px; float:left;}
	.bnr_word_box h3{font-size:42px; margin:16px 0 16px 16px;}
	.bnr_word_box .catch_list{}
}

/* AZBOX
=================================================================*/

.bnr_word_box_azbox{position:absolute; top:30px; left:30px; width:720px;}
.bnr_word_box_azbox .catch{font-size:25px; margin:18px 0 20px 15px;}
.bnr_word_box_azbox h2{color:#000; font-size:35px; font-weight:bold; margin:0 0 40px 15px;}
.bnr_word_box_azbox .catch_list{margin:0 0 0 15px;}
.bnr_word_box_azbox .catch_list li{margin:0 10px 10px 0; color:#fff; background-color:#cc4654; font-size:16px; width:215px; padding:7px 5px 8px 5px; text-align:center; -webkit-border-radius:4px; -moz-border-radius:4px; -o-border-radius:4px; border-radius:4px; float:left;}

/* ウィンドウ幅が641px~1020pxの場合に適用するスタイル(TB) */
@media screen and (min-width:641px) and (max-width:1020px){
	.bnr_word_box_azbox{top:18px; left:23px; width:570px;}
	.bnr_word_box_azbox .catch{font-size:17px; margin:11px 0 20px 11px;}
	.bnr_word_box_azbox h2{font-size:27px; margin:5px 0 40px 11px;}
	.bnr_word_box_azbox .catch_list{margin:0 0 0 11px;}
	.bnr_word_box_azbox .catch_list li{margin:0 7px 8px 0; font-size:14px; width:160px; padding:5px 5px 6px 5px;}
}

/* AUTOCAD
=================================================================*/

.bnr_word_box_autocad{position:absolute; top:50px; left:130px; width:480px;}
.bnr_word_box_autocad h2{color:#000; font-size:42px; font-weight:bold; margin:0 0 10px 15px;}
.bnr_word_box_autocad .subTitle{font-size:26px; margin:10px 0 20px 15px;}
.bnr_word_box_autocad .mainCatch{font-size:20px; margin:50px 0 0 15px;}
.bnr_word_box_autocad .subCatch{font-size:20px; margin:10px 0 0 15px;}

/* ウィンドウ幅が641px~1020pxの場合に適用するスタイル(TB) */
@media screen and (min-width:641px) and (max-width:1020px){
	.bnr_word_box_autocad{top:35px; left:100px; width:360px;}
	.bnr_word_box_autocad h2{font-size:27px; margin:5px 0 5px 10px;}
        .bnr_word_box_autocad .subTitle{font-size:22px; margin:5px 0 25px 10px;}
	.bnr_word_box_autocad .mainCatch{font-size:16px; margin:5px 0 10px 10px;}
        .bnr_word_box_autocad .subCatch{font-size:16px; margin:10px 0 0 10px;}


/* =================================================================
商品詳細ページ、商品紹介・注意事項のスタイル
=================================================================*/
#itemDetail .right_detail_box .into_text_area{font-size:12px;}
#itemDetail .right_detail_box .into_text_area p{margin:0 0 4px; line-height:1.5;}
#itemDetail .right_detail_box .into_text_area p a{padding-left:12px; line-height:1.9; background:url(../images/common/icon_arrow_mini_right.png) no-repeat left 0px; -ms-background-size:6px 10px; -moz-background-size:6px 10px; -webkit-background-size:6px 10px; background-size:6px 10px;}

/* =================================================================
商品詳細ページ、下部の商品情報のスタイル
=================================================================*/
#itemDetail .content_info .info_inner h4{font-size:20px; color:#525151; font-weight:bold; padding:0 0 10px; border-bottom:1px solid #dcdcdc; margin-bottom:20px;}
#itemDetail .content_info .info_inner h5{font-size:16px; color:#525151; font-weight:bold; padding:4px 10px 4px 10px; border-left:4px solid #ad0112;}
#itemDetail .content_info .info_inner ul{margin:20px 15px;}
#itemDetail .content_info .info_inner ul li{list-style:disc; line-height:2.4; font-size:14px; padding:0 12px;}
#itemDetail .content_info .info_inner .info_box{float:left; width:79%;}
#itemDetail .content_info .info_inner .img_info_box{float:left; width:20%;}
#itemDetail .content_info .info_inner .info_area{clear:both;}

/* ウィンドウ幅が0px〜640pxの場合に適用するスタイル(SP) */
@media screen and (min-width:0px) and (max-width:640px){
	#itemDetail .content_info .info_inner{padding:15px 0;}
	#itemDetail .content_info .info_inner h4{font-size:15px; padding:0 0 6px; line-height:1.3;}
	#itemDetail .content_info .info_inner h5{font-size:16px; padding:0 5px; line-height:1.3;}
	#itemDetail .content_info .info_inner ul{margin:10px 0 10px 25px;}
	#itemDetail .content_info .info_inner ul li{line-height:1.8; padding:0; font-size:12px;}
	#itemDetail .content_info .info_inner .info_box{width:60%;}
	#itemDetail .content_info .info_inner .img_info_box{width:40%;}
}

/* =================================================================
ローディングアニメーション
=================================================================*/

.loader {
  color: #ffffff;
  font-size: 20px;
  margin: 100px auto;
  width: 1em;
  height: 1em;
  border-radius: 50%;
  position: relative;
  text-indent: -9999em;
  -webkit-animation: load4 1.3s infinite linear;
  animation: load4 1.3s infinite linear;
  -webkit-transform: translateZ(0);
  -ms-transform: translateZ(0);
  transform: translateZ(0);
}
@-webkit-keyframes load4 {
  0%,
  100% {
    box-shadow: 0 -3em 0 0.2em, 2em -2em 0 0em, 3em 0 0 -1em, 2em 2em 0 -1em, 0 3em 0 -1em, -2em 2em 0 -1em, -3em 0 0 -1em, -2em -2em 0 0;
  }
  12.5% {
    box-shadow: 0 -3em 0 0, 2em -2em 0 0.2em, 3em 0 0 0, 2em 2em 0 -1em, 0 3em 0 -1em, -2em 2em 0 -1em, -3em 0 0 -1em, -2em -2em 0 -1em;
  }
  25% {
    box-shadow: 0 -3em 0 -0.5em, 2em -2em 0 0, 3em 0 0 0.2em, 2em 2em 0 0, 0 3em 0 -1em, -2em 2em 0 -1em, -3em 0 0 -1em, -2em -2em 0 -1em;
  }
  37.5% {
    box-shadow: 0 -3em 0 -1em, 2em -2em 0 -1em, 3em 0em 0 0, 2em 2em 0 0.2em, 0 3em 0 0em, -2em 2em 0 -1em, -3em 0em 0 -1em, -2em -2em 0 -1em;
  }
  50% {
    box-shadow: 0 -3em 0 -1em, 2em -2em 0 -1em, 3em 0 0 -1em, 2em 2em 0 0em, 0 3em 0 0.2em, -2em 2em 0 0, -3em 0em 0 -1em, -2em -2em 0 -1em;
  }
  62.5% {
    box-shadow: 0 -3em 0 -1em, 2em -2em 0 -1em, 3em 0 0 -1em, 2em 2em 0 -1em, 0 3em 0 0, -2em 2em 0 0.2em, -3em 0 0 0, -2em -2em 0 -1em;
  }
  75% {
    box-shadow: 0em -3em 0 -1em, 2em -2em 0 -1em, 3em 0em 0 -1em, 2em 2em 0 -1em, 0 3em 0 -1em, -2em 2em 0 0, -3em 0em 0 0.2em, -2em -2em 0 0;
  }
  87.5% {
    box-shadow: 0em -3em 0 0, 2em -2em 0 -1em, 3em 0 0 -1em, 2em 2em 0 -1em, 0 3em 0 -1em, -2em 2em 0 0, -3em 0em 0 0, -2em -2em 0 0.2em;
  }
}
@keyframes load4 {
  0%,
  100% {
    box-shadow: 0 -3em 0 0.2em, 2em -2em 0 0em, 3em 0 0 -1em, 2em 2em 0 -1em, 0 3em 0 -1em, -2em 2em 0 -1em, -3em 0 0 -1em, -2em -2em 0 0;
  }
  12.5% {
    box-shadow: 0 -3em 0 0, 2em -2em 0 0.2em, 3em 0 0 0, 2em 2em 0 -1em, 0 3em 0 -1em, -2em 2em 0 -1em, -3em 0 0 -1em, -2em -2em 0 -1em;
  }
  25% {
    box-shadow: 0 -3em 0 -0.5em, 2em -2em 0 0, 3em 0 0 0.2em, 2em 2em 0 0, 0 3em 0 -1em, -2em 2em 0 -1em, -3em 0 0 -1em, -2em -2em 0 -1em;
  }
  37.5% {
    box-shadow: 0 -3em 0 -1em, 2em -2em 0 -1em, 3em 0em 0 0, 2em 2em 0 0.2em, 0 3em 0 0em, -2em 2em 0 -1em, -3em 0em 0 -1em, -2em -2em 0 -1em;
  }
  50% {
    box-shadow: 0 -3em 0 -1em, 2em -2em 0 -1em, 3em 0 0 -1em, 2em 2em 0 0em, 0 3em 0 0.2em, -2em 2em 0 0, -3em 0em 0 -1em, -2em -2em 0 -1em;
  }
  62.5% {
    box-shadow: 0 -3em 0 -1em, 2em -2em 0 -1em, 3em 0 0 -1em, 2em 2em 0 -1em, 0 3em 0 0, -2em 2em 0 0.2em, -3em 0 0 0, -2em -2em 0 -1em;
  }
  75% {
    box-shadow: 0em -3em 0 -1em, 2em -2em 0 -1em, 3em 0em 0 -1em, 2em 2em 0 -1em, 0 3em 0 -1em, -2em 2em 0 0, -3em 0em 0 0.2em, -2em -2em 0 0;
  }
  87.5% {
    box-shadow: 0em -3em 0 0, 2em -2em 0 -1em, 3em 0 0 -1em, 2em 2em 0 -1em, 0 3em 0 -1em, -2em 2em 0 0, -3em 0em 0 0, -2em -2em 0 0.2em;
  }
}