@charset "UTF-8";
/* CSS Document */

#interview{ padding-top: 0; font-family: YakuHanJP_Noto, "Noto Sans JP", "Hiragino Sans", "Hiragino Kaku Gothic ProN", Meiryo, sans-serif;}
#interview header{ display: none;}

.int-cont{ background: url(../../common/img/bg_stripe.png) repeat 0 0/50px 50px rgba(235,235,221,1); padding: 25px 0;}
.int-ttl{ width: 182px; margin: 0 auto 10px;}
.int-ttl span{ display: block; margin: 13px 0 0; font-size: 14px; line-height: 1; text-align: center;}
.int-txt { margin: 0 0 20px; font-size: 12px; line-height: 1.75; text-align: center;}

.int-q{ background: #9A0000; width: calc(100% - 28px); height: 70px; margin: 0 auto 95px; padding: 5px; border-radius: 35px; box-shadow: 5px 5px 10px 0px rgba(0,0,0,0.2);}
.int-q__inner{ display: flex; justify-content: center; align-items: center; height: 60px; border: 1px solid #C9A6A6; border-radius: 30px;}
.int-q__inner p{ font-weight: 700; font-size: 17px; line-height: 1.3; color: #fff; text-align: center; letter-spacing: .08em;}

.int-slick{ max-width: 960px; margin: 0 auto;}

.int-slick .slick-prev,
.int-slick .slick-next{ width: 130px; height: 25px; top: 118px; transform: translate(0,0); z-index: 100;}
.int-slick .slick-prev{ left: auto; right: 50%;}
.int-slick .slick-next{ left: 50%;}

.int-slick .slick-prev:before{ content: "前の質問"; opacity: 1; font-size: 15px; line-height: 1; color: #333;}
.int-slick .slick-next:before{ content: "次の質問"; opacity: 1; font-size: 15px; line-height: 1; color: #333;}

.int-slick .slick-prev.slick-disabled:before,
.int-slick .slick-next.slick-disabled:before,
.int-slick .slick-prev.slick-disabled:after,
.int-slick .slick-next.slick-disabled:after{ opacity: 0;}

.int-slick .slick-prev:after,
.int-slick .slick-next:after{ content: ""; width: 0; height: 0; position: absolute; top: 50%; transform: translateY(-50%); border-style: solid;}
.int-slick .slick-prev:after{ left: 0; border-width: 8px 8px 8px 0; border-color: transparent #333 transparent transparent;}
.int-slick .slick-next:after{ right: 0; border-width: 8px 0 8px 8px; border-color: transparent transparent transparent #333;}


.int-slick .slick-dots{ top: 76px;}
.int-slick .slick-dots::before{ content: ""; background: #333; width: 1px; height: 25px; position: absolute; top: 42px; left: 50%; transform: translateX(-50%);}
.int-slick .slick-dots li.slick-active button:before{ opacity: 1; color: #9A0000;}
.int-slick .slick-dots li{ margin: 0;}


@media print, screen and (min-width: 940px){
	
	
	.int-cont{ padding-top: 75px; position: relative; overflow: hidden;}
	.int-cont::before,
	.int-cont::after{ content: ""; background: rgba(186,166,85,.3); width: 100vw; height: 420px; position: absolute; left: 0;}
	.int-cont::before{ top: 462px;}
	.int-cont::after{ top: 1062px;}
	
	.int-ttl{ width: 304px; margin-bottom: 15px;}
	.int-ttl span{ margin-top: 20px; font-size: 15px;}
	.int-txt { font-size: 13px; margin-bottom: 40px;}
	.int-box{}
	.int-q{ width: 900px; margin-bottom: 80px;}
	.int-q__inner p{ font-size: 20px; line-height: 1;}


	.int-slick{ padding-bottom: 70px; z-index: 50;}
	
	.int-slick .slick-prev,
	.int-slick .slick-next{ height: 46px; top: 12px;}
	.int-slick .slick-prev{ left: 60px; right: auto; border-right: 1px solid #C9A6A6;}
	.int-slick .slick-next{ left: auto; right: 60px; border-left: 1px solid #C9A6A6;}
	.int-slick .slick-prev.slick-disabled{ border-right: none;}
	.int-slick .slick-prev.slick-disabled{ border-left: none;}

	.int-slick .slick-prev:before{ color: #fff;}
	.int-slick .slick-next:before{ color: #fff;}
	.int-slick .slick-prev:after{ border-color: transparent #fff transparent transparent;}
	.int-slick .slick-next:after{ border-color: transparent transparent transparent #fff;}
	
	.int-slick .slick-dots{ top: 87px;}
	.int-slick .slick-dots::before{ display: none;}
	
}