/* CSS Document */
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed,
figure, figcaption, footer, header, hgroup,
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
  margin: 0;
  padding: 0;
  border: 0;
  font-size: 100%;
  font: inherit;
  vertical-align: baseline;
}

article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section {
  display: block;
}

body {
  line-height: 1;
}

ol, ul {
  list-style: none;
}

blockquote, q {
  quotes: none;
}

blockquote:before, blockquote:after {
  content: '';
  content: none;
}

q:before, q:after {
  content: '';
  content: none;
}

table {
  border-collapse: collapse;
  border-spacing: 0;
}

a {
  text-decoration: none;
  noFocusline: expression(this.onFocus=this.blur());
  outline: 0;
}

a:hover {
  text-decoration: none;
}

a:focus {
  -moz-outline-style: none;
}

/*img*/
img {
    max-width: 100%;
    width: expression(document.body.clientWidth>100?"100%": "auto");
    overflow: hidden;
}

body {
    line-height: 1;
    background-color: #000;
}


/* Animate Background Image */
@-webkit-keyframes loop {
    0% {
        -webkit-transform: scale(1);
        transform: scale(1);
    }
    50% {
        -webkit-transform: scale(.95);
        transform: scale(.95);
    }
    100% {
        -webkit-transform: scale(1);
        transform: scale(1);
    }
}

@keyframes loop {
    0% {
        -webkit-transform: scale(1);
        transform: scale(1);
    }
    50% {
        -webkit-transform: scale(.95);
        transform: scale(.95);
    }
    100% {
        -webkit-transform: scale(1);
        transform: scale(1);
    }
}

@-webkit-keyframes imgS {
    0% {
        -webkit-transform: scale(1);
        transform: scale(1)
    }
    50% {
        -webkit-transform: scale(.95);
        transform: scale(.95);
    }
    100% {
        -webkit-transform: scale(1);
        transform: scale(1);
    }
}
body, h1, h2, h3, h4, p{font-family: "Meiryo UI", "メイリオ", Meiryo, Osaka, "小塚ゴシック Pro H", KozGoPr6N-Heavy, KozGoPro-Heavy, "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;}

/* navitem */
#jp_amd {
    color: #fff;
    width: 100%;
}

#jp_amd section {
    font-size: 100%;
    color: #fff;
    line-height: 1.5;
    width: 100%;
    overflow-x: hidden;
}

#jp_amd section .container {
    width: 100%;
    margin: 3% auto;
    max-width: 1600px;
    text-align: center;
}

#jp_amd h1, #jp_amd h2 {
    font-weight: bold;
    background: -webkit-linear-gradient(left, #f83600 0, #f83600 30%, #facc22 60%, #facc22 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

#jp_amd h1{font-size: 45px; margin:2% auto;}
#jp_amd h2{font-size: 40px; line-height: 1.2; width: 50%; margin:2% auto; text-align: center;}
#jp_amd h2 span{display: block; font-size:20px;}
#KV img{margin: auto;}
#naming, #recom {margin-bottom: 5%;}

#fixedBoxWrap {width: 100%;}
.fixedBox {display: flex; align-items: center; justify-content: center; background:rgba(0,0,0,.4);}
.fixedBox.fixed{ position:fixed; top:0; z-index:50;  background:rgba(0,0,0,.9);}
#fixedBoxWrap .fixedBox > a {padding: 1% 2%; max-width:300px; font-size:23px; border-left:solid rgba(255,255,255,.1) 1px; display: block; text-align: center;
  font-weight: bold;
  background: -webkit-linear-gradient(left, #f83600 10%, #facc22 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}
#fixedBoxWrap .fixedBox > a:first-child{border-left: none;}
#fixedBoxWrap .fixedBox > a:hover{
  background: -webkit-linear-gradient(left, #fff 10%, #fff 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

/* amdbox */
#amdbox {
    width: 100%;
    background:url("https://storage-asset.msi.com/event/2020/mb/JP-AMD-Intel/images/amd_bg.jpg")center center no-repeat;
    background-size: cover;
    background-attachment: fixed;
}

#amdbox .button-wrap{background:rgba(0,0,0,.3); width: 100%; padding: 2%; margin-bottom: 3%;}
#amdbox .button-wrap ul{max-width: 1600px; margin: auto; display: flex; justify-content: center; align-items: center; text-align: center;}
#amdbox .button-wrap ul li {flex:1; max-width:220px; background: url("https://storage-asset.msi.com/event/2020/mb/JP-AMD-Intel/images/tab_amd.jpg") right bottom no-repeat; background-size: cover; cursor: pointer; margin: 0 2%;}
#amdbox .nav-tabs{border-bottom: none;}
.nav-tabs>li>a{
    display: block; padding: 10px 35px; font-size: 25px; font-weight: bold; color: #fff; text-shadow: 0 0 1em #000; background: rgba(0, 0, 0, .3);
    margin: 3px; border:none; border-radius: 0;
    -webkit-transition: 1s all ease;
    -o-transition: 1s all ease;
    transition: 1s all ease;
}
.nav-tabs>li.active>a, .nav-tabs>li.active>a:focus, .nav-tabs>li.active>a:hover, .nav-tabs>li>a:focus, .nav-tabs>li>a:hover {
    background: transparent; border:none; color: #000; font-weight: bold;
}

.second_tab{ margin-bottom: 14px;}
.second_tab .tabNav{max-width: 1600px; margin: auto; display: flex; justify-content: center; align-items: center; text-align: center;}
.second_tab .tabNav>li{flex:1; max-width:250px; border-right: solid 1px rgba(255,255,255,.3)}
.second_tab .tabNav>li:last-child{border-right: none;}
.second_tab .tabNav>li span{ display: block; text-align: center; opacity: .5; cursor: pointer;
    -webkit-transition: 1s all ease;
    -o-transition: 1s all ease;
    transition: 1s all ease;}
.second_tab .tabNav>li span:hover, .second_tab .tabNav>li.active span{opacity: 1; }
.second_tab .tabContainer{margin:2% auto; width: 100%; max-width: 1600px; text-align: center;}
.second_tab .tabContainer>li{width: 100%;}

.second_tab .flexbox {display: flex; align-items:center; border:solid 4px rgba(255,255,255,.3); background: rgba(51,51,51,.5); padding:5%; margin-bottom: 1%;}
.second_tab .img{flex:0 0 27%;}
.spectable{flex:0 0 53%; padding:0 3%;}
.spectable h3{font-size: 30px; font-weight: 700; padding-bottom: 1%;}
.spectable .spacflex{display: flex; align-items:stretch; text-align: center; min-height: 60px; background: #333; margin-bottom:3px;}
.spectable .spacflex .item{display: flex; align-items: center; justify-content: center; flex-direction: column; padding: 2%;}
.spectable .spacflex .item.item_left {flex:0 0 30%; background: #191919;}
.spectable .spacflex .item.item_right {flex:0 0 70%;}

.btnlist{flex:0 0 20%;}
.btnlist a{display:flex; flex-direction: column; max-width:216px; margin:8% auto; text-decoration: none;}
.btnlist a.btnsty{background: url("https://storage-asset.msi.com/event/2020/mb/JP-AMD-Intel/images/tab_amd.jpg") right bottom no-repeat; background-size: cover; display: flex; align-items: center; justify-content: center; min-height:90px;}
.btnlist a.btnsty span{
    display: flex; justify-content: center; align-items: center; width:95%; min-height:80px; padding: 10px; font-size: 23px; font-weight: bold; color: #fff; text-shadow: 0 0 1em #000; background: rgba(0, 0, 0, .3);
    -webkit-transition: 1s all ease;
    -o-transition: 1s all ease;
    transition: 1s all ease;
}

.btnlist a.btnsty:hover span{background: transparent; color: #000;}
#current{margin:2% auto;}
#promotion{margin:5% auto;}
#promotion .imgflex{display: flex; justify-content: center;}
#promotion .imgflex a{margin:2%;}


@media (max-width:1600px){
   #jp_amd section .containe,
   .second_tab .tabContainer{width:90%;}
   .second_tab .img{flex:0 0 25%;}
   .spectable{flex:0 0 60%; padding: 0 2%;}
   .btnlist{flex:0 0 15%;}
   .btnlist a.btnsty span {font-size: 20px;}
}

@media (max-width:960px){
    #jp_amd h2 {width:80%;}
    #amdbox .button-wrap ul{width: 95%;}
    #amdbox .button-wrap ul li{margin:0 3px;}
    .nav-tabs>li>a{font-size:18px; padding: 10px;}
    .second_tab .tabNav>li span {width: 70%; margin: auto;}
    .second_tab .flexbox{flex-direction: column; margin-bottom: 2%;}
    .second_tab .img{width:60%;}
    .spectable {margin:3% auto; padding: 0;}
    .btnlist {width:50%;}
    #promotion .imgflex {flex-direction: column;}
}

@media (max-width:767px){
  #fixedBoxWrap .fixedBox > a {font-size: 18px; line-height: 1;}
}