@charset "utf-8";
p{
	font-family: "Shippori Mincho",serif;
	font-weight: 400;
	font-style: normal;
	font-size: 100%;
	line-height: 1.5em;
	text-align: center;
	color: #FFF;
}
/*●●●TOPイメージPC●●●*/
.topbg{
	background-image: url(img/bg.jpg);
	background-repeat: no-repeat;
	background-size: cover;
	background-position: center bottom;
	position: relative;
	overflow: hidden;	
	z-index: 10;
}
header{
	position: absolute;
	top:0;left: 0;
	background:linear-gradient(rgba(0,100,108,0.7),rgba(0,55,108,0.9));
}
.topmangabg{/*繰り返し処理のためbackgroundで画像表示*/
	position: absolute;
	left: 0;bottom: 0;
	width: 100%;height: 100%;
	background-image: url(img/topmangabg.png);
	background-repeat: repeat;
	background-size: cover;
	background-position: center top;
	z-index: 12;/*topimgは2～9headerは10*/
	display: none;
}
.topimgpcdiv{
	margin:0 auto;
	position: relative;
	display:table;
	height: 828px;
	width: 100%;
	z-index: 14;/*topimgは2～9headerは10*/
}
.topimgpcdiv img{
	max-width: 620px;
	max-height: 120px;
	height: auto;
}
.topimgpcdiv h1{/*メインロゴ*/
	display: table-cell;
  	vertical-align: middle;
	margin: 0 auto;padding: 0;
	padding-bottom: 30px;
}
.h1sub{/*サブタイトル*/
	font-family: 'Noto Serif JP',serif;
	font-size: 20px;
	font-weight: bold;
	line-height: 50px;
	color: #000;
	text-shadow:1px 1px 2px #fff,-1px 1px 2px #fff,1px -1px 0 #fff,-1px -1px 2px #fff;
}
/*●●●ナビバー●●●*/
.navpc{
	background: rgba(0,0,0,0.6);
	padding: 0;
	position: relative;
	display: flex;
	width: 100%;height: auto;
	margin: 0 auto;
	text-align: center;
	justify-content: center;
	align-items: center;
	z-index: 15;
}
.navpc p{
	padding-bottom: 1px;
	font-family: 'Noto Serif JP',serif;
	font-weight: 900;
	font-size: 30px;
	color: #FFF;
}
.navpc a{
color: #FFF;
text-decoration: none;
}
/*
.navpc a{
	display: flex;
	justify-content: center;
	align-items: center;
}
.navpc img{
	height: 50px;width: auto;
}*/
/*●●●メイン●●●*/
.main_div{
	margin: 0 auto;
	width: 100%;height: 100%;
	background-color: #0061dc;
	background-image: url(img/mainbg.jpg);
	background-repeat: no-repeat;
	background-size: auto;
	background-position: bottom center;
	z-index: 1;
}
main{
	margin: 0 auto;padding: 0;
	background-color: #FFF;
	width: 1024px;
	padding-top:20px;
	margin-top: 0px;margin-bottom: 0px;
	position: relative;
	box-shadow: 0px 0px 8px 10px rgba(255,255,255,1);
}
.mainsp{display: none;}
.mainpc{display: block;width: 100%;}
main p{
	color: #000;
	line-height: 1.8em;
	font-weight: bold;
	font-size: 21px;
}
.mainandroidp{letter-spacing: 0px;}
/*==アニメｃｓｓ==*/
/*■■■ページ開いたときのフェードイン■■■*/
body{
    animation-name: fdin;
    animation-duration: 3s;
}
@keyframes fdin { /*animation-nameで設定した値を書く*/
  0% {opacity: 0} /*アニメーション開始時は不透明度0%*/
  15%{opacity: 0} 
  100% {opacity: 1} /*アニメーション終了時は不透明度100%*/
}
.mainlogo{
 animation: zoomin 3s;
}
@keyframes zoomin {
	0% {transform: scale(1.5);opacity: 0;}
	20% {transform: scale(1.5);opacity: 0;}
	100% {transform: scale(1);opacity: 1;}
}

#h1ani{/*h1subのアニメ*/
	animation: feedB 5s;
}
@keyframes feedB {
  0% {opacity: 0} /*アニメーション開始時は不透明度0%*/
  40%{opacity: 0} 
  90% {opacity: 1} /*アニメーション終了時は不透明度100%*/
100% {opacity: 1} /*アニメーション終了時は不透明度100%*/
}
#topmangabgani{/*toppopのアニメ*/	
	animation: mangascrolls 240s;
	animation-timing-function: linear;
}
@keyframes mangascrolls {
0% {background-position: center 0px;}
100% {background-position: center -8000px;}
}
/*■■■バースト演出A■■■*/
.bstAdiv{
	width: 100%;
	height: auto;
	position: relative;
	margin: 20px auto;
	text-align: center;
	/*border: 1px solid red;*/
}
.bstAhosi{
	width:3%; 
	position: absolute;
	left: 0;right: 0;
	margin: auto;
	z-index: 21;
}
/*漫画で学ぶ事故物語の文字出現
.bstAlogo{
	width:100%; 
	position: absolute;
	left: 0;right: 0;
	margin: auto;
	z-index: 23;
	visibility: hidden;
}*/

.bstA{/*漫画のコマサイズ指定*/
	width: 100%;height: auto;
	visibility: hidden;
	z-index: 22;
}
.bstAin {/*jsで呼び出される動き*/
animation: 1s bstAmove;
animation-timing-function: cubic-bezier(0, 0.5, 1.5, 1) ;
visibility: visible !important;
}
@keyframes bstAmove {
 0% { transform: scale(0.01);opacity: 1;}
 100% {transform: scale(1);opacity: 1;}
}
/*漫画で学ぶ事故物語文字出現
.bstAlogoin {/*jsで呼び出される動き
animation: 3s bstAlmove;
visibility: visible !important;
}*/

@keyframes bstAlmove {
 0% {transform: translateY(10px);opacity: 0;}
 40% {transform: translateY(10px);opacity: 0;}
 100% {transform: translateY(0px);opacity: 1;}
}
/*コンテンツ紹介へのボタン*/
#btn_flash{
animation: flashAni 10s infinite;
}
@keyframes flashAni {
 0% {opacity: 1;}
 70% {opacity: 1;}
 80% {opacity: 0.8;}
 90% {opacity: 0.8;}
100% {opacity: 1;}
}
/*13.1インチモニタ*/
@media screen and (max-width: 1366px) {
	.topimgpcdiv h1{/*メインロゴ*/
		padding-top: 40px;
	}
}
/*iPadPro*/
@media screen and (max-width: 1024px) {
	main{width: 860px;}
	.topmangabg{background-size: 50% 50%;}
}
@media screen and (max-width: 860px) {
	main{width: 100%;box-shadow:none;}
}
/*iPad*/
@media screen and (max-width: 768px) {
	.navpc p{font-size: 24px;}
}
@media screen and (max-width: 767px) {
	.navpc p{font-size: 18px;}
	main p{font-size: 16px;letter-spacing: -1px;}
}
/*iPhone7+*/
@media screen and (max-width: 428px) {
	.topmangabg{/*繰り返し処理のためbackgroundで画像表示*/
		background-image: url("img/topmangabgsp.png");
		display: block;
		position: absolute;
		left: 0;bottom: 0;
		width: 100%;height: 100%;
		background-repeat: repeat;
		background-size: cover;
		background-position: center top;
	}
	.navpc p{font-size: 16px;
		font-weight: 700;}
	.h1sub{
		font-size: 16px;
		line-height: 40px;
	}
	.mainpc{display: none;}
	.mainsp{display: block;}
	main p{
		letter-spacing: 0px;
		line-height: 1.8em;
		font-size: 18px;
	}
}
/*iPhone12*/
@media screen and (max-width: 390px) {
	
}
/*iPhone7*/
@media screen and (max-width: 375px) {
	.navpc p{font-size: 15px;}
	.h1sub{
		font-size: 14px;
		line-height: 30px;
	}
	main p{font-size: 17px;}
}
/*Android*/
@media screen and (max-width: 360px) {
	.navpc p{font-size: 14px;}
	.mainp_pc{font-size: 11px;}
	.mainandroidp{letter-spacing: -1px;}
}
/*iPhone5*/
@media screen and (max-width: 320px) {
	.navpc p{font-size: 13px;}
	.h1sub{font-size: 13px;}
	main p{font-size: 15px;}
}