@charset "UTF-8";

/*
	##### SATAKE RECRUIT #####
	/special/css/special_pc.css
*/


.special_cont {
  background: url(/special/images/bg_wallpaper_pc.jpg) repeat center top
}
main {
  padding-top: 120px;
}
main::before {
  display: none;
}
.special_ttl_box {
  display: block;
  width: 1256px;
  height: auto;
  min-height: 545px;
  margin-left: 50%;
  transform: translateX(-50%);
  margin-bottom: 96px;
  background: url(/special/images/img_title_bg_pc.png) no-repeat center top / cover
}
.special_ttl {
  display: block;
  width: 468px;
  margin: 0 auto 36px
}

.special_ttl_box .lead {
  font-family: 'Kiwi Maru', serif;
  font-weight: 300;
  font-size: 16px;
  line-height: 35px;
  text-align: center;
}
.letter_box {
  width: 100%;
  max-width: 1000px;
  margin: 0 auto 96px
}
.letter_list {
  width: 100%;
  flex-wrap: wrap;
  justify-content: space-between;
}
.letter_list::after {
  content: '';
  display: block;
  flex: 0 0 488px
}
.letter_list li {
  display: block;
  width: 232px;
  height: 167px;
  margin-bottom: 40px
}
.letter_list li.rise.fade.start:nth-child(4n+4) {
  animation-delay: 0.9s
}
.letter_list li.rise.fade.start:nth-child(4n+3) {
  animation-delay: 0.7s
}
.letter_list li.rise.fade.start:nth-child(4n+2) {
  animation-delay: 0.5s
}
.letter_list li a {
  display: block;
  width: 100%;
  height: 100%;
}
.letter_list li a img {
  width: 100%;
  height: auto;
}
.letter_list li a:hover img {
  animation: fluttering 1s cubic-bezier(0.165, 0.44, 0.64, 1) 1 forwards;
}

@keyframes fluttering {
  25% {
    transform: rotateY(-25deg);
  }
  50% {
    transform: translateY(2%) rotateY(25deg);
  }
  100% {
    transform: translateY(-4%) rotateY(0deg);
  }
}

#modal_contents {
	display: none;
}

/* --------------------------------------------------
override
-------------------------------------------------- */
.mfp-bg {
	opacity: 0
}
.mfp-bg.mfp-ready {
	opacity: 0.8;
	transition: all 0.3s ease-out
}
.mfp-bg.mfp-removing {
	opacity: 0;
	transition: all 0.3s ease-out .2s
}
.mfp-wrap .mfp-content {
	opacity: 0
}
.mfp-wrap.mfp-ready .mfp-content {
	opacity: 1;
	transition: all 0.3s ease-out .2s
}
.mfp-wrap.mfp-removing .mfp-content {
	opacity: 0;
	transition: all 0.3s ease-out
}

button.mfp-close {
	right: 32px;
	top: 58px;
	text-indent: -9999px;
	width: 26px;
	height: 26px;
	opacity: 1;
	background: url(/special/images/btn_close.png) no-repeat center center / contain;
	transition: opacity .3s ease
}
button.mfp-close:hover,
button.mfp-close:active {
	right: 32px;
	top: 58px;
}
button.mfp-close:hover {
	opacity: .5
}

/* --------------------------------------------------
modal_box
-------------------------------------------------- */
.modal_box {
	position: relative;
	box-sizing: border-box;
	display: block;
	width: 100%;
	max-width: 1263px;
  min-width: 1036px;
	height: 633px;
	margin: 0 auto;
	padding: 58px 120px 75px 107px;
  background-repeat: no-repeat;
  background-position: center top;
  background-size: cover
}
@media (max-width: 1263px) {
  .modal_box {
	  padding: 58px calc(120/1263*100%) 75px calc(107/1263*100%);
  }
}

.b_box {
  background-image: url(/special/images/bg_blue_pc.png)
}
.g_box {
  background-image: url(/special/images/bg_green_pc.png)
}
.p_box {
  background-image: url(/special/images/bg_pink_pc.png)
}
.y_box {
  background-image: url(/special/images/bg_yellow_pc.png)
}

.modal_inner {
  height: 100%;
  justify-content: space-between;
}
.modal_ttl_block {
  text-align: center;
  flex: 0 0 calc(452/1036*100%)
}
.modal_ttl_block img {
  width: 100%;
  max-width: none;
  height: auto;
}
.modal_txt_block {
  box-sizing: border-box;
  height: 100%;
  padding-top: 26px;
  flex: 0 0 calc(517/1036*100%);
  padding-right: 17px;
  overflow-y: auto;
}

.modal_txt_block p {
  font-family: 'Kiwi Maru', serif;
  font-size: 16px;
  font-weight: 300;
  line-height: 28px;
  letter-spacing: -.025em
}
.modal_txt_block p + p {
  margin-top: 1em
}
.episode_num {
  display: inline-block;
  width: 128px;
  margin-bottom: 21px;
}
.modal_ttl {
  display: inline-block;
  width: 100%;
  margin-bottom: 30px;
}
.modal_year {
  display: inline-flex;
  min-width: 140px;
  height: 18px;
  margin-bottom: 26px;
  justify-content: center;
  align-items: center;
  background-color: #fff;
  border-radius: 9px;
  font-family: 'Kiwi Maru', serif;
  font-size: 14px;
  letter-spacing: -.025em
}
.modal_img_box {
  display: inline-block;
  width: 350px;
}