/*------------------------------------------------------------------

POPULAR

------------------------------------------------------------------*/
.secMain{ background: url("../img/popular/img-main.jpg") no-repeat; }
#container.sec section .sectionTtl{ transform: translate(0, -20px); opacity: 0; transition: opacity 1.8s, transform 1.8s !important;}

.wrapPopular .innerPopular{ position: relative;}
.wrapPopular .innerPopular:nth-child(odd){ margin-top: 120px; transform: translate(-20px, 0);}
.wrapPopular .innerPopular:nth-child(even){ padding-bottom: 370px; margin-top: -190px; transform: translate(20px, 0);}
.wrapPopular .innerPopular:first-child{ margin-top: 0;}
.wrapPopular .innerPopular .img{ width: 700px;}
.wrapPopular .innerPopular:nth-child(odd) .img{ margin: 0 0 0 auto;}
.wrapPopular .innerPopular:nth-child(even) .img{ margin: 0 auto 0 0; position: absolute; bottom: 0; left: 0;}
.wrapPopular .innerPopular .textBox{ background: rgba(0,0,0, 0.6); width: 400px; z-index: 2; position: relative;}
.wrapPopular .innerPopular:nth-child(odd) .textBox{ padding: 40px 40px 60px 0; margin: -120px auto 0 0; }
.wrapPopular .innerPopular:nth-child(even) .textBox{ padding: 40px 0 60px 40px; margin: 0 0 0 auto; }
.wrapPopular .innerPopular .textBox::after{ content: ""; display: block; height: 60px; width: 1px; background: #e60012; position: absolute; }
.wrapPopular .innerPopular:nth-child(odd) .textBox::after{ top: -30px; right: 40px; }
.wrapPopular .innerPopular:nth-child(even) .textBox::after{ bottom: -30px; left: 40px; }
.wrapPopular .innerPopular .textBox h4{ font-size: 24px; margin: 0 auto 30px; line-height: 1;}
.wrapPopular .innerPopular .textBox .text{ font-size: 16px; margin: 0;}
.wrapPopular .innerPopular .textBox .caution{ font-size: 14px; margin: 20px 0 0 ;}

@media screen and (min-width: 1400px){
.secMain{ background-position: 0 center; background-size: calc(50% + 300px) auto; }
}
@media screen and (max-width: 1399px){
.secMain{ background-position: right calc(100%) top 0; background-size: 1000px;}
}


/*------------------------------------
sp
------------------------------------*/
@media screen and (max-width: 738px){
.secMain{ background: none; }
.secMainImgBox{ background: url("../img/popular/img-main.jpg") no-repeat 0 0; background-size: 100%; position: relative;}
	
.wrapPopular .innerPopular{ position: relative;}
.wrapPopular .innerPopular:nth-child(odd){ margin-top: 15%; transform: translate(-20px, 0);}
.wrapPopular .innerPopular:nth-child(even){ padding-bottom: 0; margin-top: 15%; transform: translate(20px, 0);}
.wrapPopular .innerPopular:first-child{ margin-top: 0;}
.wrapPopular .innerPopular .img{ width: 100%;}
.wrapPopular .innerPopular:nth-child(odd) .img{ margin: 0 0 0 auto;}
.wrapPopular .innerPopular:nth-child(even) .img{ margin: 0 auto 0 0; position: relative; bottom: auto; left: auto;}
.wrapPopular .innerPopular .textBox{ background: none; width: 100%; z-index: 2; position: relative;}
.wrapPopular .innerPopular:nth-child(odd) .textBox{ padding: 8vw 0 0; margin: 0; }
.wrapPopular .innerPopular:nth-child(even) .textBox{ padding: 8vw 0 0; margin: 0; }
.wrapPopular .innerPopular .textBox::after{ content: ""; display: block; height: 10vw; width: 1px; background: #e60012; position: absolute; }
.wrapPopular .innerPopular:nth-child(odd) .textBox::after{ top: -5vw; right: auto; left: 4vw; }
.wrapPopular .innerPopular:nth-child(even) .textBox::after{ top: -5vw; bottom: auto; left: 4vw; }
.wrapPopular .innerPopular .textBox h4{ font-size: 18px; margin: 0 auto 7%; line-height: 1;}
.wrapPopular .innerPopular .textBox .text{ font-size: 12px; margin: 0;}
.wrapPopular .innerPopular .textBox .caution{ font-size: 11px; margin: 5% 0 0 ;}

}