@charset "utf-8";
@import url("bootstrap-4.3.1.css");
@import url("reset.css");
@import url("magnific-popup.css");
@import url("swiper.min.css");
@import url("sp.css");
@import url("icon_style.css");
/*　FONT
====================================================================================================== */
body {
  font-family: futura-pt, 'FOT-ライラ Std DB', sans-serif;
  font-weight: 400;
  font-style: normal;
  color: #fff;
  background: #000000;
}
p span {
  font-family: futura-pt, 'FOT-ライラ Std DB', sans-serif;
}
@font-face {
  font-family: 'icomoon';
  src: url('fonts/icomoon.eot?mgdqi2');
  src: url('fonts/icomoon.eot?mgdqi2#iefix') format('embedded-opentype'), url('fonts/icomoon.ttf?mgdqi2') format('truetype'), url('fonts/icomoon.woff?mgdqi2') format('woff'), url('fonts/icomoon.svg?mgdqi2#icomoon') format('svg');
  font-weight: normal;
  font-style: normal;
}
[class^="icon-"], [class*=" icon-"] {
  /* use !important to prevent issues with browser extensions that change fonts */
  font-family: 'icomoon' !important;
  speak: none;
  font-style: normal;
  font-weight: normal;
  font-variant: normal;
  text-transform: none;
  line-height: 1;
  /* Better Font Rendering =========== */
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
.icon-facebook:before {
  content: "\ea91";
  font-size: 1.4rem;
  color: #d2d2d2;
}
.icon-twitter:before {
  content: "\ea96";
  font-size: 1.4rem;
  color: #d2d2d2;
}
/*　./FONT
====================================================================================================== */
/*　pc/sp
====================================================================================================== */
@media only screen and (min-width: 1025px) {
  body {
    background: #000 url("../images/bg_pc.jpg")no-repeat center top;
    background-attachment: fixed;
  }
  .pc {
    display: block !important;
  }
  .sp {
    display: none !important;
  }
}
@media only screen and (max-width: 1024px) {
  .pc {
    display: none !important;
  }
  .sp {
    display: block !important;
  }
}
/*　./pc/sp
====================================================================================================== */
.main {
  overflow: hidden;
}
/*　Loading
====================================================================================================== */
.loading {
  position: fixed;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  margin: auto;
  background: #000000;
  z-index: 999999999;
  overflow: hidden;
}
.loading img {
  position: absolute;
  width: 100%;
  max-width: 250px;
  height: auto;
  margin-top: -12vh;
  margin-left: -4vw;
  z-index: 99999999;
}
@media only screen and (max-width: 823px) {
  .loading img {
    width: 80%;
    top: 40%;
    left: 38%;
  }
}
@media only screen and (max-width: 568px) {
  .loading img {
    width: 60%;
    top: 32%;
    left: 32%;
  }
}
@media only screen and (max-width: 414px) {
  .loading img {
    top: 32%;
    left: 25%;
  }
}
/*　./Loading
====================================================================================================== */
/*　side_menu
====================================================================================================== */
.page-wrapper .sidebar-wrapper, .sidebar-wrapper .sidebar-brand > a, .sidebar-wrapper .sidebar-dropdown > a:after, .sidebar-wrapper .sidebar-menu .sidebar-dropdown .sidebar-submenu li a:before, .sidebar-wrapper ul li a i, .page-wrapper .page-content, .sidebar-wrapper .sidebar-search input.search-menu, .sidebar-wrapper .sidebar-search .input-group-text, .sidebar-wrapper .sidebar-menu ul li a, #show-sidebar, #close-sidebar {
  -webkit-transition: all 0.3s ease;
  -moz-transition: all 0.3s ease;
  -ms-transition: all 0.3s ease;
  -o-transition: all 0.3s ease;
  transition: all 0.3s ease;
}
/*----------------page-wrapper----------------*/
.page-wrapper {
  height: 100vh;
}
.page-wrapper .theme {
  width: 40px;
  height: 40px;
  display: inline-block;
  border-radius: 4px;
  margin: 2px;
}
/*.page-wrapper .theme.chiller-theme {
  background: #1e2229;
}*/
/*----------------toggeled sidebar----------------*/
.page-wrapper.toggled .sidebar-wrapper {
  right: 0px;
}
@media screen and (min-width: 768px) {
  .page-wrapper.toggled .page-content {
    padding-right: 300px;
  }
}
/*----------------show sidebar button----------------*/
.HeaderLogo {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100px;
  background: url("../images/bg_header.png") no-repeat center top;
  z-index: 999;
}
.sgmlogo {
  margin: auto;
  width: 1000px;
}
.sgmlogo img {
  position: absolute;
  display: block;
}
#show-sidebar {
  position: fixed;
  right: 30px;
  top: 0;
  width: 50px;
  transition-delay: 0.3s;
  z-index: 99999;
}
.page-wrapper.toggled #show-sidebar {
  right: -100px;
}
/*----------------sidebar-wrapper----------------*/
.sidebar-wrapper {
  width: 250px;
  height: 100%;
  max-height: 100%;
  position: fixed;
  top: 0;
  right: -300px;
  z-index: 999999;
}
.sidebar-wrapper ul {
  list-style-type: none;
  padding: 0;
  margin: 0;
}
.sidebar-wrapper a {
  text-decoration: none;
}
/*----------------sidebar-content----------------*/
.sidebar-content {
  max-height: calc(100% - 30px);
  height: calc(100% - 30px);
  /*  overflow-y: auto;*/
  position: relative;
  z-index: 999;
}
.sidebar-content.desktop {
  overflow-y: hidden;
}
.header-menu-logo.ev-logo img {
  margin: auto;
  width: 80%;
  height: auto;
}
/*--------------------sidebar-brand----------------------*/
.sidebar-wrapper .sidebar-brand {
  /*  padding: 20px;*/
  display: flex;
  align-items: center;
}
.sidebar-brand {
  justify-content: flex-end;
}
.sidebar-wrapper .sidebar-brand > a {
  text-transform: uppercase;
  /*  font-weight: bold;*/
  flex-grow: 1;
}
.sidebar-wrapper .sidebar-brand #close-sidebar {
  cursor: pointer;
  font-size: 20px;
}
/*--------------------sidebar-header----------------------*/
.sidebar-wrapper {
  width: 30%;
  max-width: 250px;
}
.sidebar-wrapper {
  padding: 20px;
  overflow: hidden;
}
.sidebar-header {
  overflow: hidden;
}
.sidebar-wrapper .sidebar-header {
  float: left;
  width: 100%;
  max-width: 230px;
  overflow: hidden;
}
/*----------------------sidebar-menu-------------------------*/
.sidebar-wrapper .sidebar-menu {
  float: left;
  width: 100%;
  max-width: 180px;
  overflow: hidden;
}
.sidebar-wrapper .sidebar-menu_s {
  float: left;
  width: 100%;
  max-width: 180px;
  overflow: hidden;
}
.sidebar-wrapper .sidebar-menu .header-menu span {
  display: inline-block;
}
span.st {
  font-size: 0.6rem;
  font-weight: 200;
  color: #d2d2d2;
}
p.cp_text {
  margin-top: -0.2rem;
  font-family: futura-pt, "FOT-ライラ Std DB", sans-serif;
  font-size: 1.4rem;
  letter-spacing: 0.1rem;
  color: #d2d2d2;
}
p.cp_text.cp_12 {
  margin-top: -0.5rem;
  color: #d2d2d2;
}
.u_line:hover, .icon-twitter:hover, .icon-facebook:hover {
  opacity: 0.6;
}
.sidebar-menu li {}
.sidebar-menu li a::after {
  display: block;
  content: '';
  bottom: 0;
  left: 0;
  width: 0;
  height: 1px;
  background: #fff;
  opacity: 0.6;
  transition: all 0.3s ease 0s;
}
.sidebar-menu li :hover::after {
  width: 100%;
}
.header-menu.off span, .header-menu.off p {
  opacity: 0.2;
}
.th_m {
  border-bottom: solid 2px #fff;
  border-radius: 1px;
}
/*--------------------------page-content-----------------------------*/
.page-wrapper .page-content {
  display: inline-block;
  width: 100%;
  padding-left: 0px;
  padding-top: 20px;
}
.page-wrapper .page-content > div {
  padding: 20px 40px;
}
.page-wrapper .page-content {
  overflow-x: hidden;
}
/*------scroll bar---------------------*/ ::-webkit-scrollbar {
  width: 10px;
}
::-webkit-scrollbar-track {
  background: #f5ede0;
  border-left: solid 1px #f9f7ee;
}
::-webkit-scrollbar-thumb {
  background: #050911;
  border-radius: 10px;
  box-shadow: inset 0 0 0 1px #fff;
}
/*-----------------------------chiller-theme-------------------------------------------------*/
.chiller-theme .sidebar-wrapper {
  background: url("../images/Menu_bg.jpg")repeat-y right;
}
.chiller-theme .sidebar-wrapper .sidebar-menu .header-menu span {
  color: #d2d2d2;
}
/*　./side_menu
====================================================================================================== */
/*　top_kv
====================================================================================================== */
.top_kv {
  position: relative;
  margin: auto;
  width: 100%;
}
@media only screen and (min-width: 765px) {
  .top_kv {
    background-size: cover;
  }
  .top_kv_in {
    position: relative;
    margin: auto;
    width: 1000px;
    height: 800px;
  }
}
@media only screen and (max-width: 768px) {
  .top_kv {
    width: 100%;
    height: 100vh;
/*    background: url("../images/bg_spm.jpg")no-repeat;*/
    background-size: cover;
  }
}
.top_logo {
  position: absolute;
  width: 450px;
  height: 450px;
  top: 165px;
  right: 63px;
  z-index: 1;
}
.top_chara {
  position: absolute;
  width: 1100px;
  height: 1100px;
  top: 128px;
  right: 237px;
  z-index: 2;
}
.top_chara_e1 {
  position: absolute;
  width: 1100px;
  height: 1100px;
  top: 128px;
  right: 237px;
  mix-blend-mode: screen;
  z-index: 4;
}
.top_chara_e1.on {
  animation: Ani_1 2s 1s ease infinite;
}
.top_chara_e2 {
  position: absolute;
  width: 1100px;
  height: 1100px;
  top: 128px;
  right: 237px;
  mix-blend-mode: screen;
  z-index: 4;
}
.top_chara_e2.on {
  animation: Ani_1 2s 0s ease infinite;
}
/*　./top_kv
====================================================================================================== */
/*　s1_SoldierType
====================================================================================================== */
.sgmlink {
  position: relative;
  margin: auto;
  width: 1000px;
  height: 190px;
}
.top_l1 .pc {
  position: absolute;
  width: 351px;
  height: 87px;
  top: -135px;
  right: 90px;
}
.top_l2 .pc {
  position: absolute;
  width: 351px;
  height: 87px;
  top: -30px;
  right: 90px;
}
.top_l1 img, .top_l2 img {
  transition: all 0.8s ease;
}
.top_l1 img:hover, .top_l2 img:hover {
  opacity: 0.5;
  transition: all 0.8s ease;
}
.s_down {
  position: relative;
  margin: auto;
  /*  margin-bottom: -110px;*/
  width: 80px;
  height: 80px;
  z-index: 99;
  animation: Ani_2 3s ease infinite;
}
.s_down img {
  margin: auto;
}
.s1_SoldierType {
  position: relative;
  width: 100%;
  height: auto;
  /*background: url("../images/S1_bg.png") no-repeat center top;*/
  /*overflow: hidden;*/
  z-index: 4;
}
.s1_SoldierType_bg {
  position: absolute;
  margin: auto;
  top: -150px;
}
/*角度調整用*/
.t--5 {
  transform: skewY(-3deg);
}
.guide_st {
  width: 100%;
  height: auto;
}
.guide_st img {
  display: block;
  width: 100%;
  height: auto;
}
.guide_s {
  width: 100%;
  height: auto;
  overflow: hidden;
}
.guide_s img {
  display: block;
  width: 100%;
  height: auto;
  transition: all 0.8s ease;
}
.guide_s img:hover {
  transform: scale(1.1);
  transition: all 0.8s ease;
}
/*概要 説明 枠*/
/*概要 説明 数字*/
.s1_g_n {
  margin-top: -12rem;
  margin-bottom: 12rem;
  width: 80px;
  height: 80px;
  background: #fff;
}
.s1_g_n.b_last {
  margin-bottom: 18rem;
}
.s1_no {
  font-family: roycroft, sans-serif;
  font-size: 4rem;
  letter-spacing: 0.1rem;
  color: #0b1525;
}
/*概要 説明 内容*/
.s1_g_in {
  width: 450px;
  height: 150px;
  padding-top: 2rem;
  padding-left: 3rem;
  margin-left: 3rem;
  background: url("../images/g_in.png") no-repeat;
  z-index: 3;
}
.s1_g_in::after {
  position: absolute;
  content: url("../images/g_in.png");
  top: -7px;
  left: -7px;
  transition: all .3s;
  z-index: -1;
}
.s1_g_in:hover::after {
  top: 8px;
  left: 8px;
}
.s1_g_in p {}
/*text関連*/
div, p, th, td, li, dt, dd {
  word-wrap: break-word;
  word-break: break-all;
}
/*フォントカラー*/
.fc_y {
  color: #fff046;
}
.fc_red {
  color: #eb0000;
}
/*基本内容幅*/
.t_w80 {
  position: relative;
  margin: auto;
  width: 80%;
  height: auto;
}
.t_w90 {
  position: relative;
  margin: auto;
  width: 90%;
  height: auto;
}
.t_w80 p, .t_w90 p {
  font-family: 'FOT-ライラ Std DB', sans-serif;
}
/*　./s1_SoldierType
====================================================================================================== */
/*　s2_Jc-Cv
====================================================================================================== */
.s2_Jc-Cv {
  position: relative;
  width: 100%;
  height: auto;
  overflow: hidden;
  z-index: 5;
}
.s2_Jc-Cv_bg {
  position: absolute;
  margin: auto;
  float: right;
  top: 0px;
}
.s2_Jc-Cv_bg img {}
.title_s.s2 {
  padding-top: 350px;
}
.swiper-slide img {
  display: block;
  width: 100%;
  height: auto;
}
/* --- popup Gallery 矢印指定 --- */
.mfp-arrow {
  width: 80px;
  height: 80px;
}
.mfp-arrow.mfp-arrow-left.mfp-prevent-close {
  margin-left: 2%;
  background: url(../images/nav_pre.png)no-repeat;
  animation: anime_c1b 3s linear infinite;
}
.mfp-arrow.mfp-arrow-right.mfp-prevent-close {
  margin-right: 2%;
  background: url("../images/nav_next.png")no-repeat;
  animation: anime_c1b 3s linear infinite;
}
button.mfp-close {
  background: url("../images/Menu_close.png")no-repeat !important;
}
span.or {
  color: #ffc000
}
/*　./s2_Jc-Cv
====================================================================================================== */
/* --- リスト設定 --- */
li.caution p {
  font-size: 0.8rem;
  font-size: bold;
  padding: 0.2rem;
}
li.caution::before {
  display: block;
  content: "※";
  font-size: 0.7rem !important;
  margin-left: -0.9rem !important;
  margin-bottom: -1.1rem !important;
}
li.caution_lon {
  margin-left: 1rem !important;
}
li.caution_lon::before {
  display: block;
  content: "・";
  font-size: 0.7rem !important;
  margin-left: -0.6rem !important;
  margin-bottom: -1.3rem !important;
}
li.caution_lon p {
  font-size: 0.8rem;
  font-size: bold;
  padding: 0.2rem;
}
@media only screen and (max-width: 600px) {
  table, li.caution p {
    font-size: 0.7rem !important;
  }
}
/*　s3_data
====================================================================================================== */
.s3_data {
  position: relative;
  width: 100%;
  height: auto;
  background: rgba(0, 0, 0, 0.65);
  overflow: hidden;
  padding-bottom: 9rem;
  margin-bottom: -8rem;
  z-index: 5;
}
.f_appico img {
  width: 100%;
  max-width: 150px;
}
.footer_gd p {
  color: #fff;
  font-size: 0.8rem;
  padding-bottom: 0.2rem;
  font-weight: 600;
  font-style: normal;
}
@media (max-width: 600px) {
  .f_appico img {}
  aside.footer_gd p {
    font-size: 0.8rem !important;
  }
}
/*　./s3_data
====================================================================================================== */
/*　pt
====================================================================================================== */
.pt_area {
  position: fixed;
  width: 100%;
  height: 50px;
  margin: auto;
  left: 0;
  bottom: 0;
  z-index: 99;
}
.pt_btn {
  margin: auto;
  width: 100%;
  right: 20px;
  transition: all 1s ease-in-out;
}
.pt_btn img {
  opacity: 1;
  cursor: pointer;
  transition: all 1s ease-in-out;
}
.pt_btn img:hover {
  opacity: 0.5;
  transition: all 1s ease-in-out;
}
@media only screen and (max-width: 768px) {
  .pt_btn {
    width: 14%;
    right: 0;
  }
  .pt_btn img {
    width: 80%;
    height: auto;
  }
}
/*　./pt
====================================================================================================== */
/*　footer
====================================================================================================== */
.footer {
  position: relative;
  width: 100%;
  bottom: 0;
  background: #000000eb;
  border-top: solid 2px #000000;
}
.f_logo {
  position: relative;
  margin: auto;
  width: 80%;
}
.f_logo img {
  display: block;
  width: 100%;
  max-width: 380px;
}
.footer_cc p {
  color: #b3b3b3;
  font-size: 0.6rem;
  font-family: futura-pt, sans-serif;
  letter-spacing: 0.1rem;
}
.footer_cc p span {
  font-family: futura-pt, "FOT-ライラ Std DB", sans-serif;
}
/*　./footer
====================================================================================================== */
/*　animation
====================================================================================================== */
.f-in {
  transition: all 1s;
  transform: translate(0, 200px);
  opacity: 0;
}
.f-in.move {
  transform: translate(0, 0);
  opacity: 1;
}
.f-in_a {
  transition: all 1s;
  transform: translate(0, -200px);
  opacity: 0;
}
.f-in_a.move {
  transform: translate(0, 0);
  opacity: 1;
}
.f-in_l {
  transition: all 1s;
  transform: translate(-200px, 0);
  opacity: 0;
}
.f-in_l.move {
  transform: translate(0, 0);
  opacity: 1;
}
.f-in_r {
  transition: all 1s;
  transform: translate(200px, 0);
  opacity: 0;
}
.f-in_r.move {
  transform: translate(0, 0);
  opacity: 1;
}
@keyframes Ani_1 {
  0% {
    opacity: 1;
  }
  70% {
    opacity: 0.8;
  }
  100% {
    opacity: 1;
  }
}
@keyframes Ani_2 {
  0% {
    top: 0px;
  }
  70% {
    top: 20px;
  }
  100% {
    top: 0px;
  }
}
@keyframes Ani_3 {
  0% {
    transform: scale(1);
  }
  70% {
    transform: scale(0.9);
  }
  100% {
    transform: scale(1);
  }
}
/*　./animation
====================================================================================================== */