@charset "UTF-8";

/* =============================================================================
   pc
   ========================================================================== */

.sub_page_mv {
    background: none;
    height: 18vh;
}
	.sub_page_mv h2 {
	    height: 44px;
	}

.rookieLists {
	width: 100%;
	max-width: 1500px;
	margin-right: auto;
	margin-left: auto;
}
	.year {
		margin: 25px auto;
	    max-width: 1280px;
	    width: 94%;
		font-size: 26px;
		color: #004385;
	}
	.rookieLists .left {
		width: 50%;
		float: left;
	}
	.rookieLists .right {
		width: 50%;
		float: right;
	}
		.listLink {
			width: 100%;
			height: 100%;
			display: block;
			position: relative;
		}
		.hoverBox {
			position: absolute;
			top: 0;
			left: 0;
			width: 100%;
			height: 100%;
			background: rgba(0,66,132,.8);
			opacity: 0;
			-webkit-transition: 0.5s ease-in-out;
			-moz-transition: 0.5s ease-in-out;
			-o-transition: 0.5s ease-in-out;
			transition: 0.5s ease-in-out;
		}
		.andmore {
			opacity: 1;
		}
		.hoverBox .inner {
			margin: 5% auto;
			border: 1px solid #fff;
			color: #fff;
		    width: 88%;
	        height: 90%;
            text-align: center;
            position: relative;
		}
		.hoverBox .inner .tips {
			position: absolute;
			top: 0;
			right: 0;
			bottom: 0;
			left: 0;
			margin: auto;
			width:80%;
			height: 150px;
		}
			.hoverBox .name {
			    font-size: 36px;
			    letter-spacing: 3px;
			}
			.smalltype .hoverBox .name {
			    font-size: 20px;
			    letter-spacing: 1px;
			}
			.hoverBox .whiteBorder {
				height: 1px;
				width: 70%;
				margin-right: auto;
				margin-left: auto;
				background:#fff;
			    margin-top: 15px;
			    margin-bottom: 20px;
			    opacity:.7;
			}
			.smalltype .hoverBox .whiteBorder {
				margin-top: 10px;
			    margin-bottom: 15px;
			}
			.smalltype .hoverBox .kana{
				font-size: 12px;
			}
			.plusBtn {
				margin-top: 30px;
			}
				.smalltype .plusBtn img {
					width: 30px;
				}
	.box > div {
		float: left;
	}
		.smalltype {
			width: calc(100% / 3);
		}
		.smalltype .list,
		.smalltype .textbox {
			height: 100%;
		}
		.bigtype {
			width: calc(100% / 3 * 2);
			height: 100%;
		}

		.listLink,
		.textbox {
			background-size:cover;
		}

.old {
	width: 100%;
	max-width: 1500px;
	margin-top: 110px;
	margin-right: auto;
	margin-left: auto;
}
.oldLists {
	width: 100%;
	max-width: 1500px;
	margin-right: auto;
	margin-left: auto;
}
	.oldLists li {
		width: 16.666%;
		max-width: 250px;
		float: left;
	}
	.oldLists li:nth-child(6n+1) {
		clear: both;
	}




.loadingHitokoto {
	width: 100%;
	background:#fff;
    position: fixed;
    z-index: 1000;
    top: 0;
    left: 0;
    -webkit-transition: 0.5s ease-in-out;
	-moz-transition: 0.5s ease-in-out;
	-o-transition: 0.5s ease-in-out;
	transition: 0.5s ease-in-out;
}
.loadingEnd {
	opacity: 0;
}
.loadingEndNone {
	display: none;
}

.loadingHitokoto .hitokoto {
	text-align: center;
	color: #004284;
	font-size: 20px;
	letter-spacing: 2px;
	line-height: 2;
	position: absolute;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
	margin: auto;
	width: 90%;
	height: 90px;
	opacity: 0;
}

.class {
	position: absolute;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
	margin: auto;
	width: 90%;
	max-width: px;
	height: px;
}

.rookieMv {
	width: 100%;
	position: relative;
	height: 720px;
	overflow:hidden; 
	max-width: 1800px;
    margin-left: auto;
    margin-right: auto;
}
	.rookieMv .mvleft,
	.rookieMv .mvright {
		width: 100%;
		position: absolute;
	    height: 100%;
	    background-size: 1500px;
	    background-size: cover;
	    background-repeat: no-repeat;
	}
	.rookieMv .mvleft {
		right: 0;
		top: 0;
		background-position: right center;
	}
	.rookieMv .mvright {
		left: 0;
		top: 0;
		background-position: left center;
	}
	.positionleft {
		position: absolute;
		top: -20px;
		left: 14%;
		width: 52%;
		max-width: 780px;
	}
	.positionright {
		position: absolute;
		top: -20px;
		right: 14%;
		width: 52%;
		max-width: 780px;
	}
	@media screen and (max-width:1600px) { .positionleft { left: 8%; } }
	@media screen and (max-width:1500px) { .positionleft { left: 2%; } }
	@media screen and (max-width:1600px) { .positionright { right: 8%; } }
	@media screen and (max-width:1500px) { .positionright { right: 2%; } }
		.tag {
			width: 74.9%;
			max-width: 584px;
			margin-left: 8%;
		}
		.qaInMv {
		    width: 87.5%;
		    padding: 20px 6.25% 30px;
		    background: rgba(255,255,255,.6);
	        box-shadow: 3px 3px 10px rgba(0,0,0,0.1)
		}
			.qaInMv .q {
				padding-bottom: 10px;
				border-bottom: 1px dotted #e45f90;
				margin-bottom: 25px;
			}
				.qaInMv .q span {
				}
			.qaInMv .a {
			}
				.qaInMv .a h3 {
					font-size: 48px;
				    display: table;
				    margin-bottom: 15px;
				    position: relative;
				}
					.qaInMv .a h3 .txt {
						position: relative;
						z-index: 2;
						font-weight: bold;
					    background: linear-gradient(transparent 70%, #fdfe76 0%);
					    display: inline;
					    padding: 0 2px 4px;
					}
				.qaInMv .a p {
					font-size: 17px;
				    line-height: 1.6;
				}



	.qaBox {
		margin-bottom: 65px;
		position: relative;
	}
		.qaBox .q {
			font-size: 24px;
			color:#e45f90;
			padding-bottom: 14px;
			border-bottom: 1px dotted #4d4d4d;
			margin-bottom: 16px;
		}
			.qaBox .q span {
				font-size: 32px;
				font-weight: bold;
			    padding-right: 10px;
			}
		.qaBox .a p {
			font-size: 16px;
			line-height: 1.8;
		}

@media screen and (max-width:1500px) {
	.rookieMv {
	    height: 640px;
	}
	.rookieMv .mvleft,
	.rookieMv .mvright {
		width: 100%;
		position: absolute;
	    background-position: 75% center;
	}
	.qaBox .q {
	    font-size: 20px;
        line-height: 1.3;
	}
		.qaBox .q span {
		    font-size: 27px;
		    float: left;
		    margin-top: -7px;
		}
		.qaBox .a p {
		    font-size: 15px;
		}
		.qaInMv .a h3 {
		    font-size: 33px;
		}
		.qaInMv .a p {
		    font-size: 15px;
		}

}
@media screen and (max-width:1200px) {

	.hoverBox .name {
	    font-size: 26px;
	}
	.smalltype .hoverBox .name {
	    font-size: 16px;
	}

	.nametag {
		top: 30px;
	}
	.qaBox .q {
	    font-size: 18px;
	}
	.qaInMv .a h3 {
	    font-size: 30px;
	}
		.qaInMv .a p {
		    font-size: 14px;
		}
		.qaBox .a p {
		    font-size: 14px;
		}
}

@media screen and (max-width:1000px) {
	.smalltype .hoverBox .inner .tips {
	    height: 115px;
	}
	.smalltype .plusBtn img {
	    width: 20px;
	}
	.plusBtn {
	    margin-top: 15px;
	}
}


#content {
	background:url(../../img/rookie-voice/pc/rookies_voice_bg.jpg);
    padding-bottom: 80px;
}
	#detail {
		width: 95%;
		max-width: 1200px;
		margin-right: auto;
		margin-left: auto;
	}
	.whiteBox {
		padding-top: 50px;
	    padding-bottom: 50px;
		background:#fff;
		position: relative;
	}
		.star {
		    position: absolute;
		    right: -60px;
		    top: 5px;
		}
		.subPhoto1 {
		    width: 79.4%;
		    max-width: 754px;
		    position: absolute;
		    z-index: 2;
		    top: -27px;
		    right: -240px;
		}

		.no5 .q {
			width: 55%;
		}
		.no5 .a {
			width: 55%;
		}
		.no6 .q {
			width: 50%;
		}
		.no6 .a {
			width: 50%;
		}
		.no7 .q {
			width: 65%;
		}
		.no7 .a {
			width: 65%;
		}
		.year2024 .no7 .q {
			width: auto;
		}
		.year2024 .no7 .a {
			width: auto;
		}

		.subPhoto2 {
			position: absolute;
		    width: 75%;
		    max-width: 650px;
		    top: 0;
		    left: -160px;
		}
		.hukidashiBox {
		    float: right;
		    position: relative;
		    margin-top: -10px;
	        width: 60%;
		    max-width: 581px;
	        z-index: 2;
		}
			.txtInHukidashi {
				position: absolute;
			    top: 22%;
			    left: 0;
			    right: 0;
			    margin-right: auto;
			    margin-left: auto;
			    width: 66%;
			}

		@media screen and (max-width:1500px){
			.no7 .q, .no7 .a {
				width: 50%;
			}
			.year2024 .no7 .q, .year2024 .no7 .a {
				width: 75%;
			}
		}

		@media screen and (max-width:1200px) {
			.subPhoto2 {
				width: 60%;
			}
			.hukidashiBox {
			    width: 72%;
			}
		}

#rookieArchive {
	padding-top: 40px;
	padding-bottom: 60px;
	background:url(../../img/rookie-voice/pc/rookies_voice_bg.jpg);
}
	#rookieArchive ul li {
		float: left;
		width: calc(100% / 6);
		max-width: 167px;
	}
	#rookieArchive ul li a {
		display: block;
		height: 170px;
		-webkit-transition: 0.3s ease-in-out;
		-moz-transition: 0.3s ease-in-out;
		-o-transition: 0.3s ease-in-out;
		transition: 0.3s ease-in-out;
	}
	#rookieArchive ul li a:hover {
		opacity: .55;
	}



/* =============================================================================
   sp
   ========================================================================== */

@media screen and (max-width: 640px) {
	.sub_page_mv h2 {
	    padding: 10vw 0 0;
	    font-feature-settings: 'palt';
	    letter-spacing: -0.001em;
	}
	.sub_page_mv h2 span {
	    font-feature-settings: normal;
	    letter-spacing: 0;
	}
	.rookieLists .left,
	.rookieLists .right {
	    width: 100%;
	    float: right;
	}


	.old {}
	
		.oldLists li {
			width: 25%;
			height: 28vw !important;
		}
		.oldLists li:nth-child(4n+1) {
			clear: both;
		}
		.oldLists li:nth-child(6n+1) {
			clear: none;
		}
		.smalltype {
		}

	#content {
		padding-bottom: 0px;
	}
	.rookieMv {
		height: auto;
	}
		.rookieMv .mvleft, .rookieMv .mvright {
			background-size: cover;
			height: 87.5vw;
			position: inherit;
		}
		.rookieMv .mvleft {
			background-position: right;
		}
		.rookieMv .mvright {
			background-position: left;
		}
	.nametag {
	    top: inherit;
	}
	.positionleft {
	    left: inherit;
        width: 100%;
	    max-width: 780px;
	    position: inherit;
	}
	.positionright {
	    right: inherit;
        width: 100%;
	    max-width: 780px;
	    position: inherit;
	}
	.tag {
	    width: 87.5%;
	    max-width: 560px;
	    margin-left: auto;
	    margin-right: auto;
	    margin-top: -40px;
	}
	.whiteBox {
	}
	.qaBox {
	    margin-bottom: 40px;
	}
	.qaBox.no5,
	.qaBox.no10 {
	    margin-bottom: 0;
	}
	.qaBox.no6 {
	    margin-top: -4vw;
	}
	.qaInMv {
		margin-bottom: 0;
	    width: 87.5%;
	    padding: 0 6.25% 40px;
	    background: rgba(255,255,255,.6);
	    box-shadow: none;
	}
		.qaInMv .a h3 {
		    font-size: 23px;
		}

		.qaBox .q {
			padding-left: 2.5em;
		    font-size: 17px;
		    line-height: 1.6;
		}
		.qaBox.no10 .q {
		    padding-left: 3.3em;
		}
		.qaBox .q span {
		    position: absolute;
		    left: 0%;
		    margin-top: -5px;
            font-size: 20px;
		}
		.qaInMv .q span {
		    left: 6%;
		}
		.qaBox.no10 .q span {
		    left: 4%;
		}

		.qaBox .a p {
		    font-size: 15px;
		}
		.qaBox .a br {
		    display: none;
		}

	.single .pankuzu,
	.single img.hole {
	    display: none;
	}

	.whiteBox {
	    padding-top: 30px;
	}
		.whiteBox .inner {
			width: 87.5%;
		}
	#detail {
	    width: 100%; 
	}
	.no5 .q,
	.no6 .q,
	.no7 .q {
	    width: auto;
	}
	.no5 .a,
	.no6 .a,
	.no7 .a {
	    width: 100%;
	}
	.subPhoto1,
	.subPhoto2 {
	    position: relative;
	    z-index: 2;
	    width: 100vw;
	    overflow: hidden;
	    top: 0;
	    right: 0;
	    left: -7.25%;
	    max-width: none;
	}
	.subPhoto1 {
	    margin-top: 5vw;
	}
		.subPhoto1 img,
		.subPhoto2 img {
			position: relative;
			top: inherit;
			max-width: none;
		}
		.subPhoto1 img {
			left: -7vw;
			width: 110vw;
		}
		.subPhoto2 img {
			left: -2vw;
		    width: 105vw;
		}
	img.hukidashi {
		display: none;
	}
	.hukidashiBox {
	    width: 100%;
	    float: none;
	    margin-top: 0;
	    max-width: inherit;
		padding: 7vw 0 14vw;

		background-image:
			url("../../img/rookie-voice/sp/hukidashi_top.png"),
			url("../../img/rookie-voice/sp/hukidashi_bottom.png"),
			url("../../img/rookie-voice/sp/hukidashi_body.png"); /* 最背面 */

		background-repeat:
			no-repeat,
			no-repeat,
			repeat-y;

		background-position:
			top center,
			bottom center,
			center;

		background-size:
			100%;
	}
	.hukidashi_line{
		background: url(../../img/rookie-voice/sp/hukidashi_body.png) no-repeat center;
		background-size: 50px 280px;
		width: 100%;
	}
	.txtInHukidashi {
		position: static;
	    width: 90%;
	    text-align: justify;
	}

	#rookieArchive {
		position: relative;
		margin-top: -50vw;
		padding-top: 50vw;
	}
	#rookieArchive ul li {
		width: 50%;
	    max-width: inherit;
	}


}/*　ここまで max-width 640px　*/


.animated {
	animation-duration: 1s;
	animation-fill-mode: both;
}
.animated.infinite {
	animation-iteration-count: infinite;
}

@keyframes fadeInUp {
  from {
    opacity: 0;
    transform: translate3d(0, 20%, 0);
  }

  to {
    opacity: 1;
    transform: none;
  }
}

.fadeInUp {
  animation-name: fadeInUp;
}


@keyframes fadeOut {
  from {
    opacity: 1;
  }

  to {
    opacity: 0;
  }
}

.fadeOut {
  animation-name: fadeOut;
}