@charset "UTF-8";


@font-face{
  font-family:'Klavika-r';
  src:url(../fonts/Klavika-Regular.woff2) format("woff2"),url(../fonts/Klavika-Regular.woff) format("woff");
  font-weight:400;
  font-style:normal;
}

@font-face{
  font-family:'Klavika-rc';
  src:url(../fonts/Klavika-RegularCond.woff2) format("woff2"),url(../fonts/Klavika-RegularCond.woff) format("woff");
  font-weight:400;
  font-style:normal;
}

@font-face{
  font-family:'Klavika-b';
  src:url(../fonts/Klavika-Bold.woff2) format("woff2"),url(../fonts/Klavika-Bold.woff) format("woff");
  font-weight:400;
  font-style:normal;
}

@font-face{
  font-family:'Klavika-bc';
  src:url(../fonts/Klavika-BoldCond.woff2) format("woff2"),url(../fonts/Klavika-BoldCond.woff) format("woff");
  font-weight:400;
  font-style:normal;
}

/* html5doctor.com Reset v1.6.1 (http://html5doctor.com/html-5-reset-stylesheet/) - http://cssreset.com */
html,body,div,span,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,abbr,address,cite,code,del,dfn,em,img,ins,kbd,q,samp,small,strong,sub,sup,var,b,i,dl,dt,dd,ol,ul,li,fieldset,form,label,legend,table,caption,tbody,tfoot,thead,tr,th,td,article,aside,canvas,details,figcaption,figure,footer,header,hgroup,menu,nav,section,summary,time,mark,audio,video{margin:0;padding:0;border:0;outline:0;font-size:100%;vertical-align:baseline;background:transparent}
body{line-height:1}
article,aside,details,figcaption,figure,footer,header,hgroup,menu,nav,section{display:block}
nav ul{list-style:none}
blockquote,q{quotes:none}
blockquote:before,blockquote:after,q:before,q:after{content:none}
a{margin:0;padding:0;font-size:100%;vertical-align:baseline;background:transparent}
ins{background-color:#ff9;color:#000;text-decoration:none}
mark{background-color:#ff9;color:#000;font-style:italic;font-weight:bold}
del{text-decoration:line-through}
abbr[title],dfn[title]{border-bottom:1px dotted;cursor:help}
table{border-collapse:collapse;border-spacing:0}
ol,ul {list-style:none;}

body{font-family: 游ゴシック体, 'Yu Gothic', YuGothic, 'ヒラギノ角ゴシック Pro', 'Hiragino Kaku Gothic Pro', メイリオ, Meiryo, Osaka, 'ＭＳ Ｐゴシック', 'MS PGothic', sans-serif;color: #fff;line-height: 140%; background:url(../img/bg-mainpattern.png); height: 100%;}
html{font-size: 62.5%;height:100%;}
ul{list-style: none; }

/**** Start of "Micro cf" ****/

.cf { zoom: 1; }
.cf:before,
.cf:after { content: ""; display: table; }
.cf:after { clear: both; }

/* --------------------------------------------------------
  common
-------------------------------------------------------- */
a:link,a:visited,a:hover,a:active {
  color:#FFFF99;
}

/* --------------------------------------------------------
  site setting
-------------------------------------------------------- */
.mt-5{margin-top:5px !important;}
.mt-10{  margin-top:10px !important;}
.mt-15{  margin-top:15px !important;}
.mt-20{  margin-top:20px !important;}
.mt-30{  margin-top:30px !important;}
.mt-40{  margin-top:40px !important;}
.mb-5{  margin-bottom:5px !important;}
.mb-10{  margin-bottom:10px !important;}
.mb-15{  margin-bottom:15px !important;}
.mb-20{  margin-bottom:20px !important;}
.mb-30{  margin-bottom:30px !important;}
.mb-40{  margin-bottom:40px !important;}
.mtb-10{
  margin-top:10px !important;
  margin-bottom:10px !important;
}
.mtb-20{
  margin-top:20px !important;
  margin-bottom:20px !important;
}
.mtb-30{
  margin-top:30px !important;
  margin-bottom:30px !important;
}
.ml-10 {margin-left:10px;}
.fs-12{  font-size:1.2rem !important;}
.fs-13{  font-size:1.3rem !important;}
.fs-14{  font-size:1.4rem !important;}
.fs-16{  font-size:1.6rem !important;}
.fs-18{  font-size:1.8rem !important;}
.fs-20{  font-size:2.0rem !important;}
.fs-22{  font-size:2.2rem !important;}
.fs-24{  font-size:2.4rem !important;}
.fw-normal{  font-weight:normal !important;}
.fw-bold{  font-weight:bold !important;}

.fc-white {  color:#fff !important;}
.fc-black {  color:#333 !important;}
.fc-red {  color:#FF0000 !important;}
.lh-100{line-height:100% !important;}
.lh-110{line-height:110% !important;}
.lh-120{line-height:120% !important;}
.lh-140{line-height:140% !important;}
.lh-160{line-height:160% !important;}
.lh-180{  line-height:180% !important;}

.ta-center{
  text-align:center;
}
.ta-right{
  text-align:right;
}
.fl-left {
  float:left;
}
.fl-right {
  float:right;
}

.border-typeA {
  border-top:1px dotted #ddd;
}
/* --------------------------------------------------------
  animation
-------------------------------------------------------- */
header nav#global-navi a.nav-hover {
  position:relative;
}
header nav#global-navi a.nav-hover:before {
  content:"";
  position:absolute;
  top:0;
  left:0;
  display:block;
  width:100%;
  height:100%;
  border-bottom:1px solid #fff;
  opacity: 1.0 !important;
  transform: translate(0,0) !important;
  -webkit-transform: translate(0,0) !important;
}
.fadein {
  opacity: 1.0 !important;
  transform: translate(0,0) !important;
  -webkit-transform: translate(0,0) !important;
}
.fadein-left {
  opacity: 1.0 !important;
  transform: translate(0,0) !important;
  -webkit-transform: translate(0,0) !important;
}
.fadein-right {
  opacity: 1.0 !important;
  transform: translate(0,0) !important;
  -webkit-transform: translate(0,0) !important;
}
.fadein-bottom {
  opacity: 1.0 !important;
  transform: translate(0,0) !important;
  -webkit-transform: translate(0,0) !important;
}

/* --------------------------------------------------------
  フレーム
-------------------------------------------------------- */
.wrap-top {
  width:100%;
  background:url(../img/bg-board.png) center -224px;
  overflow-x:hidden;
}
.wrap-contents {
  width:100%;
  min-height:100%;
  background:url(../img/bg-board.png) center -224px;
  /*overflow-x:hidden;
  overflow-y:scroll;*/
}

/* --------------------------------------------------------
  header
-------------------------------------------------------- */
header {
  position:relative;
  display: flex;
  -js-display: flex;
  margin:0 auto;
  padding:0;
  width:100%;
  max-width:1400px;
  height:80px;
  font-size:1.6rem;
  box-sizing:border-box;
}
header h1 {
  position:absolute;
  top:20px;
  left:0;
}
header h1:hover {
  opacity:0.8;
}
header h1 img {
  height:40px;
}
#custom-search {
  position:absolute;
  top:26px;
  right:220px;
  margin:0;
  width: 300px;
}
#custom-search #cs-inner {
  width: 100%;
}
#custom-search #cs-inner form {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: start;
  -ms-flex-align: start;
  align-items: flex-start;
  width: 100%;
  height:24px;
  line-height:100%;
  font-size:1.6rem !important;
}
#custom-search #cs-inner input[type="text"]{
  margin:0 2% 0 0;
  padding:0 10px;
  width:78%;
  height:24px;
  border:none;
  box-sizing:border-box;
}
#custom-search #cs-inner input[type="submit"]{
  margin:0;
  padding:0;
  width:20%;
  height:25px;
  border:none;
  background:#666;
  box-sizing:border-box;
  border-radius:3px;
}
#custom-search #cs-inner:before {
  content:'\e8b6';
  font-family: 'Material Icons';
  display:block;
  position:absolute;
  top:6px;
  right:22px;
  font-size: 1.8rem;
  color:#fff;
  pointer-events: none;
}
#spcustom-search {
  position:relative;
  margin:30px auto;
  width: 80%;
}
#spcustom-search #spcs-inner {
  display:inline-block;
  width: 100%;
}
#spcustom-search #spcs-inner form {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: start;
  -ms-flex-align: start;
  align-items: flex-start;
  width: 100%;
  height:24px;
  line-height:100%;
  font-size:1.6rem !important;
}
#spcustom-search #spcs-inner input[type="text"]{
  margin:0 2% 0 0;
  padding:0 10px;
  width:78%;
  height:24px;
  border:none;
  box-sizing:border-box;
}
#spcustom-search #spcs-inner input[type="submit"]{
  margin:0;
  padding:0;
  width:20%;
  height:24px;
  border:none;
  background:#666;
  box-sizing:border-box;
  border-radius:3px;
}
#spcustom-search #spcs-inner:before {
  content:'\e8b6';
  font-family: 'Material Icons';
  display:block;
  position:absolute;
  top:6px;
  right:22px;
  font-size: 1.8rem;
  color:#fff;
}

/* --------------------------------------------------------
  ナビゲーション
-------------------------------------------------------- */
header .wrap-sns {
  display: flex;
  -js-display: flex;
  position:absolute;
  top:-10px;
  right:0;
}
header .wrap-sns a {
  position:relative;
  display:block;
  margin-left:20px;
  width:45px;
  height:100px;
}
header .wrap-sns a:hover {
  opacity:0.8;
}
header .wrap-sns a:first-child {
  margin-left:0;
}

header .wrap-sns a figure {
  position:absolute;
  top:-4px;
  left:-30px;
}
header .wrap-sns a figure img {
  width:100px;
  height:auto;
}
.wrap-spsns {
  display:none;
}

nav#global-navi {
  position:relative;
  display: flex;
  -js-display: flex;
  margin:0 auto 20px;
  width: 100%;
  max-width: 1400px;
  box-sizing:border-box;
}
nav#global-navi .layer-1st {
  font-size:0;
  vertical-align:top;
  z-index:11;
}
nav#global-navi .layer-1st > li {
  display:inline-block;
}
nav#global-navi .layer-1st > li > a {
  display:block;
  padding:6px 15px 6px 15px;
  width:100%;
  font-size:1.5rem;
  color:#fff;
  text-decoration:none;
  border-right:1px solid #ccc;
  box-sizing:border-box;
  z-index:12;
}
nav#global-navi .layer-1st > li:nth-of-type(1) > a {
  border-left:1px solid #ccc;
}
nav#global-navi .layer-1st > li a:hover {
  background:rgba(51,51,51,0.9);
}
nav#global-navi .layer-1st li#gaming .layer-2nd {
  display:block;
  position:absolute;
  top:25px;
  left:0;
  padding:20px 10px 0;
  width:100%;
  background:rgba(51,51,51,0.95);
  box-sizing:border-box;
  opacity: 0;
  transform: translate(-2000px,0);
  webkit-transform: translate(-1700px,0);
  transition: 0.3s;
  /*pointer-events: none;*/
  z-index:11;
}
nav#global-navi .layer-1st li#gaming.nav-hover .layer-2nd {
  opacity: 1;
  transform: translate(0,0);
  webkit-transform: translate(0,0);
}
nav#global-navi .layer-1st li#gaming .layer-2nd:hover {
  opacity: 1;
  transform: translate(0,0);
  webkit-transform: translate(0,0);
}
nav#global-navi .layer-1st li#gaming .layer-2nd ul {
  display: flex;
  -js-display: flex;
  flex-wrap: wrap;
  opacity: 1.0 !important;
  transform: translate(0,0) !important;
  -webkit-transform: translate(0,0) !important;
}
nav#global-navi .layer-1st li#gaming .layer-2nd ul li {
  margin-right:0;
  margin-left:0;
  padding:0 10px;
  border-right:1px solid #fff;
}

nav#global-navi .layer-1st li#hardware {
  position:relative;
}
nav#global-navi .layer-1st li#hardware .layer-2nd {
  display:block;
  position:absolute;
  top:25px;
  left:0;
  padding:20px 0;
  width:220px;
  background:rgba(51,51,51,0.95);
  box-sizing:border-box;
  opacity: 0;
  transform: translate(-2000px,0);
  webkit-transform: translate(-1100px,0);
  transition: 0.3s;
  /*pointer-events: none;*/
  z-index:1;
}
nav#global-navi .layer-1st li#hardware.nav-hover .layer-2nd {
  opacity: 1;
  transform: translate(0,0);
  webkit-transform: translate(0,0);
}
nav#global-navi .layer-1st li#hardware .layer-2nd:hover {
  opacity: 1;
  transform: translate(0,0);
  webkit-transform: translate(0,0);
}
nav#global-navi .layer-1st li#hardware.nav-hover .layer-2nd ul {
  display: flex;
  -js-display: flex;
  flex-direction: column;
}
nav#global-navi .layer-2nd li {
  margin-bottom:20px;
}
nav#global-navi .layer-2nd li a {
  display:block;
  color:#fff;
  font-size:1.4rem;
  text-decoration:none;
}
nav#global-navi .layer-2nd li a:hover {
  color:#FFFF99;;
  text-decoration:underline;
}
nav#global-navi .layer-1st li#hardware .layer-2nd li a {
  padding:0 30px;
}
nav#global-navi .layer-1st li#hardware .layer-2nd li:last-child {
  margin-bottom:0;
}

/* */
nav#global-navi .layer-1st li#laptop {
  position:relative;
}
nav#global-navi .layer-1st li#laptop .layer-2nd {
  display:block;
  position:absolute;
  top:25px;
  left:0;
  padding:20px 0;
  width:220px;
  background:rgba(51,51,51,0.95);
  box-sizing:border-box;
  opacity: 0;
  transform: translate(-2000px,0);
  webkit-transform: translate(-1100px,0);
  transition: 0.3s;
  /*pointer-events: none;*/
  z-index:1;
}
nav#global-navi .layer-1st li#laptop.nav-hover .layer-2nd {
  opacity: 1;
  transform: translate(0,0);
  webkit-transform: translate(0,0);
}
nav#global-navi .layer-1st li#laptop .layer-2nd:hover {
  opacity: 1;
  transform: translate(0,0);
  webkit-transform: translate(0,0);
}
nav#global-navi .layer-1st li#laptop.nav-hover .layer-2nd ul {
  display: flex;
  -js-display: flex;
  flex-direction: column;
}
nav#global-navi .layer-1st li#laptop .layer-2nd li a {
  padding:0 30px;
}
nav#global-navi .layer-1st li#laptop .layer-2nd li:last-child {
  margin-bottom:0;
}

/* HEROES store2段 */
nav#global-navi .layer-1st li#heroes_store {
  position:relative;
}
nav#global-navi .layer-1st li#heroes_store .layer-2nd {
  display:block;
  position:absolute;
  top:25px;
  left:0;
  padding:20px 0;
  width:220px;
  background:rgba(51,51,51,0.95);
  box-sizing:border-box;
  opacity: 0;
  transform: translate(-2000px,0);
  webkit-transform: translate(-1100px,0);
  transition: 0.3s;
  /*pointer-events: none;*/
  z-index:1;
}
nav#global-navi .layer-1st li#heroes_store.nav-hover .layer-2nd {
  opacity: 1;
  transform: translate(0,0);
  webkit-transform: translate(0,0);
}
nav#global-navi .layer-1st li#heroes_store .layer-2nd:hover {
  opacity: 1;
  transform: translate(0,0);
  webkit-transform: translate(0,0);
}
nav#global-navi .layer-1st li#heroes_store.nav-hover .layer-2nd ul {
  display: flex;
  -js-display: flex;
  flex-direction: column;
}
nav#global-navi .layer-1st li#heroes_store .layer-2nd li a {
  padding:0 30px;
}
nav#global-navi .layer-1st li#heroes_store .layer-2nd li:last-child {
  margin-bottom:0;
}

/* ryzen-pro2段か */
nav#global-navi .layer-1st li#ryzen-pro {
  position:relative;
}
nav#global-navi .layer-1st li#ryzen-pro .layer-2nd {
  display:block;
  position:absolute;
  top:25px;
  left:0;
  padding:20px 0;
  width:220px;
  background:rgba(51,51,51,0.95);
  box-sizing:border-box;
  opacity: 0;
  transform: translate(-2000px,0);
  webkit-transform: translate(-1100px,0);
  transition: 0.3s;
  /*pointer-events: none;*/
  z-index:1;
}
nav#global-navi .layer-1st li#ryzen-pro.nav-hover .layer-2nd {
  opacity: 1;
  transform: translate(0,0);
  webkit-transform: translate(0,0);
}
nav#global-navi .layer-1st li#ryzen-pro .layer-2nd:hover {
  opacity: 1;
  transform: translate(0,0);
  webkit-transform: translate(0,0);
}
nav#global-navi .layer-1st li#ryzen-pro.nav-hover .layer-2nd ul {
  display: flex;
  -js-display: flex;
  flex-direction: column;
}
nav#global-navi .layer-1st li#ryzen-pro .layer-2nd li a {
  padding:0 30px;
}
nav#global-navi .layer-1st li#ryzen-pro .layer-2nd li:last-child {
  margin-bottom:0;
}

#breadcrumb {
  padding:0;
  width:100%;
  font-size:1.6rem;
}
#breadcrumb > .inner {
  margin:0 auto;
  padding:0 20px;
  max-width:1440px;
  box-sizing:border-box;
}

/*  カラム  */
.column-width100 {
  width:100%;
  max-width:1440px;
  box-sizing:border-box;
}
.column-width67 {
  width:67.14%;
  max-width:940px;
}
.column-width31 {
  width:31.43%;
  max-width:440px;
}
/*  ボックス  */
.box-width100 {
  margin-bottom:20px;
  width:100%;
}
.box-width100absolute {
  margin-bottom:20px;
  width:100%;
}
.box-width100 .article-info h3 {
  font-size:3.2rem;
  line-height:120%;
}
.box-width100:last-child {
  margin-bottom:0;
}
#contents .box-width100 {
  margin-bottom:20px;
  width:32.5%;
}
#contents .box-width100 .thumbnail {
  height: 180px;
}
#contents .box-width100 .article-info h3 {
  font-size:1.8rem;
  line-height:120%;
}
.box-width67 {
  margin-bottom:20px;
  width:66.18%;
}
.box-width67 .article-info h3 {
  font-size:2.8rem;
  line-height:120%;
}
#contents .box-width67 {
  margin-bottom:20px;
  width:32.5%;
}
#contents .box-width67 .article-info h3 {
  font-size:1.8rem;
  line-height:120%;
}
#contents .box-width67 .thumbnail {
  height: 180px;
}
.box-width50 {
  margin-bottom:20px;
  width:49%;
}
.box-width50 .article-info h3 {
  font-size:1.8rem;
  line-height:120%;
}
#contents .box-width50 {
  margin-bottom:20px;
  width:32.5%;
}
#contents .box-width50 .thumbnail {
  height: 180px;
}
#contents .box-width50 .article-info h3 {
  font-size:1.8rem;
  line-height:120%;
}
.box-width33 {
  margin-bottom:20px;
  width:32.5%;
}
.box-width33 .article-info h3 {
  font-size:1.8rem;
  line-height:120%;
}

/* --------------------------------------------------------
  main
-------------------------------------------------------- */
#header-banner {
  position:relative;
  margin:0 auto;
  width:100%;
  max-width:1400px;
  max-height:350px;
  text-align:center;
  z-index:1;
  opacity: 0;
  transform: translate(0,-400)px;
  webkit-transform: translate(0,-400px);
  transition: 0.8s;
  background: #000;
}
#header-banner li {
  width:100%;
  opacity:1;
  transition: 0.2s;
}
#header-banner li:hover {
  opacity:0.8;
}
#header-banner li img {
  width:100%;
  max-height:350px;
}
.slider{
  display: none;
}
.slider.slick-initialized{
  display: block; /*slick-initializedが付与されたら表示*/
}
.wrap-masonry {
    margin: 0 auto;
    overflow: hidden;
}
.item {
  margin-right:10px;
  margin-bottom:10px;
  width: 300px;
  height:100px;
  color:#222;
  background:#fff;
}

.main {
  position:relative;
  display: flex;
  -js-display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  margin:40px auto 80px;
  padding:0 20px;
  width:100%;
  max-width:1440px;
  box-sizing:border-box;
}
.laptop-head {
  position:relative;
  display: flex;
  -js-display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  margin:50px auto 20px;
  padding:0 20px;
  width:100%;
  max-width:1440px;
  box-sizing:border-box;
}
#top .main section,
#laptop-top .main section {
  margin:0 0 0;
  padding:0;
  box-sizing:border-box;
}
.main section#top-new {
  margin-top:0;
  margin-bottom:50px;
}
.main section#top-campaign,
.main section#top-gaming,
.main section#top-creative,
.main section#top-ryzen,
.main section#top-radeon,
.main section#top-hardware,
.main section#top-hpc {
  margin-bottom:50px;
}
.main section#top-youtube {
  margin-top:0;
  margin-bottom:50px;
}
.main section#top-twitter {
}
.main section#top-twitter .wrap-widget {
  padding:10px;
  display:block;
  background:rgba(51,51,51,0.8);
  box-sizing:border-box;
}
.wrap-widget {
  opacity: 0;
  transform: translate(0,300px);
  webkit-transform: translate(0,300px);
  transition: 0.6s;
}
.category .main section.article-list {
  margin-top:50px;
}

.main section h2 {
  position:relative;
  height:80px;
  z-index:0;
}
.main section#top-new h2:first-of-type:before {
  content:"";
  position:absolute;
  display:block;
  top:-166px;
  left:-268px;
  width:826px;
  height:529px;
  background:url(../img/bg-title01.png) no-repeat;
  z-index:0;
}
.main section#top-campaign h2:before {
}
.main section#top-creative h2:before {
}
.main section#top-gaming h2:before {
  content:"";
  position:absolute;
  display:block;
  top:-130px;
  left:-130px;
  width:1585px;
  height:250px;
  background:url(../img/bg-title03.png) no-repeat;
  z-index:0;
}
.main section#top-ryzen h2:before {
  content:"";
  position:absolute;
  display:block;
  top:-360px;
  left:-40px;
  width:1825px;
  height:577px;
  background:url(../img/bg-title04.png) no-repeat;
  z-index:0;
}
.main section#top-radeon h2:before {
  content:"";
  position:absolute;
  display:block;
  top:-412px;
  left:-76px;
  width:1713px;
  height:804px;
  background:url(../img/bg-title05.png) no-repeat;
  z-index:0;
}
.main section#top-hpc h2 {
  position:relative;
  padding-left:0px;
  font-size:4.8rem;
  font-weight:lighter;
  line-height:110%;
  text-shadow:0px 0px 10px #ffff99;
}
.main section#top-hpc h2 a {
  text-decoration: none;
  color: #fff;
}
.wrap-category .main section > h2:before {
  content:"";
  position:absolute;
  display:block;
  top:-70px;
  left:0px;
  width:215px;
  height:218px;
  background:url(../img/bg-titlecat.png) no-repeat;
  z-index:0;
}
.main section h2 img {
  position:absolute;
  top:-52px;
  left:0px;
}

.main section#top-youtube .video{
	position:relative;
	width:100%;
	padding-top:56.25%;
}
.main section#top-youtube .video iframe{
	position:absolute;
	top:0;
	right:0;
	width:100%;
	height:100%;
}

/* --------------------------------------------------------
  記事リスト
-------------------------------------------------------- */
.main section .article-list {
  -js-display: flex;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  position:relative;
  z-index:1;
}
.main section .article-list::after{
  content:"";
  display: block;
  width:33%;
}

.main section .article-list + h2 {
  margin-top:20px;
}

.main section .article-list li {
  -js-display: flex;
  display: flex;
  flex-wrap: wrap;
  position:relative;
  padding:10px;
  color:#fff;
  text-decoration:none;
  background:rgba(51,51,51,0.8);
  box-sizing:border-box;
  opacity: 0;
  transform: translate(0px,0);
  webkit-transform: translate(0px,0);
  transition: 0.4s;
}
.main section .article-list li:hover {
  color:#222;
  background:rgba(255,255,255,0.9);
}
.main section .article-list li .wrap-linkbox {
  position:absolute;
  display:block;
  top:0;
  left:0;
  width:100%;
  height:100%;
  z-index:2;
}
.main section .article-list li .thumbnail {
  -js-display: flex;
  display: flex;
  align-items: center;
  position:relative;
  overflow:hidden;
  width:44%;
  height:200px;
  background:#000;
  z-index:1;
}
.main section .article-list li .thumbnail img {
  width:100%;
}
.main section .article-list li .article-info {
  padding-left:1%;
  width:55%;
  box-sizing:border-box;
}
.main section .article-list li.box-width50 .thumbnail {
  -js-display: flex;
  display: flex;
  align-items: center;
  overflow:hidden;
  width:45.98%;
  height:160px;
}
.main section .article-list li.box-width50 .article-info {
  padding-left:3%;
  width:50%;
  box-sizing;border-box;
}
.main section .article-list li.box-width33 .thumbnail {
  overflow:hidden;
  width:45.98%;
  height:180px;
}
.main section .article-list li.box-width33 .article-info {
  padding-left:3%;
  width:50%;
  box-sizing;border-box;
}
#contents .main section .article-list li.box-width100 .thumbnail, .main section .article-list li.box-width67 .thumbnail {
  overflow:hidden;
  width:45.98%;
  height:180px;
}
#contents .main section .article-list li.box-width100 .article-info, .main section .article-list li.box-width67 .article-info {
  padding-left:3%;
  width:50%;
  box-sizing;border-box;
}
.main section .article-list li .thumbnail img.positionY-0,
.main section .article-list li .thumbnail img.positionY-top {
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  -webkit- transform: translateY(-50%);
}
.main section .article-list li .thumbnail img.positionY-1,
.main section .article-list li .thumbnail img.positionY-center {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translateY(-50%) translateX(-50%);
  -webkit- transform: translateY(-50%) translateX(-50%);
}
.main section .article-list li .thumbnail img.positionY-3 {
  margin-top: 24px;
  width: 100% !important;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translateY(-50%) translateX(-50%);
  -webkit- transform: translateY(-50%) translateX(-50%);
}
.article-info .article-date {
  font-size:1.4rem;
}
.article-info .article-category {
  position:relative;
  -js-display: flex;
  display: flex;
  flex-wrap: wrap;
  margin:12px 0 6px 0;
  max-width:1000px;
}
.article-info .article-category a {
  margin:0 5px 5px 0;
  padding:2px 6px;
  display:inline-block;
  /*min-height:20px;*/
  font-size:1.2rem;
  color:#fff;
  line-height:100%;
  border:1px solid #fff;
  box-sizing:border-box;
  border-radius:4px;
  text-decoration:none;
  z-index:2;
}
.article-list li:hover .article-info .article-category a {
  color:#222;
  border:1px solid #222;
}
.article-info .article-category a.ct-gaming, .article-info .article-category a.ct-creative {
  letter-spacing:-0.1em;
}
.article-info .article-category a.ct-ryzen {
  color:#fff;
  background:#FF5C26 !important;
  border:1px solid #FF5C26 !important;
}
.article-list li:hover .article-info .article-category a.ct-ryzen {
  color:#FF5C26 !important;
  border:1px solid #FF5C26 !important;
  background:none !important;
}
.article-info .article-category a.ct-radeon {
  color:#fff;
  background:#FF251A !important;
  border:1px solid #FF251A !important;
}
.article-list li:hover .article-info .article-category a.ct-radeon {
  color:#FF251A !important;
  border:1px solid #FF251A !important;
  background:none !important;
}
.article-info .article-category a.ct-hardware {
  color:#fff;
  letter-spacing:-0.05em;
  background:#F69D00 !important;
  border:1px solid #F69D00 !important;
}
.article-list li:hover .article-info .article-category a.ct-hardware {
  color:#F69D00 !important;
  border:1px solid #F69D00 !important;
  background:none !important;
}
.article-info .article-category a:last-child {
  margin-right:0;
}
.noentry {
  padding:40px 10px;
  font-size:2.4rem;
  line-height:120%;
}
/* --------------------------------------------------------
  footer
-------------------------------------------------------- */
footer {
  padding:30px 0;
  width:100%;
  color:#222;
  background:#ccc;
  box-sizing:border-box;
}
footer > .inner {
  -js-display: flex;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  margin:0 auto;
  padding:0 20px;
  width:100%;
  max-width:1440px;
  box-sizing:border-box;
  color:#222;
}
footer > .inner .footer-nav {
  -js-display: flex;
  display: flex;
  align-items: center;
  margin-bottom:15px;
}
footer > .inner .footer-nav div {
  margin-right:20px;
}
footer > .inner .copyright {
  -js-display: flex;
  display: flex;
  align-items: center;
  font-size:1.4rem;
}
footer > .inner > nav {
  -js-display: flex;
  display: flex;
  align-items: center;
}
footer > .inner > nav a {
  display:inline-block;
  font-size:1.4rem;
  color:#222;
  text-decoration:none;
}
footer > .inner > nav a:hover {
  text-decoration:underline;
}
footer nav > .punctuation {
  display:inline-block;
  margin:0 20px;
}
footer nav > .punctuation:first-child {
  margin:0;
}





/* --------------------------------------------------------
  contents
-------------------------------------------------------- */
.wrap-category {
  margin:50px auto 100px;
  width:100%;
  box-sizing:border-box;
}
.wrap-article, .wrap-subcategory {
  margin:50px auto 100px;
  width:100%;
  box-sizing:border-box;
}
.wrap-subcategory h2 {
  position:relative;
  padding-left:0px;
  font-size:4.8rem;
  font-weight:normal;
  line-height:110%;
}
.wrap-category h2.hpc {
  position:relative;
  padding-left:0px;
  font-size:4.8rem;
  font-weight:normal;
  line-height:110%;
}
h2.laptop-new,h2.laptop-campaign,h2.laptop-gaming,h2.laptop-portable,h2.laptop-heading,h2.laptop-mainstream {
  position:relative;
  padding-left:0px;
  font-size:4.8rem;
  font-weight:normal;
  line-height:110%;
}
/* laptopの見出しはmainの外にあるので */
.wrap-article .article-title {
  position:relative;
  width:100%;
  min-height:80px;
  box-sizing:border-box;
}
.wrap-article .article-title h2 {
  position:relative;
  margin-top:5px;
  padding-left:0px;
  font-size:3.0rem;
  font-weight:normal;
  line-height:110%;
}
.wrap-article h3 {
  position:relative;
  font-size:1.4rem;
  line-height:120%;
}
.wrap-article .title-bottom {
  -js-display: flex;
  display: flex;
  justify-content: space-between;
  margin:20px 0 20px 0;
}
.wrap-article .title-bottom > .article-info {
  -js-display: flex;
  display: flex;
  align-items: center;
  margin-right:10px;
}
.wrap-article .title-bottom > .article-info .article-date {
  margin:0 10px 5px 0;
  padding:0;
  width:170px;
  font-size:1.4rem;
}
.wrap-article .title-bottom > .article-info .article-category {
  margin: 0;
}
.wrap-article .title-bottom > .writer {
  white-space: nowrap;
  font-size:1.4rem;
  text-align:right;
}
.wrap-article article {
  padding:30px;
/*  width:100%;*/
  background: rgba(0,0,0,0.8);
  box-sizing:border-box;
}
body.about .wrap-contents, body.notfound .wrap-contents {
    background: url(../img/bg-board.png) center -20px;
}
body.about .wrap-article {
  margin-top: 20px;
}
body.about .wrap-article article, body.notfound .wrap-article article {
  padding:30px 0 60px;
  width:100%;
  min-height:400px;
  background:url(../img/bg-about.png) 0 0 no-repeat;
  background-size:cover;
  opacity:0.9;
}
.wrap-article article p {
  margin-top:20px;
  font-size:1.6rem;
  line-height:160%;
}
.wrap-article article p.reprint {
  font-size:1.0rem;
  text-align: right;
}
.wrap-article article th {
  white-space: pre;
}
body.about .wrap-article article > h3, body.notfound .wrap-article article > h3 {
  margin-bottom:60px;
  padding-top:60px;
  text-align:center;
  border:none;
}
body.notfound .wrap-article article > h3 {
    margin-bottom: 60px;
    padding-top: 60px;
    font-size:4.8rem;
    text-align: left;
    border: none;
}
body.about .wrap-article article p {
  font-size:2.2rem;
  font-weight:normal;
  line-height:200%;
  text-align:center;
}
.wrap-article article.inquiry {
  text-align:center;
}
.wrap-article article.inquiry p {
  font-size:2.0rem;
}
.btn-mailaddress {
  display:inline-block;
  margin-top:30px;
}
.btn-mailaddress:hover {
  opacity:0.8;
}
/*.btn-mailaddress {
  display:inline-block;
  margin-top:30px;
  padding:15px 80px;
  font-size:1.8rem;
  color:#000 !important;
  background:#eee;
  text-decoration:none;
  box-sizing:border-box;
  border-radius:4px;
}*/
/*.wrap-article article p:first-child {
  margin-top:0;
}*/
.wrap-article article .article-detail:first-child > p:first-child {
  margin-top:0;
}
.wrap-article article p + h3, .wrap-article article table + h3 {
  margin-top:40px;
}
.wrap-article article h3 {
  padding-left:10px;
  font-size:1.8rem;
  line-height:120%;
  border-left:5px solid #fff;
}
.wrap-article article h4 {
  margin-top:20px;
  font-size:1.8rem;
  line-height:120%;
  margin-bottom: 13px;
}

.wrap-article article h4::before{
  content:'■';
  display: inline-block;
  vertical-align: middle;
  margin-right: 5px;
}
.wrap-article article p + h3, .wrap-article article div + h3, .wrap-article article .article-detail:not(:first-child) > h3:first-child{
  margin-top:40px;
}
.wrap-article article .articlenote-typeA {
  margin-top:20px;
  font-size:1.2rem;
  line-height:120%;
}
.wrap-article article .relatedarticle {
  margin-top:20px;
  padding-top:20px;
  font-size:1.6rem;
}
.wrap-article article .relatedarticle .headname {
  margin-bottom:5px;
  font-size:1.4rem;
}
.wrap-article article .relatedarticle ul {
  font-size:1.2rem;
}
.wrap-article article ul {
  font-size:1.6rem;
  line-height:120%;
}
.wrap-article article ul li {
  margin-bottom:5px;
}
.relatedarticle a {
  position:relative;
  padding-left:20px;
}
.relatedarticle a:before {
  content:"";
  display:block;
  position:absolute;
  top:-1px;
  left:0;
  width:16px;
  height:16px;
  background:url(../img/parts.png) no-repeat;
  background-size:250px 250px;
  background-position:-130px 0px;
}
.wrap-article article ul li:last-child {
  margin-bottom:0;
}
.wrap-article article ul.textlist-typeA {
  margin-top:20px;
  padding-top:20px;
  border-top:1px solid #666;
}
.wrap-article article ul.textlist-typeB {
  list-style-type:disc;
  margin-left:20px;
}
.wrap-article article ul.textlist-typeB li {
  margin-bottom:10px;
}
.wrap-article article ul.textlist-typeB li:last-child {
  margin-bottom:0;
}
.wrap-article article .imglist-typeA {
  padding:10px;
  text-align:center;
  background:#000;
}
.wrap-article article .imglist-typeA figure {
  display:inline-block;
  width:70%;
  text-align:center;
}
.wrap-article article .imglist-typeA figure img {
  width:100%;
}
.wrap-article article .imglist-typeA figure figcaption {
  margin-top:10px;
  font-size:1.4rem;
  line-height:138%;
  text-align:left;
}
.wrap-article article .imglist-typeB {
  padding:10px;
  text-align:center;
  background:#000;
}
.wrap-article article .imglist-typeB .wrap-img {
  -js-display: flex;
  display: flex;
  justify-content: space-between;
  margin:0 auto;
  width:70%;
}
.wrap-article article .imglist-typeB figure {
  width:40%;
}
.wrap-article article .imglist-typeB figure img {
  width:100%;
}
.wrap-article article .imglist-typeB .caption {
  -js-display: flex;
  display: flex;
  align-items: flex-end;
  padding-left:20px;
  width:70%;
  font-size:1.2rem;
  line-height:138%;
  text-align:left;
  box-sizing:border-box;
}
.wrap-article article .imglist-typeC {
  padding:0px;
  text-align:center;
  background:#000;
  margin-top: 30px;
}
.wrap-article article .imglist-typeC .wrap-img {
  -js-display: flex;
  display: flex;
  justify-content: space-between;
  margin:0 auto;
  width:640px;
}
.wrap-article article .imglist-typeC figure {
  width:49%;
  margin: 0;
  padding: 0;
}
.wrap-article article .imglist-typeC figure img {
  width:100%;
}
.wrap-article article .imglist-typeC figcaption {
  margin-top:10px;
  font-size:1.2rem;
  line-height:138%;
  text-align:left;
}
.wrap-article article .imglist-typeC .caption {
  margin:10px auto 0;
 width:640px;
  font-size:1.4rem;
  line-height:138%;
  text-align:left;
}
.wrap-article article .imglist-typeD {
  padding:10px;
  text-align:center;
  background:#000;
}
.wrap-article article .imglist-typeD .wrap-img {
  -js-display: flex;
  display: flex;
  justify-content: space-between;
  margin:0 auto;
  width:90%;
}
.wrap-article article .imglist-typeD figure {
  width:40%;
}
.wrap-article article .imglist-typeD figure img {
  width:100%;
}
.wrap-article article .imglist-typeD figcaption {
  margin-top:10px;
  font-size:1.2rem;
  line-height:138%;
  text-align:left;
}
.wrap-article article .imglist-typeD .caption {
  -js-display: flex;
  display: flex;
  align-items: flex-start;
  padding-left:20px;
  width:60%;
  font-size:1.2rem;
  line-height:138%;
  text-align:left;
  box-sizing:border-box;
}
.wrap-article article .imglist-typeE {
  padding:10px;
  text-align:center;
  background:#000;
}
.wrap-article article .imglist-typeE .wrap-img {
  -js-display: flex;
  display: flex;
  justify-content: space-between;
  margin:0 auto;
  width:80%;
}
.wrap-article article .imglist-typeE figure {
  width:33%;
}
.wrap-article article .imglist-typeE figure img {
  width:100%;
}
.wrap-article article .imglist-typeE figcaption {
  margin-top:10px;
  font-size:1.2rem;
  line-height:138%;
  text-align:left;
}
.wrap-article article .imglist-typeE .caption {
  margin:10px auto 0;
   width:80%;
  font-size:1.2rem;
  line-height:138%;
  text-align:left;
}

/* ↓ article-detail  */

.article-detail p{}


.article-detail{font-size:16px;}
.article-detail h1,
.article-detail h2,
.article-detail h3,
.article-detail h4,
.article-detail h5,
.article-detail h6{font-weight:bold;margin-bottom: 1.5em;margin-top: 1.5em;line-height: 1.7;}

.article-detail h1{font-size:30px;}
.article-detail h2{
  font-size:28px;
  padding-left: 10px;
  font-size: 2.4rem;
  line-height: 120%;
  border-left: 5px solid #fff;
}
.article-detail h3{font-size:26px;}
.article-detail h4{font-size:24px;}
.article-detail h5{font-size:22px}
.article-detail h6{font-size:20px;}
.article-detail p{
  font-size:16px;
  line-height: 1.8;
}
.article-detail small{
  color: #ccc;
  font-size:80%;
}
.article-detail .wp-caption{
  margin: 0 auto;
  max-width: 640px;
}
.article-detail p.notice{
  font-size:10px;
  color: rgba(77,77,77,1);
  line-height: 1.5;
}

.article-detail figure{
  padding: 0 30px;
  margin: 30px 0;
  text-align:center;
}

.article-detail figcaption,
.article-detail p.wp-caption-text{
  color: #fff;
  font-size:1.4rem;
  line-height: 1.5;
  letter-spacing:0.1em;
  display: block;
  padding-top: 0px;
  margin-top: 0;
}

.article-detail > img,
.article-detail p > img,
.article-detail div > img{
  display: block;
  margin: 30px auto;
  max-width: 640px;
}

.article-detail div.wp-caption > img{margin-bottom: 10px;}

.article-detail > a > img{
  display: block;
  max-width: 100%;
  margin: 30px 0 10px;
}
.article-detail img{max-width:100%;}

.article-detail table{
  width: 100%;
  margin:  30px 0;
  font-size:1.6rem;
}

.article-detail table th,
.article-detail table td{
  border:1px solid #aaa;
  padding: 10px;
}

.article-detail table th{
  text-align:center;
  font-weight:bold;
  background: #b8cce1;
  color: #000;
}


.article-detail table td{
  background: #fff;
  color: #000;
  line-height: 1.4;
}

.article-detail ul{margin:  30px 0;}

.article-detail ul li{
  position:relative;
  margin-bottom: 10px;
  padding-left: 10px;
}

.article-detail ul li::before{
  display:block;
  content:'';
  background:#000;
  background-size:100%;
  width:5px;
  height:5px;
  border-radius:10px;
  position:absolute;
  left:0px;
  top:8px;
}

.article-detail ul.list-mark{margin-top: 13px;}

.article-detail ul.list-mark li a{
  display: inline-block;
  padding-left: 22px;
  position:relative;
}

.article-detail ul.list-mark li a::before{
  display:block;
  content:'';
  background:url('../img/icon_yellowarrow.png') no-repeat left top;
  background-size:100%;
  width:16px;
  height:16px;
  position:absolute;
  left: 0;
  top:3px;
}

.article-detail ol{
  counter-reset: item;
  list-style-type: none;
  margin:  30px 0;
}

.article-detail ol li{
  position:relative;
  text-indent: -1.3em;
  padding-left: 1.3em;
  margin-bottom: 10px;
}

.article-detail ol li::before{
  counter-increment: item;
  content: counter(item)'.';
  /* 以下は自由に装飾... */
  padding-right: .5em;
  font-weight: bold;
  color: #000;
}

.article-detail blockquote{
  background: #eee;
  border-radius:10px;
  padding: 30px;
  margin:  30px 0;
}

.article-detail .box{
  border:1px solid #ccc;
  border-radius:10px;
  padding: 20px;
  font-size: 14px;
  margin-bottom: 60px;
}

.article-detail .box p{font-size:inherit;}

.article-detail .box ul li:not(:first-child){margin-top:20px;}

.article-detail a{
  /* color: #115DB0; */
  text-decoration: underline;
}

.article-detail a[target="_blank"]::after{
  content:'';
  display: inline-block;
  vertical-align: middle;
  margin-left: 5px;
  background: url('../img/blank_yellow.svg') 0 0 no-repeat;
  background-size: 100%;
  width:15px;
  height:15px;
}


.article-detail a.no-icon[target="_blank"]::after{display: none;}

.article-detail a.btn{
  color: #fff;
  text-decoration:none;
}

.article-detail b,
.article-detail strong{
  font-weight:bold;
}

.article-detail .row{
  display:flex;
  justify-content:space-between;
  flex-wrap:wrap;
}

.article-detail .row .col-2{
  width: 45%;
}

.article-detail .row .col-3{
  width: 32%;
}

.enclosure{
margin: 1em 0;
padding: 10px;
line-height: 140%;
border: 1px solid #999;
box-sizing: border-box;
}

.article-detail hr{
  border: none;
  border-top: 1px solid #666;
  background: none;
}

/* ↑ article-detail  */

.article-bottom nav {
  -js-display: flex;
  display: flex;
  justify-content: center;
  align-items: center;
  margin-top:40px;
}
.article-bottom nav div, .article-bottom nav a, .article-bottom nav span {
  display:inline-block;
  margin:0 5px;
  padding:10px 15px;
  font-size:1.6rem;
  color:#fff;
  text-decoration:none;
  border:1px solid #fff;
  box-sizing:border-box;
}
.article-bottom nav a:hover {
  color:#222;
  border:1px solid #fff;
  background:#fff;
}
.article-bottom nav .current {
  color:#222;
  border:1px solid #fff;
  background:#fff;
}
.article-bottom nav .nonactive {
  color:#666;
  border:1px solid #666;
}

.wrap-article #contents-twitter {
  margin:0 auto;
  max-width:700px;
  min-height:400px;
  max-height:1000px;
}
.wrap-article #contents-twitter .wrap-widget{
  padding:10px;
  display:block;
  background:rgba(51,51,51,0.8);
  box-sizing:border-box;
}

/* -------- Table Style Basic ------- */
.wrap-article article table.style1,
.wrap-article article table.style2 {
  table-layout: auto;
  margin: 20px auto;
  padding: 0;
  width:100%;
  clear: both;
  color:#222;
  box-sizing:border-box;
}
.wrap-article article .style1 th,
.wrap-article article .style2 th {
  margin: 0;
  padding: 10px;
  font-size: 1.4rem;
  line-height: 1.2;
  border: 1px solid #666666;
  background-color: #b8cce1;
  vertical-align:middle;
  box-sizing:border-box;
}

.wrap-article article .style1 td,
.wrap-article article .style2 td {
  margin: 0;
  padding: 10px;
  font-size: 1.4rem;
  line-height: 1.2;
  border: 1px solid #666666;
  background-color: #ffffff;
  vertical-align:middle;
  box-sizing:border-box;
}
.wrap-article article .style1 th.header,
.wrap-article article .style2 th.header {
  color: #ffffff;
  background-color: #858fae;
}
.wrap-article article .style1 th.header2,
.wrap-article article .style2 th.header2 {
  color: #fff;
  background-color: #94b3d1;
}
.wrap-article article .style1 tr.header th,
.wrap-article article .style2 tr.header th {
  color: #fff;
  background-color: #858fae;
}
.wrap-article article p.upper {
  font-weight: bold;
  margin: 0 0 0 1em;
}
.wrap-article article p.lower {
  margin: 0 0 2em 2em;
  font-size: 14px;
  line-height: 1.2;
}
.wrap-article article .correct {
  margin-top:20px;
  padding:20px;
  width:100%;
  box-sizing:border-box;
  background:#fff;
}
.wrap-article article .correct p {
  font-size: 1.4rem;;
  color: #f00;
  line-height:140%;
}
.wrap-article .column, .wrap-article .profile {
    margin: 1em 0;
    padding: 10px;
    font-size:1.4rem;
    line-height:140%;
    border: 1px solid #999;
    box-sizing:border-box;
}
.wrap-article article table.style1 a,
.wrap-article article table.style2 a {
  color:#333;
}
.wrap-article article .copyright {
  margin-top:5px;
  font-size:1.2rem;
  color:#aaa;
}
/* --------------------------------------------------------
  support
-------------------------------------------------------- */

.wrap-support {
  margin:50px auto 100px;
  width:100%;
  box-sizing:border-box;
}
.wrap-support .support-title{
  margin-top:-8px;
  width:100%;
  min-height:80px;
}
.wrap-support .head-caution{
  font-size: 1.4rem;
  line-height:130%;
  padding: 5px 0;
}
.wrap-support h2 {
  position:relative;
  padding-left:0px;
  font-size:3.2rem;
  font-weight:normal;
  line-height:110%;
}
.wrap-support h2:before {
  content:"";
  display:block;
  position:absolute;
  top:-60px;
  left:-44px;
  width:150px;
  height:150px;
  background:url(../img/icon-title.png) 0 0 no-repeat;
}
.wrap-support article{
  position: relative;
  padding: 30px;
  width: 100%;
  background:url(../img/bg-contact.png) center bottom no-repeat;
  background-size:cover;
  box-sizing: border-box;
}
.wrap-support article #form-box {

}
.wrap-support article #thanks{
  box-sizing: border-box;
  position: absolute;
  font-size: 2.0rem;
  line-height: 1.4;
  width: 100%;
  height: 100%;
  padding: 30px;
  top: 0;
  left: 0;
  z-index: 2;
  opacity: 0;
  visibility: hidden;
  transition: .2s linear;
  transform: translateX(-100%);
}
.wrap-support article #thanks.show {
  opacity: 1;
  visibility: visible;
  transform: translateX(0);
}
.wrap-support article #thanks .thanks-to-top{
  margin-top: 60px;
  font-size:1.4rem;
  text-align: center;
}
.wrap-support article #thanks .thanks-to-top a{
  position:relative;
  padding-left:20px;
}
.wrap-support article #thanks .thanks-to-top a:before {
    content: "";
    display: block;
    position: absolute;
    top: -1px;
    left: 0;
    width: 16px;
    height: 16px;
    background: url(../img/parts.png) no-repeat;
    background-size: 250px 250px;
    background-position: -130px 0px;
}
.wrap-support article #thanks h3{
  font-size: 2.4rem;
  text-align: center;
  margin: 30px 0;
}
.wrap-support article #thanks p{
  text-align: center;
}
.wrap-support p.head {
  font-size: 2.0rem;
  line-height: 1.2;
}
form#inquiry-form{
  width: 49%;
  padding: 30px 0;
}
form #email-box,
form #detail-box,
form #check-box{
  position: relative;
}
form #check-box{
  margin-bottom: 20px;
}
form #email-box .caution,
form #detail-box .caution{
  position: absolute;
  top: 10px;
  right: 0;
  color: #EC4C38;
  font-size: 1.4rem;
  line-height: 1.2;
}
form #check-box .caution{
  color: #EC4C38;
  font-size: 1.4rem;
  line-height: 1.2;
  text-align: center;
  margin-top: 10px;
}
form#inquiry-form h3{
  font-size: 2.0rem;
  line-height: 1.5;
  margin-bottom: 5px;
}
form#inquiry-form #email{
  outline: none;
  border: none;
  font-size: 1.6rem;
  width: 100%;
  padding: 3px;
  margin-bottom: 20px;
  height: 30px;
  letter-spacing: 2px;
  box-sizing:border-box;
}
form#inquiry-form #detail{
  outline: none;
  border: none;
  font-size: 1.6rem;
  line-height: 1.6;
  width: 100%;
  height: 250px;
  padding: 3px;
  margin-bottom: 20px;
  letter-spacing: 2px;
  resize: none;
  box-sizing:border-box;
}
form#inquiry-form #email:focus,
form#inquiry-form #detail:focus{
  box-shadow: 0px 0px 12px #FF0;
  -moz-box-shadow: 0px 0px 12px #FF0;
  -webkit-box-shadow: 0px 0px 12px #FF0;
}

form#inquiry-form label{
  display: block;
  text-align: center;
  font-size: 1.8rem;
  line-height: 1.2;
}
form#inquiry-form label #check{
  margin-right:10px;
}
form#inquiry-form #submit{
  font-size: 1.6rem;
  line-height: 30px;
  width: 100px;
  padding: 5px;
  text-align: center;
  letter-spacing: 2px;
  border: 1px solid #fff;
  color: #fff;
  background: #000;
  font-weight: bold;
  margin: 0 auto;
  display: block;
}
form#inquiry-form #submit.disabled{
  border: 1px solid #666;
  color: #666;
  background: #000;
}
form#inquiry-form #submit.enabled:hover {
  cursor: pointer;
  color: #000;
  background:rgba(255,255,255,0.5);
}

/* --------------------------------------------------------
  ページTOP
-------------------------------------------------------- */
#page-top {
  position: fixed;
  bottom: 60px;
  right: 60px;
  z-index:9999;
}
#page-top a {
  display:block;
  cursor:pointer;
  width:60px;
  height:60px;
  background:url(../img/parts.png) no-repeat;
  background-size: 250px 250px;
  background-position: 0px 0px;
  text-indent:-9999px;
}
#page-top a:hover {
  background-position:-65px 0;
}

.twtr-timeline { height:auto!important; }


/* --------------------------------------------------------
  SPECIAL/キャンペーン
-------------------------------------------------------- */
#contents.sp.summer2018 .wrap-contents {
  overflow-y: auto;
}
.wrap-sp {
    margin: 0 auto 100px;
    width: 100%;
    box-sizing: border-box;
}
#contents.sp.summer2018 .wrap-sp article {
  padding:10px;
  background: rgba(0,0,0,0.6);
}
#contents.sp article img {
  width:100%;
}
#contents.sp article section h1 {
  margin-top:30px;
  margin-bottom:15px;
  padding-left: 10px;
  font-size:3.2rem;
  line-height:130%;
  border-left: 5px solid #fff;
}
#contents.sp article section h1 .strong {
  font-size:4.8rem;
  color:#ffff73;
}
#contents.sp article #campaign-product {
  margin-top:60px;
}
#contents.sp article #object-product {
  margin-top:10px;
  width:100%;
}
#contents.sp article #object-product li {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;
  -webkit-box-pack: justify;
  -ms-flex-pack: justify;
  justify-content: space-between;
  margin-bottom:20px;
  padding-bottom:20px;
  width:100%;
  border-bottom:1px solid #666;
}
#contents.sp article #object-product li:last-child {
  padding-bottom:0;
  border-bottom:none;
}
/*#contents.sp article #campaign-product ul li:last-child {
  margin-bottom:0;
  padding-bottom:0;
  border-bottom:0;
}*/
#contents.sp article #object-product li figure {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  width:30%;
}
#contents.sp article #object-product li figure img {
  margin-right:2%;
  width:32%;
}
#contents.sp article #object-product li figure img:nth-child(3n) {
  margin-right:0%;

}
#contents.sp article #object-product li .productname {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  padding-left:20px;
  width:60%;
  font-size:1.6rem;
  line-height:160%;
  text-align:left;
  box-sizing:border-box;
}
#contents.sp article #object-product li .number {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  width:10%;
  border-left:1px solid #666;
  box-sizing:border-box;
}
#contents.sp article #object-product li .number p {
  font-size:3.6rem;
  color:#FFFF99;
}
#contents.sp article #object-shop {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;
/*  -webkit-box-pack: justify;
  -ms-flex-pack: justify;
  justify-content: space-between;*/
  line-height:100%;
}
#contents.sp article #object-shop li {
  margin-right:0.8%;
  margin-bottom:6px;
  width:16%;
}
#contents.sp article #object-shop li:nth-child(6n) {
  margin-right:0;
}
#contents.sp article #associate-company {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;
/*  -webkit-box-pack: justify;
  -ms-flex-pack: justify;
  justify-content: space-between;*/
  line-height:100%;
}
#contents.sp article #associate-company li {
  margin-right:0.8%;
  margin-bottom:0;
  width:16%;
}
#contents.sp article #campaign-prize {
}
#contents.sp article #campaign-prize h2 {
  margin-bottom:30px;
  font-size:1.8rem;
  font-weight:normal;
  height:auto;
  line-height:130%;
}
#contents.sp article #campaign-prize ul {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;
  -webkit-box-pack: justify;
  -ms-flex-pack: justify;
  justify-content: space-between;
}
#contents.sp article #campaign-prize ul::after{
  content:"";
  display: block;
  width:24%;
}
#contents.sp article #campaign-prize ul li {
  position:relative;
  margin-bottom:20px;
  width:24%;
}
#contents.sp article #campaign-prize ul li:before {
  content:'';
  position:absolute;
  top:-10px;
  right:-10px;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  width:80px;
  height:80px;
  font-size:4.8rem;
  font-weight:bold;
  color:#ffff73;
  /*background:rgba(255,129,0,0.98);*/
  border:4px solid #ffff73;
  border-radius:80px;
}
#contents.sp article #campaign-prize ul li:nth-child(1):before {
  content:'1';
}
#contents.sp article #campaign-prize ul li:nth-child(2):before {
  content:'3';
}
#contents.sp article #campaign-prize ul li:nth-child(3):before {
  content:'3';
}
#contents.sp article #campaign-prize ul li:nth-child(4):before {
  content:'5';
}
#contents.sp article #campaign-prize ul li:nth-child(5):before {
  content:'5';
}
#contents.sp article #campaign-prize ul li:nth-child(6):before {
  content:'5';
}
#contents.sp article #campaign-prize ul li:nth-child(7):before {
  content:'5';
}
#contents.sp article #campaign-prize ul li:after {
  content:'名様';
  position:absolute;
  top:26px;
  right:-2px;
  font-size:1.0rem;
}
#contents.sp article #campaign-prize ul li figure {
  margin:0;
  padding:0;
  width:100%;
  line-height:0;
}
#contents.sp article #campaign-prize ul li p {
  margin-top:10px;
  width:100%;
  font-size:1.4rem;
  line-height:120%;
}
#contents.sp article #campaign-overview {
  margin-top:30px;
  font-size:1.6rem;
}
#contents.sp article #campaign-overview table {
  table-layout:fixed;
  width:100%;
  box-sizing:border-box;
  border:1px solid #fff;
}
#contents.sp article #campaign-overview table th, #contents.sp article #campaign-overview table td {
  padding:10px;
  line-height:140%;
  border:1px solid #fff;
  vertical-align:middle;
}
#contents.sp article #campaign-overview table th {
  width:20%;
  font-weight:normal;
}
#contents.sp article #campaign-overview table td {
  width:80%;
}
#contents.sp article #campaign-overview .product-list {
  margin-top:10px;
  margin-left:20px;
  list-style-type:disc;
}
#contents.sp article #campaign-overview .note-list {
  margin-top:0;
  margin-left:20px;
  list-style-type:disc;
}
#contents.sp article .campaign-serialcode {
  position:relative;
  margin:60px auto;
  width:89%;
}
#contents.sp article .campaign-serialcode:nth-of-type(1) {
  margin-top:20px;
}
#contents.sp article .campaign-serialcode:before {
  content:'';
  position:absolute;
  display:block;
  width:100%;
  height:50%;
  background:rgba(255,255,255,0.15);
}
#contents.sp article .campaign-serialcode p {
  position:relative;
  display:block;
  padding:30px; 0;
  width:100%;
  font-size:3.2rem;
  color:#FFFF99;
  line-height:110%;
  text-align:center;
  border:3px solid #FFFF99;
  box-sizing:border-box;
  text-decoration:none;
  border-radius:4px;
}
#contents.sp article .campaign-serialcode a:before {
  content:"";
  position:absolute;
  top:-42px;
  left:-43px;
  width:212px;
  height:120px;
  background:url(../img/sp/summer2018/btn-parts01.png) no-repeat;
}
#contents.sp article .campaign-serialcode a:after {
  content:"";
  position:absolute;
  bottom:-43px;
  right:-44px;
  width:212px;
  height:120px;
  background:url(../img/sp/summer2018/btn-parts02.png) no-repeat;
}
#contents.sp.summer2018 .note {
  font-size:1.4rem;
  line-height:160%;
}





/* --------------------------------------------------------
  googleカスタム検索
-------------------------------------------------------- */
.cse .gsc-control-cse, .gsc-control-cse {
  padding:0 !important;
  background: none !important;
  border: none !important;
}
.gsc-modal-background-image {
  background-color:#000 !important;
}
.cse table.gsc-search-box td.gsc-input, table.gsc-search-box td.gsc-input {
  padding-right: 5px !important;
}

/* --------------------------------------------------------
  youtubeレスポンシブ
-------------------------------------------------------- */
.responsive-youtube {
  position: relative;
  padding-bottom: 56.25%;
}
.responsive-youtube iframe {
  position: absolute;
  top: 0;
  right: 0;
  width: 100%;
  height: 100%;
}
.youtube-title {
  margin: 0 auto 15px;
  padding-left:10px;
  width: 70%;
  font-size:1.8rem;
  line-height:120%;
  text-align: left;
  border-left:4px solid #fff;
}

/* --------------------------------------------------------
  画像関連
-------------------------------------------------------- */
.wrap-article article figure.img-border img {
  border:1px solid #999;
  box-sizing:border-box;
}

/* --------------------------------------------------------
  PDFマニュアル
-------------------------------------------------------- */
#pdf-viewer {
  width:100%;
  height:70vh;
}

/* --------------------------------------------------------
  トップのサムネイルのカスタム変更
  cカテゴリid-d記事id
  ex:c3-d53
-------------------------------------------------------- */
#c0-d54 .thumbnail img{
  top: -20px !important;
}

@media screen and (max-width: 768px) {
  #c0-d54 .thumbnail img{
    top: 0 !important;
  }
  #c1-d54 .thumbnail img{
    top: 0 !important;
  }
}



/* --------------------------------------------------------
  詳細右コンテンツ
-------------------------------------------------------- */
aside#sidepanel {
}
aside#sidepanel #side-sns {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;
  -webkit-box-pack: justify;
  -ms-flex-pack: justify;
  justify-content: space-between;
  -webkit-box-align: start;
  -ms-flex-align: start;
  align-items: flex-start;
  margin:0 0 10px;
  transform: translate(0,0);
  webkit-transform: translate(0,0);
  transition: 0.6s;
}
aside#sidepanel #side-sns.fixed {
  position:fixed;
  top:-80px;
  width:31.43%;
  max-width:440px;
  z-index: 99;
  transform: translate(0,100px);
  webkit-transform: translate(0,100px);
  transition: 0.6s;
}
aside#sidepanel #side-sns h2 {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  position:relative;
  margin-bottom:10px;
  width:100%;
  font-size:1.8rem;
  font-weight: normal;
  box-sizing: border-box;
}
aside#sidepanel #side-sns h2:before {
  font-family: 'Material Icons';
  content:'\e80d';
  display:inline-block;
  margin:0 5px 0 0;
}
aside#sidepanel #side-sns a {
  display: inline-block;
  width:23%;
}
aside#sidepanel #side-sns a:hover {
  opacity:0.7;
}
aside#sidepanel #side-sns a img {
  width:100%;
  line-height:0;
}
/*aside#sidepanel #contents-twitter.fixed {
  position:fixed;
  top:110px;
  width:31.43%;
  max-width:440px;
}*/

#side-info {
  position: relative;
  margin: 30px 0 0 0;
  padding: 20px 10px;
  opacity: 0;
  transform: translate(0,300px);
  webkit-transform: translate(0,300px);
  background: rgba(0,0,0,0.6);
  transition: 0.6s;
  box-sizing: border-box;
}
@media screen and (max-width: 1200px) {
  #side-info {
    padding: 0;
    background: none;
  }
}
#sidepanel #side-info.fixed {
  position:fixed;
  top:-500px;
  margin:0;
  width:31.43%;
  max-width:440px;
  transform: translate(0,634px) !important;
  webkit-transform: translate(0,634px) !important;
}
#sidepanel #side-info.fixed.bottom-fixed {
  top:-500px;
  opacity: 0 !important;
  transform: translate(0,-770px) !important;
  webkit-transform: translate(0,-770px) !important;
}
#side-info h2 {
  position: relative;
  height: 80px;
  z-index: 0;
}
#side-info h2 img {
  position: absolute;
  top: -52px;
}
#ranking-list {

}
#ranking-list a {
  color: #fff;
  text-decoration: none;
  display: flex;
  padding: 10px;
  display: -webkit-box;
  display: -ms-flexbox;
  display: -webkit-box;
  -webkit-box-pack: justify;
  -ms-flex-pack: justify;
  justify-content: space-between;
  transition: 0.4s;
  width: 100%;
}
#ranking-list li {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: justify;
  -ms-flex-pack: justify;
  justify-content: space-between;
  margin:0 0 15px 0;
  /*padding: 10px;*/
  transition: 0.4s;
  background:rgba(255,255,255,0.1);
  cursor: pointer;
  box-sizing: border-box;
  position: relative;
}
#ranking-list a:hover {
  color:#333;
  background:rgba(255,255,255,0.9);
}
#ranking-list .ribbon {
    display: inline-block;
    position: absolute;
    top: 0;
    left: 0;
    margin: 0;
    padding: 5px 0;
    z-index: 2;
    width: 30px;
    text-align: center;
    font-size: 1.6rem;
    color: #fff;
}
#ranking-list .ribbon.no-1 { background: #DBB400; }
#ranking-list .ribbon.no-2 { background: #C0C0C0; }
#ranking-list .ribbon.no-3 { background: #815a2b; }
#ranking-list .ribbon.no-4,
#ranking-list .ribbon.no-5 {
  background: #fff;
  color: #333;
}

#ranking-list .ribbon:after{
  content: '';
  position: absolute;
  left: 0;
  top: 100%;
  height: 0;
  width: 0;
}
#ranking-list .ribbon.no-1:after {
  border-left: 15px solid #DBB400;
  border-right: 15px solid #DBB400;
  border-bottom: 10px solid transparent;
}
#ranking-list .ribbon.no-2:after {
  border-left: 15px solid #C0C0C0;
  border-right: 15px solid #C0C0C0;
  border-bottom: 10px solid transparent;
}
#ranking-list .ribbon.no-3:after {
  border-left: 15px solid #815a2b;
  border-right: 15px solid #815a2b;
  border-bottom: 10px solid transparent;
}
#ranking-list .ribbon.no-4:after,
#ranking-list .ribbon.no-5:after {
  border-left: 15px solid #fff;
  border-right: 15px solid #fff;
  border-bottom: 10px solid transparent;
}
.rl-thumbnail {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  overflow: hidden;
  width: 18%;
  max-width:76px;
  max-height:76px;
}
.rl-thumbnail img {
  /*position: absolute;*/
/*  top: 50%;
  left: 50%;*/
  width:100%;
  height: auto;
/*  transform: translateY(-50%) translateX(-50%);
  -webkit- transform: translateY(-50%) translateX(-50%);*/
}
.rl-title {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  width: 80%;
  font-size:1.6rem;
  line-height:140%;
}
#bottompanel {
  display:none;
}
@media screen and (max-width: 1200px) {
  aside#sidepanel #side-sns.fixed {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    position:fixed;
    margin:0;
    padding: 10px 0;
    top:auto;
    bottom:-84px;
    left:0;
    width:100%;
    max-width:100%;
    background:rgba(0,0,0,0.8);
    box-sizing: border-box;
    transform: translate(0,-84px) !important;
    webkit-transform: translate(0,-84px) !important;
    transition: 0 !important;
  }
  aside#sidepanel #side-sns h2 {
    margin:0 20px 40px 0;
    width:100%;
    font-size: 2.4rem;
  }
  aside#sidepanel #side-sns.fixed a {
    margin-right:10px;
    max-width:120px;
  }
  aside#sidepanel #side-sns.fixed a:last-of-type {
    margin-right:0;
  }
/*  aside#sidepanel #contents-twitter.fixed {
    position:relative;
    top:auto;
    margin:0 auto;
    width:100%;
    max-width:740px;
  }*/
  aside#sidepanel #contents-twitter {
    display:none;
  }
  aside#sidepanel #side-ranking.fixed {
    position:relative;
    top:auto;
    margin:30px auto 0;
    width:100%;
    max-width:740px;
    transform: translate(0,0) !important;
    webkit-transform: translate(0,0) !important;
    transition: 0 !important;
  }
  #bottompanel .wrap-widget{
    padding:10px;
    display:block;
    background:rgba(51,51,51,0.8);
    box-sizing:border-box;
  }
  #bottompanel {
    display:block;
  }
  .rl-title {
    font-size:1.8rem;
  }
}
@media screen and (max-width: 768px) {
  aside#sidepanel #side-sns h2 {
    display: none;
  }
}
@media screen and (max-width: 480px) {
  aside#sidepanel #side-sns.fixed a {
    margin-right:5px;
  }
  #ranking-list li {
    margin: 0 0 20px 0;
  }
  .rl-title {
    font-size:1.4rem;
  }
}


/* --------------------------------------------------------
  詳細おすすめ
-------------------------------------------------------- */
#detail-recommend {
  /*margin-top: 30px;*/
  padding-top: 30px;
}
#detail-recommend h3{
  padding-left: 0;
}


/* --------------------------------------------------------
  50周年
-------------------------------------------------------- */
.wrap-top:before {
    content:'';
    display:block;
    position:absolute;
    top:0;
    left:0;
    width:100%;
    height:100vh;
    background:none;
    opacity: 0.95;
    z-index:-1;
}
.wrap-contents:before {
    content:'';
    display:block;
    position:absolute;
    top:0;
    left:0;
    width:100%;
    height:100vh;
    background:none;
    opacity: 0.95;
    z-index:-1;
}
/*=======================================================
  50周年用
=========================================================*/
#top-amd50th {
  margin:0 0 40px;
}
.main section #top-amd50th .article-list li {
    color: #222;
    background: linear-gradient(135deg, rgba(255,245,208,0.95) 0%, rgba(255,253,230,0.9) 45%, rgba(254,238,112,0.95) 75%, rgba(255,181,40,0.95) 100%);
    /*border:1px solid #fffde6;*/
    box-sizing:border-box;
}
.main section #top-amd50th .article-list li .article-info .article-category a.ct-new,
.main section #top-amd50th .article-list li .article-info .article-category a.ct-campaign,
.main section #top-amd50th .article-list li .article-info .article-category a.ct-gaming,
.main section #top-amd50th .article-list li .article-info .article-category a.ct-creative {
    color: #fff;
    border: 1px solid #222;
    background:#222;
}
.main section #top-amd50th .article-list li:hover .article-info .article-category a.ct-new,
.main section #top-amd50th .article-list li:hover .article-info .article-category a.ct-campaign,
.main section #top-amd50th .article-list li:hover .article-info .article-category a.ct-gaming,
.main section #top-amd50th .article-list li:hover .article-info .article-category a.ct-creative {
    color: #222;
    border: 1px solid #222;
    background:none;
}
.main section #top-amd50th .article-list li:hover {
    color: #222;
    background: rgba(255,255,255,0.9);
}
.article-info .article-category a.ct-amd50th {
  color: #fff;
  /*background: #ffb24d !important;
  border: 1px solid #ffb24d !important;*/
  background: #aa9357 !important;
  border: 1px solid #aa9357 !important;
}
.article-list li:hover .article-info .article-category a.ct-amd50th {
    color: #aa9357;
    border: 1px solid #aa9357 !important;
    background: none !important;
    /*color: #222;
    border: 1px solid #222 !important;*/
}
/*=======================================================
  7nm 新製品
=========================================================*/
#top-new7nm {
  margin:0 0 40px;
}
.main section #top-new7nm .article-list li {
    color: #222;
    box-sizing:border-box;
    background: #fff;
} 
.main section #top-new7nm .article-list li .article-info .article-category a.ct-campaign,
.main section #top-new7nm .article-list li .article-info .article-category a.ct-hpc,
.main section #top-new7nm .article-list li .article-info .article-category a.ct-laptop,
.main section #top-new7nm .article-list li .article-info .article-category a.ct-new7nm,
.main section #top-new7nm .article-list li .article-info .article-category a.ct-gaming{
    color: #222;
    border: 1px solid #222;
    background:none;
}
.main section #top-new7nm .article-list li:hover .article-info .article-category a.ct-campaign,
.main section #top-new7nm .article-list li:hover .article-info .article-category a.ct-hpc,
.main section #top-new7nm .article-list li:hover .article-info .article-category a.ct-laptop,
.main section #top-new7nm .article-list li:hover .article-info .article-category a.ct-new7nm,
.main section #top-new7nm .article-list li:hover .article-info .article-category a.ct-gamings{
    color: #fff;
    border: 1px solid #fff;
    background:none;
}
.main section #top-new7nm .article-list li:hover{
    color: #fff;
    background: #555;
}
/*=======================================================
ゲーミングは背景全部白
=========================================================*/
#laptop-article.article-list li,
#laptop-top .main section .article-list li {
    color: #222;
    background: #fff;
}
#laptop-article.article-list li:hover,
#laptop-top .main section .article-list li:hover {
    background: #555;
}
#laptop-article.article-list li .article-category a,
#laptop-top .main section .article-list li .article-category a {
    color: #222;
    border: 1px solid #222;
    background:none;
}


#laptop-article.article-list li .article-category a.ct-hardware,
#laptop-article.article-list li .article-category a.ct-ryzen,
#laptop-article.article-list li .article-category a.ct-radeon,
#laptop-top .main section .article-list li .article-category a.ct-hardware,
#laptop-top .main section .article-list li .article-category a.ct-ryzen,
#laptop-top .main section .article-list li .article-category a.ct-radeon {
    color: #fff;
    border: 1px solid #fff;
    background:none;
}
#laptop-article.article-list li:hover .article-category a,
#laptop-top .main section .article-list li:hover .article-category a {
    color: #fff;
    border: 1px solid #fff;
    background:none;
}
#laptop-article.article-list li:hover .article-date,
#laptop-article.article-list li:hover .article-info h3,
#laptop-top .main section .article-list li:hover .article-date,
#laptop-top .main section .article-list li:hover .article-info h3 {
    color: #fff;
}
h2.laptop-heading a,
.main h2.laptop-new a,
.main h2.laptop-campaign a,
.main h2.laptop-gaming a,
.main h2.laptop-portable a,
.main h2.laptop-mainstream a 
{
  color:#fff;
  text-decoration: none;
}
#laptop-top #laptop-new,
#laptop-top #laptop-campaign,
#laptop-top #laptop-gaming,
#laptop-top #laptop-portable,
#laptop-top #laptop-mainstream{
  margin-bottom: 40px;
}
.main section#top-youtube h2 {
    position: relative;
    padding-left: 68px;
    font-size: 4.8rem;
    font-weight: lighter;
    line-height: 110%;
    text-shadow: 0px 0px 10px #ffff99;
  letter-spacing: -1px;
}
/*
.main section#top-youtube h2:before {
  content:"";
  display:block;
  position:absolute;
  top:-52px;
  left:-44px;
  width:150px;
  height:150px;
  background:url(../img/icon-title.png) 0 0 no-repeat;
}
*/
@media screen and (max-width: 480px) {
  #laptop-top #laptop-gaming,
  #laptop-top #laptop-portable,
  #laptop-top #laptop-mainstream,
  #top .main section.column-width100 {
    margin-bottom:50px;
  }
  .main section#top-hpc h2 {
    padding-left: 0px;
    padding-bottom: 10px;
    font-size: 3.6rem;
  }
  .main section#top-hpc h2:before {
    top:-37px;
    left:-25px;
    width:110px;
    height:110px;
    background-size: 110px;
  }
  .laptop-head {
    margin-top: 5px;
    padding: 0 5px;
  }
  h2.laptop-new,
  .main h2.laptop-campaign,
  .main h2.laptop-gaming,
  .main h2.laptop-portable,
  .main h2.laptop-mainstream,
  h2.laptop-heading{
    padding-left: 0px;
    font-size: 3.6rem;
    padding-bottom: 10px;
  }
  h2.laptop-heading a{
    font-size: 4.0rem;
  }
  .main h2.laptop-campaign a,
  .main h2.laptop-mainstream a{
    letter-spacing: -5.0px;
  }
  .main h2.laptop-new a:before,
  .main h2.laptop-campaign a:before,
  .main h2.laptop-gaming a:before,
  .main h2.laptop-portable a:before,
  .main h2.laptop-mainstream a:before,
  .laptop-head section > h2.laptop-heading a:before {
    top:-37px;
    left:-25px;
    width:110px;
    height:110px;
    background-size: 110px;
  }
  #laptop-new{
    margin-bottom: 50px;
  }
}

/*=======================================================
spページ
=========================================================*/
#header_box{height: 80px !important;}
#header_box header{height: 80px !important;}
#header_box #custom-search #cs-inner:before{
  top: 50%;
  transform: translate(0, -50%);
}
#header_box + #all_bg{top:80px !important;}
.has-fixheader + #all_bg{top: 110px !important;}
.has-fixfooter #footerFixed{padding-bottom: 120px;}
@media screen and (max-width: 480px) {
  #header_box{height: auto !important;}
  #header_box header{
    height: auto !important;
    margin-bottom: 0;
  }
  #header_box + #all_bg{top:100px !important;}
  .has-fixheader + #all_bg{top: 140px !important;}
  #header_box + .wrapper_all{padding-top: 40px;}
  .has-fixfooter #footerFixed{padding-bottom: 120px;}
  .has-fixfooter #page-top{bottom: 100px;}
  .has-fixfooter-large #footerFixed{padding-bottom: 160px;}
  .has-fixfooter #page-top{bottom: 160px;}
  #header_box .header-area{}
  #header_box .openbtn{top: 95px;}
}