@charset "utf-8";

#articleBox{
	display:block;
	overflow:hidden;
	padding:25px;
}

#articleBox section{
	display:block;
	overflow:hidden;
	clear:both;
	margin-bottom:2em;
}

.ytMovie{
	display: block;
    overflow: hidden;
    width: 380px;
    float: left;
    margin-right: 10px;
}

.videoFrame{
  position:relative;
  width:100%;
  padding-top:56.25%;
}
.videoFrame iframe{
  position:absolute;
  top:0;
  right:0;
  width:100%;
  height:100%;
}

.right > p{
	text-align:left;
}

table#shopBanners{
	margin:1em 0 25px;
	width:400px;
}

table#shopBanners th{
	vertical-align:top;
}

table#shopBanners td{
	padding:5px;
	vertical-align: middle;
	font-size:14px;
	border-bottom:1px dotted #333333;
	text-align:left;
}

table#shopBanners a{
	display:block;
	overflow:hidden;
}

table#shopBanners a:after{
	content:none;
}

#articleBox h4{
	clear:both;
	display:block;
	overflow:hidden;
    margin: 0 0 0.5em;
    padding: 5px 10px;
    font-size:1.2em;
    font-weight: bold ;
    background: #F4F4F4;
    border: 1px #DDD solid;
    border-left: 5px #999 solid !important;
}

.infoBox{
    margin:1em 0;
    padding: 1em;
    background: #d9d9d9;
    border: 1px solid #999;
}

.infoBox h5{
	font-size:1.0em;
	font-weight:bold;
}



@media screen and ( max-width:750px) {

	#articleBox {
	    padding: 0 15px 0;
	    font-size:1.4rem;
	    line-height:155%;
	}

	.ytMovie {
	    width: 100%;
	    float: none;
	    margin: 1em 0;
	    margin-right: 0;
	}


	table#shopBanners {
		width:90%;
		margin:25px auto;
	}

	table#shopBanners td img{
		width:auto;
		height:50px;
	}

	table#shopBanners th{
		width:40%;
		text-align:center;
	}

	table#shopBanners td{
		width:60%;
		border-bottom:none;
		text-align:center;
	}

	#articleBox h4 {
	    margin: 0 0 15px;
	    padding: 5px 10px;
	    font-size: 1.6rem;
	    line-height:125%;
	}

	.infoBox h5 {
	    font-size: 1.6rem;
	    line-height:125%;
	    font-weight: bold;
	    margin-bottom:0.5em;
	}

	.infoBox p{
		font-size:1.4rem;
		line-height:155%;
	}

}