@charset "UTF-8";
/* 333 夏の特別ボーナスポイント */

.bg333{background-color: #f6de7b;background-image: url("../../../../../images/pages/f-static/campaign/333/333_hdr_bg.png");background-repeat: repeat;}
.bg333 h2{margin: 0; padding: 0;}
.hdr333_in{position: relative;height: 550px;}

.hdr333_img{   position: absolute;
        top: 55%;
    left: 50%;
    transform: translate(-50%, -50%);
    -webkit-transform: translate(-50%, -50%);
    -ms-transform: translate(-50%, -50%);width: 500px;}

.hdr333_icon01{position: absolute;}
.hdr333_icon02{position: absolute;}


.att333_bg{background-color: #f6f6f6;}
.att333_bg h3{    position: relative;
    padding: 0.1rem 0 0.7rem;
    margin-bottom: 0.5rem;
    font-weight: bold;
    font-size: 24px;
    text-align: center;
    color: #353535;}

.att333_bg h3::before {
    position: absolute;
    border-bottom: 2px solid #353535;
    top: 100%;
    left: 50%;
    transform: translateX(-50%);
    width: 50px;
    content: '';
}


/*サイズ・位置調節*/


.ctrt{ text-align: center; }
.ctrm{ margin: auto;}
.ctr{text-align: center!important;}
.w80{width: 80%;}
.w90{width: 90%;}
.w100{width: 100%;}





/* ここにPC向けのCSS指定 */
@media (min-width: 768px) {
.hdr333_icon01{left: 0;top: 50%; transform: translateY(-50%);
    -webkit-transform: translateY(-50%);
    -ms-transform: translateY(-50%);}
.hdr333_icon02{right: 0;top: 50%; transform: translateY(-50%);
    -webkit-transform: translateY(-50%);
    -ms-transform: translateY(-50%);}
.sponly{
	display:none!important;
}	
	
	
}





/* ここにSP向けのCSS指定 */
@media (max-width: 768.98px) {
.hdr333_in{height: 400px;min-height: 50vh;}
.hdr333_img{top: 52%;width: 90%;}
.hdr333_icon01{top: 1%;left: 1%; }
.hdr333_icon02{bottom: -5%;right: 0%;  }	
.hdr333_icon01 img,.hdr333_icon02 img{height: 15px;}
	

 /*サイズ調節	*/	   

.w100{width: 100%;}
	.w100sp{width: 90%;}
	.w70sp{width: 50%; margin-left: 25%!important;}		

.pconly{
	display:none;
}	
	
	}