/*	reset
============================== */
html,body,div,span,applet,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,a,abbr,acronym,address,big,cite,code,del,dfn,em,img,ins,kbd,q,s,samp,small,strike,strong,sub,sup,tt,var,b,u,i,center,dl,dt,dd,ol,ul,li,fieldset,form,label,legend,table,caption,tbody,tfoot,thead,tr,th,td,article,aside,canvas,details,embed,figure,figcaption,footer,header,hgroup,menu,nav,output,ruby,section,summary,time,mark,audio,video,main {margin:0;padding:0;border:0;font-size:100%;}
article,aside,details,figcaption,figure,footer,header,hgroup,menu,nav,section,main {display:block;}
body {font-family:Verdana,"Hiragino Kaku Gothic ProN",Meiryo,sans-serif;line-height:1;}
ol,ul {list-style:none;}
blockquote,q {quotes:none;}
blockquote:before,blockquote:after,q:before,q:after {content:'';content:none;}
table {border-collapse:collapse;border-spacing:0;}
wbr:after {content:"\00200B";}

/*	TBS reset
============================== */
.alt {position:absolute;top:-5000px;left:-9999px;}
.clearfix:after {content:"";clear:both;display:block;}
.hide-txt {text-indent:110%;white-space:nowrap;overflow:hidden;}
.fp-causion {display:none;}
.nocontxt {-webkit-touch-callout: none;-webkit-user-select: none;user-select: none;-webkit-user-drag:none;}
.nocontxt img {pointer-events: none;}
@media all and (min-width:768px) {
.alt-pc {position:absolute;top:-5000px;left:-9999px;}
.clearfix-pc:after {content:"";clear:both;display:block;}
.hide-txt-pc {text-indent:110%;white-space:nowrap;overflow:hidden;}
}
@media all and (max-width:767px) {
.alt-smp {position:absolute;top:-5000px;left:-9999px;}
.clearfix-smp:after {content:"";clear:both;display:block;}
.hide-txt-smp {text-indent:110%;white-space:nowrap;overflow:hidden;}
}
div.embed-tbsplayer {
background-color:#000;
position:relative;
height:0;
padding-top:56.25%;
}
div.embed-tbsplayer .tbs-player {
position:absolute;
left:0;
top:0;
width:100%;
height:100%;
}
div.embed-tbsplayer-audio {
background-color:#fff;
}
div.embed-tbsplayer-audio .tbs-player {
height:46px;
}
div.lbx-overlay {
z-index:10000;position:absolute;background-color:#000;width:100%;height:100%;left:0;top:0;right:0;bottom:0;opacity:0.9;
}


/*	fonts
============================== */


/*	both
============================== */
img{
	vertical-align:bottom;
}
.cleartext {
	text-indent:100%;
	white-space:nowrap;
	overflow:hidden;
}
li{
	list-style: none;
}

@media all and (min-width: 768px) {
	.pc-none{
		display: none;
	}
	.br-pc {
		display:block;
	}
	.br-sp {
		display:none;
	}
}

@media all and (max-width: 767px) {
	.sp-none{
		display: none;
	}
	.br-pc {
		display:none;
	}
	.br-sp {
		display:block;
	}
}

/*	text
============================== */
body {
  font-family: Verdana,"Hiragino Kaku Gothic ProN",Meiryo,sans-serif;
  word-break: break-all;
  color:#231815;
}
.serif{
	font-family: YuMincho, "Yu Mincho", "Hiragino Mincho ProN", "serif";
}
a:link {
	text-decoration:none;
	color:#231815;
}
a:visited {
	text-decoration:none;
	color:#231815;
}
a:hover {
	text-decoration:underline;
	color:#231815;
}
a:active {
	text-decoration:underline;
	color:#231815;
}
.news-text a:link,
.contents-text a:link{
	text-decoration:underline;
	color:#231815;
	font-weight: bold;
}
.news-text a:visited,
.contents-text a:visited{
	text-decoration:underline;
	color:#231815;
}
.news-text a:hover,
.contents-text a:hover{
	text-decoration:none;
	color:#231815;
}
.news-text a:active,
.contents-text a:active{
	text-decoration:none;
	color:#231815;
}
.copyright a:link{color:#231815; text-decoration:none}
.copyright a:visited{color:#231815; text-decoration:none}
.copyright a:active{color:#231815; text-decoration:none}
.copyright a:hover{color:#231815; text-decoration:none; opacity: 0.6; filter: alpha(opacity=60); -ms-filter: "alpha(opacity=60)"; transition:all 0.5s ease;
}


/*	background
============================== */

#top-main{
	/* Permalink - use to edit and share this gradient: https://colorzilla.com/gradient-editor/#ff87b1+0,ff9d65+50,ff9dbf+100 */
	background: linear-gradient(135deg,  #ff87b1 0%,#ff9d65 50%,#ff9dbf 100%); 
	/* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
}
/*
#contents01{
	background: url("../img/bg_chara_01.jpg") no-repeat;
	background-color: #ffffff;
	background-position: bottom right;
}
#contents02{
	background: url("../img/bg_chara_02.jpg") no-repeat;
	background-color: #ffffff;
	background-position: bottom right;
}
#contents03{
	background: url("../img/bg_chara_03.jpg") no-repeat;
	background-color: #ffffff;
	background-position: bottom right;
}
#contents04{
	background: url("../img/bg_chara_04.jpg") no-repeat;
	background-color: #ffffff;
	background-position: bottom right;
}
#contents05{
	background: url("../img/bg_chara_05.jpg") no-repeat;
	background-color: #ffffff;
	background-position: bottom right;
}
*/

@media all and (min-width: 768px) {
	
}

@media all and (max-width: 767px) {
	#contents01,
	#contents02,
	#contents03,
	#contents04,
	#contents05{
		background-size: 150%;
	}
	
}

/*retina*/
@media only screen and (min-width: 768px) and (-webkit-min-device-pixel-ratio: 2) {

}
@media only screen and (max-width: 767px) and (-webkit-min-device-pixel-ratio: 2) {

}


/* =====================================
	USER css
====================================== */

.shadow{
	box-shadow: 0 20px 30px 0 rgba(0, 0, 0, .2);
}

/*	color
============================== */
.color01{
	color:#fab37a !important;
}
.color02{
	color:#b78eee !important;
}
.color03{
	color:#6abcf2 !important;
}
.color04{
	color:#6af280 !important;
}
.color05{
	color:#f2716c !important;
}
.color06{
	color:#ff66b3 !important;
}


/*	HEADER
============================== */

#top-header{
	/*
	background: url("../img/grid_01.jpg");
	*/
}
.header-logo img{
	width: 100%;
}

@media all and (min-width: 768px) {
	#top-header{
		/*
		height: 800px;
		background-position: center center;
		background-size: 2240px 800px;
		-webkit-animation: bgroop 60s linear infinite;
		animation: bgroop 60s linear infinite;
		*/
		width: 100%;
		height: 91.66666666666666%;
		height: -webkit-calc(1680 / 1540 * 100%);
		height: calc(1680 / 1540 * 100%);
		background-image: url(../img/5th_visual_pc.jpg);
		background-image: image-set(url(../img/5th_visual_pc.jpg) 1x, url(../img/5th_visual_pc@2x.jpg) 2x);
		background-image: -webkit-image-set(url(../img/5th_visual_pc.jpg) 1x, url(../img/5th_visual_pc@2x.jpg) 2x);
		background-size: cover;
		background-repeat: no-repeat;
		padding-top: 91.66666666666666%;
		position: relative;
	}
	@-webkit-keyframes bgroop {
		from {
			background-position: 0  0;
		}
		to {
			background-position: -2240px 0;
		}
	}
	@keyframes bgroop {
		from {
			background-position: 0 0;
		}
		to {
			background-position: -2240px 0;
		}
	}
	.header-container{
		width: 980px;
		margin: 0 auto;
	}
	.header-logo{
		width: 643px;
		height: 606px;
		margin: 0 auto;
		padding: 70px 0 0;
		display: none;
	}
	
	
}

@media all and (max-width: 767px) {
	#top-header{
		/*
		height: 100%;
		height: 400px;
		background-position: center center;
		background-size: 1120px 400px;
		-webkit-animation: bgroop 60s linear infinite;
		animation: bgroop 60s linear infinite;
		position: relative;
		*/
		width: 100%;
		height: 141.640625%;
		height: -webkit-calc(1280 / 1813 * 100%);
		height: calc(1280 / 1813 * 100%);
		background-image: url(../img/5th_visual_sp.jpg);
		background-size: cover;
		background-repeat: no-repeat;
		padding-top: 141.640625%;
		position: relative;
	}
	
	@-webkit-keyframes bgroop {
		from {
			background-position: 0  0;
		}
		to {
			background-position: -1120px 0;
		}
	}
	@keyframes bgroop {
		from {
			background-position: 0 0;
		}
		to {
			background-position: -1120px 0;
		}
	}
	.header-container{
		width: 100%;
		margin: 0 auto;
	}
	.header-logo{
		width: 75%;
		position: absolute;
		top: 45%;
		left: 50%;
		transform: translateY(-50%) translateX(-50%);
		-webkit- transform: translateY(-50%) translateX(-50%);
		display: none;
	}
	
}

/*	NAV
============================== */
.content-nav li img{
	width: 100%;
}

@media all and (min-width: 768px) {
	#contents-nav-block{
		width: 100%;
		position: relative;
	}
	.content-nav-wrap{
		width: 980px;
		margin: 0 auto 80px;
	}
	.content-nav{
		width: 980px;
		display: flex;
		justify-content: space-between;
		position: absolute;
		top: -80px;
	}
	.content-nav li{
		width: 180px;
		height: 240px;
	}
	.content-nav li img {
	  height: auto;
	  transition: transform .2s ease; /* ゆっくり変化させる */
	}
	.content-nav li:hover img {
	  transform: scale(1.05); /* 拡大 */
	}
}

@media all and (max-width: 767px) {
	#contents-nav-block{
		width: 100%;
		position: relative;
	}
	.content-nav-wrap{
		width: 100%;
		margin: 0 auto 80px;
		position: relative;
	}
	.content-nav{
		width: 100%;
		display: flex;
		flex-wrap: wrap;
		justify-content: center;
		position: absolute;
		top: -50px;
	}
	.content-nav li{
		width: 26%;
		margin: -1% 2%;
	}
	
}

/*	CONTENTS
============================== */
#top-main{
	position: relative;
}
.contents-wrap{
	background: #ffffff;	
}
.contents-h4 {
	padding: 0.2rem 1rem;
	margin: 2em 0 0.7em;
	line-height: 1.4em;
}
.contents-h4-01 {
	color: #fab37a;
	border-left: 5px solid #fab37a;
}
.contents-h4-02 {
	color: #b78eee;
	border-left: 5px solid #b78eee;
}
.contents-h4-03 {
	color: #6abcf2;
	border-left: 5px solid #6abcf2;
}
.contents-h4-04 {
	color: #6af280;
	border-left: 5px solid #6af280;
}
.contents-h4-05 {
	color: #f2716c;
	border-left: 5px solid #f2716c;
}
.contents-img img{
	width: 100%;
}
.contents-img-01 img{
	border: 4px solid #fab37a;
}
.contents-img-02 img{
	border: 4px solid #b78eee;
}
.contents-img-03 img{
	border: 4px solid #6abcf2;
}
.contents-img-04 img{
	border: 4px solid #6af280;
}
.contents-img-05 img{
	border: 4px solid #f2716c;
}
.contents-catgory img{
	width: 100%;
}

@media all and (min-width: 768px) {
	#top-main{
		padding: 0 0 100px;
		margin: -80px 0 0;
	}
	#top-contents{
		width: 1030px;
		margin: 0 auto;
		padding: 240px 0 0;
	}
	.contents-wrap{
		width: 950px;
		margin: 0 auto 120px;
		padding: 0 0 80px;
		box-shadow: 20px 20px 0 0 rgba(0, 0, 0, .2);
		position: relative;
	}
	.contents-header{
		width: 870px;
		height: 250px;
		margin: 0 auto 36px;
		display: flex;
		position: relative;
	}
	.contents-infomation{
		width: 790px;
		min-height: 360px;
		margin: 0 auto;
	}
	.contents-title{
		font-size: 40px;
		line-height: 50px;
		margin: 64px 0 0 32px;
	}
	.contents-catgory{
		width: 240px;
		height: 285px;
		margin: -15px 0 0;
	}
	.contents-img{
		width: 790px;
		margin: 0.5em auto 2em;
	}
	.contents-h4 {
	  font-size: 24px;
	}
	.contents-text{
		font-size: 16px;
		line-height: 24px;
		margin: 0 0 1em;
	}
	.contents-text-caution{
		font-size: 12px;
		line-height: 20px;
		margin: -0.5em 0 1em;
	}
	
}

@media all and (max-width: 767px) {
	#top-main{
		padding: 0 0 4em;
		margin: -80px 0 0;
	}
	#top-contents{
		width: 90%;
		margin: 0 auto;
		padding: 60% 0 0;
	}
	.contents-wrap{
		width: 100%;
		margin: 0 auto 3em;
		padding: 0 0 4em;
		box-shadow: 1em 1em 0 0 rgba(0, 0, 0, .2);
		position: relative;
	}
	.contents-header{
		width: 100%;
		margin: 0 auto 1em;
		display: flex;
		position: relative;
	}
	.contents-infomation{
		width: 90%;
		min-height: 240px;
		margin: 0 auto;
	}
	.contents-title{
		width: 90%;
		font-size: 1.4em;
		line-height: 1.4em;
		margin: 1em 0 0 0.5em;
	}
	.contents-catgory{
		width: 50%;
		margin: -10px 0 0 10px;
	}
	.contents-img{
		width: 100%;
		margin: 0.5em auto 2em;
	}
	.contents-h4 {
	  font-size: 1.2em;
	}
	.contents-text{
		font-size: 0.9em;
		line-height: 1.6em;
		margin: 0 0 1em;
	}
	.contents-text-caution{
		font-size: 0.8em;
		line-height: 1.6em;
		margin: -0.5em 0 1em;
	}
	
}

/*	FOOTER
============================== */
.footer-banner-list li img{
	width: 100%;
}
.footer-star{
	background: url("../img/footer_star.png") no-repeat;
	background-size: contain;
}

@media all and (min-width: 768px) {
	.top-footer-inner{
		padding: 70px 0 100px;	
	}
	.footer-star{
		width: 220px;
		height: 40px;
		margin: 0 auto 60px;
	}
	.footer-banner-list{
		width: 950px;
		margin: 0 auto 40px;
		display: flex;
		justify-content: space-between;
	}
	.footer-banner-list li{
		width: 230px;
	}
	.copyright{
		text-align: center;
		font-size: 12px;
		line-height: 24px;
		letter-spacing: 0.1em;
	}
	
}

@media all and (max-width: 767px) {
	.top-footer-inner{
		padding: 2em 0 6em;	
	}
	.footer-star{
		width: 110px;
		height: 20px;
		margin: 0 auto 2em;
	}
	.footer-banner-list{
		width: 90%;
		margin: 5% auto;
		display: flex;
		flex-wrap: wrap;
		justify-content: space-between;
	}
	.footer-banner-list li{
		width: 48%;
		margin: 1%;
	}
	.copyright{
		width: 95%;
		margin: 0 auto;
		text-align: center;
		font-size: 0.6em;
		line-height: 1.9em;
		letter-spacing: 0.1em;
	}
	
}




/*	OTHER CSS
============================== */

/*SP保存禁止*/
img{
	touch-callout:none;
	user-select:none;
	-webkit-touch-callout:none;
	-webkit-user-select:none;
	-moz-touch-callout:none;
	-moz-user-select:none;
}