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

INTERVIEW

------------------------------------------------------------------*/
.secMain{ background: url("../img/special/img-main.jpg") no-repeat; }

#container.sec section .sectionTtl{ opacity: 0;}

.wrapMenuList{ display: flex; flex-wrap: wrap; justify-content: space-between; margin-bottom: 120px;}
.specialMenuList{ width: 360px;}
.specialMenuList.left{ margin-top: 120px;}
.specialMenuList li{ margin-bottom: 120px; }
.specialMenuList li:last-child{ margin-bottom: 0;}
.specialMenuList li .img{ position: relative; margin: 0 auto 40px;}
.specialMenuList li .img::after{ content: ""; position: absolute; display: block; width: 1px; height: 60px; bottom: -30px; left: 25px; background: #e60012;}
.specialMenuList li h4{ font-size: 24px; margin: 0 auto 30px; position: relative;}
.specialMenuList li .text{ font-size: 16px; margin: 0;}

.courseBox{ border-top: 1px solid #4b443c; border-bottom: 1px solid #4b443c; position: relative; padding: 60px 0; margin-bottom: 120px; transform: translate(0, -20px);}
.courseBox::before{ content: ""; position: absolute; display: block; height: 1px; width: 60px; top: -1px; left: calc(50% - 30px); background: #e60012;}
.courseBox h4{ font-size: 30px; margin: 0 auto 15px; text-align: center;}
.courseBox h4 span{ font-size: 24px; color: #e60012; display: block; margin: 0 auto 30px; line-height: 1;}
.courseBox p{ text-align: center;}
.courseBox .price{ font-size: 16px; margin: 0 auto 50px; line-height: 1.6; }
.courseBox .price span{ font-size: 30px;}
.courseBox .text{ font-size: 14px;}

.cautionList{ line-height: 2; transform: translate(0, -20px);}
.cautionList dt{ font-size: 16px; text-indent: -26px; padding-left: 26px; margin: 0 auto 15px;}
.cautionList dt::before{ content: ""; display: inline-block; width: 16px; height: 16px; background: #4b443c; margin: 0 10px 0 0;}
.cautionList dd{ padding-left: 26px; font-size: 14px; margin: 0 auto 40px;}
.cautionList dd:last-child{ margin-bottom: 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;}
}

@media screen and (min-width: 739px){
.specialMenuList.left li{transform: translate(-20px, 0); }
.specialMenuList.right li{ transform: translate(20px, 0);}
}

/*------------------------------------
sp
------------------------------------*/
@media screen and (max-width: 738px){
.secMain{ background: none; }
.secMainImgBox{ background: url("../img/special/img-main.jpg") no-repeat 0 0; background-size: 100%; position: relative;}
	
.wrapMenuList{ display: block; margin-bottom: 15%;}
.specialMenuList{ width: 100%;}
.specialMenuList.left{ margin: 0 0 15%;}
.specialMenuList li{ margin-bottom: 15%;}
.specialMenuList li:last-child{ margin-bottom: 0;}
.specialMenuList li:nth-child(odd){ transform: translate(-20px, 0);}
.specialMenuList li:nth-child(even){ transform: translate(20px, 0);}
.specialMenuList li .img{ position: relative; margin: 0 auto 8vw;}
.specialMenuList li .img::after{ content: ""; position: absolute; display: block; width: 1px; height: 10vw; bottom: -5vw; left: 4vw; background: #e60012;}
.specialMenuList li h4{ font-size: 18px; margin: 0 auto 7%; position: relative;}
.specialMenuList li .text{ font-size: 12px; margin: 0;}

.courseBox{ border-top: 1px solid #4b443c; border-bottom: 1px solid #4b443c; position: relative; padding: 15% 0; margin-bottom: 15%;}
.courseBox::before{ content: ""; position: absolute; display: block; height: 1px; width: 60px; top: -1px; left: calc(50% - 30px); background: #e60012;}
.courseBox h4{ font-size: 22px; margin: 0 auto; text-align: center; line-height: 1.6;}
.courseBox h4 span{ font-size: 18px; color: #e60012; display: block; margin: 0 auto 5%; line-height: 1;}
.courseBox p{ text-align: center;}
.courseBox .price{ font-size: 12px; margin: 0 auto 12%; line-height: 2;}
.courseBox .price span{ font-size: 22px;}
.courseBox .text{ font-size: 11px;}

.cautionList{ line-height: 2;}
.cautionList dt{ font-size: 12px; text-indent: -22px; padding-left: 22px; margin: 0 auto 2%;}
.cautionList dt::before{ content: ""; display: inline-block; width: 12px; height: 12px; background: #4b443c; margin: 0 10px 0 0;}
.cautionList dd{ padding-left: 22px; font-size: 11px; margin: 0 auto 7%;}
.cautionList dd:last-child{ margin-bottom: 0;}

}