@charset "utf-8";
/*          google fonts          */

/*+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-     Site Contents     -+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+*/

/*==============    top    ==============*/
.top_box {
	display: -webkit-flex;
	display: flex;
}
.top_box .left {
	width: 220px;
	margin-left: 46px;
}
.top_box .left .rogo {
	padding-top: 70px;
	width: 220px;
	text-align: center;
}
.left .release {
	width: 220px;
	padding-top: 23px;
	text-align: center;
}
.left .release .buy {
	margin: 13px auto 0;
    width: 190px;
}
.left .release .buy :hover {
	text-decoration: none;
	background-color: #FFF;
	color: #FFF;
	background: #db4f2e;
	border-radius: 10px;
}
.buy a {
	border-radius: 10px;
    background: #FFF;
    border: 1px solid #FFF;
	display: block;
	padding: 9px 0;
	font-size: 3.5rem;
	text-align: center;
	color: #db4f2e;
	-webkit-transition: .3s ease-out;
    transition: .3s ease-out;
}
.top_box .right {
	padding-top: 30px;
	position: relative;
    left: 30px;
}
.KV_box {
	width: 1000%;
	height: 811px;
	background-color: #FFF;
}
.KV_box .relay2020 {
	position: absolute;
	top: 720px;
	left: 670px;
}
.taisyouImg {
	position: absolute;
	top: 37px;
	left: 9px;
}
.copyImg {
	position: absolute;
	top: 66px;
	left: 690px;
	opacity: 0;
	-moz-transition: -moz-transform 0.5s linear;
	-webkit-transition: -webkit-transform 0.5s linear;
	-o-transition: -o-transform 0.5s linear;
	-ms-transition: -ms-transform 0.5s linear;
	transition: transform 0.5s linear;
	-webkit-animation-duration: 1.5s;
	animation-duration: 1.5s;
	-webkit-animation-fill-mode: both;
	animation-fill-mode: both;
}
.copy_show {
	-webkit-animation-name: copy_show;
	animation-name: copy_show;
	opacity: 1;
	transition: .8s;
}
@-webkit-keyframes copy_show {
  from {
    opacity: 0;
    -webkit-filter: blur(15px);
    -moz-filter: blur(15px);
    -ms-filter: blur(15px);
    -o-filter: blur(15px);
    filter: blur(15px);
  }
  to {
    opacity: 1;
    -webkit-filter: blur(0px);
    -moz-filter: blur(0px);
    -ms-filter: blur(0px);
    -o-filter: blur(0px);
    filter: blur(0px);
  }
}
@keyframes copy_show {
  from {
    opacity: 0;
    -webkit-filter: blur(15px);
    -moz-filter: blur(15px);
    -ms-filter: blur(15px);
    -o-filter: blur(15px);
    filter: blur(15px);
  }
  to {
      opacity: 1;
    -webkit-filter: blur(0px);
    -moz-filter: blur(0px);
    -ms-filter: blur(0px);
    -o-filter: blur(0px);
    filter: blur(0px);
  }
}
.relay2020 a {
	-webkit-transition: .3s ease-out;
    transition: .3s ease-out;
}
.relay2020 a:hover {
	opacity: .6;
}

/*==============    information    ==============*/
.info {
	height: auto;
    border: 1px solid #f56f5d;
    margin: 20px 60px;
	/*overflow-y: scroll;*/
}
.info_box {
	font-size: 1.6rem;
	color: #FFF;
	padding: 25px 20px;
}
.info_box li {
	display: -webkit-flex;
	display: flex;
	padding-bottom: 8px;
}
.info_box li .day {
	width: 12%;
}
.info_box li .txt {
	padding-left: 30px;
	width: 90%;
}
.info_box li .txt a {
	color: #FFF;
	text-decoration: underline;
}
.info_box li .txt :hover {
	text-decoration: none;	
}



/*==============    movie    ==============*/
.movieWrap {
	position: relative;
	width: 100%;
	height: 480px;
	overflow: hidden;
}
#youtubeBgMovie {
	position: absolute;
	width: 100%;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
	margin: auto;
	z-index: -1;
}
.movieWrap .trailerDot {
	width: 100%;
	height: 100%;
	background: rgba(0,0,0,.5);
}
.youtube {
	position: absolute;
	top: 0;
	left: 0;
	bottom: 0;
	right: 0;
	margin: auto;
	width: 550px;
	height: 314px;
}
.youtube {
	border: 1px solid #FFF;
	padding: 5px;
}
/*==============    link    ==============*/
.topLink_box {
	padding-bottom: 90px;
}
.intro {
	padding-top: 120px;
	position: relative;
	-webkit-transition: .6s ease-in-out;
    transition: .6s ease-in-out;
}
.link_ani1 {
	opacity: 0;
	-webkit-transition: .3s ease-in-out;
    transition: .3s ease-in-out;
}
.link_ani2 {
	opacity: 0;
	-webkit-transition: .3s ease-in-out;
    transition: .3s ease-in-out;
}
.link_ani3 {
	opacity: 0;
	-webkit-transition: .3s ease-in-out;
    transition: .3s ease-in-out;
}
.topLink_box .link_txt {
	text-align: center;
	font-size: 3.0rem;
	position: absolute;
    top: 40%;
    left: 0;
    bottom: 0;
    right: 0;
	height: 35%;
}
.topLink_box .link_txt a {
	-webkit-writing-mode: vertical-rl;
    writing-mode: vertical-rl;
	-webkit-transition: .2s ease-out;
    transition: .2s ease-out;
	filter: drop-shadow(0px 0px 10px rgba(93,18,0,.8));
}
.topLink_box .link_txt a:hover {
	text-decoration: none;
	filter: drop-shadow(0px 0px 3px rgba(93,18,0,.8));
}
.link1_main {
    height: 475px;
}
.link1_main::after {
	width: 1200px;
    height: 475px;
	position: absolute;
}
.chara {
	padding: 100px 0 0;
	position: relative;
	-webkit-transition: .6s ease-in-out;
    transition: .6s ease-in-out;
}
.link2_main {
}
.link2_main::before {
}
.link2_bg {
}
.sample {
	padding-top: 120px;
	position: relative;
	-webkit-transition: .6s ease-in-out;
    transition: .6s ease-in-out;
}
.link3_main {
    height: 475px;
}
.link3_main::after {
	width: 1200px;
    height: 475px;
	position: absolute;
}


.aniLeft {
	opacity: 0;
	transform: translateX(-100px);
}
.aniLeft2 {
	opacity: 0;
	transform: translateX(-100px);
}
.aniRight {
	opacity: 0;
	transform: translateX(100px);
}
.topshow {
	opacity: 1;
	transform: translateX(0px);
}
.anishow {
	opacity: 1;
}




/*+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-     Media Screen     -+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+*/
/*          SP          */
@media screen and (max-width:768px) {
/*  
font-size設定
PC      SP
1.0rem->2.2vw
1.4rem->2.6vw
+1.2
  */
/*+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-     Site Contents     -+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+*/
/*          Site Contents          */
	.top_box {
		display: none;
	}
	.sp .rogo {
		position: absolute;
		top: 0;
	}
	.sp .copy {
		width: 90%;
		max-width: 500px;
		margin: auto;
		padding-top: 30px;
	}
	.button_sp {
		display: -webkit-flex;
		display: flex;
		width: 80%;
		margin: auto;
	}
	.button_sp li {
		width: 50%;
		padding: 0 10px;
		text-align: center;
	}
/*==============    information    ==============*/
	.info {
		width: 95%;
		margin: 30px auto;
	}
	.info_box li {
    	display: block;
	}
	.info_box li .txt {
		display: block;
		padding-left: 0px;
		width: 100%;
	}
/*==============    movie    ==============*/
	.movieWrap {
		height: auto;
		background: #333333;
		text-align: center;
		margin-top: 20px;
	}
	.youtube {
		position: relative;
		border: 0;
    	padding: 0;
	}
	.youtube img {
		border: 1px solid #FFF;
		padding: 5px;
		margin: 10px;
		width: 95%;
	}
/*==============    link    ==============*/
	.intro {
		padding-top: 20px;
	}
	.chara {
		padding: 20px 0 0;
	}
	.sample {
		padding: 20px 0 0;
	}
	.link1_main {
		height: 475px;
		text-align: center;
		background-size: 140% auto;
	}
	.link1_main::after {
		width: 100%;
		height: 100%;
		background-size: 100%;
		left: 0;
	}
	.link1_main {
		background: url(/books/tenyakuryonomajo/img/top/sp/link_intro_sp.png)no-repeat;
		padding-top: 61.8%;
    	height: auto;
		position: relative;
	}
	.link1_main::after {
		content: '';
    	background: url(/books/tenyakuryonomajo/img/top/sp/link_intro_txt_sp.png)no-repeat;
		padding-top: 61.8%;
    	height: auto;
    	background-size: 100%;
		position: absolute;
		top: 0;
	}
	.link3_main::after {
		width: 100%;
		height: 100%;
		background-size: 100%;
		left: 0;
	}
	.link3_main {
		background: url(/books/tenyakuryonomajo/img/top/sp/link_sample_sp.png)no-repeat;
		padding-top: 61.8%;
    	height: auto;
		position: relative;
	}
	.link3_main::after {
		content: '';
    	background: url(/books/tenyakuryonomajo/img/top/sp/link_sample_txt_sp.png)no-repeat;
		padding-top: 61.8%;
    	height: auto;
    	background-size: 100%;
		position: absolute;
		top: 0;
	}
	.link2_main {
    	background: url(/books/tenyakuryonomajo/img/top/sp/link_chara_sp.png)no-repeat;
		padding-top: 61.8%;
		height: auto;
		position: relative;
	}
	.link2_main::before {
		content: '';
		background: url(/books/tenyakuryonomajo/img/top/sp/link_chara_txt_sp.png)no-repeat;
		padding-top: 61.8%;
		height: auto;
		background-size: 100%;
		position: absolute;
		top: 0;
		width: 100%;
	}
	.topLink_box .link_txt {
		top: 34%;
		height: 0;
	}
	.link_txt a {
		width: 23%;
	}
	.link_txt a img {
		width: 100%;
	}
	.topLink_box {
    	padding-bottom: 20px;
	}



	.aniLeft {
		opacity: 0;
		transform: translateY(50px);
	}
	.aniLeft2 {
		opacity: 0;
		transform: translateY(50px);
	}
	.aniRight {
		opacity: 0;
		transform: translateY(50px);
	}
	.topshow {
		opacity: 1;
		transform: translateY(0px);
	}
	
	
}

/*          PC          */
@media screen and (min-width:769px) {
/*          Site Contents          */
	#siteWrap {
		min-width: 1200px;
	}
	.kv {
		background: url(/books/tenyakuryonomajo/img/top/KV.jpg);
    	width: 905px;
    	height: 811px;
	}
	.link1_bg {
    	background: url(/books/tenyakuryonomajo/img/top/link_intro_bg.jpg)repeat-x;
		width: 200%;
		height: 475px;
		position: absolute;
		left: -200%;
	}
	.link2_bg {
    	background: url(/books/tenyakuryonomajo/img/top/link_chara_bg.jpg)repeat-x;
	}
	.link1_main {
		background: url(/books/tenyakuryonomajo/img/top/link_intro.png)no-repeat;
	}
	.link1_main::after {
		content: '';
    	background: url(/books/tenyakuryonomajo/img/top/link_intro_txt.png)no-repeat;
	}
	.link2_main {
		background: url(/books/tenyakuryonomajo/img/top/link_chara.png)no-repeat;
		width: 1200px;
		height: 475px;
	}
	.link2_bg {
		width: 200%;
		height: 475px;
		position: absolute;
		left: 100%;
	}
	.link2_main::before {
		content: '';
		background: url(/books/tenyakuryonomajo/img/top/link_chara_txt.png)no-repeat;
		width: 1200px;
		height: 475px;
		position: absolute;
	}
	.link3_main {
		background: url(/books/tenyakuryonomajo/img/top/link_sample.png)no-repeat;
	}
	.link3_bg {
    	background: url(/books/tenyakuryonomajo/img/top/link_sample_bg.jpg)repeat-x;
		width: 200%;
		height: 475px;
		position: absolute;
		left: -200%;
	}
	.link3_main::after {
		content: '';
    	background: url(/books/tenyakuryonomajo/img/top/link_sample_txt.png)no-repeat;
	}

}

@media all and (-ms-high-contrast: none) {
  /* ここに書く */

}