/* CSS Document */
*{box-sizing: border-box;}
.box{
	background: -webkit-linear-gradient(top,rgba(254,236,228,0.6),rgba(254,236,228,0.8),rgba(254,236,228,1));
	position: relative; 
	padding: 25px 0 0; 
	margin:0 0 60px;
}
.box h3{font-size: 24px; line-height: 1.4;}
.box h3 span{display: block;}
.box h3 .sp{display: inline-block;}
.box .left{float: left; width: 45%; margin-right: 5%;}
.box .right{float: left; width: 40%; padding: 16% 0 20px}
.box .right p{line-height: 1.3; padding: 15px 0 0;}
.box .pattern{position: absolute; top: 0; z-index: 9999;}
.box .pattern01{right: 0; width: 40%;}
.box .pattern02{left: 0; width: 14.084%}
.box .pattern03{right: 0; width: 28.084%;}

.box02 .left{float: right; width: 40%; margin: 0;}
.box02 .right{float: left; width: 45%; margin:0 5% 0 10%; padding: 11% 0 20px 1%;}

.tit_sp{display: none;}

/*===============================
             MEDIA
================================*/
@media only screen and (max-width:1024px){
.box h3 .sp{display: block;}
}
@media only screen and (max-width:736px){
.box .pattern{z-index: -3;}
}
@media only screen and (max-width:640px){
.box .left, .box .right{float: none; width: 100%; margin: 0;}
.box .right{padding: 15px 10px 20px;}
.box h3{display: none;}
.box .pattern{width: 100% !important;}
.box .pattern01, .box .pattern03{text-align: right;}
.box02 .left{text-align: right;}
.tit_sp{display: block;font-size: 4.7vw;}
}

@media only screen and (max-width:480px){
.box{margin: 0 0 30px;}
}