@charset "utf-8";


/*------------------------------------------

				全体設定

--------------------------------------------*/

@font-face {
   font-family: 'FlopDesignFONT';
   src: url('../font/FlopDesignFONT.otf') format("opentype");
   font-style: normal;
   font-display: swap;
}

*{
	margin:0;
	padding:0;
	color:#fff;
	box-sizing:border-box;
	font-family:'FlopDesignFONT';
	line-height:1.5em;
}


body{
	background:url(../img/bg_main.jpg) no-repeat fixed;
	background-position:center center;
	background-size:cover;
	font-size:18px;
	overflow-x:hidden;
}

h2{
	position: relative;
	z-index: 2;
}

h3{
	position: relative;
	z-index: 2;
}

h4{
	position: relative;
	z-index: 2;
}

::-webkit-scrollbar {
	width: 10px;
	height: 20px;
}

::-webkit-scrollbar-track {
	background: #0a009ba4;
	border-radius: 100px;
}
::-webkit-scrollbar-thumb {
	background: #fff;
	border-radius: 100px;
	width: 130px;
}

/*------------------------------------------

				ロックオン画像

--------------------------------------------*/

.lockon{
	width: 500px;
	height: 500px;
	position: absolute;
    z-index: 0;
	mix-blend-mode: screen;
    animation: 10s linear infinite rotation;
}

@keyframes rotation{
	0%{ transform:rotate(0);}
	100%{ transform:rotate(360deg); }
  }

  .lockon.first{
	bottom: -500px;
	left: -100px;
  }


.lockon.second{
	bottom:-100px;
	right: -100px;
  }

  .lockon.third{
	top:-200px;
	left: -100px;
  }



/*------------------------------------------

				ヘッダー

--------------------------------------------*/

header{
	display:block;
	position: fixed;
	background:#0a009b;
	width:100%;
	border-bottom: #fff 1px solid;
	z-index: 3;
}

nav.globalMenuSp{
	display:block;
	max-width:1200px;
	margin:auto;
}

nav.globalMenuSp ul{
	list-style:none;
	text-align:center;
}

nav.globalMenuSp ul li{
	display:inline-block;
	font-size:24px;
	width:calc(100% / 8);
	text-align:center;
	margin:10px 0;
}

nav.globalMenuSp ul li a{
	color:#fff;
	text-decoration:none;
}

/*------------------------------------------

				PAGE TOPナビゲーション

--------------------------------------------*/

.page-top{
	background: #0a009b;
	border-radius: 100px;
	width:70px;
	height: 70px;
	position: fixed;
	bottom:30px;
	right:30px;
	text-align: center;
	z-index: 3;
}

.page-top::before{
	content: "";
	border-style: solid;
	border-right: 15px solid transparent;
	border-left: 15px solid transparent;
	border-bottom: 15px solid #ffffff;
	border-top: 0;
	position: absolute;
	top:15px;
	left:20px;  
}

.page-top::after{
	content: "";
	border-style: solid;
	border-right: 15px solid transparent;
	border-left: 15px solid transparent;
	border-bottom: 15px solid #0a009b;
	border-top: 0;
	position: absolute;
	top:17px;
	left:20px;  
}


.page-top span{
	position: relative;
	top:40px;
	font-size: 10px;
}

/*------------------------------------------

				記事エリア全体設定

--------------------------------------------*/

section{
	padding:100px 0;
	width:100%;
}

section:nth-of-type(odd){
	background: rgba(10,0,155,0.5);
}

section:nth-of-type(even){
	background: rgba(10,0,155,0.8);
}

section::after{
	content: "";
	display: block;
	clear: both;
}

.contents_wrapper{
	max-width: 1200px;
	margin: 0 auto;
	position: relative;
}

h2{
	font-size: 48px;
	text-align: center;
}

p{
	margin: 1em 0;
}

/*------------------------------------------

				メインビジュアル

--------------------------------------------*/

section.mv{
	display:block;
	background:url(../img/mv.jpg) no-repeat top;
	background-position:center center;
	background-size:cover;
	width:100%;
	height:100vh;
}

.logo{
	height:130px;
	width: fit-content;
	margin:0 auto;
	position:relative;
	top:70%;
}

.logo img{
	height:100%;
	width: auto;
}

.mv p{
	color:#fff;
	text-align:center;
	font-size:36px;
	font-family: serif;
	font-weight: bold;
	text-shadow: 2px 2px 2px #000;
}


/*------------------------------------------

				News

--------------------------------------------*/

.news h2:first-of-type{
	font-family: serif;
	margin-bottom: 20px;

}

.news p{
	text-align: center;
}

.news p.gokonyu{
	font-size:x-large;
}

.news h2:nth-of-type(2){
	margin-top: 50px;
}

.news-contents{
	width:50%;
	height:200px;
	margin: 0 auto 100px;
	padding: 20px;
	border: 4px double rgba(255,255,255,1);
	border-left: none;
	border-right: none;
	overflow: scroll;
	overflow-x:hidden;
}

.news-contents::-webkit-scrollbar-track{
	background: none;
}

.news-contents table{
	width:100%;
	border-collapse:collapse;
}

.news-contents tr{
	border-bottom: #fff 1px dashed;
}

.news-contents table td:nth-of-type(1){
	width:35%;
	padding: 1em 0;
}

.news-contents table td:nth-of-type(2){
	width:65%;
	padding: 1em 0;
}



/*------------------------------------------

				Story

--------------------------------------------*/

.story{
	text-align: center;
}

.story p{
	max-width:640px;
	margin-left: auto;
	margin-right: auto;
	text-align: left;

}

/*------------------------------------------

				Character

--------------------------------------------*/

.character{
	overflow: hidden;
}

.character img{
	width:auto;
	height: 100%;
	position: relative;
	z-index: 2;
}

div[class*="character_"]{
	display: flex;
	align-items: flex-end;
	margin-top: 100px;
}

div[class*="character_"] h3{
	font-size: 48px;
	margin-bottom: 1em;
	border-bottom: 2px solid #1f9b00;
}

div[class*="character_"] p{
	margin-bottom: 0;
}

div[class*="character_"] table tr td:first-of-type{
	width:6em;
}

div[class*="character_"]::after{
	content: "";
	display: block;
	clear: both;
}

.character_naomi div:nth-of-type(1){
	order: 2;
	height: 777px;
	width:auto;
	margin-left: 10%;
}

.character_naomi div:nth-of-type(2){
	order: 1;
	width:60%;
}

.character_fuka div:nth-of-type(1){
	order: 1;
	height: 777px;
	width: auto;
}

.character_fuka div:nth-of-type(2){
	order: 2;
	width:60%;
	margin-left: 10%;
}

.character_drq div:nth-of-type(1){
	order: 2;
	height: 777px;
	width: auto;
	margin-left: 10%;
}

.character_drq div:nth-of-type(2){
	order: 1;
	width: 60%;
}

.character_secret div:nth-of-type(1){
	order: 1;
	width: 30%;
	height: auto;
}

.character_secret div:nth-of-type(1) img{
	width:100%;
	height: auto;
}

.character_secret div:nth-of-type(2){
	order: 2;
	width: 60%;
	height: auto;
	margin-left: 10%;
}

.character_secret div:nth-of-type(2) h3{
	font-size: 36px;
}



/*------------------------------------------

				System

--------------------------------------------*/
.system_contents{
	display: flex;
	justify-content: space-between;
	flex-wrap: wrap;
}


.system_contents > div{
	width:45%;
	margin: 50px 0;
	text-align: center;
}

.system_contents div div{
	position: relative;
	width:100%; /* 横幅は100%で固定 */
	height:0; /* 高さは0にしておく(padding-topで高さを指定するため) */
	padding-top: 56.25%; /* 高さを指定(16:9) */
	background: url(../img/nowloading.png) no-repeat;
	background-size:cover;
}

.system_contents div div iframe{
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
}

.system_contents h3{
	font-size: 24px;
	font-weight: normal;
	padding: 0.5em;
	margin-bottom:0;
	color: #fff;
	background: #0a009b;
	border-radius:15px 15px 0 0 ;
}

.system_contents img{
	width:100%;
	height: auto;
}



/*------------------------------------------

				Gallery

--------------------------------------------*/

.gallery .picture{
	display: flex;
	text-align: center;
}

.gallery .picture a img{
	border: #fff solid 2px;
	height: auto;
	width: 95%;
}

.gallery h2:nth-of-type(2){
	margin: 100px 0 2em;
	padding: 0.5em 0;
	border-top: #fff 1px dashed;
	border-bottom: #fff 1px dashed;
	font-size: 30px;
}

.gallery h2:nth-of-type(3),.gallery h2:nth-of-type(4){
	margin: 100px 0 0;
	padding: 0.5em 0;
	border-top: #fff 1px dashed;
	border-bottom: #fff 1px dashed;
	font-size: 30px;
}

.system_contents.promotion_video > div{
	display: block;
	width:80%;
	height: auto;
	margin: 50px auto;

}

/*------------------------------------------

				Product

--------------------------------------------*/

.product h3{
	font-size:24px;
	margin: 2em auto 1em;
	padding: 0 0.5em;
	width:fit-content;
	background: #fff;
	border-radius: 3px;
	color: rgba(10,0,155,1);
	text-align: center;
}

.product p{
	text-align: center;
	margin-top: 2em;
}

.product h2 + table{
	margin: 50px auto 0;
}

.product table td:first-of-type{
	padding: 0 2em 0 0;
}

.product .spec_hitsuyou,
.product .spec_suishou{
	width: 47%;
	display: inline-block;
}

.spec_hitsuyou{
	margin-right: 5%;
}

.product .spec_hitsuyou table{
	margin: 0;
}

.spec_hitsuyou h4,
.spec_suishou h4{
	border-bottom: #fff 1px solid;
}

.product table:nth-of-type(3)::after{
	content: "";
	display: auto;
	clear: both;
}


/*------------------------------------------

				sals_platform

--------------------------------------------*/


.sales-site{
	text-align: center;
}

.sales-site h2{
	margin-bottom: 100px;
}



/*------------------------------------------

				Footer

--------------------------------------------*/

footer{
	display:block;
	padding: 50px 0;
	background:#0a009b;
	width:100%;
	text-align: center;
}

footer img[alt="フラッシュリポスト"]{
	width:300px;
	height: auto;
}

footer nav ul{
	list-style: none;
	margin: 50px 0;
}

footer nav ul li{
	display: inline-block;
	padding: 0 1em 0 0.5em;
	border-right: #fff 1px solid;
	line-height: 1em;
	font-weight: bold;
}

footer nav ul li:last-of-type{
	border: none;
}

footer li a{
	text-decoration: none;
}

footer img[alt="しかぶった"]{
	height: 60px;
	width: auto;
	filter: grayscale(100%) brightness(10);
}

footer p{
	font-size: small;
}

.copyright{
	text-align: center;
	padding: 0;
	font-size: small;
}



/*-------------------------------------
 * 
 * モーダルウインドウ
 * 
 * ----------------------------------*/
 .modal{
	position:fixed;
	display:none;
	z-index:9999;
	top:calc(50% - 390px/2);
	left:calc(50% - 790px/2);
	width:790px;
	height:390px;
	padding:20px;
	text-align:center;
	border-radius:10px;
	background:#FFFFFF url(https://shikabutta.xyz/wp-content/uploads/site_img/naomi_bunny.png) no-repeat right top;
	color: #505050;
  }

  .modal p{
	color: #505050;
  }

  div[style*="background: rgb(255, 128, 191);"]{
	background: #0a009b!important;
  }
  
  @media(max-width:800px){
	  .modal{
		  width:95%;
		  margin:0;
		  top:10%;
		  left:2.5%;
	  }
	  .modal_img{
		  display:block;
		  margin:0 auto;
		  width:fit-content;
		  height: fit-content;
	  }
  }
  
  @media(max-width:750px){
	  .modal{
		  background-image:none;
	  }
  }
  
  .modal p{
	margin-bottom:10px;
	font-size:small;
  }
  
  
  .modal a{
	cursor:pointer;
  }


/*-------------------------------------
 * 
 * シェアボタン
 * 
 * ----------------------------------*/

  /* ▼各ボタン共通の装飾 */
.snssharebtn {
	display: inline-block;   /* インラインブロック化 */
	background-color: #ccc;  /* 背景色 */
	color: white;            /* 文字色 */
	border-radius: 3px;      /* 角丸 */
	line-height: 20px;       /* 行高 */
	font-size: 12px;         /* 文字サイズ */
	font-weight: bold;       /* 太字 */
	padding: 0 0.75em;       /* 内側余白(上下→左右) */
	text-decoration: none;   /* リンクの下線を消す */
	vertical-align: bottom;  /* 下端を揃える */
	margin-top: 7px;
 }
 /* ▼各ボタンの配色 */
 .snsbtn-twitter { background-color: #1d9bf0; }
 .snsbtn-facebook { background-color: #1877f2; }
 .snsbtn-line { background-color: #00c300; }
 .snsbtn-hatenabookmark { background-color: #00a4de; }
 .snsbtn-pocket { background-color: #ef4256; }
 .snsbtn-copy { background-color: green; }


 .sns-share{
	padding: 50px 0 50px 0;
	height: fit-content;
	text-align: center;
 }