@charset "UTF-8";
/* ========== variables ========== */
/* =========================================================================== */
/* ビジュアル周り */
/* =========================================================================== */
/* common */
#contsMainHeader {
				margin: 0 auto;
				position: relative;
}

#contsMainHeader .pInr {
				margin: 0 auto;
				position: relative;
}

#contsImgTtl {
				position: absolute;
				z-index: 2;
}

#ttlSub {
				position: absolute;
				background-image: url("/career/assets/movie/img/conts_tri.svg");
				background-repeat: no-repeat;
				background-size: contain;
				display: table;
				z-index: 2;
}

#ttlSub div {
				display: table-cell;
				vertical-align: middle;
				text-align: left;
				color: #ffffff;
				font-weight: bold;
				line-height: 1.2;
}

#headVisual {
				position: absolute;
				z-index: 0;
}

#headVisual img {
				position: absolute;
}

#headVisual img.hRect {
				z-index: 0;
}

/* PC ONLY */
@media screen and (min-width: 751px) {
				main {
								background-image: url("/career/assets/movie/img/visual_line_left01.svg"), url("/career/assets/movie/img/visual_line_left02.svg"), url("/career/assets/movie/img/visual_line_right01.svg"), url("/career/assets/movie/img/visual_line_right02.svg"), linear-gradient(rgba(255, 255, 255, 0), rgba(255, 255, 255, 0) 350px, rgba(255, 255, 255, 0.3) 350px, rgba(255, 255, 255, 0.3), rgba(255, 255, 255, 0.9)), url("/career/assets/movie/img/bg.png");
								background-size: 600px, 500px, 600px, 600px, cover, cover;
								background-repeat: no-repeat;
								background-position: top 50px left -100px, top 520px left -250px, top -100px right -300px, top 320px right -300px, center center, center center;
				}
				.pInr {
								margin: 0 auto;
								width: 1200px;
				}
				#contsMainHeader {
								min-width: 1200px;
								height: 600px;
				}
				#contsMainHeader .pInr {
								width: 1000px;
								height: 600px;
				}
				#contsImgTtl {
								top: 100px;
								width: 370px;
				}
				#ttlSub {
								width: 235px;
								top: 100px;
								left: calc((1000px - 235px) / 2);
				}
				#ttlSub div {
								height: 278px;
								font-size: 25px;
								padding-left: 15px;
								padding-bottom: 3px;
				}
				#headVisual {
								top: 0;
								width: 1000px;
								height: 560px;
								margin: 0 auto;
				}
				#headVisual img {
								border-radius: 12px;
				}
				#hVisual01 {
								z-index: 1;
								right: 20px;
								top: 40px;
								width: 500px;
				}
				#hVisual02 {
								z-index: 1;
								width: 410px;
								top: 300px;
								right: 190px;
				}
				#hVisual03 {
								z-index: 1;
								width: 350px;
								left: 50px;
								top: 240px;
				}
				#hRect01 {
								width: 260px;
								right: 40px;
								top: 220px;
				}
				#hRect02 {
								width: 260px;
								right: 90px;
								top: 300px;
				}
				#hRect03 {
								width: 260px;
								left: 200px;
								top: 340px;
				}
				#hRect04 {
								width: 225px;
								left: 320px;
								bottom: 0px;
				}
				#ctLeadArea {
								background-image: linear-gradient(rgba(255, 255, 255, 0), rgba(255, 255, 255, 0.8) 150px, white);
								padding-bottom: 20px;
				}
				#pLead {
								font-size: 17px;
								line-height: 2.2;
								text-align: center;
								margin-bottom: 100px;
				}
}

/* sp and tab */
@media screen and (max-width: 750px) {
				main {
								background-image: url("/career/assets/movie/img/visual_line_left01.svg"), url("/career/assets/movie/img/visual_line_left02.svg"), url("/career/assets/movie/img/visual_line_right01.svg"), url("/career/assets/movie/img/visual_line_right02.svg"), linear-gradient(rgba(255, 255, 255, 0), rgba(255, 255, 255, 0) 65vw, rgba(255, 255, 255, 0.3) 65vw, rgba(255, 255, 255, 0.3), rgba(255, 255, 255, 0.9)), url("/career/assets/movie/img/bg_sp.png");
								background-size: 60vw, 50vw, 60vw, 60vw, cover, 100%;
								background-repeat: no-repeat, no-repeat, no-repeat, no-repeat, no-repeat, repeat-y;
								background-position: top 5vw left -15vw, top 152vw left -25vw, top -10vw right -50vw, top 82vw right -30vw, center center, center center;
				}
				#contsMainHeader .pInr {
								width: 100%;
								height: 120vw;
				}
				#contsImgTtl {
								width: 48vw;
								top: 53vw;
								left: 4vw;
				}
				#ttlSub {
								width: 44vw;
								top: 40vw;
								left: 54vw;
				}
				#ttlSub div {
								height: 45vw;
								font-size: 4.6vw;
								padding-left: 2.5vw;
								padding-bottom: 2.5vw;
				}
				#headVisual {
								top: 3vw;
								left: 1vw;
								width: 98vw;
								height: 120vw;
								padding-top: 1px;
				}
				#headVisual img {
								border-radius: 2vw;
				}
				#hVisual01 {
								z-index: 1;
								right: 0vw;
								top: 15vw;
								width: 56vw;
				}
				#hVisual02 {
								z-index: 1;
								width: 50vw;
								top: 77vw;
								right: 3vw;
				}
				#hVisual03 {
								z-index: 1;
								width: 40vw;
								left: 5vw;
								top: 70vw;
				}
				#hRect01 {
								width: 40vw;
								left: 25vw;
								top: 19vw;
				}
				#hRect02 {
								width: 45vw;
								left: 15vw;
								top: 75vw;
				}
				#hRect03 {
								display: none;
								width: 26vw;
								left: 20vw;
								top: 34vw;
				}
				#hRect04 {
								display: none;
								width: 22vw;
								left: 0;
								bottom: 0;
				}
				#ctLeadArea {
								background-image: linear-gradient(rgba(255, 255, 255, 0), rgba(255, 255, 255, 0.8) 15vw, white);
								padding-bottom: 10vw;
				}
				#pLead {
								font-size: 3.3vw;
								line-height: 2.1;
								text-align: left;
								margin-bottom: 10vw;
								padding: 0 10vw;
				}
}

/* =========================================================================== */
/* 出力されるリスト */
/* =========================================================================== */
/* common */
#movList {
				transition: opacity 0.4s;
				opacity: 1;
				margin: 0 auto;
}

#movList.hide {
				opacity: 0;
}

#movList .movCassette {
				position: relative;
				background-color: #ffffff;
				background-position: top;
				background-repeat: no-repeat;
				display: flex;
				flex-wrap: wrap;
				align-items: start;
}

#movList .movCassette.hide {
				display: none;
}

#movList .movCassette dd {
				position: relative;
}

#movList .movCassette dd.mvTagArea {
				order: 2;
}

#movList .movCassette dd.mvTagArea ul {
				display: flex;
}

#movList .movCassette dd.mvTagArea li {
				display: table;
				border: 1px solid #000000;
}

#movList .movCassette dd.mvTagArea li span {
				display: table-cell;
				vertical-align: middle;
				text-align: center;
}

#movList .movCassette dd.movTxt {
				width: 100%;
				order: 3;
}

#movList .movCassette dd.movTxt > div {
				background-repeat: no-repeat;
				background-position: top;
}

/* 名前・所属 */
.movName {
				width: 100%;
				order: 1;
}

.movNameList > div {
				font-weight: bold;
}

.movApply {
				width: 100%;
				order: 4;
}

#mBody {
				background: #fff;
}

#mClose span {
				background: var(--cRed);
				border-radius: 50%;
}

/* PC ONLY */
@media screen and (min-width: 751px) {
				#ctListArea {
								background-image: url("/career/assets/movie/img/bg.png");
								background-size: cover;
								padding-top: 60px;
								padding-bottom: 90px;
				}
				#movList {
								width: 1131px;
								margin: 0 auto;
								display: flex;
								flex-wrap: wrap;
								gap: 30px 15px;
				}
				#movList .movCassette {
								width: 367px;
								height: auto;
								margin-right: 0;
								background-image: linear-gradient(90deg, #e60000, #e60000 60px, #acacac 60px, #acacac);
								background-size: 100% 4px;
								padding-top: 32px;
								border-radius: 15px;
								display: flex;
								flex-direction: column;
				}
				.movImg {
								margin-bottom: 10px;
								order: 0;
				}
				.movName {
								padding-top: 1px;
								min-height: 70px;
								font-size: 15px;
								margin: 0;
				}
				.movName ul {
								margin: 0;
								padding: 0;
				}
				.movNameList {
								display: flex;
								margin-bottom: 5px;
				}
				.movNameList:last-child {
								margin-bottom: 0;
				}
				.movNameList > div {
								display: flex;
								padding: 0 15px;
								min-width: 125px;
				}
				.movNameList > div::before {
								border-right-width: 8px;
								border-top-width: 20px;
								margin-right: 6px;
								content: "";
								display: block;
								width: 0;
								height: 0;
								border-style: solid;
								border-color: transparent;
								border-top-color: #e60000;
				}
				.movNameList > div > div {
								padding-right: 8px;
								min-width: 95px;
				}
				.movNameList > div strong {
								background-image: linear-gradient(#acacac, #acacac 2px, transparent 2px, transparent 4px);
								background-size: 2px 4px;
								background-repeat: repeat-y;
								background-position: left;
								padding-left: 15px;
				}
				#movList .movCassette dd.mvTagArea {
								padding: 0 20px;
				}
				#movList .movCassette dd.mvTagArea li {
								margin-right: 5px;
								border-radius: 20px;
				}
				#movList .movCassette dd.mvTagArea li span {
								height: 22px;
								padding: 0 15px;
								font-size: 15px;
								line-height: 1;
				}
				#movList .movCassette dd.movTxt {
								padding: 15px;
				}
				#movList .movCassette dd.movTxt > div {
								background-image: url("/career/assets/movie/img/bg_line.svg");
								background-repeat: no-repeat;
								background-position: top;
								padding-top: 25px;
								font-size: 15px;
				}
				.movApply {
								padding: 10px 15px 40px;
								margin-top: auto;
								min-height: 180px;
								text-align: center;
				}
				.movApply .movApplyTtl {
								background-image: url(/career/assets/movie/img/bg_line.svg);
								background-repeat: no-repeat;
								background-position: top;
								padding: 20px 0 20px 0;
								font-size: 15px;
								font-weight: 700;
								text-align: center;
				}
				.movApply .movApplyBtnList span {
								width: 220px;
								height: 46px;
								display: block;
								margin: 0 auto;
								color: #ffffff;
								font-size: 14px;
								line-height: 1.2;
								font-weight: 700;
								display: flex;
								justify-content: center;
								align-items: center;
								position: relative;
								padding: 0 30px;
								background: #e60000;
				}
				.movApply .movApplyBtnList span:hover {
								background: rgba(230, 0, 0, 0.7);
				}
				.movApply .movApplyBtnList span:before {
								content: '';
								position: absolute;
								right: 16px;
								top: calc(50% - 7px);
								width: 14px;
								height: 14px;
								background-color: #ffffff;
								border-radius: 50%;
				}
				.movApply .movApplyBtnList span::after {
								content: '';
								position: absolute;
								right: 21px;
								top: 50%;
								width: 4px;
								height: 4px;
								border-top: 1px solid #e60000;
								border-right: 1px solid #e60000;
								transform: translateY(-50%) rotate(45deg);
				}
				.movApply .movApplyBtnList li + li {
								margin-top: 12px;
				}
				.btnDetail {
								width: 240px;
								margin-top: 40px;
								border-radius: 40px;
								text-align: center;
				}
				.btnDetail span {
								height: 50px;
								background-size: 26px;
								background-position: right 14px center;
				}
}

/* sp and tab */
@media screen and (max-width: 750px) {
				#ctListArea {
								padding-top: 6vw;
								padding-bottom: 10vw;
				}
				#movList .movCassette {
								display: flex;
								width: 74vw;
								margin: 0 auto;
								background-image: linear-gradient(90deg, #e60000, #e60000 10vw, #acacac 10vw, #acacac);
								background-size: 100% 2vw;
								padding-top: 3vw;
								margin-bottom: 10vw;
								border-radius: 3vw;
				}
				.movImg {
								margin-bottom: 5vw;
								order: 0;
				}
				.movNameList {
								display: flex;
								align-items: center;
								margin: 0 5vw 3vw;
				}
				.movNameList::before {
								border-right-width: 2vw;
								border-top-width: 8vw;
								margin-right: 3vw;
								content: "";
								display: block;
								width: 0;
								height: 0;
								border-style: solid;
								border-color: transparent;
								border-top-color: #e60000;
				}
				.movNameList > div {
								display: block;
				}
				.movNameList > div div,
				.movNameList > div strong {
								width: 100%;
								display: block;
								margin: 0;
								font-size: 3.5vw;
				}
				#movList .movCassette dd.mvTagArea {
								padding: 0 2vw;
				}
				#movList .movCassette dd.mvTagArea li {
								margin-right: 2vw;
								border-radius: 5vw;
				}
				#movList .movCassette dd.mvTagArea li span {
								height: 6vw;
								padding: 0 4vw;
								font-size: 3vw;
								line-height: 1;
				}
				#movList .movCassette dd.movTxt {
								padding: 4vw;
				}
				#movList .movCassette dd.movTxt > div {
								background-image: url("/career/assets/movie/img/bg_line.svg");
								background-repeat: no-repeat;
								background-position: top;
								padding-top: 4vw;
								font-size: 3vw;
				}
				.movApply {
								padding: 2.66667vw 4vw 10.66667vw;
								text-align: center;
				}
				.movApply .movApplyTtl {
								background-image: url(/career/assets/movie/img/bg_line.svg);
								background-repeat: no-repeat;
								background-position: top;
								padding: 5.33333vw 0 5.33333vw 0;
								font-size: 4vw;
								font-weight: 700;
								text-align: center;
				}
				.movApply .movApplyBtnList span {
								width: 58.66667vw;
								height: 12.26667vw;
								display: block;
								margin: 0 auto;
								color: #ffffff;
								font-size: 3.73333vw;
								line-height: 1.2;
								font-weight: 700;
								display: flex;
								justify-content: center;
								align-items: center;
								position: relative;
								padding: 0 8vw;
								background: #e60000;
				}
				.movApply .movApplyBtnList span:hover {
								background: rgba(230, 0, 0, 0.7);
				}
				.movApply .movApplyBtnList span:before {
								content: '';
								position: absolute;
								right: 4.26667vw;
								top: calc(50% - 1.86667vw);
								width: 3.73333vw;
								height: 3.73333vw;
								background-color: #ffffff;
								border-radius: 50%;
				}
				.movApply .movApplyBtnList span::after {
								content: '';
								position: absolute;
								right: 5.6vw;
								top: 50%;
								width: 1.06667vw;
								height: 1.06667vw;
								border-top: 0.26667vw solid #e60000;
								border-right: 0.26667vw solid #e60000;
								transform: translateY(-50%) rotate(45deg);
				}
				.movApply .movApplyBtnList li + li {
								margin-top: 3.2vw;
				}
				.btnDetail {
								width: 45vw;
								margin-top: 8vw;
								border-radius: 10vw;
								text-align: center;
								min-width: 120px;
				}
				.btnDetail span {
								height: 8vw;
								background-size: 4vw;
								background-position: right 4vw center;
				}
}

/* =========================================================================== */
/* 検索周り */
/* =========================================================================== */
/* common */
#filterArea h2 {
				font-weight: bold;
}

#filterForm {
				display: flex;
				flex-wrap: wrap;
				justify-content: center;
				margin: 0 auto;
}

#filterForm input {
				display: none;
}

#filterForm label {
				border: 1px solid #ababab;
				box-sizing: border-box;
				display: inline-block;
				cursor: pointer;
				line-height: 1;
}

#filterForm input[type="radio"]:checked + label,
#filterForm input[type="checkbox"]:checked + label {
				color: #ffffff;
				background: #e60000;
				border-color: #e60000;
}

#filterForm input[type="radio"]:checked + label {
				background: #e60000;
				border-color: #e60000;
}

.filterList {
				display: flex;
				flex-wrap: wrap;
				justify-content: center;
				align-items: center;
				width: 100%;
}

.btnList {
				width: 100%;
				display: flex;
				justify-content: center;
				align-items: center;
}

.btnItemPrt {
				display: table;
				cursor: pointer;
				overflow: hidden;
}

.btnItemPrt span {
				display: table-cell;
				width: 100%;
				text-align: center;
				vertical-align: middle;
				line-height: 1;
}

#btnStart {
				background: #e60000;
}

#btnStart:hover {
				background: rgba(230, 0, 0, 0.7);
}

#btnStart span {
				color: #ffffff;
}

#btnClear {
				background: #ababab;
}

#btnClear:hover {
				background: rgba(171, 171, 171, 0.7);
}

#btnClear span {
				color: #ffffff;
}

#noResult {
				display: none;
				margin: 0 auto;
}

#noResult.appear {
				display: table;
}

#noResult span {
				display: table-cell;
				vertical-align: middle;
				text-align: center;
}

/* PC ONLY */
@media screen and (min-width: 751px) {
				#filterArea {
								display: flex;
								flex-wrap: wrap;
								justify-content: center;
				}
				#filterArea h2 {
								font-size: 20px;
								margin-right: 20px;
				}
				#filterForm {
								padding: 0px;
								margin: 0 0 30px;
				}
				.filterList li {
								margin: 0 8px 16px 0;
				}
				#filterForm label {
								padding: 10px 20px 11px;
								border-radius: 20px;
				}
				.btnList {
								margin-bottom: 70px;
				}
				#btnStart {
								width: 230px;
								margin-right: 20px;
				}
				#btnStart span {
								height: 50px;
								font-size: 20px;
				}
				#btnClear {
								width: 164px;
				}
				#btnClear span {
								height: 36px;
				}
				#noResult {
								width: 800px;
								padding: 30px 0 60px;
								margin-bottom: 30px;
								font-size: 20px;
				}
				#noResult span {
								font-size: 20px;
								height: 300px;
				}
}

/* sp and tab */
@media screen and (max-width: 750px) {
				#filterArea {
								display: flex;
								flex-wrap: wrap;
								justify-content: center;
				}
				#filterArea h2 {
								font-size: 4vw;
								font-weight: bold;
								text-align: center;
								width: 100%;
				}
				#filterForm {
								padding: 0px;
								margin: 0 0 3vw;
				}
				.filterList li {
								margin: 0 1.5vw 4vw 0;
				}
				#filterForm label {
								padding: 1vw 3vw 1.1vw;
								border-radius: 5vw;
								font-size: 3vw;
				}
				.btnList {
								margin-bottom: 5vw;
				}
				#btnStart {
								width: 50vw;
								margin-right: 3vw;
				}
				#btnStart span {
								height: 12vw;
								font-size: 4.2vw;
				}
				#btnClear {
								width: 30vw;
				}
				#btnClear span {
								height: 8vw;
								font-size: 3vw;
				}
				#noResult {
								width: 90vw;
								padding: 5vw 0 6vw;
								margin-bottom: 10vw;
								font-size: 4vw;
				}
				#noResult span {
								font-size: 4vw;
								height: 20vw;
				}
}

/*# sourceMappingURL=style.css.map */