@charset "UTF-8";
/* Scss Document */
/* Scss Document */
/*▼色▼*/
/*▼文字▼*/
/*▼サイズ▼*/
/*▼FLEX系▼*/
/*▼グリッド系▼*/
/*▼【IS_PC】クリック端末用／上部FIXメニュー▼*/
body.is_tab .sitehead, body.is_sp .sitehead {
  display: none;
  overflow: hidden;
  height: 0px;
  width: 0px; }

.sitehead {
  width: 100%;
  position: fixed;
  z-index: 5000;
  top: 0;
  left: 0;
  border-bottom: 1px solid #c4a162; }
  .sitehead > .box {
    height: 7rem;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-box-pack: justify;
    -ms-flex-pack: justify;
    justify-content: space-between;
    background-color: whitesmoke;
    padding: 0 0 0 3rem;
    background-color: white;
    /*background-color: rgba(243,255,56,0.5);*/ }
  .sitehead a {
    text-decoration: none !important; }
  .sitehead h1 {
    line-height: 1;
    margin-top: 0.3rem; }
    .sitehead h1 a:hover {
      opacity: 0.8; }
    .sitehead h1 .tit1, .sitehead h1 .tit2 {
      display: inline-block;
      margin-right: 0.35em;
      color: #c4a162; }
    .sitehead h1 .tit1 {
      font-size: 2.3rem;
      font-family: 'Josefin Sans', sans-serif;
      font-weight: 500 !important; }
    .sitehead h1 .tit2 {
      font-size: 2.1rem;
      font-family: 'Noto Sans JP', sans-serif;
      font-weight: 500 !important; }
  .sitehead .menu_main ul {
    list-style: none; }
  .sitehead .menu_main > ul.mainmenu {
    margin: 0;
    padding: 0;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: justify;
    -ms-flex-pack: justify;
    justify-content: space-between;
    -webkit-box-align: end;
    -ms-flex-align: end;
    align-items: flex-end; }
    .sitehead .menu_main > ul.mainmenu > li {
      margin: 0;
      padding: 0; }
      .sitehead .menu_main > ul.mainmenu > li.manual h2 a::after, .sitehead .menu_main > ul.mainmenu > li.manual.menuon > ul.submenu li::after,
      .sitehead .menu_main > ul.mainmenu > li.manual > ul.submenu > li h2::after {
        background-image: -moz-linear-gradient(0deg, #d672b0 0%, #876cbe 100%);
        background-image: -webkit-linear-gradient(0deg, #d672b0 0%, #876cbe 100%);
        background-image: -ms-linear-gradient(0deg, #d672b0 0%, #876cbe 100%); }
      .sitehead .menu_main > ul.mainmenu > li.world h2 a::after, .sitehead .menu_main > ul.mainmenu > li.world.menuon > ul.submenu li::after,
      .sitehead .menu_main > ul.mainmenu > li.world > ul.submenu > li h2::after {
        background-image: -moz-linear-gradient(0deg, #876cbe 0%, #65c0cb 100%);
        background-image: -webkit-linear-gradient(0deg, #876cbe 0%, #65c0cb 100%);
        background-image: -ms-linear-gradient(0deg, #876cbe 0%, #65c0cb 100%); }
      .sitehead .menu_main > ul.mainmenu > li.character h2 a::after, .sitehead .menu_main > ul.mainmenu > li.character.menuon > ul.submenu li::after,
      .sitehead .menu_main > ul.mainmenu > li.character > ul.submenu > li h2::after {
        background-image: -moz-linear-gradient(0deg, #65c0cb 0%, #1f3691 100%);
        background-image: -webkit-linear-gradient(0deg, #65c0cb 0%, #1f3691 100%);
        background-image: -ms-linear-gradient(0deg, #65c0cb 0%, #1f3691 100%); }
      .sitehead .menu_main > ul.mainmenu > li.character > ul.submenu li .scroll .area > ul li {
        text-align: left; }
      .sitehead .menu_main > ul.mainmenu > li.character > ul.submenu li .scroll .area > ul li a {
        padding: 0.6rem !important;
        -webkit-box-pack: start;
        -ms-flex-pack: start;
        justify-content: flex-start; }
      .sitehead .menu_main > ul.mainmenu > li.character > ul.submenu li .scroll .area > ul li.mini {
        -ms-flex-item-align: center;
        align-self: center; }
      .sitehead .menu_main > ul.mainmenu > li.character > ul.submenu li .scroll .area > ul li.mini a {
        margin-bottom: 1rem; }
      .sitehead .menu_main > ul.mainmenu > li.character > ul.submenu li .scroll .area > ul li.mini a span::before {
        left: -3.6rem !important; }
      .sitehead .menu_main > ul.mainmenu > li.character > ul.submenu li .scroll .area > ul li a img {
        width: 6rem !important; }
      .sitehead .menu_main > ul.mainmenu > li.character > ul.submenu li .scroll .area > ul li a:hover img {
        transform: scale(1.1) !important; }
      .sitehead .menu_main > ul.mainmenu > li.strategy h2 a::after, .sitehead .menu_main > ul.mainmenu > li.strategy.menuon > ul.submenu li::after,
      .sitehead .menu_main > ul.mainmenu > li.strategy > ul.submenu > li h2::after {
        background-image: -moz-linear-gradient(0deg, #1f3691 0%, #6e248c 100%);
        background-image: -webkit-linear-gradient(0deg, #1f3691 0%, #6e248c 100%);
        background-image: -ms-linear-gradient(0deg, #1f3691 0%, #6e248c 100%); }
      .sitehead .menu_main > ul.mainmenu > li:last-child {
        margin-right: 0; }
        .sitehead .menu_main > ul.mainmenu > li:last-child h2 a {
          padding-right: 3rem; }
      .sitehead .menu_main > ul.mainmenu > li h2 a {
        display: inline-block;
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-orient: vertical;
        -webkit-box-direction: normal;
        -ms-flex-direction: column;
        flex-direction: column;
        -webkit-box-pack: end;
        -ms-flex-pack: end;
        justify-content: flex-end;
        -webkit-box-align: start;
        -ms-flex-align: start;
        align-items: flex-start;
        height: 7rem;
        padding: 0 1.2rem; }
        .sitehead .menu_main > ul.mainmenu > li h2 a big, .sitehead .menu_main > ul.mainmenu > li h2 a small {
          line-height: 1; }
        .sitehead .menu_main > ul.mainmenu > li h2 a big {
          font-family: 'Josefin Sans', sans-serif;
          font-weight: 400 !important;
          color: #c4a162;
          font-size: 2.6rem; }
        .sitehead .menu_main > ul.mainmenu > li h2 a small {
          font-family: 'Noto Sans JP', sans-serif;
          font-weight: 500 !important;
          font-size: 1.2rem;
          margin-left: 1px; }
        .sitehead .menu_main > ul.mainmenu > li h2 a::after {
          content: '';
          margin-top: 8px;
          display: block;
          width: 100%;
          height: 4px;
          background-size: 0% auto;
          background-repeat: no-repeat;
          background-position: left bottom;
          transition: 0.2s; }
        .sitehead .menu_main > ul.mainmenu > li h2 a:hover::after {
          background-size: 100% auto; }
      .sitehead .menu_main > ul.mainmenu > li > ul.submenu {
        border-top: 1px solid #c4a162;
        margin: 0;
        padding: 0;
        position: fixed;
        z-index: +2;
        top: 7rem;
        left: 0;
        height: 0;
        width: 100%;
        background-color: rgba(0, 0, 0, 0.9);
        transition: 0s;
        display: none;
        min-height: calc(100svh - 70px); }
        .sitehead .menu_main > ul.mainmenu > li > ul.submenu > li {
          margin: 0;
          padding: 0;
          position: relative;
          height: 100%;
          width: 100%;
          text-align: center; }
          .sitehead .menu_main > ul.mainmenu > li > ul.submenu > li::after {
            position: absolute;
            bottom: 0;
            left: 0;
            content: '';
            display: block;
            z-index: +1;
            height: 100%;
            width: 100%;
            background-repeat: repeat-y;
            background-size: contain;
            background-position: top center; }
          .sitehead .menu_main > ul.mainmenu > li > ul.submenu > li .scroll {
            overflow-y: scroll;
            scrollbar-width: none;
            height: 100%; }
            .sitehead .menu_main > ul.mainmenu > li > ul.submenu > li .scroll::-webkit-scrollbar {
              display: none; }
            .sitehead .menu_main > ul.mainmenu > li > ul.submenu > li .scroll .area {
              display: inline-block;
              padding: 0 2.5rem 2.5rem 2.5rem; }
              .sitehead .menu_main > ul.mainmenu > li > ul.submenu > li .scroll .area h2 {
                color: white;
                font-size: 2.8rem;
                font-family: 'Josefin Sans', sans-serif;
                font-weight: 400 !important;
                margin-top: 6rem;
                display: -webkit-box;
                display: -ms-flexbox;
                display: flex;
                -webkit-box-orient: vertical;
                -webkit-box-direction: normal;
                -ms-flex-direction: column;
                flex-direction: column;
                -webkit-box-pack: start;
                -ms-flex-pack: start;
                justify-content: flex-start;
                -webkit-box-align: center;
                -ms-flex-align: center;
                align-items: center; }
                .sitehead .menu_main > ul.mainmenu > li > ul.submenu > li .scroll .area h2::after {
                  content: '';
                  display: inline-block;
                  height: 4px;
                  width: 100px;
                  background-position: center;
                  background-size: contain;
                  margin-top: 3.6rem;
                  background-color: rebeccapurple; }
              .sitehead .menu_main > ul.mainmenu > li > ul.submenu > li .scroll .area > ul {
                margin: 4.6rem auto 6rem auto;
                padding: 0;
                display: -webkit-box;
                display: -ms-flexbox;
                display: flex;
                -webkit-box-orient: vertical;
                -webkit-box-direction: normal;
                -ms-flex-direction: column;
                flex-direction: column;
                -webkit-box-pack: start;
                -ms-flex-pack: start;
                justify-content: flex-start;
                -webkit-box-align: center;
                -ms-flex-align: center;
                align-items: center;
                width: -moz-fit-content;
                width: fit-content; }
                .sitehead .menu_main > ul.mainmenu > li > ul.submenu > li .scroll .area > ul > li {
                  margin: 0;
                  padding: 0;
                  -ms-flex-item-align: stretch;
                  align-self: stretch;
                  text-align: center; }
                  .sitehead .menu_main > ul.mainmenu > li > ul.submenu > li .scroll .area > ul > li:first-child {
                    margin-top: 0; }
                  .sitehead .menu_main > ul.mainmenu > li > ul.submenu > li .scroll .area > ul > li a {
                    padding: 1.2rem;
                    display: inline-block;
                    display: -webkit-box;
                    display: -ms-flexbox;
                    display: flex;
                    -webkit-box-align: center;
                    -ms-flex-align: center;
                    align-items: center;
                    -webkit-box-pack: center;
                    -ms-flex-pack: center;
                    justify-content: center; }
                    .sitehead .menu_main > ul.mainmenu > li > ul.submenu > li .scroll .area > ul > li a img, .sitehead .menu_main > ul.mainmenu > li > ul.submenu > li .scroll .area > ul > li a span {
                      transition: 0.3s;
                      line-height: 1; }
                    .sitehead .menu_main > ul.mainmenu > li > ul.submenu > li .scroll .area > ul > li a img {
                      width: 2rem;
                      height: auto;
                      margin-right: 1.2rem; }
                    .sitehead .menu_main > ul.mainmenu > li > ul.submenu > li .scroll .area > ul > li a span {
                      font-size: 1.8rem;
                      font-family: 'Noto Sans JP', sans-serif;
                      font-weight: 500 !important;
                      color: white;
                      position: relative; }
                      .sitehead .menu_main > ul.mainmenu > li > ul.submenu > li .scroll .area > ul > li a span.ic::before {
                        opacity: 0;
                        transition: 0.3s;
                        content: '';
                        display: inline-block;
                        width: 2rem;
                        height: 2rem;
                        position: absolute;
                        top: 0;
                        left: -3rem;
                        background-position: center;
                        background-size: contain;
                        background-repeat: no-repeat;
                        background-image: url("../img/menu/menu_select.png"); }
                    .sitehead .menu_main > ul.mainmenu > li > ul.submenu > li .scroll .area > ul > li a:hover img {
                      transform: scale(1.2);
                      opacity: 1 !important; }
                    .sitehead .menu_main > ul.mainmenu > li > ul.submenu > li .scroll .area > ul > li a:hover span {
                      color: #c4a162; }
                      .sitehead .menu_main > ul.mainmenu > li > ul.submenu > li .scroll .area > ul > li a:hover span.ic::before {
                        opacity: 1; }
        .sitehead .menu_main > ul.mainmenu > li > ul.submenu.on li::after {
          animation: mainmenu_bg 0.2s ease-out 0.4s 1 forwards; }
      .sitehead .menu_main > ul.mainmenu > li.menuon ul.submenu {
        width: 100%;
        display: block; }

/*▼今いるメニューに線引き▼*/
body.is_pc.cat_manual .sitehead .menu_main.pc > ul.mainmenu > li.manual h2 a::after {
  background-size: 100% auto !important; }

body.is_pc.cat_world .sitehead .menu_main.pc > ul.mainmenu > li.world h2 a::after {
  background-size: 100% auto !important; }

body.is_pc.cat_character .sitehead .menu_main.pc > ul.mainmenu > li.character h2 a::after {
  background-size: 100% auto !important; }

body.is_pc.cat_strategy .sitehead .menu_main.pc > ul.mainmenu > li.strategy h2 a::after {
  background-size: 100% auto !important; }

/*▲今いるメニューに線引き▲*/
/*▲【IS_PC】クリック端末用／上部FIXメニュー▲*/
/*▼COMMING SOON対応▼*/
.sitehead .menu_main.pc > ul.mainmenu > li.cs {
  pointer-events: none !important; }
  .sitehead .menu_main.pc > ul.mainmenu > li.cs h2 {
    pointer-events: none !important; }
    .sitehead .menu_main.pc > ul.mainmenu > li.cs h2 a big, .sitehead .menu_main.pc > ul.mainmenu > li.cs h2 a small {
      color: #a0a0a0 !important; }

.sitehead .menu_main.pc > ul.mainmenu > li > ul.submenu > li .scroll .area > ul > li.cs a {
  pointer-events: none !important; }
  .sitehead .menu_main.pc > ul.mainmenu > li > ul.submenu > li .scroll .area > ul > li.cs a img {
    filter: grayscale(1) !important; }
  .sitehead .menu_main.pc > ul.mainmenu > li > ul.submenu > li .scroll .area > ul > li.cs a span {
    color: #a0a0a0 !important; }

/*▲COMMING SOON対応▲*/
@keyframes mainmenu_bg {
  0% {
    height: 100%; }
  100% {
    height: 0%; } }
/*---------------------------------------------------------------------------BP1920*/
/*---------------------------------------------------------------------------BP1600*/
/*---------------------------------------------------------------------------BP1280*/
/*---------------------------------------------------------------------------BP1024*/
@media (max-width: 1024px) {
  body.is_pc .sitehead_sp, body.is_tab .sitehead_sp, body.is_sp .sitehead_sp {
    display: block !important;
    overflow: inherit !important;
    height: inherit !important;
    width: 100% !important; }

  body.is_pc .sitehead {
    display: none !important; } }
/*---------------------------------------------------------------------------BP1023*/
/*---------------------------------------------------------------------------BP960*/
/*---------------------------------------------------------------------------BP896*/
/*---------------------------------------------------------------------------BP768*/
/*---------------------------------------------------------------------------BP767*/
/*---------------------------------------------------------------------------BP620*/
@media (max-width: 620px) {
  .sitehead h1 a .tit1 {
    font-size: 2.0rem;
    display: inline-block;
    margin-right: 0.1em; }

  .sitehead h1 a .tit2 {
    font-size: 1.8rem;
    display: inline-block; } }
/*---------------------------------------------------------------------------BP480*/