/* CSS Document */

@charset "utf-8";
/* ===================================================================
CSS information

 file name  :  vol_11.css
 style info :  ご購入者様の声vol.11のCSS
=================================================================== */


#vol_16 * {
	box-sizing:border-box;
	-moz-box-sizing: border-box;
	-webkit-box-sizing: border-box;
	-o-box-sizing: border-box;
	-ms-box-sizing: border-box;
}

.tab li a {
	display:block;
}

@media only screen and (max-width: 1020px) {
#vol_16 .right_box { padding:0 1%; width:30%; }
#vol_16 .right_box h3,
#vol_16 .right_box p { width:100%;}

#vol_16 .img160121top{width:65%;}
#vol_16 .img160121top img { width:100%;}
#vol_16 .img160121top p { margin:0;}

#vol_16 .tab {
display: flex;
display: -webkit-flex;
-webkit-align-items: stretch; 
align-items: stretch;
justify-content: center;
flex: 1;
overflow:visible;
}
#vol_16 .tab li { background:#7f99b2}
#vol_16 .tab li.select { background:#003366; position:relative;}
#vol_16 .tab li span { padding:15px 3%;}
#vol_16 .tab li br { display:none;}

#vol_16 .tab li.select:after {
    position: absolute;
    content: "　";
    background: url(../../common_new/images/about/tab01_bg_on.jpg) no-repeat center bottom;
    bottom: -12px;
    width: 236px;
    margin-left: -118px;
}

.img_note { text-align:center; margin:10px 0 20px;}

}
@media only screen and (max-width: 900px) {
#vol_16 .right_box { padding:0 1%; width:100%; }
#vol_16 .img160121top.left p { padding:10px 0 !important;} 

#vol_16 .img160121top{
	max-width:660px;
	width:100%;
	margin:0 auto;
	text-align: center;
	display:block;
}

}

/*----------tab----------*/

.tab {
	text-align:center;
}
.tab li {
	float:none;
	display:inline-block;
	width: 45%;
}

/*----------movieBox----------*/

#movieBox {
  width: 639px;
  margin: 0 auto 50px;
}

@media only screen and (max-width: 767px) {
#movieBox {
  width: 639px;
}
}
@media only screen and (max-width: 639px) {
#movieBox {
  width: 479px;
}
}
@media only screen and (max-width: 479px) {
#movieBox {
  width: 319px;
}
}

@media screen and (max-width: 780px) {
a:hover{ 
    /* ホバースタイルは横幅が大きなデバイスだけ */
}
}



