
@media screen and (max-width:1366px){

	
body { font-size:72% }
	
/*#header */	
#header .title1 { width: 90%}
#header .title1 h1{font-size:8em;}
#header .kvbar .text{ width: 90%;}
#header .kvbar .img{ position: absolute; right:-160px; top:-200px; text-align: right;  }
#header .kvbar .img img{ width: 90%; }	
	
/*#s1*/		
#s1{padding:2rem 0 0rem 0;}	
#s2{padding:0rem 0 3rem 0;}	

/*#s3*/	
#s3 .bodytb{ top:0px ; }
#s3 .bodytb .wrap .table1 .gift{bottom:-230px; }
#s3 .bodytb .wrap .table1 .gift li{ width: calc(80% / 2); padding: 10px; }	
#s3 .bodytb .wrap .table2 .des{ bottom:-210px;  }
	
/*#s6*/		
#s6{background:url(../images/bg-s6.png) bottom center no-repeat #000; color:#fff; padding: 12rem 0 0 0;  }	
}




@media screen and (max-width:1200px){
	
body { font-size:70%;}
	
/*#header */	
#header .title{  width: 90%;  }
#header .title1 h1{font-size:8em;}

/*#kvbar */
#header .kvbar .text{ width: 90%;}
#header .kvbar .img{ position: absolute; right:-55px; top:-120px; text-align:right;  }
#header .kvbar .img img{ width: 80%; }		
	
#header .kvbar .text .sub{ width: 65%; color: #ddd; text-align: left;  }
#header .kvbar .text .sub .td{  vertical-align: middle; padding-right: 5px;}
#header .kvbar .text .sub .sub1{ font-size:2.5em;   line-height: 1.4em;  padding: 5px 0;  }
#header .kvbar .text .sub .sub2{ font-size: 1.65em;   line-height: 1.4em;  padding: 5px 0; }
#header .kvbar .text .sub .sub3{ padding: 10px 0; }
#header .kvbar .text .sub .sub3{ padding: 10px 5px; }	
#header .kvbar .text .sub .sub3 .title{font-size:2em; padding:0 10px;}
#header .kvbar .text .sub .sub3 .date li:nth-child(1){ font-size: 2em; }
#header .kvbar .text .sub .sub3 .date li:nth-child(2){ font-size: 4.5em; }
#header .kvbar .text .sub .sub3 .date li:nth-child(2) span{ font-size: .45em;  }

	
/*#s3*/		
#s3 .headertb{background:url(https://asset.msi.com/event/mb/2017/jp_social_medi/images/s3_p1_sm.png) center center no-repeat; display: table; width:95%; max-width: 1170px;  background-size: cover ; margin: 0 auto; }
#s3 .headertb .td{ display: table-cell; vertical-align:middle; text-align: center; width: 100%; }
#s3 .headertb .txttb{ max-width: 500px; }
#s3 .headertb .txttb .txt{ top:-20px; left:0; padding:5vh 0;}
#s3 .headertb .txttb .txt p{ margin-top: 1rem;}
#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 .bodytb .wrap .table1{ width: 100%; max-width:600px; display: table; margin: 1.5rem auto; text-align: left; position:relative;}	
#s3 .bodytb .wrap .table1 .gift{bottom:-190px; }
#s3 .bodytb .wrap .table1 .gift li{ width: calc(100% / 2); padding: 10px; }	
	
#s3 .bodytb .wrap .table2{ width:95%; max-width: 1170px; display: table; margin: 2rem auto  8rem auto; text-align: center; position: relative;   }
#s3 .bodytb .wrap .table2 .des{ bottom:-170px;  }
	
#s6{; padding: 5rem 0 0 0;  }
	
}



@media screen and (max-width:960px){

body { font-size:65%;}	
	
/*#header */	
#header .title{  width: 90%;  }
#header .title1 h1{font-size:6em;}

/*#kvbar */
#header .kvbar .text{ width: 90%;}
#header .kvbar .img{ position: absolute; right:-55px; top:-120px; text-align:right;  }
#header .kvbar .img img{ width: 70%; }		
	
#header .kvbar .text .sub{ width: 60%; color: #ddd; text-align: left;  }
#header .kvbar .text .sub .td{  vertical-align: middle; padding-right: 5px;}
#header .kvbar .text .sub .sub1{ font-size:2em;   line-height: 1.4em;  padding: 5px 0;  }
#header .kvbar .text .sub .sub2{ font-size: 1.65em;   line-height: 1.4em;  padding: 5px 0; }
#header .kvbar .text .sub .sub3{ padding: 5px 0; }	
#header .kvbar .text .sub .sub3 .title{font-size:2em; padding:0 10px;}
#header .kvbar .text .sub .sub3 .date li:nth-child(1){ font-size: 2em; }
#header .kvbar .text .sub .sub3 .date li:nth-child(2){ font-size: 4.5em; }
#header .kvbar .text .sub .sub3 .date li:nth-child(2) span{ font-size: .45em;  }

	
/*#s1 */	
#s1 .bodytb .txttb { width: 90%;  }
#s1 .bodytb .txttb .text{ font-size: 1.5em;}
	
	


/*#s2*/	
#s2 .bodytb .txttb { width: 90%; }	
#s2 .gift-title{  padding: 2rem 0 2rem 0; width: 90%; margin: 0 auto; }
#s2 .bodytb .txttb .text p{ font-size: 1.5em;}

}


@media screen and (max-width:480px){

body { font-size:55%;}	
	
/*#header */	
#header .title{  width: 95%;  }
#header .title1 h1{font-size:5em;padding-top: 2vh;  }
#header .title1 p{font-size:1.65em; font-weight: 100; }
/*#kvbar */
#header .kvbar .text{ position: relative;   padding: 20px 0;  width: 95%;  }
#header .kvbar{  position: relative; top:20px; left:0; width: 100%;  }	
#header .kvbar .img{ position: absolute; right:0px; top:-150px; text-align:right;   }
#header .kvbar .img img{ width: 28%; }			
#header .kvbar .text .sub{ width: 100%; color: #ddd; text-align: left;  }
#header .kvbar .text .sub .td{  vertical-align: middle; padding-right: 5px;  }
#header .kvbar .text .sub .sub1{ font-size:2em;   line-height: 1.2em;  padding: 5px 0;  }
#header .kvbar .text .sub .sub2{ font-size: 2em;   line-height: 1.2em;  padding:5px 0; }
#header .kvbar .text .sub .sub3{ padding: 5px 0; }
#header .kvbar .text .sub .sub3{ padding: 5px 5px; }	
#header .kvbar .text .sub .sub3 .title{font-size:2em; padding:0 10px;}
#header .kvbar .text .sub .sub3 .date li:nth-child(1){ font-size: 2em; }
#header .kvbar .text .sub .sub3 .date li:nth-child(2){ font-size: 4em; }
#header .kvbar .text .sub .sub3 .date li:nth-child(2) span{ font-size: .55em;  }


.gift-title{  padding: 0 0 1.2rem 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:3em; font-weight: 600;  line-height: .2;  }	
	
/*#s1 */	
#s1{padding:2rem 0; color:#fff;	position: relative; top:-10px;}
#s1 .bodytb{display: block; border-collapse: collapse; width: 100%; background:url(https://asset.msi.com/event/mb/2017/jp_social_medi/images/s1_bg_right.jpg) top right no-repeat; background-size: cover; padding: 0; }
#s1 .bodytb .td{width: 100%; display: block; text-align: center; vertical-align: middle; padding:10rem 0 5rem 0;}
#s1 .bodytb .td:first-child{background:url(https://asset.msi.com/event/mb/2017/jp_social_medi/images/s1_bg_left_xs.jpg) center right 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: block; width: calc(100%); padding: 10px; }
#s1 .bodytb .gift p{font-size: 2em; line-height: 1.6em; font-weight: 600;}

#s1 .bodytb .txttb { width: 90%; margin: 0 auto; position: relative; bottom: -80px; }
#s1 .bodytb .txttb .text{ font-size: 2em; 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:1.25em; line-height: 2.6em;}
#s1 .bodytb .txttb .btntb a:hover{color: #fff; background-color:rgba(240,0,4,.55); }


/*#s2**/
#s2{padding:0rem 0 ; color:#fff; position: relative;}
#s2 .bodytb{ display: block; 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:0rem 0;   }

#s2 .bodytb .td{width: 100%; display: block; text-align: center; vertical-align: middle;  }
#s2 .bodytb .td:first-child{width: 100%; display: block; background:url(https://asset.msi.com/event/mb/2017/jp_social_medi/images/s2_bg_left_xs.jpg) center left no-repeat ;	background-size:cover; text-align: left; margin: 0 auto; padding:5rem 0 5rem 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: 90%; padding:0px;}
#s2 .bodytb .txttb { width: 90%; margin: 0 auto; position: relative; bottom: 70px; }
#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_xs.png) center center no-repeat; display: table; width: 100%; max-width: 480px;  background-size: cover ; margin: 0 auto; }
#s3 .headertb .td{ display: block; vertical-align:none; text-align: center; width: 100%; }
#s3 .headertb .txttb{ display: block; margin: 0 auto; max-width: 480px; width: 90%; }
#s3 .headertb .txttb .txt{position: relative; top:-0px; left:0; padding:2vh 0 2vh 0;}
#s3 .headertb .txttb .txt h3{ font-size: 2em; line-height: 1.6em ; font-weight: 600; text-align: left; }
#s3 .headertb .txttb .txt p{ font-size:2em; line-height: 1.6em; font-weight: 600; text-align: left; margin-top: 1.5rem;}
#s3 .headertb .txttb ul{padding-left: 18px; text-align: left; }
#s3 .headertb .txttb li{text-indent: -18px;font-size: 1.65em; 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:1rem 0 5rem 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:480px; 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:-100px; 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: 480px; 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:-80px;  }
#s3 .bodytb .wrap .table2 .des .td{width: 100%; display:block; text-align: left;  padding: 2rem 3.5%;   }

#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:2rem 0 0 0;  }
}





