@charset "utf-8";
/* Box01 */
#box01{align-items: center; margin: 0 0 150px;}
#box01 .mTit02{margin: 0 0 30px;}
#box01 .img{width: 50%;}
#box01 .img img{width: 100%;}
#box01 .outer{width: 50%;}
#box01 .inner{padding: 0 20px 0 min(5vw,80px); max-width: 700px; width: 100%;}

@media screen and (max-width: 1000px) {
    #box01{padding: 0 30px;}
	#box01 .img{width: 100%;}
    #box01 .outer{width: 1000%; order: -1; margin: 0 0 40px;}
    #box01 .inner{padding: 0; max-width: 100%;}
    #box01 .desc br{display: none;}
}

@media screen and (max-width: 768px) {
    #box01{margin: 0 0 80px;}
	#box01 .mTit02{margin: 0 0 20px;}
}

/* Box02 */
#box02{max-width: 1400px; margin: 0 auto;}
#box02 .mTit03{text-align: center; margin: 0 0 70px; display: flex; justify-content: center;}
#box02 .mTit03::before{content: ""; width: 0.83em; height: 0.83em; display: inline-block; background: url("../img/artlock/ic-check.svg") no-repeat top left/100% 100%; margin: 0.4em 0.35em 0 0;}

#box02 .item{display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; width: 100%; margin: 0 0 90px;}
#box02 .img{width: 45.7%;}
#box02 .outer{width: 45.7%;}
#box02 .mTit04{margin: 0 0 35px; display: flex;}
#box02 .mTit04 .num{font-size: 8rem; line-height: 0.2; display: inline-block; font-family: 'Playfair Display', sans-serif; margin: 0 0.2em 0 0;}

@media screen and (max-width: 1080px) {
    #box02 .mTit04 .num {font-size: 5vw; line-height: 0.5;}
}

@media screen and (min-width: 1001px) {
    #box02 .inner{max-width: 550px; width: 100%;}    
    #box02 .item:nth-of-type(2n+1) .outer{padding-right: 20px;}
    #box02 .item:nth-of-type(2n) .outer{display: flex; justify-content: flex-end; padding-left: 20px;}	
}

@media screen and (max-width: 1000px) {
	#box02 .img{width: calc(100% - 15px); order: -1;}
    #box02 .img img{width: 100%;}
    #box02 .outer{width: 100%; padding: 30px 30px 0;}
    
    #box02 .item:nth-of-type(2n) .img{margin-left: 15px;}
}

@media screen and (max-width: 768px) {
    #box02 .mTit03{margin: 0 0 30px;}    
    #box02 .item{margin: 0 0 60px;}
    #box02 .mTit04{ margin: 0 0 25px;}
    #box02 .mTit04 .num{font-size: min(10vw,8rem); line-height: 0.3;}
}