@charset "utf-8";


.video-top #gnavi #gnv-6 a{
	color: #3ecbff ;
}
/* 動画ギャラリー TOP
------------------------ */
.video-top { background: url(/imgs/home/main_bg.jpg) repeat-x center 3em ;
}
.video-top #contents { background: #FFF ;
}
.video-top .page-title {
	max-width: 960px ;
	margin: 0 auto 3em;
	position: relative ;
	overflow: hidden ;
}
.video-top .page-title .copy-clm {
	color: #FFF ;
	left: 30px ;
	position: absolute ;
	top: 42px ;
	width: 450px ;
}
.video-top .page-title .main-title {
	color: #FFF ;
	font-weight: normal ;
	font-size: 30px ;
	line-height: 1.2 ;
	padding-bottom: 0.75em;
}
.video-top .clm h2 {
	color: #3165b2 ;
	font-weight: normal ;
	font-size: 24px ;
	padding-bottom: 0.25em ;
}
.video-top .inner {
	margin-bottom: 3em ;
}
.video-top .bg {
	margin-bottom: 3em ;
	padding-top: 1em ;
}
.video-top .last-clm {
	margin-bottom: -7em ;
}
.video-top .video-list li {
	position: relative ;
	margin-bottom: 2em ;
}
.video-top .video-list li a {
	background: #ddeefa ;
	color: #313131 ;
	position: relative ;
	padding-bottom: 1em ;
	overflow: hidden ;
}
.video-top .video-list li .wrap {
	background: #ddeefa ;
	display: block ;
	padding-bottom: 0.5em ;
}
.video-top .video-list li .thumb {
	margin-bottom: 0.5em ;
	position: relative ;
}
.video-top .video-list li .thumbnail {
}
.video-top .video-list li a:hover .title {
	color: #FFF ;
}
.video-top .video-list li .icon-new {
	margin-top: 4.25em ;
}
.video-top .video-list a:hover {
	text-decoration: none ;
	color: #008efc ;
}
.video-top .video-list .copy {
	display: block ;
}
.video-top .video-list .icon {
    background: rgba(0, 0, 0, 0) url("/imgs/common/icon_play.png") no-repeat scroll left top;
    height: 0;
    margin: -19px 0 0 -19px;
    overflow: hidden;
    padding-top: 38px;
    position: absolute;
    left: 50%;
    top: 50%;
    width: 38px;
    z-index: 2;
}
.video-top .video-list a:hover .icon {
	background-position: left -38px ;
}
.video-top .video-list .photo {
	display: block ;
	overflow: hidden ;
	position: relative ;
	margin-bottom: 0.5em ;
}
.video-top .video-list .photo img {
	margin: -10.5% 0 -10% ;
}
.video-top .clm p {
	padding-bottom: 1.5em ;
}
.video-top .clm p.button {
	text-align: center ;
}
.video-top .clm p.button a {
	color: #304c77 ;
	border: 1px solid #476086 ;
	font-size: 0.93em ;

	display: inline-block ;
	line-height: 1.4 ;
	position: relative ;
	padding: 0.6em 3.5em 0.6em 1.5em ;
	text-align: left ;
	box-sizing: border-box ;
}
.video-top .clm p.button a:hover {
	text-decoration:  none ;
	opacity: 0.8 ;
}
.video-top .clm p.button a:after {
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	right: 1.25em;
	font-size: 1.25em;
}

.video-top .clm .arw {
	display: block ;
	padding: 0 5% ;
}
.video-top .clm .more {
	box-sizing: border-box;
	padding: 0 5% 0 2.7% ;
}

/* 水中映像 */
.video-top .video-list li .icon-new {
	margin-top: 0 ;
	font-size: 13px ;
	top: 2% ;
	left: 0.5% ;
}
.title01 {
    color: #252525;
    border-bottom: 1px solid #0095ff;
    font-weight: normal;
    line-height: 1.2;
    margin-bottom: 1.5em;
}
.movie-clms .movie-clm {
    width: 100%;
	padding-bottom: 4em;
}
.movie-clm .movie {
    position: relative;
    width: 100%;
    padding-top: 56.25%;
}
.movie-clm .movie iframe {
    position: absolute;
    top: 0;
    right: 0;
    width: 100% !important;
    height: 100% !important;
}
.movie-clm .movie-navi {
	padding-bottom: 2em ;
}
.movie-clm .movie-navi li {
	width: 13.2% ;
	margin-right: 1.25% ;
}
.movie-clm .movie-navi li:nth-child(5n){
	margin-right: 1.25% ;
}
.movie-clm .movie-navi li:nth-child(7n){
	margin-right: 0 ;
}
.movie-navi {
    width: 100%;
	padding-bottom: 3em;
}
.movie-navi ul{
    display: flex;
    flex-wrap: wrap;
}
.movie-navi li {
    background-color: #eeeeee;
	width: 19%;
	margin-right: 1.25%;
	margin-bottom: 1.0em;
}
.movie-navi li:nth-child(5n){
		margin-right: 0;
}
.movie-navi a {
    box-sizing: border-box;
    display: block;
    line-height: 1.4;
	position: relative;
	height: 100%;
}
.movie-navi .photo {
    width: 100%;
    overflow: hidden;
	position: relative;
}
.movie-navi a .copy {
	padding: 0.25em 0.5em;
	display: block;
	color: #000;
}
.movie-navi a img {
	display: block;
	margin: -10% 0;
	max-width: 100%;
	vertical-align: top;
}
.movie-clms .caption .arw {
	display: block;
	padding: 1em 0 0.25em;
	font-size: 18px;
}
.movie-navi .icon-new .name{
	font-size: 12px;
}
.movie-navi .icon-new {
	position: absolute;
	top: 0px;
	left: 0px;
	background: #ec6c00;
	color: #ec6c00;
	display: inline-block;
	display: inline;
	width: 2.5em;
	height: 1.2em;
	-webkit-border-radius: 0;
	-moz-border-radius: 0;
	border-radius: 0;
}
.movie-navi a.active {
	background: #6ab8ef ;
}
.movie-navi a.active .copy{
	color: #ffffff;
}
.movie-navi .uw-all-list {
	display: none ;
}
#underwater-video{
	padding-top: 1em;
}
@keyframes fadeIn {
	from {
		opacity:0;
	}
	to {
		opacity:1;
	}
}

.movie-navi a:hover {
  opacity: 1;
  -webkit-animation: navi-flash 0.4s;
  animation: navi-flash 0.4s;
  text-decoration: none;
}
@-webkit-keyframes navi-flash {
  0% {
    opacity: .4;
	background: #ddeefa; 
  }
  100% {
    opacity: 1;
  }
}
@keyframes navi-flash {
  0% {
    opacity: .4;
	background: #ddeefa; 
  }
  100% {
    opacity: 1;
  }
}

/* スマホサイズ用 */
@media screen and (max-width: 960px) {
	.mechanism-detail .page-title .cat-title,
	.mechanism-detail .page-title .main-title,
	.writer-clm .writer-title h2 {
		width: 95% ;
		margin-left: auto;
		margin-right: auto;
	}
}
@media screen and (max-width: 920px) {
	.video-top .page-title .copy-clm {
		top: 24px ;
	}
	.video-top .page-title .main-title {
		padding-bottom: 0.25em ;
	}

}
@media screen and (max-width: 870px) {
	.video-top { background: none ;
	}
	.video-top .page-title .main-title { width: 80% ;
	}
	.video-top .new-bnr .copy-clm {
		padding: 0 1em 0 0;
		line-height: 1.4 ;
	}
	.video-top .new-bnr .title { margin-bottom: 0.25em ;
	}
}
@media screen and (max-width: 800px) {
	.video-top .page-title .copy-clm {
		left: 5% ;
		margin: -9em 0 0;
		padding-bottom: 2em ;
		position: relative ;
		top: 0 ;
		width: auto ;
	}

	.video-top .sakana-list li { width: 33.3% ;
	}
	.video-top .sakana-list .thumbnail { height: auto ;
	}
	.video-top .sakana-list .thumbnail img { margin-top: 0 !important ;
	}
	.mechanism-detail .bodycopy-clm .fishfinder-img { max-width: 100% ;
	}
}
@media screen and (max-width: 700px) {
	.video-top .page-title > img {
		width: 120% ;
		max-width: 120% ;
	}
	.newall-clm li { margin-bottom: 0.5em ;
	}
}

@media screen and (max-width: 680px) {
	.mechanism-detail .bodycopy-clm .clm.bg h2 {
		font-size: 18px ;
	}
	.video-top .page-title .copy-clm .forPC {
		display: inline;
	}
	.video-top .video-list li img {
		padding-bottom: 0.25em ;
		width: 100% ;
	}
	.video-top .video-list li strong {
		background: none ;
		position: relative ;
	}
	.video-top .video-list {
		font-size: 100% ;
	}
	/* 水中映像 */
	.movie-clms .movie-clm,
	.movie-navi {
		float: none ;
		width: 100% ;
	}
	.movie-clms .movie-clm {
		padding-bottom: 2em ;
	}
	.movie-clm .movie-navi {
		padding-bottom: 2em ;
	}
	.movie-clm .movie-navi ul {
		padding-bottom: 0 ;
	}
	.movie-clm .movie-navi li,
	.movie-clm .movie-navi li:nth-child(3n),
	.movie-clm .movie-navi li:nth-child(5n),
	.movie-clm .movie-navi li:nth-child(7n) {
		width: 24% ;
		margin-right: 1.33% ;
	}
	.movie-clm .movie-navi li:nth-child(4n){
		margin-right: 0 ;
	}
	.movie-navi ul {
		width: 100% ;
		padding-bottom: 50px ;
		display: flex;
		flex-wrap: wrap;
	}
	.movie-navi li,
	.movie-navi li:nth-child(5n){
		width: 32% ;
		margin-right: 2%;
	}
	.movie-navi a {
		width: 100% ;
	}
	.movie-navi .photo {
		width: 100% ;
	}
	.movie-navi li:nth-child(3n){
		margin-right: 0;
	}

}
@media screen and (max-width: 580px) {
	.video-top .page-title .copy-clm {
		margin-top: -8em;
	}
	.video-top .page-title .main-title {
		font-size: 24px ;
		width: 50% ;
		line-height: 1.2 ;
	}
	.video-top .page-title .copy {
		position: relative ;
		color: #FFF ;
	}
	.mechanism-detail .page-title .cat-title { font-size: 14px ;
	}
	.mechanism-detail .page-title .main-title { font-size: 21px ;
	}
	.mechanism-detail .bodycopy-clm .photo-clm {
		float: none ;
		padding: 0 0 1em ;
	}
	.mechanism-detail .bodycopy-clm .copy-clm,
	.mechanism-detail .bodycopy-clm .photo,
	.mechanism-detail.page1 .bodycopy-clm .bg .photo,
	.mechanism-detail.page1 .bodycopy-clm .bg .copy-clm,
	.mechanism-detail.page4 .bodycopy-clm .bg1 .photo,
	.mechanism-detail.page4 .bodycopy-clm .bg2 .photo,
	.mechanism-detail.page4 .bodycopy-clm .bg1 .copy-clm,
	.mechanism-detail.page4 .bodycopy-clm .bg2 .copy-clm {
		float: none ;
		width: 100% ;
		max-width: none ;
	}
	.mechanism-detail .bodycopy-clm .photo p {
		background: none ;
	}
}
@media screen and (max-width: 500px) {
	.video-top .page-title .copy-clm {
		margin: -6.75em 0 0;
		width: 90% ;
	}
	.video-top .page-title .main-title {
		font-size: 21px;
		width: auto ;
	}
	.mechanism-detail .newall-clm .thumbnail {
		width: 30% ;
		float: right ;
	}
	.mechanism-detail .newall-clm a {
		background: #ddeefa ;
	}
	.mechanism-detail .newall-clm a .title {
		bottom: none ;
		background: none ;
		color: #008efc ;
		position: relative ;
		padding-left: 0.5em ;
	}
	
}
@media screen and (max-width: 400px) {
	.video-top .page-title .copy-clm .forPC {
		display: none;
	}
	.video-top .page-title .copy-clm {
		margin: -4em 0 0;
	}
	.video-top .page-title .copy {
		margin-top: 4em ;
		position: relative ;
		color: #313131 ;
	}
	.video-top .clm p.button {
		text-align:  center ;
	}
	.video-top .clm p.button a {
		max-width: 90% ;
		padding: 0.5em 1.5em 0.5em 1em ;

	}
	.video-top .clm p.button a::after {
		right: 0.5em ;
	}
	.movie-clm .movie-navi li,
	.movie-clm .movie-navi li:nth-child(3n),
	.movie-clm .movie-navi li:nth-child(5n),
	.movie-clm .movie-navi li:nth-child(4n),
	.movie-clm .movie-navi li:nth-child(7n) {
		width: 32% ;
		margin-right: 2%;
	}
	.movie-clm .movie-navi li:nth-child(3n) {
		margin-right: 0 ;
	}

}
@media screen and (max-width: 350px) {
	.video-top .page-title .copy-clm {
		margin: -3em 0 -2em;
	}
	.video-top .page-title .copy {
		margin-top: 3em ;
	}

}

/* スマホサイズ用 */