@charset "utf-8";

@font-face {
  font-family: 'catfont';
  src: url('./font/tamanegi_v7.ttf') format('truetype');
}

body {
	margin: 0 auto;
	background-color: #FFF;
	color: #FFF;
	background-image: url(img/Pattern_02.png);
	background-repeat: repeat;

	/*font-family: "hiragino-mincho-pron","ヒラギノ明朝 ProN W6","ヒラギノ明朝 ＰｒｏＮ Ｗ6",“Hiragino Mincho ProN”;*/
	/*font-weight: 600;*/
	font-size: 15px;
	font-family: "Reggae One", system-ui;
	font-weight: 400;
	font-style: normal;
}
a {
	color: #FFFFFF;
	text-decoration: none;
}
p {
	margin: 0;
	padding: 0;
}
ul {
	margin: 0;
	padding: 0;
}
ul li {
	display: inline-block;
}
dl dd {
	margin: 0;
	padding: 0
}
img {
	width: 100%;
}
.font_gothic {
	font-family: "メイリオ","Hiragino Kaku Gothic ProN","Hiragino Sans";
	font-weight: normal;
}
.font_bold {
	font-weight: bold !important;
}
.shadow_bold{
/*
	text-shadow: 0.5px 0.5px 0, 0.5px -0.5px 0, -0.5px 0.5px 0, -0.5px -0.5px 0, 0.5px 0 0, 0 0.5px 0, -0.5px 0 0, 0 -0.5px 0;
*/
	text-shadow: 0.1px 0.1px 0, 0.1px -0.1px 0, -0.1px 0.1px 0, -0.1px -0.1px 0, 0.1px 0 0, 0 0.1px 0, -0.1px 0 0, 0 -0.1px 0;
}
.color_sky_blue {
	color: #1280CE;
}

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

	.sp {
		display: none;
	}

	/* ヘッダー */
	.header_frame {
		position: relative;
		width: 100%;
		min-width: 1200px;
		height: 120px;
		margin-left: auto;
		margin-right: auto;
		background-image: url(img/Header.png);
		background-position: bottom;
	}
	.header_frame_inner {
		position: relative;
		width: 1200px;
		margin: auto;
	}
	.header_log {
		position: absolute;
		left: 0px;
		top: 12px;
		width: 170px;
	}
	.header_frame_icons {
		position: relative;
		padding-top: 30px;
		padding-left: 180px;
	}
	.header_frame_icons li:not(:first-child) {
		padding-left: 25px;
	}
	.header_frame_icons li img {
		height: 44px;
		width: auto;
	}

	/* フッター */
	.footer_frame {
		position: relative;
		width: 100%;
		min-width: 1200px;
		height: 280px;
		background-image: url(img/Footer.png);
		background-repeat: repeat;
	}
	.footer_frame_inner {
		width:1200px;
		margin:auto;
		padding: 72px 0;
	}
	.footer_frame_part {
		display:inline-block;
	}
	.footer_frame_part:nth-child(1) {
		width: 200px;
		vertical-align: middle;
	}
	.footer_frame_part:nth-child(2) {
		padding-left: 20px;
		width: 350px;
		vertical-align: middle;
	}
	.footer_frame_part:nth-child(3) {
		width: 300px;
		vertical-align: middle;
	}
	.footer_frame_part:nth-child(4) {
		width: 200px;
		vertical-align: bottom;
	}
	.footer_frame_logo {
		width: 100%;
	}
	.footer_frame_copyright {
		font-size: x-small;
	}
	.footer_frame_button {
		display:inline-block;
		width: 80px;
		background-color: #999;
		text-align: center;
		padding: 4px 2px;
	}
	.footer_frame_button a {
		display: block;
	}

	/* コンテンツ */
	.content_frame {
		position: relative;
		width: 1200px;
		margin-left: auto;
		margin-right: auto;
	}

	/* ビジュアル */
	#visual {
		padding: 30px 0
	}
	.visual_img {
	}
	.visual_logo {
		width: 360px;
		position: absolute;
		top: 80;
		left: 50;
		z-index: 50;
	}
	.visual_catch {
		width: 200px;
		position: absolute;
		top: 80;
		right: 50;
		z-index: 50;
	}

	/* 忍者猫 */
	#ninjacats_summary {
		text-align: right;
	}
	.ninjacats_summary_title {
		width: 620px;
	}
	.ninjacats_summary_visual {
		margin-top: -20px;
	}
	.content_frame_ninjacats_separete {
		background-image: url('img_ninjacats/ninjacats_separete_BG.png');
		background-size: contain;
		height: 220px;
	}
	.content_frame_ninjacats_detail {
		height: 500px;
		padding: 40px 0 30px 0;
	}
	

	/* キャラクター */
	#ninjacats_frame {
		text-align: right;
	}
	.character_frame_separete {
		background-image: url('img_ninjacats/ninjacats_separete_BG.png');
		background-size: contain;
		height: 200px;
		margin-top: 60px;
	}
	.character_frame_detail {
		height: 400px;
	}

	/* ニュース */
	#news {
		position: relative;
		padding: 0px;
		background-color: #333;
		margin-top: 40px;
	}
	.content_frame_news {
		min-height: 160px;
		width: 800px;
		margin: 24px 150px;
	}
	.news_title {
		position: absolute;
		top: -35;
		width: 200px;
		left: CALC((100% - 200px) / 2);
	}
	.news_hr {
		width: 100%;
		border-style:none ; 
		height:15px ; 
		background-image: url('img/Pattern_01.png');
		padding: 0;
		margin: 0;
	}
	.news_ul {
	}
	.news_ul li {
		width: 100%;
		margin-top: 10px;
		margin-bottom: 10px;
	}
	.news_ul_date {
		margin-right: 16px;
	}
	.news_ul_title {
	}

	/* ニュースリスト */
	.content_frame_news_list {
		background-image: url('img/news_list_bg.png');
		background-size: cover;
		padding: 60px 80px 60px 60px;
		height: CALC(800px - 120px);
		width: CALC(800px - 140px);
		margin: 50px auto;
		text-align: left;
	}
	.news_list_title {
		position: absolute;
		top: -35;
		width:240px;
		left: 180px;
	}
	.content_frame_news_list_it {
		position: relative;
		width: 100%;
	}
	.content_frame_news_list_it:not(:last-child) {
		border-bottom: 1px solid grey;
	}
	.content_frame_news_list_it a {
		display: block;
		color: #333;
		padding: 20px 16px;
	}
	.content_frame_news_list_it_date {
		display: inline-block;
	}
	.content_frame_news_list_it_title {
		display: inline-block;
		margin-left: 16px;
	}

	/* ニュース詳細 */
	.content_frame_news_detail {
		background-image: url('img/news_detail_bg.png');
		background-size: cover;
		padding: 20px 80px 60px 60px;
		height: CALC(800px - 80px);
		width: CALC(800px - 140px);
		margin: 60px auto;
		color: #333;
	}
	.content_frame_news_detail_title {
		position: relative;
		text-align: center;
		width: 100%;
		font-size: 30px;
		font-weight: bold;
		line-height: 1.2;
		height: 96px;
	}
	.content_frame_news_detail_title_in {
		position: relative;
		top: 50%;
		transform: translateY(-50%);
		-webkit-transform: translateY(-50%);
	}
	.content_frame_news_detail_date {
		position: relative;
		margin-top: 24px;
		width: 100%;
	}
	.content_frame_news_detail_text {
		position: relative;
		margin: 30px 40px 30px 90px;
		width: CALC(100% - 130px);
	}

	/* システム */
	.content_frame_system_separate_bg {
	}
	.content_frame_system_separate_ul li {
		position: absolute;
		top: 56px;
		width: 280px;
	}
	.content_frame_system_separate_ul li:nth-child(1) {
		left: CALC((100% - 280px) / 2 - 320px);
	}
	.content_frame_system_separate_ul li:nth-child(2) {
		left: CALC((100% - 280px) / 2);
	}
	.content_frame_system_separate_ul li:nth-child(3) {
		left: CALC((100% - 280px) / 2 + 320px);
	}

	#system_detail {
		padding: 60px 30px;
		color: #000;
	}

	/* システム：育成 */
	.content_frame_system_training {
		position: relative;
		background-image: url("img/system_training_BG.png");
		background-size: cover;
		padding: 0 30px;
		height: 520px;
		width: 540px;
		margin: auto;
	}
	.content_frame_system_training_title {
		position: absolute;
		top: -40;
		left: -30;
		width: 300px;
	}
	.content_frame_system_training_caption {
		width: 400px;
		margin: 50px 0 0 30px;
	}
	.content_frame_system_training_text {
		text-align: left;
		margin: 10px auto 0 30px;
	}
	.content_frame_system_training_capture {
		padding: 10px 20px 0 20px;
	}
	.content_frame_system_training_capture li {
		padding: 0 10px;
		width: CALC((100% - 40px) / 2)
	}
	.content_frame_system_training_icon {
		padding: 2px 30px 8px 30px;
	}
	.content_frame_system_training_icon li {
		height: 150px;
		width: CALC(100% / 3)
	}
	.content_frame_system_training_icon li img {
		width: 86%;
		height: auto;
		object-fit: contain;
	}

	/* システム：バトル */
	.content_frame_system_battle {
		position: relative;
		background-image: url("img/system_story_battle_BG.png");
		background-size: cover;
		padding: 0 30px;
		height: 374px;
		width: 540px;
		margin: auto;
	}
	.content_frame_system_story_akito {
		position: absolute;
		bottom: 0;
		width: 260px;
		right: 45px;
	}
	.content_frame_system_training_shadow {
		height: auto;
		margin-left: 5px;
		padding-top: 24px;
	}
	.content_frame_system_training_img {
		margin-top: -155px;
		width: 98%;
	}

	/* メディア */
	#media_separate {
		padding: 60px 0;
	}
	.media_separate_bg {
	}
	.media_separate_ul {
		position: relative;
		top: -167px;
	}
	.media_separate_ul li {
		position: absolute;
		width: 280px;
	}
	.media_separate_ul li:nth-child(1) {
		left: CALC((100% - 280px) / 2 - 200px);
	}
	.media_separate_ul li:nth-child(2) {
		left: CALC((100% - 280px) / 2 + 200px);
	}

	#media_detail {
		position: relative;
		background-image: url(img/media_frame.png);
		background-size: cover;
		padding: 60px 40px 40px 30px;
		height: CALC(600px - 100px);
		width: CALC(600px - 70px);
		margin: 10px auto 60px auto;
	}

	/* メディア：映像 */
	.media_detail_frame {
		overflow-y: scroll;
		height: 100%;
	}
	.media_detail_frame_title {
		position: absolute;
		top: -40;
		left: -30;
		width: 300px;
	}
	.media_detail_frame_body {
		height: 800px;
		width: 100%;
	}

	/* ストーリー */
	#story{
		text-align: center;
		font-family: "catfont"
	}
	.content_frame_story {
		position: relative;
		height: 726px;
		width: 700px;
		background-image: url("img/story_BG.png");
		background-size: cover;
		margin: 70px auto 40px auto;
		color: #000;
		padding: 20px 50px 50px 50px;
		text-align: center;
	}
	.story_image  {
		position: absolute;
		width: 140px;
	}
	.story_image_1 {
		top: 100;
		right: 0;
	}
	.story_image_2 {
		top: 240;
		right: 0;
	}
	.story_image_3 {
		bottom: 200;
		left: 0;
	}
	.story_image_4 {
		bottom: 140;
		left: 0;
	}
	.story_image_5 {
		top: 550;
		right: 50;
	}
	.story_title {
		position: absolute;
		top: -35;
		width:240px;
		left: 180px;
		z-index: 10;
	}
	.story_caption_frame {
		position: relative;
		height: 100px;
		width: 100%;
	}
	.story_caption {
		position: relative;
		top: CALC((100% - 50px) / 2);
	}
	.story_caption img {
		width: 80%;
		height: auto;
	}
	.story_text {
		margin: 60px 0;
		font-size: 22px;
		line-height: 2;
	}
	.story_character {
		width: 300px;
		text-align: center;
		margin: 0 auto 60px auto;
	}

	/* トレーラー */
	#trailer {
		margin-top: 80px;
		margin-bottom: 60px;
	}
	.trailer_title {
		position: absolute;
		top: -35;
		width:200px;
		left: 250px;
	}
	.content_frame_trailer {
		background-image: url('img/Trailer_frame.png');
		background-size: cover;
		height: 450px;
		width: 700px;
		text-align: center;
		margin: 50px auto;
	}
	.content_frame_trailer iframe {
		position: relative;
		top: 65px;
	}

	/* システム概要 */
	#system_summary {
		position: relative;
		height: 540px;
	}
	.system_summary_title {
		position: absolute;
		z-index: 10;
		width: 260px;
		top: 30px;
		left: 10px;
	}
	.system_summary_text {
		position: absolute;
		z-index: 0;
		width: 660px;
		top: 120px;
		left: 80px;
	}
	.system_summary_sasuke {
		position: absolute;
		z-index: 10;
		width: 400px;
		right: 80px;
		top: 40px;
	}

	

}
/* スマホ */
@media screen and (max-width:768px) {

	.pc {
		display: none;
	}

	/* ヘッダー */
	.header_frame {
		position: relative;
		width: 100%;
		height: 100px;
		background-image: url(img/Header.png);
		background-position: bottom;
		background-size: cover;
	}
	.header_frame_inner {
		width: 100%;
	}
	.header_log {
		position: absolute;
		left: 10px;
		top: 10px;
		object-fit: contain;
		width: 90px;
	}

	/* フッター */
	.footer_frame {
		position: relative;
		background-image: url(img/Footer.png);
		background-repeat: repeat;
		text-align: center;
		margin-top: 48px;
		background-size: cover;
	}
	.footer_frame_inner {
		padding: 12px 16px 12px 12px;
	}
	.footer_frame_part {
		padding-bottom: 24px;
	}
	.footer_frame_part:nth-child(2) {
		text-align: left;
	}
	.footer_frame_logo {
		margin: 20px 0 ;
		width: 80%;
	}
	.footer_frame_copyright {
		font-size: 9px;
		padding-top: 12px;
	}
	.footer_frame_button {
		display:inline-block;
		width: CALC((100% - 16px) / 2);
		background-color: #999;
		text-align: center;
		padding: 4px 2px;
	}
	.footer_frame_button a {
		display: block;
	}

	/* コンテンツ */
	.content_frame {
		position: relative;
		width: 96%;
		margin: 48px auto 0 auto;
	}

	/* ビジュアル */
	#visual {
	}
	.visual_logo {
	}
	.visual_img {
		margin-bottom: 20px;
	}
	.visual_catch {
		position: relative;
		left: 25%;
		width: 50%;
		margin: auto;
	}

	/* ニュース */
	#news {
		position: relative;
		padding: 0px;
		background-color: #333;
	}
	.content_frame_news {
		min-height: 200px;
		margin: 24px 24px;
	}
	.news_title {
		position: absolute;
		top: -35;
		width:200px;
		left: CALC((100% - 200px) / 2);
	}
	.news_hr {
		width: 100%;
		border-style:none ; 
		height:15px ; 
		background-image: url('img/Pattern_01.png');
		padding: 0;
		margin: 0;
	}
	.news_ul {
	}
	.news_ul li {
		margin:8px 0;
		width: 100%;
	}
	.news_ul_date {
		display: block;
	}
	.news_ul_title {
		display: block;
	}

	/* ストーリー */
	#story {
		width: 100%;
	}
	.story_hr {
		object-fit: none;
		background-image: url(img/Pattern_03.png);
		height: 30px;
		background-repeat: repeat;
		background-size: auto;
		margin: 0;
		border: 0;
		padding: 0;
		background-position-y: 5px;
	}
	.story_title {
		position: absolute;
		top: -32px;
		left: 20px;
	}
	.content_frame_story {
		background-color: #fff;
	}
	.story_caption_frame {
		padding: 16px;
		background-image: url(img/Pattern_02.png);
	}
	.story_caption_frame img {
		width: 100%;
		height: auto;
	}
	.story_text {
		padding: 30px 0 10px 0;
		line-height: 2;
	}
	.story_image_frame {
		position: relative;
		margin: 8px;
	}
	.story_image_frame li {
		width: 33%;
		height: CALC(100vw / 3);
		margin-bottom: -45px;
	}
	.story_image_frame li img {
		width: 100%;
		height: 100%;
		object-fit: contain;
	}
	.story_image_frame li:nth-child(1) {
	}
	.story_image_frame li:nth-child(2) {
	}
	.story_image_frame li:nth-child(3) {
	}
	.story_character_frame {
		text-align: center;
		padding: 40px 0 0 0;
	}
	.story_character {
		width: 50%;
	}

	/* トレーラー */
	#trailer {
	}
	.trailer_title {
		display: block;
		width: 50%;
		max-width: 240px;
	}
	.content_frame_trailer {
		padding: 0 10px;
		text-align: center;
	}
	.content_frame_trailer iframe {
		margin: 12px 0 0 0;
		max-width: 500px;
	}

	/* ハンバーガーメニュー */
	.xhamburger {
		display: block;
		position: absolute;
		z-index: 801;
		right: 10px;
		top: 10px;
		cursor: pointer;
		transition: all .2s;
	}
	.xhamburger p {
		position: relative;
	}
	.xhamburger-icon {
		position: relative;
		display: block;
		width: 73px;
		height: 60px;
		background-image: url('img/hamburger_default.png');
		background-size: cover;
	}
	.xhamburger-icon:hover {
		background-image: url('img/hamburger_hover.png');
	}
	.xhamburger.-opened .xhamburger-icon {
		background-image: url('img/hamburger_default_close.png');
	}
	.xhamburger.-opened .xhamburger-icon:hover {
		background-image: url('img/hamburger_hover_close.png');
	}
	body.-opened {
		overflow: hidden;
	}

	/* メニュー画面 */
	#hamburger_menu {
		position: fixed;
		top: 0px;
		z-index: 800;
		width: 100%;
		margin: 0 auto;
		text-align: center;
		background-color: #999;
		height: 100vh;
	}
	#hamburger_menu ul {
		padding: 0;
		margin: 40px 0 0 0;
	}
	#hamburger_menu li {
		display: block;
		list-style:none;
	}

	#hamburger_menu li a {
		display: block;
		padding: 12px;
	}
	#hamburger_menu dl {
		padding: 2px 0;
		margin: 0;
	}
	#hamburger_menu dt {
		font-size:1.0em;
		padding-bottom: 1px;
	}
	#hamburger_menu dd {
		font-size:0.6em;
		margin: 0;
	}
	#hamburger_menu img {
		height: 38px;
		width: auto;
	}
	#hamburger_menu_selected {
		position: absolute;
		left: -32px;
		top: -42px;
		width: 54px !important;
		height: auto !important;
	}
	.hamburger_menu_item div {
		position: relative;
		display: inline-block;
	}
}