@charset "utf-8";
a * {
	transition: all .3s ease;
    -webkit-transition: all .3s ease;
    -moz-transition: all .3s ease;
}
.mainWidth {
	position: relative;
    width: 100%;
    max-width: 980px;
    margin: 0 auto;
}

.red-ttl {
	font-size: 5rem;
	letter-spacing: .1em;
	line-height: 1.2;
	text-align: center;
	margin-bottom: 40px;
}
.red-ttl span {
	display: inline-block;
	vertical-align: middle;
}
.red-ttl .small {
	font-size: 4rem;
}
/*-------------------------------------------

.mainvideo

-------------------------------------------*/
.mainvideo {
	text-align: center;
/*	background: url(../img/top/main_img.jpg) no-repeat center center;
	background-size: cover;*/
	position: relative;
}

.video-cover {
  max-width: 1920px;
  margin: 0 auto;
  padding-top: 54%;
	overflow: hidden;
	position: relative;
}
@media screen and (min-width: 1980px){
	.video-cover {
		padding-top: 1080px;
	}
}
.mainvideo iframe {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
}
.contents-btn-cover {
	position: fixed;
	bottom: 15px;
	left: 0;
	right: 0;
	margin: auto;
	max-width: 980px;
	z-index: 100;
	width: 100%;
}
.contents-btn {
	float: right;
	margin-right: 10px;
	margin-bottom: -15px;
}
@media screen and (min-width: 679px){
	.contents-btn .pc-none {
		display: none;
	}
}



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

.copy

-------------------------------------------*/
.copy-wrap {
	background: url(../img/top/copy-bg.jpg) no-repeat center bottom;
	background-color: #fff;
	margin: 100px auto;
	padding: 120px 160px 440px;
/*	padding: 66px 160px 280px;
  padding: 66px 160px 360px;*/
	font-size: 2.4rem;
	font-weight: 700;
	line-height: 2.1;
	letter-spacing: .1em;
	opacity: 0;
}
@media screen and (max-width: 768px){
	.copy-wrap {
		font-size: 2rem;
	}
}

.copy-wrap span{
	opacity: 0;
	transition: all 500ms ease;
	-webkit-transition: all 500ms ease;
	-moz-transition: all 500ms ease;
}
.copy-wrap span.copy_on{
	opacity: 1;
}

.copy-wrap p {
	margin-bottom: 50px;
}

.copy-wrap strong {
	font-size: 1.6em;
	line-height: 1.5;
}

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

.banner

-------------------------------------------*/
.banner {
	margin-bottom: 100px;
}
.banner li:first-child {
	margin-right: 8%;
}
.banner li {
	float: left;
	width: 46%;
}
.banner li img {
	width: 100%;
	height: auto;
}
.banner a {
	display: block;
	position: relative;
}

/* hover */
@media screen and (min-width: 737px){
	.banner a::after,
	.banner a::before,
	.banner .inner::after,
	.banner .inner::before {
	  background-color: #a80505;
	  content: '';
	  display: block;
	  position: absolute;
	  z-index: 10;
	  transition: all .3s ease;
	  -webkit-transition: all .3s ease;
	}
	/* 左上へ配置 */
	.banner a::after {
	    height: 6px;
	    left: -6px;
	    top: -6px;
	    width: 0px;
	}
	/* 右下へ配置 */
	.banner a::before {
	  bottom: -6px;
	  height: 6px;
	  right: -6px;
	  width: 0px;
	}
	/* 左下へ配置 */
	.banner .inner::after {
	  bottom: -6px;
	  height: 0px;
	  left: -6px;
	  width: 6px;
	}
	/* 右下へ配置 */
	.banner .inner::before {
	  height: 0px;
	  right: -6px;
	  top: -6px;
	  width: 6px;
	}

	.banner a:hover {
		opacity: 1;
	}
	.banner a:hover::after,
	.banner a:hover::before {
	  width: 100%;
	  width: calc(100% + 6px);
	}
	.banner a:hover .inner::after,
	.banner a:hover .inner::before {
	  height: 100%;
	  height: calc(100% + 6px);
	}
}
/*-------------------------------------------

.voicesp-wrap

-------------------------------------------*/
.item {
	width: 100%;
	height: 280px;
	position: relative;
	margin-bottom: 70px;
}
.item a {
	display: block;
	height: 100%;
}
.item a::before {
	content: "";
	width: 100%;
	height: 100%;
	position: absolute;
	top: 0;
	left: 0;
	transition: inherit;
    -webkit-transition: inherit;
    -moz-transition: inherit;
}
.item-inner {
	position: absolute;
	top: 50%;
	right: 0;
	-webkit-transform: translateY(-50%);
    transform: translateY(-50%);
    padding: 25px 4%;
    width: 53%;
    color: #fff;
    letter-spacing: .2em;
    z-index: 1;
}
.voicesp-wrap > .item:nth-child(odd) .item-inner {
	left: auto;
	right: 0;
}

.item-inner .position {
	font-size: 1.7rem;
	margin-bottom: 20px;
}
.item-inner h3 {
	font-size: 2.7rem;
	font-weight: 500;
	line-height: 1.3;
	margin-bottom: 20px;
}
.item04 .item-inner h3 {
	letter-spacing: 0;
}
.item-inner .row > p {
	font-size: 1.5rem;
}
.item-inner .name {
	float: left;
}
.item-inner .link {
	background: url(../img/top/arrow.png) no-repeat center left;
	float: right;
	padding-left: 20px;
}

/* img */
/* .item01 { background: url(../img/top/voice_sp01.jpg) no-repeat center top; } */
.item02 {	background: url(../img/top/voice_sp02.jpg) no-repeat center top; }
.item03 {	background: url(../img/top/voice_sp03.jpg) no-repeat center top; }
.item04 {	background: url(../img/top/voice_sp04.jpg) no-repeat center top; }

/*
.item01 .item-inner, .item03 .item-inner {
	left: -60px !important;
	opacity: 0;
	transition: all 1s ease;
}
*/

/* 奇数要素は赤四角が左-60pxからスライドイン */
.item03 .item-inner {
	left: -60px !important;
	opacity: 0;
	transition: all 1s ease;
}

/* 偶数要素は赤四角が右-60pxからスライドイン */
.item02 .item-inner, .item04 .item-inner {
	right: -60px !important;
	opacity: 0;
	transition: all 1s ease;
}
.item01.effect .item-inner, .item03.effect .item-inner {
	left: 0 !important;
	opacity: 1;
}
.item02.effect .item-inner, .item04.effect .item-inner {
	right: 0 !important;
	opacity: 1;
}


/* hover */
.item a:hover {
	opacity: 1;
}

.item .hoverimg {
	opacity: 0;
	position: absolute;
	right: 10%;
	bottom: 0;
}

/* スペシャルインタビューマウスオーバーイメージの左右指定 掲載数に応じ偶数/奇数切替要 */
  .voicesp-wrap > .item:nth-child(odd) .hoverimg {
/* .voicesp-wrap > .item:nth-child(even) .hoverimg { */
	right: auto;
	left: 10%;
}

.item a:hover .hoverimg {
	opacity: 1;
/*	transition: opacity .5s ease-in;*/
	transition: opacity .2s ease-in;
}

.item a:hover::before {
	content: "";
	background: #000;
	opacity: 0.8;
}


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

voice-cat-list

-------------------------------------------*/
.nomarR {
	margin-right: 0 !important;
}

.voice-cat-list {
	margin-bottom: 100px;
}
.voice-cat-list .cate-ttl {
	text-align: center;
	color: #fff;
	font-weight: 500;
	background: #000;
	letter-spacing: .1em;
	font-size: 1.6rem;
	padding: 10px 20px;
	margin-bottom: 16px;
}

.voice-cat-list > .cateL {
	float: left;
	/*width: 12.755%;*/
		width: 15%;
	/*margin-right: 1.8%;*/
	margin-right: 2%;
}
.voice-cat-list > .cateL.w-L {
	/*width: 56.2%;*/
	width: 66%;
}

.cateL ul>li:last-child {
	margin-right: 0;
}

.voice-cat-list a {
	display: block;
	overflow: hidden;
}

.voice-cat-list ul li {
	float: left;
	width: 100%;
    /*max-width: 125px;*/
    /*max-width: 138px;*/
    max-width: 147px;
    /*margin: 0 3% 0 0;*/
    margin: 0 3% 0 0;
    background-color: #000;
    position: relative;
}
.w-L ul li {
	width: 22.6%;

}
.voice-cat-list .cate-name {
	font-size: 1.6rem;
	letter-spacing: .1em;
	color: #fff;
	text-align: center;
	position: absolute;
	top: 50%;
	right: 0;
	left: 0;
	margin: auto;
	-webkit-transform: translateY(-50%);
    transform: translateY(-50%);
    z-index: 1;
}

.voice-cat-list img {
    opacity: 0.8;
}
.voice-cat-list a:hover {
	opacity: 1;
}
@media screen and (min-width: 737px){
	.voice-cat-list a:hover img {
		opacity: 0.5;
		transform: scale(1.1);
		-webkit-transform: scale(1.1);
		-ms-transform: scale(1.1);
	}
}

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

banner02

-------------------------------------------*/
.banner02 {
	margin-bottom: 150px;
}
.banner02 li {
	opacity: 0;
	transition: all 1s ease;
	position: relative;
}
.banner02 li span {
	display: inline-block;
	overflow: hidden;
}
.banner02 li.effect {
	opacity: 1;
}
.banner02 li {
	margin-bottom: 25px;
}
.banner02 li a {
	position: relative;
	display: inline-block;
}
.banner02 li h3 {
	font-size: 4rem;
	letter-spacing: .2em;
	position: absolute;
	top: 50%;
	left: 9%;
	-webkit-transform: translateY(-50%);
    transform: translateY(-50%);
    z-index: 10;
}

@media screen and (min-width: 737px){
	.banner02  a:hover img {
		opacity: 0.5;
		transform: scale(1.1);
		-webkit-transform: scale(1.1);
		-ms-transform: scale(1.1);
	}
}


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

banner03

-------------------------------------------*/
.banner03 {
	margin-bottom: 100px;
	opacity: 0;
	transition: all 1s ease;
}
.banner03.effect {
	opacity: 1;
}
.banner03 li {
	float: left;
	max-width: 252px;
	width: 30%;
	margin-right: 11.4%;
	position: relative;
	padding-bottom: 10px;
}
.banner03 h4 {
	font-size: 1.6rem;
	background: #fff;
	font-weight: 500;
	letter-spacing: .1em;
	padding: 20px;
	text-align: center;
	position: absolute;
	width: 90%;
	left: 0;
	right: 0;
	margin: auto;
	bottom: -10px;
}
.banner03 a {
	display: block;
}
.banner03 li:last-child {
	margin-right: 0;
}
.banner03 span {
	display: block;
	overflow: hidden;
}
@media screen and (min-width: 737px){
	.banner03  a:hover img {
		opacity: 0.5;
		transform: scale(1.1);
		-webkit-transform: scale(1.1);
		-ms-transform: scale(1.1);
	}
}



@media screen and (max-width: 1040px){
	.mainWidth {
		position: relative;
	    width: 100%;
	    max-width: 980px;
	    padding-left: 3% !important;
	    padding-right: 3% !important;
	}

	.copy-wrap {
		padding-left: 10% !important;
	    padding-right: 10% !important;
	    margin-bottom: 100px;
	}



	.item-inner h3 {
		font-size: 2.3rem;
		line-height: 1.5;
	}





	.voice-cat-list .cate-ttl {
	    padding: 12px;
	}
	.voice-cat-list ul li {
	    margin: 0 3.1% 0 0;
	}
	.voice-cat-list .cate-name {
		font-size: 1.3rem;
	}


	.banner02 li{
		text-align: center !important;
	}





	.banner03 li {
		margin-right: 5%;
		max-width: 100%;
	}
	.banner03 img {
		width: 100%;
		height: auto;
	}









}





/*---------------------------------------------------------
	スマホ
---------------------------------------------------------*/
@media screen and (max-width: 680px) ,screen and (max-width: 737px) and (orientation: landscape) {
	.mainWidth {
	    padding-left: 9.375% !important;
	    padding-right: 9.375% !important;
	    max-width: 680px;
	}
	.red-ttl {
		font-size: 2.5rem;
		margin-bottom: 20px;
	}
	.red-ttl span {
		display: block;
	}
	.red-ttl .small {
		font-size: 1.5rem;
	}
	/*-------------------------------------------

	.mainvideo

	-------------------------------------------*/
	.mainvideo {
		text-align: center;
		/*height: 390px;*/
/*		height: 210px;*/
		position: relative;
	}
	.mainvideo video {
		/*height: 100%;*/
/*		height: 210px;*/
/*		position: absolute;
		top: 0;
		bottom: 0;
		left: 0;
		right: 0;
		margin: auto;*/
	}
	.video-cover {
	  max-width: 1920px;
	  margin: 0 auto;
	  padding-top: 54%;
		overflow: hidden;
		position: relative;
	}
	.contents-btn-cover {
		position: fixed;
		bottom: 0;
		left: 0;
		right: 0;
		margin: auto;
		max-width: 980px;
		z-index: 100;
		width: 100%;
	}
	.contents-btn {
		float: right;
		margin-right: 0;
		margin-bottom: -10px;
		max-width: 80px;
	}


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

	.copy

	-------------------------------------------*/
	.copy-wrap {
		/*background: url(../img/top/copy-bg.jpg) no-repeat left 38% bottom;*/
    background: url(../img/top/copy-bg.jpg) no-repeat center bottom / contain;
		background-color: #fff;
		margin: 50px auto;
		padding: 30px 5% 180px;
		font-size: 1.2rem;
		letter-spacing: .08em;
	}

	.copy-wrap p {
		margin-bottom: 25px;
	}

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

	.banner

	-------------------------------------------*/
	.banner {
		margin: 0 auto 50px;
	}
	.banner li:first-child {
		margin-right: 0;
		margin-bottom: 25px;
	}
	.banner li {
		float: none;
		max-width: 100%;
		width: 100%;
		text-align: center;
	}

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

	.voicesp-wrap

	-------------------------------------------*/
	.voicesp-wrap {
		margin-bottom: 75px;
	}
	.item {
		width: 100%;
		height: 150px;
		margin-bottom: 30px;
	}
	.item a {
	}
	.item a::before,
	.item a::after {
		content: "";
		transition: inherit;
	    -webkit-transition: inherit;
	    -moz-transition: inherit;
	}
	.item-inner {
		position: absolute;
		top: 50%;
		right: 0;
		-webkit-transform: translateY(-50%);
	    transform: translateY(-50%);
	    padding: 15px 5%;
	    width: 45%;
	    color: #fff;
	    letter-spacing: .2em;
	    z-index: 1;
	}

	.voicesp-wrap > .item:nth-child(odd) .item-inner { /* Original:even　VOICE SPの数が奇数の場合はoddにする */
		text-align: right; /* Original:right - 赤枠内部の文字表示位置左右 スマホモードでは画面中央に寄せる（PCモードは左寄せ） */
	}

	.item-inner .position {
		font-size: 1.2rem;
		margin-bottom: 5px;
	}
	.item-inner h3 {
		display: none;
	}
	.item-inner .name {
		float: none;
		font-size: 1.5rem;
	}
	.item-inner .link {
		display: none;
	}

	/* img */ 
/*
	.item01 {
		background: url(../img/top/voice_sp01.jpg) no-repeat right 30% top;
		background-size: cover;
	}
*/
	.item02 {
		background: url(../img/top/voice_sp02.jpg) no-repeat left 30% top; /* left */
		background-size: cover;
	}
	.item03 {
		background: url(../img/top/voice_sp03.jpg) no-repeat right 30% top; /* right */
		background-size: cover;
	}
	.item04 {
		background: url(../img/top/voice_sp04.jpg) no-repeat left 30% top; /* left */
		background-size: cover;
	}
	/* hover */
	.item a:hover {
	}

	.item .hoverimg {
		display: none;
	}
	.voicesp-wrap > .item:nth-child(odd) .hoverimg { /* odd */
	}

	.item a:hover .hoverimg {
		opacity: 1;
		transition: opacity .5s ease-in;
	}

	.item a:hover::before {
		content: "";
		display: none;
	}


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

	voice-cat-list

	-------------------------------------------*/
	.nomarR-sp {
		margin-right: 0 !important;
	}

	.voice-cat-list {
		margin-bottom: 40px;
	}
	.voice-cat-list .cate-ttl {
		font-size: 1.2rem;
		padding: 15px;
		margin-bottom: 10px;
	}

	.voice-cat-list > .cateL {
		float: left;
		width: 47%;
		margin-right: 6%;
		margin-bottom: 20px;
	}
	.voice-cat-list > .cateL.w-L {
		width: 100%;
	}

	.cateL ul>li:last-child {
	}


	.voice-cat-list ul li {
		float: left;
		width: 100%;
	    max-width: 100%;
	    margin: 0 6% 15px 0;
	    background-color: #000;
	    position: relative;
	}
	.w-L ul li {
		width: 47%;
	}
	.w-L ul li:nth-child(even) {
		margin-right: 0;
	}
	.voice-cat-list .cate-name {
		font-size: 1.5rem;
	}
	.voice-cat-list img {
		width: 100%;
		height: auto;
	}

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

	banner02

	-------------------------------------------*/
	.banner02 li{
		margin-bottom: 25px;
	}
	.banner02 li h3 {
		font-size: 4.3vw;
	}


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

	banner03

	-------------------------------------------*/
	.banner03 {
		margin-bottom: 50px;
	}
	.banner03 li {
		float: none;
		max-width: 100%;
		width: 100%;
		margin: 0 auto 25px;
	}
	.banner03 li:last-child {
		margin-right: auto;
	}
	.banner03 li img {
		width: 100%;
		height: auto;
	}
	.banner03 h4 {
		font-size: 1.5rem;
		padding: 10px;
		color: #fff !important;
		background: #a80505;
		text-align: center;
		width: 60%;
		left: 0;
		right: 0;
		margin: auto;
		top: 50%;
		bottom: auto;
		-webkit-transform: translateY(-50%);
	    transform: translateY(-50%);
	}






}