@charset "utf-8";

/*--------------------------------------------------------------------------------------------------------------
  初期設定
--------------------------------------------------------------------------------------------------------------*/

body {
		-webkit-text-size-adjust: 100%;
	line-height: 1.6;
}

div {
	margin: 0 auto;
}

div,h1,h2,h3,h4,h5,p,li,dl,dt,dd,th,td,article,header,footer,nav,span,a {
		-webkit-box-sizing: border-box;
	box-sizing: border-box;
}

a {
	color: inherit;
	text-decoration: none;
}

img {
	height: auto;
	width: auto;
	max-width: 100%;
	line-height: 100%;
	vertical-align: bottom;
}

em {
	font-style: normal;
}

h2,h3,h4,h5 {
	line-height: 1.6;
	margin: 0;
}

p,li,td,th,dt,dd {
	font-size: 18px;
	line-height: 1.6;
	margin: 0;
	word-wrap: break-word;
}

ul,
ol,
dl {
	padding: 0;
	margin: 0;
}

.cf:after {
	content: "";
	display: block;
	clear: both;
}

.txt a{
	color: #fd0066;
}

.flno{
	float: none !important;
}

.commentBox a{
	color: #fd0066;
}

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

	.pc {
		display: none !important;
	}
	
	p,li,td,th,dt,dd {
		font-size: 12px;
	}

}


/*------------------------------------------
  フォント
------------------------------------------*/

@font-face {
	font-family: "YuGothic M";
	src: local(Yu Gothic Medium);
}

body {
	font-family:"游ゴシック体", YuGothic, "游ゴシック Medium", "YuGothic M", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, sans-serif;
}

.roboto {
	font-family: 'Roboto Condensed', sans-serif;
}


/*------------------------------------------
	ローディング
------------------------------------------*/

#loader-bg {
  display: none;
  position: fixed;
  width: 100%;
  height: 100%;
  top: 0px;
  left: 0px;
  z-index: 1;
	background: #fff;
}

#loader {
  display: none;
	position: absolute;
	top: 0;
	bottom: 0;
	left: 0;
	right: 0;
	margin: auto;
  text-align: center;
  z-index: 2;
}

#loader img {
	width: 80%;
  max-width: 517px;
	position: absolute;
	top: 0;
	bottom: 0;
	left: 0;
	right: 0;
	margin: auto;
	animation: flash 2s infinite linear;
    -webkit-animation: flash 2s infinite linear;
    -moz-animation: flash 2s infinite linear;
}

@keyframes flash {
	0% { opacity: .4; }
	50% { opacity: 1; }
	100% { opacity: .4; }
}
@-webkit-keyframes flash {
	0% { opacity: .4; }
	50% { opacity: 1; }
	100% { opacity: .4; }
}


/*------------------------------------------
  スクロールされたらフェードイン
------------------------------------------*/

.fade-in {
	opacity : 0.1;
	transform : translate(0, 80px);
	transition : all 500ms;
}

.fade-in.scrollin {
	opacity : 1;
	transform : translate(0, 0);
}

@media screen and (max-width: 768px) {
	.fade-in {
		transform : translate(0, 50px);
	}
}


/*------------------------------------------
  枠内にfitするimg
------------------------------------------*/

.imgFitBox img,
.storySubSlider .thumb li img,
.characterList li img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	font-family: 'object-fit: cover; object-position: center;';
}


/*--------------------------------------------------------------------------------------------------------------
  枠
--------------------------------------------------------------------------------------------------------------*/

.inner {
	width: 100%;
	max-width: 960px;
}


@media screen and (max-width: 768px) {
	.inner {
		padding-left: 12px;
		padding-right: 12px;
	}
}


/*--------------------------------------------------------------------------------------------------------------
  header
--------------------------------------------------------------------------------------------------------------*/

.header {
	padding: 10px 0;
	background: url(../img/bg/bg_header01.png) repeat center top;
	background-size: 1280px 1400px;
	position: relative;
		-webkit-animation: bgscroll 50s linear infinite;
	animation: bgscroll 50s linear infinite;
}

	@-webkit-keyframes bgscroll {
	 0% {background-position: 0 0;}
	 100% {background-position: 0 1400px;}
	}
	 
	@keyframes bgscroll {
	 0% {background-position: 0 0;}
	 100% {background-position: 0 1400px;}
	}


.header:before {
	content: "";
	display: block;
	background: url(../img/bg/bg_header02.png) no-repeat center;
	background-size: cover;
	width: 100%;
	height: 275px;
	height: 22vw;
	position: absolute;
	bottom: -2px;
}


/*
	headerLogo
---------------------------*/

.headerLogo {
	width: 60%;
	max-width: 610px;
	margin: 0 auto;
}


/*
	headerTxt01
---------------------------*/

.headerTxt01 {
	position: absolute;
	top: 4px;
	left: 1.7%;
	width: 28%;
	max-width: 320px;
}

/*
	headerTxt011
---------------------------*/

.headerTxt011 {
	position: absolute;
	top: 174px;
	left: 1.7%;
	width: 14%;
	max-width: 200px;
}
.headerTxt0111 {
	position: absolute;
	top: 260px;
	left: 1.7%;
	width: 14%;
	max-width: 200px;
}



/*
	headerTxt02
---------------------------*/

.headerTxt02 {
	position: absolute;
	left: 0;
	bottom: .4%;
	width: 60%;
	max-width: 680px;
}


/*
	MV
---------------------------*/

.headerMv {
	height: 780px;
	margin-top: -100px;
	background: url(../img/img/img_header.png) no-repeat center top;
	background-size: auto 980px;
}


/*
	SNS
---------------------------*/

.headerSNS {
	right: 1.2%;
	bottom: 25%;
	position: absolute;
}

.headerSNS .txt {
	width: 95px;
	height: 16px;
	line-height: 1;
	margin: 0 0 14px auto;
}

.headerSNS .link {
	display: table;
	margin: 0 0 0 auto;
}

.headerSNS .item {
	width: 28px;
	height: 28px;
	float: left;
	margin-left: 10px;
}

.headerSNS .item a {
	display: block;
	height: 100%;
	position: relative;
}

.headerSNS .item img {
	position: absolute;
	top: 0;
	left: 0;
	display: block;
	width: 26px;
	max-width: none;
}

.headerSNS .item a .on {
	opacity: 0;
}


@media screen and (min-width: 769px) and (max-width: 980px) {

	.headerMv {
		margin-top: -8%;
		height: 600px;
		background-size: auto 630px;
	}
	
	.headerSNS {
		bottom: 15%;
	}
	
	.headerTxt02 {
		width: 65%;
	}

}

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

	.header {
		padding: 77px 0 0;
		background-size: 768px 840px;
			-webkit-animation: bgscroll 50s linear infinite;
		animation: bgscroll 50s linear infinite;
		}

		@-webkit-keyframes bgscroll {
		 0% {background-position: 0 0;}
		 100% {background-position: 0 840px;}
		}
		 
		@keyframes bgscroll {
		 0% {background-position: 0 0;}
		 100% {background-position: 0 840px;}
		}
	
	.header:before {
		background-color: #eae6ea;
	}
	
	.headerLogo {
		width: 95%;
		margin-top: 35px;
	}
	
	.headerTxt01 {
		width: 50%;
		left: 13px;
		top: 6px;
	}

	.headerTxt0111 {
		width: 36%;
		left: 13px;
		top: 100px;
	}
	.headerTxt011 {
		width: 36%;
		right: 13px !important;
		left: auto;
		top: 52px;
	}

	.headerTxt02 {
		width: 100%;
		bottom: 0;
	}

	.headerMv {
		margin-top: -8%;
		height: 105vw;
		background-size: 200%;
	}

}


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

	.header {
		background-size: 384px 420px;
			-webkit-animation: bgscroll 30s linear infinite;
		animation: bgscroll 30s linear infinite;
		}

		@-webkit-keyframes bgscroll {
		 0% {background-position: 0 0;}
		 100% {background-position: 0 420px;}
		}
		 
		@keyframes bgscroll {
		 0% {background-position: 0 0;}
		 100% {background-position: 0 420px;}
		}
	
}

/*--------------------------------------------------------------------------------------------------------------
  footer
--------------------------------------------------------------------------------------------------------------*/

.footer {
	text-align: center;
	padding: 40px 10px 30px;
	background: #000;
}

.footer .link {
	display: table;
	margin: 0 auto 40px;
}

.footer .link .item {
	width: 280px;
	float: left;
	text-align: center;
}

.footer .link .item + .item {
	margin-left: 50px;
}

.footerLogo {
	max-width: 170px;
	margin-bottom: 30px;
}

.copyright {
	color: rgba(255,255,255,.5);
	font-size: 10px;
}


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

	.footer {
		padding: 20px 5px;
	}
	
	.footer .link {
		display: block;
		margin-bottom: 20px;
	}
	
	.footer .link .item {
		float: none;
		width: 80%;
		margin: 0 auto 10px !important;
	}
	
	.footerLogo {
		max-width: 110px;
		margin-bottom: 20px;
	}

}


/*--------------------------------------------------------------------------------------------------------------
  nav
--------------------------------------------------------------------------------------------------------------*/

.nav {
	width: 170px;
	position: fixed;
	top: 50px;
	right: -170px;
	opacity: 0;
	z-index: 9997;
}

.nav .item {
	overflow: hidden;
	margin-bottom: 4px;
}

.nav .item a {
	height: 30px;
	display: block;
	position: relative;
}

.nav .item img {
  display: block;
  position: absolute;
		-webkit-transition: all .3s;
  transition: all .3s;
}

.nav .item .off {
		-webkit-transform: rotateX(0deg);
		-moz-transform: rotateX(0deg);
  transform: rotateX(0deg);
		-webkit-transform-origin: 50% 50% -30px;
		-moz-transform-origin: 50% 50% -30px;
  transform-origin: 50% 50% -30px;
}

.nav .item .on {
		-webkit-transform: rotateX(90deg);
		-moz-transform: rotateX(90deg);
  transform: rotateX(90deg);
		-webkit-transform-origin: 50% 50% -30px;
		-moz-transform-origin: 50% 50% -30px;
  transform-origin: 50% 50% -30px;
}

.nav .item .sp {
	display: none !important;
}


@media screen and (min-width: 769px) {

	.nav {
		opacity: 1 !important;
		display: block !important;
	}

}


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

	.nav {
		display: none;
		width: 100%;
		height: 100%;
		top: 0;
		left: 0;
		right: 0;
		bottom: 0;
		overflow-y: scroll;
		background-color: rgba(253,0,95,.9);
		opacity: 1 !important;
	}
	
	.nav::-webkit-scrollbar {
		display: none;
	}
	
	.navInnerWrap {
		display: table;
		width: 100%;
		height: 100%;
	}
	
	.navInner {
		padding-top: 10px;
		display: table-cell;
		vertical-align: middle;
		text-align: center;
	}
	
	.navLogo {
		max-width: 160px;
		margin: 0 auto 10px;
		text-align: center;
	}
	
	.nav .list {
		width: 120px;
		margin: 0 auto 30px;
	}
	
	.nav .item {
		height: 41px;
		text-align: center;
	}
	
	.nav .item .off,
	.nav .item .on {
		display: none !important;
	}
	
	.nav .item .sp {
		display: block !important;
	}
	
	
	/*
		navSNS
	---------------------------*/
	
	.navSNS {
		display: table;
		margin: 0 auto;
	}
	
	.navSNS .txt {
		width: 75px;
		text-align: center;
		margin: 0 auto 10px;
	}
	
	.navSNS .item {
		width: 20px;
		float: left;
		margin: 0 7px;
	}
	
	
	/*
		メニューを開くボタン
	---------------------------*/
	
	.nav_btn {
			-moz-transition: .5s;
			-webkit-transition: .5s;
			-o-transition: .5s;
			-ms-transition: .5s;
		transition: .5s;
		cursor: pointer;
		width: 42px;
		height: 42px;
		top: 0;
		right: 0;
		position: fixed;
		text-align: center;
		background: #000;
		z-index: 9998;
	}
	
	.nav_btn p {
		color: #fff;
		font-size: 10px;
			-webkit-transform: scale(.8);
			-ms-transform: scale(.8);
		transform: scale(.8);
		position: absolute;
		left: 0;
		right: 0;
		bottom: 3px;
		margin: auto;
	}
	
	.nav_btn .closeTxt {
		opacity: 0;
	}
	
	.nav_btn,
	.nav_btn span {
		display: inline-block;
		transition: all .4s;
		box-sizing: border-box;
	}
	
	.nav_btn span {
		position: absolute;
		left: 0;
		right: 0;
		margin: auto;
		width: 14px;
		height: 1px;
		background-color: #fff;
	}
	
	.nav_btn span:nth-of-type(1) {
		top: 8px;
	}
	
	.nav_btn span:nth-of-type(2) {
		top: 13px;
	}
	
	.nav_btn span:nth-of-type(3) {
		top: 18px;
	}
	
	.nav_btn.close {
		background: #fff;
	}
	
	.nav_btn.close span {
		background: #000;
	}
	
	.nav_btn.close .closeTxt {
		opacity: 1;
		color: #000;
	}
	
	.nav_btn.close span:nth-of-type(1) {
			-webkit-transform: translateY(5px) rotate(-45deg);
		transform: translateY(5px) rotate(-45deg);
	}
	
	.nav_btn.close span:nth-of-type(2) {
		left: 50%;
		opacity: 0;
			-webkit-animation: active-menu-bar02 .8s forwards;
		animation: active-menu-bar02 .8s forwards;
	}
	
	.nav_btn.close span:nth-of-type(3) {
			-webkit-transform: translateY(-5px) rotate(45deg);
	transform: translateY(-5px) rotate(45deg);
	}
	
		@-webkit-keyframes active-menu-bar02  {
			100%  {
				height: 0;
			}
		}
		
		@keyframes active-menu-bar02  {
			100%  {
				height: 0;
			}
		}

}


/*--------------------------------------------------------------------------------------------------------------
  main
--------------------------------------------------------------------------------------------------------------*/

.main {
	padding-bottom: 40px;
	position: relative;
}

.mainTtl {
	line-height: 0;
	text-align: center;
	margin: 0 auto 80px;
}

.cmnBox {
	padding-top: 110px;
}

.bgStripe01 {
	background: url(../img/bg/bg_stripe01.png) no-repeat center top;
	background-size: 100% 275px;
}

.bgStripe02 {
	background: #faf7fa url(../img/bg/bg_stripe02.png) no-repeat center top;
	background-size: 100% 275px;
}


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

	.main {
		padding-bottom: 30px;
	}

	.mainTtl {
		height: 22px;
		margin-bottom: 30px;
	}
	
	.mainTtl img {
		max-height: 100%;
		margin-bottom: 30px;
	}

	.cmnBox {
		padding-top: 35px;
	}
	
	.bgStripe01,
	.bgStripe02 {
		background-size: 100% 100px;
	}

}


/*------------------------------------------
 TOPへ戻る
------------------------------------------*/

.retop {
	width: 70px;
	z-index: 9990;
	position: absolute;
	right: 0;
	bottom: 10px;
	display: none;
	background: url(../img/ico/ico_retop_on.png) no-repeat center;
	background-size: contain;
}

.retop.fixed {
	position: fixed;
}


@media screen and (max-width: 768px) {
	.retop {
		width: 35px;
	}
}


/*------------------------------------------
　commentBox 共通（吹き出し）
------------------------------------------*/

.commentBoxWrap {
	position: relative;
}

.imgComment {
	display: block;
}

.commentBox {
	padding: 50px 50px 45px;
	border: 2px solid #040000;
	border-right-width: 3px;
	border-bottom-width: 4px;
	position: relative;
}

.commentBox p {
	line-height: 1.6;
}


/*
	吹き出し形成
---------------------------*/

/* 吹き出し前半 */
.commentBox:before {
	content: "";
	display: block;
	position: absolute;
	border: 2px solid #000;
	border-top: none;
}

/* 吹き出し後半 */
.commentBox:after {
	content: "";
	display: block;
	background: #000;
	position: absolute;
}

.commentBox {
	border-top: none;
}

.commentBox:before {
	height: 40px;
	bottom: 99.5%;
	right: 16px;
		-webkit-transform: skewX(45deg);
		-ms-transform: skewX(45deg);
	transform: skewX(45deg);
}

.commentBox:after {
	height: 2px;
	bottom: 99.5%;
}


	@media screen and (min-width: 769px) {

		/* 吹き出し 左ver (.cBLeft) */
		body .fukiLeft {
			border-top: 2px solid #000;
			border-left: none;
		}
		
		body .fukiLeft:before {
			width: 40px;
			height: 100px;
			top: 19px;
			right: 99.5%;
				-webkit-transform: skewY(-45deg);
				-ms-transform: skewY(-45deg);
			transform: skewY(-45deg);
			border-left: none;
			border-right: 2px solid #000;
		}
		
		body .fukiLeft:after {
			width: 2px;
			height: 60%;
			height: calc(100% - 140px);
			left: 0;
			bottom: 0;
		}
		
	}


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

	.commentBox {
		padding: 18px 20px;
		border-width: 1px;
		border-right-width: 2px;
		border-bottom-width: 2px;
	}
	
	/*
		吹き出し形成（全部上向き）
		※各セクションで微調節
	---------------------------*/
	
	/* 吹き出し前半 */
	.commentBox:before {
		height: 25px !important;
		top: auto !important;
		bottom: 99.8% !important;
		border-width: 1px !important;
	}
	
	/* 吹き出し後半 */
	.commentBox:after {
		height: 1px !important;
		top: auto !important;
		bottom: 99.8% !important;
	}
	
	.commentBox:before {
		border-right: none;
		border-left: 2px solid #000;
		right: 11px;
		left: auto;
			-webkit-transform: skewX(45deg);
			-ms-transform: skewX(45deg);
		transform: skewX(45deg);
	}
	
	.commentBox:after {
		right: auto;
		left: -1px;
	}

}


/*------------------------------------------
  スライダー　共通
------------------------------------------*/

.sliderWrap {
	margin: 0 auto;
}


/*
	スライダー タブ
---------------------------*/

.thumbnailList {
	display: table;
	text-align: center;
	padding-left: 7px;
	margin: 0 auto 15px;
}

.thumbnail-item {
	cursor: pointer;
	display: inline-block;
	text-align: center;
	font-size: 20px;
	line-height: 1.7;
	padding: 0 15px;
	margin-bottom: 7px;
	background: #fff;
	border: 2px solid #000;
		-webkit-transform: skewX(-15deg);
		-ms-transform: skewX(-15deg);
	transform: skewX(-15deg);
}

.thumbnail-item + .thumbnail-item {
	margin-left: 7px;
}

.thumbnail-item span {
	display: block;
		-webkit-transform: skewX(15deg);
		-ms-transform: skewX(15deg);
	transform: skewX(15deg);
}

.thumbnail-current {
	color: #fff;
	background: #fd0066;
	border-color: #fd0066;
}


/*
	スライダー中身
---------------------------*/

.sliderContents {
	max-width: 1020px;
	position: relative;
}


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

	.sliderContents {
		width: 80%;
		padding: 0 20px;
	}
	

}


@media screen and (max-width: 768px) {
	
	.sliderWrap {
		padding: 0 12px !important;
	}

	.thumbnailList {
		padding-left: 0;
		margin-bottom: 80px;
	}
	
	.thumbnail-item {
		font-size: 12px;
	}
	
	.sliderContents {
		width: 100%;
	}

}


/*------------------------------------------
  #introduction
------------------------------------------*/

#introduction {
	text-align: center;
	background: #faf7fa;
}

#introduction .mainTtl {
	margin-bottom: 40px;
}

#introduction .txt {
	margin-bottom: 25px;
}


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

	#introduction {
		padding: 6% 12px 30px;
	}
	
	#introduction .mainTtl {
		margin: 0 auto 20px;
	}

}


/*------------------------------------------
  #story
------------------------------------------*/

#story .slick-prev,
#story .slick-next {
	top: 42%;
}


/*
	スライダー中身
---------------------------*/

.storySub {
	padding: 25px 30px 0;
	position: relative;
}

.storySub .tit {
	font-size: 40px;
	font-weight: bold;
	text-align: center;
	margin-bottom: 30px;
}

.storySub .txt {
	font-size: 16px;
}

/*
	ナンバー
---------------------------*/

.number {
	position: relative;
	color: rgba(253,0,102,.4);
	font-size: 164px;
	font-style: italic;
	font-family: 'Roboto Condensed', sans-serif;
	display: block;
	position: absolute;
	top: -30px;
	left: -5px;
	z-index: 100;
}


/* サムネイル切り替え部分 */

.storySubSlider {
	height: 540px;
	margin: 0 auto 30px;
	overflow: hidden;
}

.storySubSlider .full {
	width: 83%;
	height: 100%;
	float: left;
}

.storySubSlider .thumb {
	width: 17%;
	float: right;
}

.storySubSlider .thumb li {
	cursor: pointer;
	border: 2px solid #000;
	border-bottom: none;
	position: relative;
	height: 20%;
}

.storySubSlider .thumb li:last-of-type {
	border-bottom: 2px solid #000;
}

.storySubSlider .thumb li.active:before {
	content: "";
	display: block;
	width: 100%;
	height: 100%;
	box-shadow: 0 0 0 2px #fff inset;
	background: rgba(253,0,102,.4);
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	margin: auto;
}

.storySubSlider .thumb li.active:after {
	content: "";
	display: block;
	background: url(../img/ico/ico_arrow03.png) no-repeat center;
	background-size: contain;
	width: 18px;
	height: 23px;
	position: absolute;
	right: 100%;
	top: 40px;
}



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

	.storySub {
		padding-left: 0;
		padding-right: 0;
	}
	

}

@media screen and (max-width: 768px) {
	
	.storySub {
		padding: 0;
	}

	.storySub .tit {
		font-size: 20px;
		margin-bottom: 15px;
	}
	
	.storySub .txt {
		font-size: 12px;
	}
	
	.number {
		font-size: 80px;
		top: -28px;
		left: 0;
	}
	
	.storySubSlider {
		height: calc(400 * 100vw / 768);
		margin-bottom: 20px;
	}
	
	.storySubSlider .thumb li.active:after {
		width: 9px;
		height: 11px;
		top: 30%;
	}
	
}


/*------------------------------------------
  #movie
------------------------------------------*/

#movie {
	position: relative;
}

/*
	やれたか〜
---------------------------*/

.imgYareteka {
	display: block;
	position: absolute;
	left: 20px;
	top: 0;
	opacity: 0;
		-webkit-transition: all 0.1s ease-in-out;
		-moz-transition: all 0.1s ease-in-out;
		-o-transition: all 0.1s ease-in-out;
	transition: all 0.1s ease-in-out;
}

.bounce {
	opacity: 1;
	animation: bounce 1s linear;
}

	@-webkit-keyframes bounce {
		from, 20%, 53%, 80%, to {
			-webkit-animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
			animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
			-webkit-transform: translate3d(0,0,0);
			transform: translate3d(0,0,0);
		}
	
		40%, 43% {
			-webkit-animation-timing-function: cubic-bezier(0.755, 0.050, 0.855, 0.060);
			animation-timing-function: cubic-bezier(0.755, 0.050, 0.855, 0.060);
			-webkit-transform: translate3d(0, -12px, 0);
			transform: translate3d(0, -12px, 0);
		}
	
		70% {
			-webkit-animation-timing-function: cubic-bezier(0.755, 0.050, 0.855, 0.060);
			animation-timing-function: cubic-bezier(0.755, 0.050, 0.855, 0.060);
			-webkit-transform: translate3d(0, -8px, 0);
			transform: translate3d(0, -8px, 0);
		}
	
		90% {
			-webkit-transform: translate3d(0,-2px,0);
			transform: translate3d(0,-2px,0);
		}
	}
	
	@keyframes bounce {
		from, 20%, 53%, 80%, to {
			-webkit-animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
			animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
			-webkit-transform: translate3d(0,0,0);
			transform: translate3d(0,0,0);
		}
	
		40%, 43% {
			-webkit-animation-timing-function: cubic-bezier(0.755, 0.050, 0.855, 0.060);
			animation-timing-function: cubic-bezier(0.755, 0.050, 0.855, 0.060);
			-webkit-transform: translate3d(0, -12px, 0);
			transform: translate3d(0, -12px, 0);
		}
	
		70% {
			-webkit-animation-timing-function: cubic-bezier(0.755, 0.050, 0.855, 0.060);
			animation-timing-function: cubic-bezier(0.755, 0.050, 0.855, 0.060);
			-webkit-transform: translate3d(0, -8px, 0);
			transform: translate3d(0, -8px, 0);
		}
	
		90% {
			-webkit-transform: translate3d(0,-2px,0);
			transform: translate3d(0,-2px,0);
		}
	}


#movie .thumbnailList:first-of-type {
	margin-bottom: 8px !important;
}


#movie .slick-prev,
#movie .slick-next {
	top: 290px;
}


/*
	スライダー中身
---------------------------*/

.movieSubWrap {
	max-width: 960px;
}

.movieSub {
	padding-top: 35px;
	position: relative;
}

.movieSub iframe {
	width: 100%;
	height: 540px;
}


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

	#movie .thumbnailList:first-of-type {
		margin-bottom: 0 !important;
	}
	
	.movieSub {
		padding: 0;
	}

	.movieSub iframe {
		height: 240px;
		margin-bottom: 5px;
	}
	
	.movieSub .tit {
		font-size: 12px;
		font-weight: bold;
		text-align: center;
		margin-bottom: 30px;
	}

}


/*------------------------------------------
  #character / characterTop (メインキャスト)
 ------------------------------------------*/

.characterTop {
	margin-bottom: 40px;
}

.characterTop .commentBoxWrap {
	margin-bottom: 80px;
}

.characterTop .commentBox {
	width: 70%;
	margin-top: -110px;
}

/* (n1、n3) */
.characterTop .commentBoxWrap:nth-of-type(1) .commentBox,
.characterTop .commentBoxWrap:nth-of-type(3) .commentBox  {
	float: left;
}

.characterTop .commentBoxWrap:nth-of-type(1) .commentBox:before,
.characterTop .commentBoxWrap:nth-of-type(3) .commentBox:before {
	width: 50%;
	left: 19px;
		-webkit-transform: skewX(-45deg);
		-ms-transform: skewX(-45deg);
	transform: skewX(-45deg);
	border-left: none;
}

.characterTop .commentBoxWrap:nth-of-type(1) .commentBox:after,
.characterTop .commentBoxWrap:nth-of-type(3) .commentBox:after {
	width: 42%;
	right: -3px;
}
	

/* (n2) */
.characterTop .commentBoxWrap:nth-of-type(2) {
	margin-bottom: 40px;
}

.characterTop .commentBoxWrap:nth-of-type(2) .commentBox {
	float: right;
}

.characterTop .commentBoxWrap:nth-of-type(2) .commentBox:before {
	width: 42%;
	right: 18px;
	border-right: none;
}

.characterTop .commentBoxWrap:nth-of-type(2) .commentBox:after {
	width: 50%;
	left: -1px;
		-webkit-transform: skewX(45deg);
		-ms-transform: skewX(45deg);
	transform: skewX(45deg);
}
	

/* (n4) */
.characterTop .commentBoxWrap:nth-of-type(4) .commentBox {
	width: 50%;
	margin: -32% 0 0 auto;
}
.characterTop .commentBoxWrap:nth-of-type(4) .fukiLeft:before{
	height: 40px;
}
.characterTop .commentBoxWrap:nth-of-type(4) .fukiLeft:after{
	height: calc(100% - 80px);
}


@media screen and (max-width: 768px) {
	
	#character .mainTtl {
		margin-bottom: 20px;
	}

	.characterTop .commentBoxWrap {
		margin-bottom: 20px;
	}
	
	.characterTop .imgComment {
		display: block;
		width: 100%;
		margin: 0 auto;
	}
	
	.characterTop .commentBox {
		width: 100%;
		float: none !important;
		margin-top: 10px;
	}
	
	/* (n1、n3) */
	.characterTop .commentBoxWrap:nth-of-type(1) .commentBox:before,
	.characterTop .commentBoxWrap:nth-of-type(3) .commentBox:before {
		width: 17px;
		left: 12px;
		border-right: 1px solid #000;
	}
	
	.characterTop .commentBoxWrap:nth-of-type(1) .commentBox:after,
	.characterTop .commentBoxWrap:nth-of-type(3) .commentBox:after {
		width: calc(100% - 40px);
		left: auto;
		right: -2px;
	}
		
	
	/* (n2) */
	.characterTop .commentBoxWrap:nth-of-type(2) .commentBox:before {
		width: 17px;
		right: 11px;
	}
	
	.characterTop .commentBoxWrap:nth-of-type(2) .commentBox:after {
		width: calc(100% - 40px);
		right: auto;
		left: -1px;
	}
		
	
	/* (n4) */
	.characterTop .commentBoxWrap:nth-of-type(4) .commentBox {
		width: 90%;
		margin: 10px 0 0 auto;
	}
	
	.characterTop .commentBoxWrap:nth-of-type(4) .commentBox:before {
			-webkit-transform: skewX(-45deg);
			-ms-transform: skewX(-45deg);
		transform: skewX(-45deg);
		width: 30%;
		left: 12px;
		border-left: none;
		border-right: 1px solid #000;
	}
	
	.characterTop .commentBoxWrap:nth-of-type(4) .commentBox:after {
		width: 64%;
		left: auto;
		right: -2px;
	}

}


/*------------------------------------------
  #character / characterBtm (ゲスト)
 ------------------------------------------*/

/*
	全体
---------------------------*/

.characterBtm {
	margin-top: 120px;
	padding: 80px 12px;
	background-position: center;
	background-repeat: no-repeat;
	background-size: cover;
}

.characterSubWrap {
	height: 500px;
	max-width: 960px;
	position: relative;
}

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

	.characterSubWrap {
		width: 82%;
		padding: 0 20px;
	}

}

@media screen and (min-width: 769px) {

	.characterBtm .slick-slide .sp {
		display: none !important;
	}

}

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

	.characterBtm {
		padding: 40px 12px;
		margin: 0 auto 20px;
	}

	.characterSubWrap {
		height: auto !important;
		padding-bottom: 130%;
	}

}

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

	.characterSubWrap {
		padding-bottom: 150%;
	}

}

/*
	背景切り替え
---------------------------*/

.characterBtm {
	background-color: #FFD2E4;
}

.characterBtm#bg1 {
	background-image: url(../img/bg/bg_character02.png);
}
.characterBtm#bg2 {
	background-image: url(../img/bg/bg_character03.png);
}
.characterBtm#bg3 {
	background-image: url(../img/bg/bg_character04.png);
}
.characterBtm#bg4 {
	background-image: url(../img/bg/bg_character05.png);
}
.characterBtm#bg5 {
	background-image: url(../img/bg/bg_character06.png);
}
.characterBtm#bg6 {
	background-image: url(../img/bg/bg_character07.png);
}
.characterBtm#bg7 {
	background-image: url(../img/bg/bg_character08.png);
}
.characterBtm#bg8 {
	background-image: url(../img/bg/bg_character09.png);
}


/*
	タブ関連
---------------------------*/

.tab {
	position: absolute;
	width: 100%;
	height: 100%;
	top: 0;
	left: 0;
		-webkit-transition: all 0.3s ease-in-out;
		-moz-transition: all 0.3s ease-in-out;
		-o-transition: all 0.3s ease-in-out;
	transition: all .3s ease-in-out;
}

/* tab pager 上部リスト */
.activeli {
	color: #fff;
	background: #fd0066;
	border-color: #fd0066;
}

/* tab pager 前後ナビ */
.tabNav {
	position: absolute;
	font-size: 0;
	line-height: 0;
	position: absolute;
	display: block;
	width: 72px;
	height: 70px;
	padding: 0;
	 -webkit-transform: translate(0, -50%);
	 -ms-transform: translate(0, -50%);
	transform: translate(0, -50%);
	cursor: pointer;
	color: transparent;
	border: none;
	outline: none;
	background-position: center;
	background-repeat: no-repeat;
	background-size: contain;
	z-index: 300;
	bottom: 32%;
}

.tabPrev {
	left: -10%;
	background-image: url(../img/ico/ico_arrow01.png);
}

.tabNext {
	right: -10%;
	background-image: url(../img/ico/ico_arrow02.png);
}


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

	.tabNav {
		width: 36px;
		height: 35px;
		bottom: auto;
		top: -30px;
	}
	
	.tabPrev {
		left: 0;
	}
	
	.tabNext {
		right: 0;
	}

}


/*
	コンテンツ部分
---------------------------*/

.characterBtm .thumbnailList {
	margin-bottom: 60px;
}

.characterBtm .commentBox {
	width: 50%;
	margin: -29% 0 0 auto;
}

.characterBtm .slick-prev,
.characterBtm .slick-next {
	bottom: 10%;
}


	/* 偶数 */
	.characterBtm .commentBoxWrap:nth-of-type(even) .commentBox {
		float: left;
		border-right: none;
		border-left: 2px solid #000;
	}
			
	.characterBtm .commentBoxWrap:nth-of-type(even) .commentBox:before {
		width: 40px;
		height: 100px;
		top: 19px;
		left: 99.5%;
			-webkit-transform: skewY(45deg);
			-ms-transform: skewY(45deg);
		transform: skewY(45deg);
		border-right: none;
		border-left: 2px solid #000;
	}
			
	.characterBtm .commentBoxWrap:nth-of-type(even) .commentBox:after {
		width: 2px;
		height: 60%;
		height: calc(100% - 140px);
		right: 0;
		left: auto;
		bottom: 0;
	}


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

	.characterBtm .imgComment {
		display: block;
    width: 100%;
	}

	.characterBtm .commentBox {
		width: 90%;
		margin: 10px 0 0 auto;
	}
	
		/* 偶数 */
		.characterBtm .commentBoxWrap:nth-of-type(even) .imgComment {
			margin: 0 0 0 auto;
		}
	
		.characterBtm .commentBoxWrap:nth-of-type(even) .commentBox {
			float: left;
			border-left-width: 1px;
			border-right: 2px solid #000;
		}
	
		.characterBtm .commentBoxWrap:nth-of-type(even) .commentBox:before {
				-webkit-transform: skewX(45deg);
				-ms-transform: skewX(45deg);
			transform: skewX(45deg);
			width: 30%;
			left: auto;
			right: 11px;
			border-right: none;
			border-left: 1px solid #000;
		}
		
		.characterBtm .commentBoxWrap:nth-of-type(even) .commentBox:after {
			width: 63%;
			right: auto;
			left: -2px;
		}
	
		/* 奇数 */
		.characterBtm .commentBoxWrap:nth-of-type(odd) .imgComment {
			margin: 0 auto 0 0;
		}
	
		.characterBtm .commentBoxWrap:nth-of-type(odd) .commentBox {
			float: right;
		}
	
		.characterBtm .commentBoxWrap:nth-of-type(odd) .commentBox:before {
				-webkit-transform: skewX(-45deg);
				-ms-transform: skewX(-45deg);
			transform: skewX(-45deg);
			width: 30%;
			left: 12px;
			border-left: none;
			border-right: 1px solid #000;
		}
		.characterBtm .commentBoxWrap:nth-of-type(odd) .commentBox:after {
			width: 63%;
			left: auto;
			right: 0;
		}
	
}


/*
	コンテンツ内 スライダー用サムネイル（slick dotes)
---------------------------*/

.characterSubWrap .slick-dots {
	z-index: -1;
	opacity: 0;
	visibility: hidden;
}


/*
	下部サムネイル一覧
---------------------------*/

.characterList {
	max-width: 902px;
	margin: 0 auto;
	border: 1px solid #000;
	background: url(../img/img/character/thumbnail/img_thumbnail_none_pc.png) repeat-y center bottom 0;
	background-size: 100% auto;
}

.characterList li {
	float: left;
	width: 10%;
	cursor: pointer;
	background: #fd0066;
	border: 1px solid #000;
}

.characterList li img {
	width: 100%;
}

.characterList li:hover img,
.characterList li.current img {
	opacity: .6;
}


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

	.characterList {
		background-image: url(../img/img/character/thumbnail/img_thumbnail_none_sp.png);
	}
	
	.characterList li {
		width: 20%
	}

}


/*------------------------------------------
  #staff
------------------------------------------*/

/*
	commentBox
---------------------------*/

#staff .commentBoxWrap .imgComment {
	width: 48%;
	max-width: 460px;
	float: left;
}

#staff .commentBox {
	width: 53%;
	max-width: 480px;
	float: right;
}


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

	#staff .commentBoxWrap .imgComment {
		width: 100%;
		max-width: none;
		float: none;
		display: block;
		margin: 0 auto;
	}
	
	#staff .commentBox {
		width: 90%;
		max-width: none;
		float: none;
		margin: -20px 0 0 auto;
	}

	#staff .commentBox:before {
		width: 70px;
	}
	
	#staff .commentBox:after {
		width: 55%;
		width: calc(100% - 97px);
	}
	
}


/*------------------------------------------
  #original
------------------------------------------*/

/*
	commentBox
---------------------------*/

#original .commentBoxWrap {
	margin-bottom: 80px;
}

#original .commentBoxWrap .imgComment {
	width: 48%;
	max-width: 460px;
	float: left;
}

#original .commentBox {
	width: 53%;
	max-width: 480px;
	float: right;
}


/*
	originalLink
---------------------------*/

.originalLink {
	padding: 42px 60px;
	margin: 0 auto;
	background: #faf7fa;
}

.originalLinkLeft {
	width: 63%;
	float: left;
}

.originalLinkLeft img {
	width: 49%;
	max-width: 250px;
}

.originalLinkLeft img:nth-of-type(2) {
	float: right;
}

.originalLinkRight {
	width: 30%;
	float: right;
	padding-top: 28px;
}

.originalLinkRight .txt {
	width: 105px;
	margin-bottom: 25px;
}	

.originalLinkRight .btnLink {
	width: 100%;
	height: 70px;
	display: table;
	text-align: center;
	margin-top: 27px;
}

.originalLinkRight .btnLink a {
	display: table-cell;
	height: 100%;
	vertical-align: middle;
	background: #fff;
	border: 2px solid #000;
	border-bottom-width: 4px;
}

.originalLinkRight .btnLink img {
	margin-left: -12px;
}


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

	#original .commentBoxWrap {
		margin-bottom: 30px;
	}
	
	#original .commentBoxWrap .imgComment {
		width: 100%;
		max-width: none;
		float: none;
		display: block;
		margin: 0 auto;
	}
	
	#original .commentBox {
		width: 90%;
		max-width: none;
		float: none;
		margin: -20px 0 0 auto;
	}

	#original .commentBox:before {
		width: 70px;
	}
	
	#original .commentBox:after {
		width: 55%;
		width: calc(100% - 97px);
	}
	
	.originalLink {
		padding: 25px 12px;
	}
	
	.originalLinkLeft {
		float: none;
		width: 100%;
		max-width: 500px;
		margin: 0 auto 25px;
	}
	
	.originalLinkLeft img {
		width: 48%;
	}
	
	.originalLinkRight {
		float: none;
		padding: 0;
		margin: 0 auto;
		width: 60%;
	}
	
	.originalLinkRight .txt {
		margin-bottom: 0;
	}
	
	.originalLinkRight .txt img {
		width: 70px;
	}
	
	.originalLinkRight .btnLink {
		height: 40px;
		margin-top: 11px;
	}
	
	.originalLinkRight .btnLink img {
		width: 100%;
		max-width: 130px;
		margin-left: -5px;
	}

}


/*------------------------------------------
  #music
------------------------------------------*/

#music {
	background-color: #faf7fa;
}


/*
	commentBox
---------------------------*/

#music .commentBoxWrap .imgComment {
	width: 47%;
	max-width: 460px;
	float: left;
}

#music .nameBox {
	margin-bottom: 25px;
}

#music .nameBox,
#music .commentBox {
	width: 53%;
	max-width: 480px;
	float: right;
}


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

	#music .commentBoxWrap .imgComment {
		width: 100%;
		max-width: none;
		float: none;
		display: block;
		margin: 0 auto 15px;
	}

	#music .nameBox {
		width: 82%;
		float: none;
		max-width: none;
		margin: 0 auto 15px 10px;
	}
	
	#music .commentBox {
		width: 100%;
		max-width: none;
		float: none;
	}

	#music .commentBox:before {
		width: 25px;
	}
	
	#music .commentBox:after {
		width: 55%;
		width: calc(100% - 52px);
	}
	
}


/*------------------------------------------
  #onair
------------------------------------------*/

.onairList {
	margin-bottom: 50px;
}

.onairList .ttl {
	text-align: center;
	margin-bottom: 30px;
}

.onairList .list {
	padding: 14px 20px 18px 0;
	border-bottom: 1px solid #999;
}

.onairList .list .name {
	width: 23%;
	margin-right: 8%;
	float: left;
	text-align: center;
	color: #fd0066;
	font-size: 20px;
}

.onairList .list .txt01 {
	width: 45%;
	margin-right: 6%;
	float: left;
	font-size: 18px;
	padding: 3px 6% 0 0;
}

.onairList .list .txt02 {
	width: 18%;
	float: left;
	font-size: 14px;
	padding-top: 7px;
}

.onairList .list .name,
.onairList .list .txt01 {
	position: relative;
}

.onairList .list .name:before,
.onairList .list .txt01:before {
	content: "";
	display: block;
	width: 2px;
	height: 42px;
	background: #000;
		-webkit-transform: rotate(30deg);
		-ms-transform: rotate(30deg);
	transform: rotate(30deg);
	position: absolute;
	right: 0;
	top: 0;
	margin: auto;
}

.onairList .list .name:before {
	right: -15px;
}


@media screen and (max-width: 768px) {
	
	#onair .mainTtl {
		margin-bottom: 10px;
	}

	.onairList {
		margin-bottom: 10px;
	}
	
	.onairList .ttl {
		margin-bottom: 0;
	}
	
	.onairList .ttl img {
		height: 13px;
	}
	
	.onairList .list {
		padding: 10px 0;
	}
	
	.onairList .list .name {
		width: 100%;
		float: none;
		font-size: 12px;
		text-align: left;
		margin: 0 auto 3px;
	}
	
	.onairList .list .txt01 {
		width: 100%;
		float: none;
		font-size: 12px;
		padding: 0;
		margin: 0 auto 5px;
	}
	
	.onairList .list .txt02 {
		width: 100%;
		float: none;
		font-size: 10px;
		padding: 0;
		margin: 0 auto;
	}
	
	.onairList .list .name:before,
	.onairList .list .txt01:before {
		content: none;
	}
	
	.onairList .list .name:before {
		right: -15px;
	}

}


/*------------------------------------------
  footerSNS
------------------------------------------*/

.footerSNS {
	margin: 160px auto 0;
}

.footerSNS .link {
	display: table;
	margin: 0 auto;
}

.footerSNS .txt,
.footerSNS .item {
	float: left;
	margin-right: 25px;
}

.footerSNS .item:last-of-type {
	margin-right: 0;
}

.footerSNS .txt {
	width: 75px;
	margin-top: -6px;
}

.footerSNS .item {
	width: 28px;
	height: 28px;
	position: relative;
}

.footerSNS .item img {
	position: absolute;
	top: 0;
	left: 0;
	display: block;
	width: 26px;
	max-width: none;
}

.footerSNS .item a .on {
	opacity: 0;
}


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

	.footerSNS {
		margin: 80px auto 0;
	}

	.footerSNS .txt,
	.footerSNS .item {
		margin-right: 15px;
	}
	
	.footerSNS .txt {
		width: 55px;
		margin-top: -3px;
	}
	
	.footerSNS .item {
		width: 22px;
	}
	
	.footerSNS .item img {
		width: 20px;
		height: 20px;
	}

}


/*============================================================================================================
  PC のみ
============================================================================================================*/

@media screen and (min-width: 769px) {

.sp {
	display: none;
}


/*------------------------------------------
  hover
------------------------------------------*/

a,
.retop a img,
.headerSNS .item img,
.footerSNS .item img,
.nav .item img,
.thumbnail-item,
.slick-prev,
.slick-next {
		-webkit-transition: all 0.3s ease-in-out;
		-moz-transition: all 0.3s ease-in-out;
		-o-transition: all 0.3s ease-in-out;
	transition: all 0.3s ease-in-out;
}

a:hover,
.slick-prev:hover,
.slick-next:hover {
	filter: alpha(opacity=60);
	 -moz-opacity: 0.6;
	opacity: 0.6;
}

.headerSNS .item a:hover,
.footerSNS .item a:hover,
.nav .item a:hover,
.originalLinkRight .btnLink a:hover {
	opacity: 1;
}

.retop a:hover img,
.headerSNS .item a:hover .off,
.footerSNS .item a:hover .off {
	opacity: 0;
}

.headerSNS .item a:hover .on,
.footerSNS .item a:hover .on {
	opacity: 1;
}

.nav .item a:hover .on {
		-webkit-transform: rotateX(0deg);
		-moz-transform: rotateX(0deg);
  transform: rotateX(0deg);
}

.nav .item a:hover .off {
		-webkit-transform: rotateX(-90deg);
		-moz-transform: rotateX(-90deg);
  transform: rotateX(-90deg);
}

.originalLinkRight .btnLink a:hover {
	border-color: #fd0066;
}

.thumbnail-item:hover {
	color: #fff;
	background: #fd0066;
	border-color: #fd0066;
}


}