/*РФ**/ 
@font-face {
  font-family:'DINPro-Regular';
  src: local("Meiryo UI"),local("ヒラギノ角ゴ Pro W3"),local("Helvetica"),local("Arial");
  unicode-range: U+3000-9FFF, U+ff??;
}

@font-face {
  font-family: 'Bionic-Type-Italic';
  src: local("Meiryo UI"),local("ヒラギノ角ゴ Pro W3"),local("Helvetica"),local("Arial");
  unicode-range: U+3000-9FFF, U+ff??;
}
@font-face {
	font-family: 'AGENCYR';
	src: local("Meiryo UI"),local("ヒラギノ角ゴ Pro W3"),local("Helvetica"),local("Arial");
    unicode-range: U+3000-9FFF, U+ff??;
}

@font-face {
	font-family: 'AGENCYR';
	src: local("Meiryo UI"),local("ヒラギノ角ゴ Pro W3"),local("Helvetica"),local("Arial");
    unicode-range: U+3000-9FFF, U+ff??;
}

@font-face {
	font-family: 'DINCond-Bold';
	src: local("Meiryo UI"),local("ヒラギノ角ゴ Pro W3"),local("Helvetica"),local("Arial");
    unicode-range: U+3000-9FFF, U+ff??;
}

/*a*/	
a{color:#666; text-decoration:none; noFocusline:expression(this.onFocus=this.blur());  outline:0;}
a:hover{color:#f00; text-decoration:none;}	
a:focus{-moz-outline-style:none;}

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

/*page style*/
.txtLeft{text-align:left;}
.txtRight{text-align:right;}
.txtCenter{text-align:center;}
.floatLeft,.imageleft{float:left; margin-right:1em;}
.floatRight,.imageRight{float:right; margin-left:1em;}
.floatClear{clear:both; height:0;}
.clearfix:after{clear:both; display:block; visibility:hidden; height:0; content:" ";}
.table{display:table; width:100%; border-collapse:collapse; border-spacing:0;}
.tr{display:table-row;}
.td, .th{display:table-cell;}
.hide{display:none;}
.fa{font-size: 22px; padding-right:10px;}



body { font-size:75% } /* 16px*75%=12px */
h1 {font-size:4em;} /* 4*12px=48px */
h2 {font-size:3em;} /*  36px */
h3 {font-size:2.5em;} /*  30px */
h4 {font-size:2em;} /*  24px */

h1,h2,h3,h4{ font-weight: 600;}

p{font-size:1.65em;} /* 20px */
li, span{font-size:1.25em} /* 1.25*12px=15px */
#header .kvbar .text .sub{font-weight: 600;}


body, html{height:100%; background: #000;}
body{ overflow-x:hidden; font-family:'Meiryo UI','メイリオ','Hiragino Kaku Gothic Pro',Meiryo,'ヒラギノ角ゴ Pro W3','MS PGothic','MS UI Gothic',Helvetica,Arial,sans-serif;}


#jp_landing{ background:url(https://asset.msi.com/event/mb/2017/jp_social_medi/images/bg.jpg) no-repeat top left; background-size: cover auto; background-attachment: fixed; display: table; width:100%;}

/*header*/
#header{ display:table; width:100%;}
#header .top{ position: relative; display: table-cell; vertical-align: middle;} 

/*title*/
#header .title{ font-family:'Meiryo UI'; padding-top:15vh; width: 100%; max-width:1170px; margin: 0 auto;  }
#header .title1 { padding: 15px 0; text-align: left;  color: #fff;}
#header .title1 h1{font-size:9em; font-weight: 600; color: #fff; }
#header .title1 p{font-size:2em; font-weight: 100; line-height: 1.6em; }
#header .title1 p:before { content: "—"; padding-right: 8px; }
#header .title1 p:after{ content: "—"; padding-left: 8px;}
   
/*kv bar*/
#header .kvbar{ background-color:rgba(209,5,6,.5); position: relative; top:0px; left:0; width: 100%;  }
#header .kvbar .text{ position: relative;   padding: 15px 0;  width: 100%; max-width:1170px; margin: 0 auto; }

#header .kvbar .text .sub{ width: 65%; font-family:'Meiryo UI'; color: #ddd; text-align: left;  }
#header .kvbar .text .sub .td{  vertical-align: middle; padding-right: 5px;}
#header .kvbar .text .sub .sub1{ font-size:3em;   line-height: 1.4em;  padding: 10px 0;  }
#header .kvbar .text .sub .sub2{ font-size: 1.65em;   line-height: 1.6em;  padding: 10px 0; }
#header .kvbar .text .sub .sub3{ padding: 10px 0; }
#header .kvbar .text .sub .sub3{ padding: 10px 5px; }

#header .kvbar .text .sub .sub3 .title{ font-family:'Meiryo UI'; font-size:2em;  border: 3px solid #fff; width: 20px;  padding:0 10px; line-height: 1.2em;  }
#header .kvbar .text .sub .sub3 .date{font-family:'DINCond-Bold';  padding:0 10px; display: block; }
#header .kvbar .text .sub .sub3 .date li:nth-child(1){ font-size: 3em; display: block; }
#header .kvbar .text .sub .sub3 .date li:nth-child(2){ font-size: 5.6em; display: block; }
#header .kvbar .text .sub .sub3 .date li:nth-child(2) span{ font-size: .45em;  }
#header .kvbar .text .sub .sub3 .date .line{ display:inline-block; background: #fff; padding:1px 40px; margin:0 10px 5px 10px;}

#header .kvbar .img{ position: absolute; right:-150px; top:-200px; text-align: right;  }
#header .kvbar .img img{ width: 100%; }
/*section style*/

section .header{ text-align: center; color:#fb0505; padding: 3rem 0; width: 100%; max-width: 1170px; margin: 0 auto;  } 
section .header li{ line-height: 1.2em; }
section .header li:nth-child(1){ font-size: 2em; font-family:'Meiryo UI';}
section .header li:nth-child(2){ font-size: 5.6em; font-family:'DINCond-Bold';}
section .header li:nth-child(3){ font-size: 3em; font-weight: 600; font-family:'Meiryo UI'; }

.gift-title{  padding: 0 0 3rem 0; width: 90%; margin: 0 auto; }
.gift-title .text{ display: inline-block; border-bottom: 15px solid #ff0000; padding: 0 20px;}
.gift-title p{ font-size:2.5em; font-weight: 600;  line-height: .2;  }



/*#s1**/

#s1{padding:8rem 0 3rem 0; color:#fff;	position: relative;}
#s1 .bodytb{display: table; border-collapse: collapse; width: 100%; background:url(https://asset.msi.com/event/mb/2017/jp_social_medi/images/s1_bg_right.jpg) top left no-repeat; background-size: cover; padding: 0;  }
#s1 .bodytb .td{width: 50%; display: table-cell; text-align: center; vertical-align: middle; padding: 5rem 0; }
#s1 .bodytb .td:first-child{background:url(https://asset.msi.com/event/mb/2017/jp_social_medi/images/s1_bg_left.jpg) center center no-repeat ;	background-size:cover;	text-align: left;}

#s1 .bodytb .gift{width: 90%; margin: 0 auto; display: table; padding: 0px; }
#s1 .bodytb .gift li{display: table-cell; width: calc(100% / 3);  padding: 0px;  }
#s1 .bodytb .gift p{font-size: 1.25em; line-height: 1.6em; font-weight: 600;}

#s1 .bodytb .txttb { width: 70%; margin: 0 auto; position: relative; bottom: -55px; }
#s1 .bodytb .txttb .text{ font-size: 1.65em; line-height: 1.6em;  font-weight: 600; font-family:'Meiryo UI'; color:#fff;}
#s1 .bodytb .txttb .btntb{ margin: 30px 0; }
#s1 .bodytb .txttb .btntb a{ color: #d2d2d2; text-decoration: underline; font-size:1em; line-height: 2em;}
#s1 .bodytb .txttb .btntb a:hover{color: #fff; background-color:rgba(240,0,4,.55); }

/*#s1**/


/*#s2**/

#s2{padding:2rem 0 ; color:#fff; position: relative;}
#s2 .bodytb{ display: table; border-collapse: collapse; width: 100%; background:url(https://asset.msi.com/event/mb/2017/jp_social_medi/images/s1_bg_right.jpg) top left no-repeat; 
	background-size: cover; padding: 0px; }

#s2 .bodytb .td{width: 50%; display: table-cell; text-align: center; vertical-align: middle;  }
#s2 .bodytb .td:first-child{width: 50%; background:url(https://asset.msi.com/event/mb/2017/jp_social_medi/images/s2_bg_left.jpg) center center no-repeat ;	background-size:cover; text-align: left; padding: 0; margin: 0;}

#s2 .gift-title{  padding: 3rem 0 3rem 0; width: 90%; margin: 0 auto; }
#s2 .gift-title .text{ display: inline-block; border-bottom: 15px solid #ff0000; padding: 0 20px;}
#s2 .gift-title p{ font-size:2.5em; font-weight: 600;  line-height: .2;  }

#s2 .gift{ width: 90%; margin: 0 auto; display: table; margin-bottom: 3rem; }
#s2 .gift li{display: table-cell; width: 100%;  }
#s2 .gift p{font-size: 1.25em; line-height: 1.6em; font-weight: 600;}

#s2 .bodytb .img{width: 100%; padding:0px;}
#s2 .bodytb .txttb { width: 70%; margin: 0 auto; position: relative; bottom: 0px; }
#s2 .bodytb .txttb .text p{ font-size: 1.65em; line-height: 1.6em;  font-weight: 600; font-family:'Meiryo UI'; color:#fff;}
#s2 .bodytb .txttb .btntb{ margin: 10px 0; }
#s2 .bodytb .txttb .btntb a{ color: #d2d2d2;text-decoration: underline;  font-size:1em; line-height: 2em;}
#s2 .bodytb .txttb .btntb a:hover{color: #fff; background-color:rgba(240,0,4,.55); }



/*#s3**/
#s3{padding:0rem 0 ; color:#fff; position: relative;}
#s3 .headertb{background:url(https://asset.msi.com/event/mb/2017/jp_social_medi/images/s3_bg.png) center center no-repeat; display: table; width: 100%; max-width: 1560px;  background-size: cover ; margin: 0 auto; }
#s3 .headertb .td{ display: table-cell; vertical-align:middle; text-align: center; width: 100%; }
#s3 .headertb .txttb{ display: table; margin: 0 auto; max-width: 530px; width: 100%; }
#s3 .headertb .txttb .txt{position: relative; top:-10px; left:0; padding:5vh 0 10vh 0;}
#s3 .headertb .txttb .txt h3{ font-size: 1.65em; line-height: 1.6em ; font-weight: 600; text-align: left; }
#s3 .headertb .txttb .txt p{ font-size:1.65em; line-height: 1.6em; font-weight: 600; text-align: left; margin-top: 3rem;}
#s3 .headertb .txttb ul{padding-left: 18px; text-align: left; }
#s3 .headertb .txttb li{text-indent: -18px;font-size: 1.25em; line-height: 1.6em;}
#s3 .headertb .txttb li:before {
    content: "•"; /* Insert content that looks like bullets */
    padding-right: 8px;
    color: #fff; /* Or a color you prefer */	
}

#s3 .headertb .txttb .gift-title{  padding:0 0 3rem 0 ; width: 90%; margin: 0 auto ;  }
#s3 .headertb .txttb .gift-title .text{ display: inline-block; border-bottom: 15px solid #ff0000;  }
#s3 .headertb .txttb .gift-title p{ font-size:30px; font-weight: 600;  line-height: .2;  }


#s3 .bodytb{ display: table; border-collapse: collapse; width: 100%; background:url(https://asset.msi.com/event/mb/2017/jp_social_medi/images/s1_bg_right.jpg) top left no-repeat; background-size: cover; position: relative; top:0px ; }
#s3 .bodytb .wrap{width: 90%; max-width: 1560px; display: table-cell; text-align: center; vertical-align: middle; position:relative; top:0; left:0;}

#s3 .bodytb .wrap .table1{ width: 100%; max-width:720px; display: table; margin: 1.5rem auto; text-align: center; position:relative;}
#s3 .bodytb .wrap .table1 .gift{ display: table; border-spacing: 15px;  border-collapse:separate; position: absolute; z-index: 1;  bottom:-250px; text-align: center; margin: 0 auto;}
#s3 .bodytb .wrap .table1 .gift li{display: table-cell; width: calc(90% / 2); background-color: #313131;  border:1px solid #ff0000; padding: 10px; }
#s3 .bodytb .wrap .table1 .gift p{font-size: 1.65em; line-height: 1.6em; font-weight: 600;}
#s3 .bodytb .wrap .table1 .gift .txt-red{font-size: .65em; color: #FC0004; }

#s3 .bodytb .wrap .table2{ width: 100%; max-width: 1170px; display: table; margin: 2rem auto  8rem auto; text-align: center; position: relative;   }
#s3 .bodytb .wrap .table2 .des{ display: table; background-color: #313131;  border:1px solid #ff0000; position:relative ; bottom:-230px;  }
#s3 .bodytb .wrap .table2 .des .td{width: 50%; display: table-cell; text-align: left;  padding: 2rem 3.5%;   }

#s3 .bodytb .wrap .table2 .des .td h3{ font-size:2em; line-height: 2em; }

#s3 .bodytb .wrap .table2 .des .td ul{padding-left: 18px; text-align: left; }
#s3 .bodytb .wrap .table2 .des .td li{text-indent: -18px; font-size: 1.25em; line-height: 2em;}
#s3 .bodytb .wrap .table2 .des .td li:before {
    content: "•"; /* Insert content that looks like bullets */
    padding-right: 8px;
    color: #fff; /* Or a color you prefer */	
}

#s3 .shape{ width: 0; height: 0; border-style: solid; border-width: 50px 50px 0 0; border-color: #ff0000 transparent transparent transparent; position: absolute;}


#s3 .bodytb .wrap .table2 .des .td .tag{display: inline-block; color: #fff; background-color: #000; padding: 10px 10px;   }
#s3 .bodytb .wrap .table2 .des .td .tag p{ font-size:1.25em; }
#s3 .bodytb .wrap .table2 .des .td .txt{ background-color: #e9ebee; display: block; padding: 20px 20px;}
#s3 .bodytb .wrap .table2 .des .td .txt .fb-box{ display: block; background-color: #fff; border: 1px solid #a0a0a0; width: 100%; padding: 20px 20px 20px;}

#s3 .bodytb .wrap .table2 .des .td .txt .fb-box .left{ float: left;  width: 15%; background-color: #bfbfbf; text-align: center; padding:10px;   }
#s3 .bodytb .wrap .table2 .des .td .txt .fb-box .left .fa{ font-size:4em;  padding: 0; color: #e5e5e5;  text-align: center; margin: 0px;  }

#s3 .bodytb .wrap .table2 .des .td .txt .fb-box .right{ float: left; width: 85%; padding:0px 15px;  }
#s3 .bodytb .wrap .table2 .des .td .txt .fb-box .right ul{padding-left: 18px; text-align: left;  }
#s3 .bodytb .wrap .table2 .des .td .txt .fb-box .right li{text-indent: -18px; font-size: 1.25em; color: #000;}
#s3 .bodytb .wrap .table2 .des .td .txt .fb-box .right li:before {
    content: "•"; /* Insert content that looks like bullets */
    padding-right: 8px;
    color: #000; /* Or a color you prefer */	
}

#s3 .bodytb .wrap .table2 .des .td .txt .fb-box .right .bule{ font-size:1rem; color: #4267b2; padding-top: 5px;}

/*#s6**/

#s6{background:url(https://asset.msi.com/event/mb/2017/jp_social_medi/images/bg-s6.png) bottom center no-repeat #000; color:#fff; padding: 10rem 0 0 0;  }
#s6 .container{  width: 90%; margin: 0 auto; max-width: 1170px;  }
#s6 h2.title{ text-align: center; color: #FF0004; font-size:3em; line-height: 2em; }
#s6 ul{padding-left: 18px;}
#s6 li{ padding-bottom:5px; word-wrap:break-word; list-style-type: disc;  font-size: 1.25em; line-height: 1.6em;  }
#s6 a{color:#c00; transition:0.5s all ease 0.1s;}
#s6 a:hover{color:#f00; border-bottom:#f00 1px solid;}
#s6 .att{color:#999; padding:1rem 0 5rem;  font-size: .8em; text-align:center;}