@charset "utf-8";
@import url(https://cdn.jsdelivr.net/npm/yakuhanjp@3.0.0/dist/css/yakuhanjp.min.css);
@import url(https://cdn.jsdelivr.net/npm/yakuhanjp@3.0.0/dist/css/yakuhanmp.min.css);
@import url('https://fonts.googleapis.com/earlyaccess/notosansjapanese.css');
@import url('https://fonts.googleapis.com/css?family=Noto+Serif+JP:200,300,400,500,600,700,900&display=swap');
@import url('https://fonts.googleapis.com/css?family=Roboto:100,300,400,500,700,900');

html, body {
  width:100%;
  height:auto;
  min-height:100%;
  background:#005d7a;
	font-size: 15px;
	line-height: 1.75;
	font-family: YakuHanMP, 'Noto Serif JP', "游明朝",YuMincho,"ヒラギノ明朝 ProN W3","Hiragino Mincho ProN","HG明朝E","メイリオ",Meiryo,sans-serif;
  /*font-family: "游明朝",YuMincho,"ヒラギノ明朝 ProN W3","Hiragino Mincho ProN","HG明朝E","メイリオ",Meiryo,sans-serif;*/
}

a,
a img {
  -webkit-transition: 0.5s;
  -moz-transition: 0.5s;
  -o-transition: 0.5s;
  -ms-transition: 0.5s;
  transition: 0.5s;
	outline: none;
}

img {
	display: block;
	width: 100%;
}

.pc {
	display: block;
}
.sp {
	display: none;
}

@media only screen and (max-width:1000px) {
	.pc {
		display: none;
	}
	.sp {
		display: block;
	}
}



.wrapper {
	position: relative;
  width:100%;
  min-height:100vh;
	z-index: 0;
}

.inner {
	width: 94%;
	min-width: 1000px;
	margin: 0 auto;
	padding: 40px 0 60px;
}

@media only screen and (max-width:1000px) {
	.inner {
		width: 94%;
		min-width: 94%;
		margin: 0 auto;
		padding: 10px 0 0;
	}
}


.mainvisual {
	position: relative;
	overflow: hidden;
}

.mainvisual h1 {
	position: absolute;
	bottom: 6%;
	left: 21.1%;
	width: 57.8%;
}

.mainvisual h2 {
	position: absolute;
	top: 1.5%;
	left: 1%;
	width: 14.5%;
}

.mainvisual h3 {
	position: absolute;
	top: 18%;
	left: 11.7%;
	width: 3%;
}
.spotify-wrap {
    position: absolute;
    bottom: 5%;
    left: 20px;
    z-index: 1000;
    width: 11%;
}
.filmarks-bnr{
    position: absolute;
    bottom: 35%;
    left: 20px;
    z-index: 1000;
    width: 11%;
    transition: all .5s;
}
.comment-bnr {
    position: absolute;
    bottom: 14%;
    left: 20px;
    z-index: 1000;
    width: 11%;
    transition: all .5s;
}
.bishonen-bnr {
    position: absolute;
    bottom: 15%;
    right: 20px;
    z-index: 1000;
    width: 11%;
    transition: all .5s;
}
.present-bnr {
    position: absolute;
    bottom: 5%;
    right: 20px;
    z-index: 1000;
    width: 11%;
    transition: all .5s;
}
.repeater-bnr {
    position: absolute;
    bottom: 25%;
    right: 20px;
    z-index: 1000;
    width: 11%;
    transition: all .5s;
}
.collabo-bnr {
    position: absolute;
    bottom: 25%;
    right: 20px;
    z-index: 1000;
    width: 11%;
    transition: all .5s;
}
.bddvd-bnr {
    position: absolute;
    bottom: 46%;
    right: 20px;
    z-index: 1000;
    width: 11%;
    transition: all .5s;
}
.filmarks-bnr:hover,
.comment-bnr:hover,
.bishonen-bnr:hover,
.present-bnr:hover,
.repeater-bnr:hover,
.collabo-bnr:hover{
    opacity: 0.8;
}
@media only screen and (max-width:1000px) {
	.mainvisual{
		text-align: center;
	}
	.mainvisual h1 {
		bottom: 45%;
		left: -3.75%;
		width: 105%;
	}
	.mainvisual h2 {
		top: 5%;
		left: 72%;
		width: 25.5%;
	}

	.mainvisual h3 {
		top: 5%;
		left: 3.5%;
		width: 4.25%;
	}
	.spotify-wrap {
		position: relative;
		left: auto;
		width: 230px;
		margin: 30px auto ;
	}
	.filmarks-bnr,
	.comment-bnr,
	.bishonen-bnr,
	.present-bnr,
    .repeater-bnr,
	.collabo-bnr,
	.bddvd-bnr{
		position: relative;
		left: auto;
		right: auto;
		width: calc(100% / 3 - 20px);
		margin: 5px;
		display: inline-block;
	}
}
@media only screen and (max-width:380px) {
    /*.comment-bnr {
        margin-top: 100px;
    }*/
}

.content {
	position: relative;
}

.content h2 {
	width: 53.2%;
	margin: 0 auto;
}

.content h3 {
	width: 53.0%;
	margin: 6% auto 0;
}

.content h4 {
	width: 49.3%;
	margin: 2.5% auto;
}

.menu {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	margin: 7% 0 0;
	float: none;
}

.menu a {
	position: relative;
	display: block;
	width: 250px;
	margin: 0 2% 2%;
	padding: 0.5em 1.5em;
	font-family: 'Roboto', sans-serif;
	font-weight: 900;
	font-style: normal;
	font-size: 
		17px;
	text-align: center;
	color: #fff;
	text-decoration: none;
	letter-spacing: -0.01em;
	border: 1px solid #fff;
	overflow: hidden;
	-webkit-transition: border-color 0.3s, color 0.3s;
	transition: border-color 0.3s, color 0.3s;
	-webkit-transition-timing-function: cubic-bezier(0.2, 1, 0.3, 1);
	transition-timing-function: cubic-bezier(0.2, 1, 0.3, 1);
}
.menu a::before {
	content: '';
	position: absolute;
	top: 0;
	left: 0;
	width: 150%;
	height: 100%;
	background: #fccf00;
	z-index: -1;
	-webkit-transform: rotate3d(0, 0, 1, -45deg) translate3d(0, -3em, 0);
	transform: rotate3d(0, 0, 1, -45deg) translate3d(0, -3em, 0);
	-webkit-transform-origin: 0% 100%;
	transform-origin: 0% 100%;
	-webkit-transition: -webkit-transform 0.3s, opacity 0.3s, background-color 0.3s;
	transition: transform 0.3s, opacity 0.3s, background-color 0.3s;
}
.menu a:hover {
	color: #0a2d4b;
	border-color: #fccf00;
}
.menu a:hover::before {
	opacity: 1;
	background-color: #fccf00;
	-webkit-transform: rotate3d(0, 0, 1, 0deg);
	transform: rotate3d(0, 0, 1, 0deg);
	-webkit-transition-timing-function: cubic-bezier(0.2, 1, 0.3, 1);
	transition-timing-function: cubic-bezier(0.2, 1, 0.3, 1);
}

@media only screen and (max-width:1000px) {
	.content h2 {
		width: 38.6%;
	}

	.content h3 {
		width: 100%;
		margin: 15% auto 6%;
	}

	.content h4 {
		width: 100%;
		margin: 4% auto;
	}
	
	.mainvisual .menu {
		margin: 12% auto 15%;
	}
	
	.menu {
		margin: 10% auto 15%;
	}
}

@media only screen and (max-width:600px) {
	.menu a {
		width: 44%;
		font-size: 3.2vw;
    	letter-spacing: normal;
	}
}
.tieup{
	padding: 0;
	margin: 50px auto;
	text-align: center;
	letter-spacing: -0.4em;
}
.tieup li{
	display: inline-block;
	vertical-align: top;
	width: calc(100% / 4 - 20px);
	max-width: 200px;
	margin: 0 10px 10px;
}

@media only screen and (max-width:600px) {
	.tieup li{
		width: calc(100% / 2 - 20px);
	}
}
/*-----------------------------------------
** streaming-logo
-----------------------------------------*/
#streaming{
	padding:50px 0 30px;
	color: #fff;
}
#streaming > p{
	font-weight: bold;
	text-align: center;
	font-size: 150%;
}
.streaming-logo{
	padding: 0;
	letter-spacing: -.4em;
	text-align: center;
	width: 90%;
	margin: 0 auto 50px;
	display: block;
}
.streaming-logo li{
    margin: 0.8% .5% 0;
    padding: 0;
    width: 13%;
	display:inline-block;
	list-style:none;
	letter-spacing: normal;
	border: none;
}
.streaming-logo li a{
	margin:0;
	padding: 5px 0;
	width:100%;
	display:block;
	border:#ddd 1px solid;
	text-align:center;
	background:#fff;
    border-radius: 6px;
    -webkit-border-radius: 6px;
    -moz-border-radius: 6px;
}
.streaming-logo p{
	letter-spacing: normal;
	margin-bottom: 0;
	font-size: 80%;
}
.streaming-logo .right{
	text-align: right;
}
.streaming-logo .left{
	text-align: left;
}

@media screen and (max-width:640px) {
	.streaming-logo li{
		width:49%;
		margin: 1.8% 1% 0 0;
		padding: 0;
		display:inline-block;
		list-style:none;
		letter-spacing: normal;
	}
	.streaming-logo li a{
		margin:0;
		padding: 10px 0;
		width:100%;
		display:block;
		border:#ddd 1px solid;
		text-align:center;
		background:#fff;
		border-radius: 6px;
		-webkit-border-radius: 6px;
		-moz-border-radius: 6px;
	}
	.streaming-logo p{
		letter-spacing: normal;
		margin-top: 1em;
	}
}

/*-----------------------------------------
** Cannes
-----------------------------------------*/
.cannes{
	background: url("../img/top/cannes_bg.jpg") no-repeat center center;
	background-size: cover;
	background-attachment: fixed;
	padding: 15% 0;
}
.cannes ._logo{
	width: 30%;
	margin: 0 auto 7%;
}
.cannes ._text{
	width: 57%;
	margin: 0 auto;
}
@media (max-width: 640px) {
	.cannes{
		padding: 25% 0;
		background-attachment:inherit;
	}
	.cannes ._logo{
		width: 80%;
		margin: 0 auto 10%;
	}
	.cannes ._text{
		width: 80%;
		margin: 0 auto;
	}
}
/*-----------------------------------------
** introduction
-----------------------------------------*/
.intro{
	background: url("../img/top/intro_bg.jpg") repeat center center;
	padding: 12% 0;
	color: #fff;
}
.intro h2{
	width: 64%;
	margin: 0 auto;
}
.intro-cont{
	width: 76%;
	margin: 50px auto;
}
.intro-slider{
	margin: 0 auto;
	position: relative;
}
.intro-slider{
	margin: 0 auto;
	position: relative;
}
.intro h3{
	font-size: 22px;
	font-weight: 600;
	letter-spacing: 0.05em;
	margin: 20px 0;
}
.intro h3 p{
	background: rgba(244,104,159,0.6);
	display: inline;
	margin: 5px 0;
}
._intro-txt{
	position: absolute;
	bottom: 20%;
}
._intro-txt > p{
	width: 650px;
	font-family: YakuHanJP,'Noto Sans Japanese', "Hiragino Sans", "Yu Gothic Medium", sans-serif;
}
.slick-slide{
	padding-bottom: 18%;
}
.intro-slide-1{
	background: url("../img/top/intro-slider-1.jpg") no-repeat top center;
	background-size: 90% auto;
}
.intro-slide-2{
	background: url("../img/top/intro-slider-2.jpg") no-repeat top center;
	background-size: 90% auto;
}
.intro-slide-3{
	background: url("../img/top/intro-slider-3.jpg") no-repeat top center;
	background-size: 90% auto;
}
@media (max-width: 640px) {
	.intro{
		padding: 75px 0;
	}
	.intro h2{
		width: 90%;
		margin: 0 auto;
	}
	.intro-cont{
		width: 90%;
		margin: 10% auto;
	}
	.slick-slide{
		padding-bottom: 23%;
		padding-top: 0;
	}
	.intro-slide-1{
		background: url("../img/top/intro-slider-1.jpg") no-repeat bottom center;
		background-size: 100% auto;
	}
	.intro-slide-2{
		background: url("../img/top/intro-slider-2.jpg") no-repeat bottom center;
		background-size: 100% auto;
	}
	.intro-slide-3{
		background: url("../img/top/intro-slider-3.jpg") no-repeat bottom center;
		background-size: 100% auto;
	}
	._intro-txt{
		position: relative;
		bottom: 0;
	}
	._intro-txt > p{
		width: 100%;
	}
	.intro h3{
		font-size: 18px;
		margin-top: 0;
	}
}
/*---------------------------------------------------------------------
* 
* slick
* 
---------------------------------------------------------------------*/
.slick-list {
	margin-bottom: 15px;
	width: 100%;
	margin: 0 auto;
}
.slick-dotted.slick-slider{
	margin:0 0 75px;
}
.slick-prev {
	z-index: 11;
	width: 205px;
	height: 17px;
	left: 10px;
	transition: all .2s;
}
.slick-prev:before {
	content: "";
	background: url("../img/top/arrow-prev.png") no-repeat center center;
	background-size: contain;
	width: 205px;
	height: 17px;
	z-index: 99;
	display: block;
}
.slick-prev:hover {
	left: 0px;
}

.slick-next {
	z-index: 11;
	width: 205px;
	height: 17px;
	right: 10px;
	transition: all .2s;
}
.slick-next:before {
	content: "";
	background: url("../img/top/arrow-next.png") no-repeat center center;
	background-size: contain;
	width: 205px;
	height: 17px;
	z-index: 99;
	display: block;
}
.slick-next:hover {
	right: 0px;
}
.slick-prev,
.slick-next{
    bottom: 10%;
	top: auto;
}
.slick-prev.slick-disabled,
.slick-next.slick-disabled
{
    opacity: 0;
}
.slick-dots {
	position: relative;
	bottom: 0;
	display: block;
	width: 100%;
	padding: 0;
	margin: 10px 0;
	list-style: none;
	text-align: center;
}
.slick-dots li {
	position: relative;
	display: inline-block;
	width: 20px;
	height: 30px;
	margin: 0 5px;
	padding: 0;
	cursor: pointer;
}
.slick-dots li button {
	font-size: 0;
	line-height: 0;
	display: block;
	width: 20px;
	height: 30px;
	padding: 5px;
	cursor: pointer;
	color: transparent;
	border: 0;
	outline: none;
	background: transparent;
}
.slick-dots li button:before {
	font-family: 'slick';
	font-size: 20px;
	line-height: 30px;
	position: absolute;
	top: 0;
	left: 0;
	width: 20px;
	height: 30px;
	content: '●';
	text-align: center;
	opacity: 1;
	color: #fff;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
}
.slick-dots li.slick-active button:before,
.slick-dots li.slick-active button:before{
    opacity: .75;
    color: #fccf00 !important;
}
@media (max-width: 960px) {
	.slick-dotted.slick-slider div img{
		width: 600px;
	}
}
@media (max-width: 640px) {
	.slick-dotted.slick-slider{
		margin-bottom: 30px;
	}
	.slick-dots li button:before {
		font-size: 15px;
	}
	.slick-dotted.slick-slider div img{
		width: 300px;
	}
	.slider:before,
	.slider:after{
		bottom: 30px;
	}
}
/*-----------------------------------------
** photo-slide
-----------------------------------------*/
.photo-slide{
	height: 335px;
	background: url("../img/top/photo-slide.jpg");
	background-size: auto 335px;
	background-repeat-y: no-repeat;
	animation: bgscroll-1 50s linear infinite;
}
@-webkit-keyframes bgscroll-1 {
 0% {background-position: 0 0;}
 100% {background-position: -1642px 0;}
}
@keyframes bgscroll-1 {
 0% {background-position: 0 0;}
 100% {background-position: -1642px 0;}
}
/*-----------------------------------------
** story
-----------------------------------------*/
._story-title{
	background: url("../img/top/story_bg.jpg") no-repeat center center;
	background-size: cover;
	background-attachment: fixed;
	padding-bottom: 50%;
}
._story-cont{
	background: url("../img/top/story2_bg.jpg") no-repeat center center;
	background-size: cover;
	background-attachment: fixed;
	padding: 10%;
}
._story-cont ._inner{
	width: 1000px;
	margin: 0 auto;
}
._story-cont ._text{
	width: 385px;
	margin-left: 10%;
	color: #fff;
	line-height: 2;
}
@media (max-width: 640px) {
	._story-title{
		background: url("../img/top/story_bg.jpg") no-repeat center center;
		background-size: cover;
		background-attachment:inherit;
		padding-bottom: 80%;
	}
	._story-cont{
		background: url("../img/top/story2_bg.jpg") no-repeat right 10% center;
		background-size: cover;
		padding: 75px 10%;
	}
	._story-cont ._text{
		width: 100%;
		margin-left: auto;
	}
}
/*-----------------------------------------
** notes
-----------------------------------------*/
._notes-title{
	background: url("../img/top/notes_bg.jpg") no-repeat center center;
	background-size: cover;
	background-attachment: fixed;
	padding-bottom: 50%;
}
._notes-cont{
	background: url("../img/top/notes2_bg.jpg") no-repeat center center;
	background-size: cover;
	background-attachment: fixed;
	padding: 10%;
}
._notes-cont ._inner{
	width: 1000px;
	margin: 0 auto;
}
._notes-cont ._text{
	width: 400px;
	margin-left: auto;
	margin-right: 50px;
	color: #fff;
	line-height: 2;
}
._notes-cont ._text ul{
	padding: 0;
	list-style: none;
}
._notes-cont ._text ul li{
	border: solid 1px #fff;
	height: 10em;
	width: 100%;
	position: relative;
	margin-bottom: 10px;
	transition: all .5s;
}
._notes-cont ._text ul li p{
	position: absolute;
	left: 10px;
	bottom: 10px;
	font-size: 20px;
}
._notes-cont ._text ul li a{
	display: block;
	width: 100%;
	height: 100%;
	color: #fff;
	z-index: 999;
	position: absolute;
	top: 0;
	left: 0;
}
._notes-cont ._text ul li.notes-1:before{
	background: url("../img/top/notes-1.jpg") no-repeat center right;
	background-size: cover;
	content: "";
	display: block;
	width: 100%;
	height: 100%;
	position: absolute;
	top: 0;
	left: 0;
	opacity: 0;
}
._notes-cont ._text ul li.notes-2:before{
	background: url("../img/top/notes-2.jpg") no-repeat center right;
	background-size: cover;
	content: "";
	display: block;
	width: 100%;
	height: 100%;
	position: absolute;
	top: 0;
	left: 0;
	opacity: 0;
}
._notes-cont ._text ul li.notes-3:before{
	background: url("../img/top/notes-3.jpg") no-repeat center right;
	background-size: cover;
	content: "";
	display: block;
	width: 100%;
	height: 100%;
	position: absolute;
	top: 0;
	left: 0;
	opacity: 0;
}
._notes-cont ._text ul li.notes-1:before,
._notes-cont ._text ul li.notes-2:before,
._notes-cont ._text ul li.notes-3:before{
	transition: all .5s;
}
._notes-cont ._text ul li.notes-1:hover:before,
._notes-cont ._text ul li.notes-2:hover:before,
._notes-cont ._text ul li.notes-3:hover:before{
	opacity: 1;
}
@media (max-width: 640px) {
	._notes-title{
		background: url("../img/top/notes_bg.jpg") no-repeat center center;
		background-size: cover;
		background-attachment:inherit;
		padding-bottom: 80%;
	}
	._notes-cont{
		background: url("../img/top/notes2_bg.jpg") no-repeat center center;
		background-size: cover;
		background-attachment: inherit;
		padding: 10%;
	}
	._notes-cont ._text{
		width: 100%;
		margin-left: auto;
		margin-right: auto;
	}
}
/*-----------------------------------------
** gallery
-----------------------------------------*/
._gallery-title{
	background: url("../img/top/gallery_bg.jpg") no-repeat center center;
	background-size: cover;
	background-attachment: fixed;
	padding-bottom: 50%;
}
.gallery ul{
	padding: 0;
	list-style: none;
	letter-spacing: -.4em;
}
.gallery ul li{
	display: inline-block;
	letter-spacing: normal;
	width: calc(100% / 5);
	overflow: hidden;
	position: relative;
	vertical-align: top;
}
.gallery ul li:after{
	content: "";
	mix-blend-mode: color;
	background: #ff7ba9;
	display: block;
	width: 100%;
	height: 100%;
	position: absolute;
	top: 0;
	left: 0;
	opacity: 0;
	transition: all .5s;
	pointer-events: none;
}
.gallery ul li:hover:after{
	opacity: 1;
}

.gallery ul li img{
	transition: all .5s;
}
.gallery ul li:hover img{
	transform: scale(1.2,1.2);
}
#cboxCurrent{
	display: none !important;
	opacity: 0;
}
@media (max-width: 640px) {
	._gallery-title{
		background: url("../img/top/gallery_bg.jpg") no-repeat center center;
		background-size: cover;
		background-attachment:inherit;
		padding-bottom: 80%;
	}
	.gallery ul li{
		width: calc(100% / 3);
	}
	#cboxPrevious, #cboxNext{
		display: none !important;
	}
}
/*-----------------------------------------
** staff
-----------------------------------------*/
.staff{
	background: url("../img/top/staff_bg.jpg") repeat left top;
	padding: 10% 0;
}
.staff h2{
	width: 23%;
	margin: 0 auto;
}
.staff ul{
	padding: 0;
	margin: 100px auto 0;
	list-style: none;
	text-align: center;
}
.staff ul li{
	text-align: center;
	margin: 50px auto;
	position: relative;
	display: inline-block;
}
.staff ul li ._img{
	width: 200px;
	margin: 0 auto 30px;
	position: relative;
}

.staff ul li ._img:after{
	content: "";
	mix-blend-mode: color;
	background: #3a84b1;
	display: block;
	width: 100%;
	height: 100%;
	position: absolute;
	top: 0;
	left: 0;
	opacity: 0;
	transition: all .5s;
}
.staff ul li:hover ._img:after{
	opacity: 1;
}
@media all and (-ms-high-contrast: none){
	.staff ul li:hover ._img:after{
		opacity: 0.3;
	}
}
.staff ul li a{
	color: #fff;
	text-decoration: none;
	display: block;
}
.staff ul li p{
	font-size: 20px;
	line-height: 1.2;
	transition: all .5s;
	position: relative;
	padding-bottom: 10px;
	display: inline-block;
}
.staff ul li p:after{
	content: "";
	position: absolute;
	bottom: 0;
	left: 0;
	width: 0%;
	height: 2px;
	background: #fff;
	transition: all .5s;
}
.staff ul li:hover p:after{
	width: 100%;
}

.staff ul li span{
	font-size: 15px;
	font-family: YakuHanJP,'Noto Sans Japanese', "Hiragino Sans", "Yu Gothic Medium", sans-serif;
	letter-spacing: 0.1em;
}
@media (max-width: 640px) {
	.staff{
		padding: 75px 0;
	}
	.staff h2{
		width: 35%;
	}
	.staff ul{
		margin: 10% auto 0;
	}
	.staff ul li{
		margin: 0 auto 30px;
	}
}
/*-----------------------------------------
** cast
-----------------------------------------*/
.cast{
	background: url("../img/top/cast_bg.jpg") repeat left top;
	padding: 10% 0;
}
.cast h2{
	width: 20%;
	margin: 0 auto;
}
.cast ul{
	text-align: center;
	margin: 100px auto 0;
}
.cast ul li{
	display: inline-block;
	text-align: center;
	margin: 50px 40px;
	position: relative;
}
.cast ul li ._img{
	margin:0 auto 30px;
	position: relative;
	text-align: center;
}
.cast ul li ._img:after{
	content: "";
	mix-blend-mode: color;
	background: #ff7ba9;
	display: block;
	width: 100%;
	height: 100%;
	position: absolute;
	top: 0;
	left: 0;
	opacity: 0;
	transition: all .5s;
}
.cast ul li ._img:hover:after{
	opacity: 1;
}
@media all and (-ms-high-contrast: none){
	.cast ul li:hover ._img:after{
		opacity: 0.3;
	}
}
.cast ul li:nth-child(even) img{
	height: 234px;
	width: auto;
	margin: 0 auto;
}
.cast ul li:nth-child(odd) img{
	height: 221px;
	width: auto;
	margin: 0 auto;
}
.cast ul li a{
	color: #fff;
	text-decoration: none;
	display: block;
}
.cast ul li p{
	font-size: 20px;
	line-height: 1.2;
	transition: all .5s;
	position: relative;
	padding-bottom: 10px;
	display: inline-block;
}
.cast ul li p:after{
	content: "";
	position: absolute;
	bottom: 0;
	left: 0;
	width: 0%;
	height: 2px;
	background: #fff;
	transition: all .5s;
}
.cast ul li:hover p:after{
	width: 100%;
}
.cast ul li span{
	font-size: 15px;
	font-family: YakuHanJP,'Noto Sans Japanese', "Hiragino Sans", "Yu Gothic Medium", sans-serif;
	letter-spacing: 0.1em;
}
@media (max-width: 640px) {
	.cast{
		padding: 75px 0;
	}
	.cast h2{
		width: 30%;
	}
	.cast ul{
		margin: 10% auto 0;
	}
	.cast ul li{
		margin: 0 auto 20px;
		display: block;
	}
}
/*-----------------------------------------
** footer
-----------------------------------------*/
.footer{
	background: url("../img/top/footer.jpg") no-repeat center center;
	background-size: cover;
	background-attachment: fixed;
	padding: 12% 0;
}

.footer > img{
	width: 	50%;
	max-width: 400px;
	margin: 0 auto;
}

.footer.outro{
	padding:12% 0;
}

.footer.black{
	background: #0a2d4b;
}

@media (max-width: 640px) {
	.footer{
		background-attachment: inherit;
		padding: 20% 0;
	}
	.footer > img{
		width: 70%;
		max-width: 70%;
		margin: 0 auto;
	}
	.footer.outro{
		padding:20% 0;
	}
}
/* ==========================================================================
Footer
========================================================================== */

footer {
	position:relative;
  width:100%;
	margin: 0;
  /*padding: 30px 0 480px 0;*/
  padding: 30px 0 30px 0;
  background-color: #0a2d4b !important;
  box-sizing:border-box;
  overflow-x:hidden;
	z-index:10;
}
footer > .container {
	width:100% !important;
	max-width:100% !important;
	padding:0 !important;
}
footer p {
    color: #c7cacc;
    font-size: 11px;
	text-align:center;
}
footer .col-md-7, footer .col-md-5 {
	width: 100%;
	text-align: center;
}
footer h1 {
	width: 100%;
	margin: 0;
}
footer h2, footer h2 img {
	width: 100%;
	height: auto;
}
footer ul li, footer h1 a {
	opacity: 1;
	-moz-transition: .5s;
	-webkit-transition: .5s;
	-o-transition: .5s;
	-ms-transition: .5s;
	transition: .5s;
}
footer ul li:hover, footer h1 a:hover {
	opacity: 0.7;
}
footer ul.snsnavi {
	width: 100%;
	height: auto;
	margin: 30px 0 0 0;
	text-align: center;
}
footer ul.snsnavi li {
	display: inline-block;
	margin: 0 0 10px;
	padding:  0 5px 5px;	
}
footer ul.corpnavi {
	width: 100%;
	height: auto;
	margin: 30px 0 0 0;
	text-align: center;
}
footer ul.corpnavi li {
	display: inline-block;
	margin: 0;
	padding:  0 5px;	
}

footer ul.corpnavi li a {
	font-size: 11px;
	color: #EFEFEF;
	font-family: "メイリオ", sans-serif;
	text-decoration: none;
}
footer ul.corpnavi li:before {
	content: ">";
	color: #EFEFEF;
	padding: 0 5px 0 0;
}

footer .footer-logo {
	width: 80px;
	height: auto;
	display: block;
	margin: 20px auto 50px;
}
footer .footer-logo img {
	width: 100%;
	height: auto;
}

.white footer {
    background-color: #FFF;
}
.white footer ul.corpnavi li a {
	color: #666;
}
.white footer ul.corpnavi li:before {
	color: #CCC;
}
.white footer p {
	color: #666;
}

/*@media screen and (max-width:768px) {
  .white footer {
    display:none;
  }
}*/

footer ul.snsnavi {
  max-width:900px;
  margin:30px auto 0;
}

.spnav_udcast {
  display:block;
  width:240px !important;
  min-width:240px !important;
  max-width:240px !important;
  height:40px !important;
  max-height:40px !important;
  margin:20px 0 0;
}

.spnav_udcast img {
  display:block;
  width:100% !important;
  height:100% !important;  
}