:root{
	--main-color:#fbad25;
	--second-color:#fcdd4d;
	font-size: 20px;
	line-height: 1.8;
}
body{
	background-color: #fff000;
	font-family: "Zen Maru Gothic", sans-serif;
	font-weight: 700;
	font-style: normal;
}
a:link{
	color: #0326fa;
	text-decoration: underline;
}
header{
	background-size: auto;
	background-position-x: 43%;
	background-position-y: 80%;
}
.main-color{
	color: var(--main-color);
}
.second-color{
	color: var(--second-color);
}
.main-color-bg{
	background-color: var(--main-color);
}
.under-point span{
	position: relative;
}
.under-point span:after{
	content: "";
	display: block;
	position: absolute;
	left: calc(50% - 7.5px);
	bottom: -.4em;
	width: 15px;
	height: 15px;
	border-radius: 100%;
	background-color: var(--main-color);
}
.js-modal-video{
	position: relative;
	z-index: 0;
}
.js-modal-video:before{
	content:url(youtube.png);
	display: block;
	position: absolute;
	top:calc(50% - 32px);
	left:calc(50% - 32px);
}
.youtube {
	width: 100%;
	aspect-ratio: 16 / 9;
}
.youtube img {
	width: 100%;
	height: 100%;
	aspect-ratio: 16 / 9;
	object-fit:cover;
}
.youtube iframe {
	width: 100%;
	height: 100%;
}
.box-fukidashi{
	background-image: url(header_fukidashi.png), url(header_fukidashi.png);
	background-repeat: no-repeat;
	background-size: contain;
	background-position: center top, center bottom;
}
.h2_1,
.h2_2,
.h2_3,
.h2_4{
	position: relative;
}
.h2_1:before{
	content: "";
	position: absolute;
	bottom: 0;
	left: calc(50% - 10em);
	background-image: url(h2_1_before.png);
	background-size: contain;
	background-repeat: no-repeat;
	width: 4rem;
	height: 4rem;
	display: inline-block;
}
.h2_1:after{
	content: "";
	position: absolute;
	bottom: 0;
	left: calc(50% + 8em);
	background-image: url(h2_1_after.png);
	background-size: contain;
	background-repeat: no-repeat;
	width: 4rem;
	height: 4rem;
	display: inline-block;
}
.h2_2:before{
	content: "";
	position: absolute;
	bottom: 0;
	left: calc(40% - 12em);
	background-image: url(h2_2.png);
	background-size: contain;
	background-repeat: no-repeat;
	width: 4.5rem;
	height: 3.3rem;
	display: inline-block;
}
.h2_3:before{
	content: "";
	position: absolute;
	bottom: 0;
	left: calc(40% - 12em);
	background-image: url(h2_3.png);
	background-size: contain;
	background-repeat: no-repeat;
	width: 4.7rem;
	height: 3.5rem;
	display: inline-block;
}
.h2_4:before{
	content: "";
	position: absolute;
	bottom: 0;
	left: calc(40% - 12em);
	background-image: url(h2_4.png);
	background-size: contain;
	background-repeat: no-repeat;
	width: 4.7rem;
	height: 3.2rem;
	display: inline-block;
}
.animate{
	position: relative;
	z-index: 1;
	animation-name: return;
	animation-duration: 2s;
	animation-iteration-count: infinite;
	animation-timing-function: ease;
}
.btn-manga,
.btn-campaign{
	transition: .4s;
}
.btn-manga:hover{
	transform: scale(1.1);
}
.btn-campaign:hover{
	opacity: .8;
}
.sect-movie{
	background: #5ce1e6;
}
.sect-movie2{
	background: #ffb5af;
}
.sect-files{
	background: #fde6f2;
}
.new{
	display: flex;
	justify-content: center;
	align-items: center;
	color: #FFF;
	background: #febd5a;
	width: 5em;
	height: 5em;
	position: absolute;
	right: 0;
	top:-2.5em;
	border-radius: 100%;
	font-weight: bold;
}
.dot_a{
	background: url(./dot_a.png) repeat-x, url(./dot_a.png) repeat-x;
	background-position: left top, left bottom;
}
.dot_a2{
	background: url(./dot_a2.png) repeat-x, url(./dot_a2.png) repeat-x;
	background-position: left top, left bottom;
}
.dot_b{
	background: url(./dot_b.png) repeat-x, url(./dot_b.png) repeat-x;
	background-position: left top, left bottom;
}
.title-bg{
	background: url(./title-bg.png) no-repeat;
	background-position: center center;
	background-size: contain; 
}
.title-bg-adjust{
	background: url(./title-bg.png) no-repeat,url(./title-bg.png) no-repeat;
	background-position: left center, right center;
	background-size: contain; 
	
}
@keyframes return {
  50% {
    transform: translateX(10px);
  }
  100% {
    transform: translateX(0);
  }
}
@media (min-width: 1024px){
	body .container {
	    max-width: 1024px;
	}
    .container.container-wide {
        max-width: 1240px;
    }
}
@media (max-width: 768px){
	:root{
		font-size: 16px;
	}
	header{
		background-position-x: 40%;
		background-position-y: 111%;
		background-size: auto;
	}
	.h2_1:before{
		left: 1rem;
	}
	.h2_1:after{
		left: auto;
		right: 1rem;
	}
	.h2_2:before{
		left: .5rem;
		bottom: .5em;
		width: 3rem;
		height: 2.8rem;
	}
	.h2_3:before{
		left: 1rem;
		background-image: url(h2_3.png);
		width: 4rem;
		height: 3.5rem;
	}
	.h2_4:before{
		left: 1rem;
		background-image: url(h2_4.png);
		width: 4rem;
		height: 3.2rem;
	}	
	@keyframes return {
	  50% {
	    transform: translateY(10px);
	  }
	  100% {
	    transform: translateY(0);
	  }
	}
}