@charset "UTF-8";
body {
  font-family: 'Noto Sans JP', sans-serif;
  font-weight: 400;
  font-style: normal;
  color: #fff;
  background: #000;
  font-size: 16px; }

@media (max-width: 750px) {
  .img_pc {
    display: none !important; } }

.img_sp {
  display: none !important; }
  @media (max-width: 750px) {
    .img_sp {
      display: block !important; } }

.wrapper {
  overflow: hidden; }

.contents {
  width: calc(100% - 90px); }
  @media (max-width: 1024px) {
    .contents {
      width: 100%; } }

#mask {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 1050;
  width: 100vw;
  height: 100vh;
  background: rgba(0, 0, 0, 0.8);
  display: none; }

.imgreset {
  display: block; }

.top_area {
  background: #fff;
  width: 100%;
  position: relative; }

.head_area {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 30px 32px 0 90px; }
  .head_area h1 {
    position: relative;
    z-index: 100; }
  @media (max-width: 1024px) {
    .head_area {
      padding: 30px 32px 0 40px; } }
  @media (max-width: 750px) {
    .head_area {
      padding: 6px 0 0 20px; }
      .head_area h1 img {
        width: 60px;
        height: auto; } }

.head_area2 {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 30px 32px 0 90px;
  position: absolute;
  top: 0;
  left: 0;
  width: calc(100% - 122px); }
  .head_area2 h1 {
    position: relative;
    z-index: 100; }
  @media (max-width: 1024px) {
    .head_area2 {
      padding: 30px 32px 0 40px; } }
  @media (max-width: 750px) {
    .head_area2 {
      padding: 6px 0 0 20px; }
      .head_area2 h1 img {
        width: 60px;
        height: auto; } }

.show1, .show2, .show3, .show4 {
  opacity: 0;
  transition: 1.5s; }

.vis {
  opacity: 1; }

.side_menu {
  position: fixed;
  top: 0;
  right: 0;
  width: 90px;
  height: 100vh;
  background: #000;
  z-index: 1150;
  transition: .3s; }
  @media (max-width: 1024px) {
    .side_menu {
      top: 34px;
      right: 0;
      width: 56px;
      height: 56px; } }
  @media (max-width: 750px) {
    .side_menu {
      top: 34px; } }

.menu_trig {
  width: 90px;
  height: 30px;
  margin: 0 auto;
  transition: .3s;
  padding: 25px 0 15px 0;
  background: #000;
  position: absolute;
  top: 37px;
  left: 0;
  cursor: pointer; }
  .menu_trig span {
    display: block;
    width: 40px;
    height: 3px;
    background: #fff;
    margin: 0 auto 10px auto;
    transition: .3s; }
  @media (max-width: 1024px) {
    .menu_trig {
      margin: 18px auto 0 auto;
      width: 30px;
      height: 38px;
      padding: 0;
      position: static; }
      .menu_trig span {
        width: 30px;
        height: 2px;
        margin-bottom: 7px; } }

.menu {
  width: 750px;
  height: 100vh;
  position: fixed;
  top: 34px;
  right: -750px;
  background: -webkit-linear-gradient(top, #092640 0%, #234f85 100%);
  background: linear-gradient(to bottom, #092640 0%, #234f85 100%);
  z-index: 1100;
  transition: .5s;
  text-align: center; }
  .menu ul {
    width: 275px;
    margin: 0 auto 50px auto; }
    .menu ul li {
      margin-bottom: 20px; }
      .menu ul li a {
        color: #fff;
        font-weight: 700;
        font-size: 30px;
        text-decoration: none;
        transition: .3s;
        display: flex;
        justify-content: flex-start;
        align-items: center; }
        .menu ul li a img {
          margin-right: 5px; }
        @media (min-width: 750px) {
          .menu ul li a:hover {
            opacity: 0.7; } }
  .menu h2 img {
    max-width: 80%;
    height: auto; }
  @media (max-width: 750px) {
    .menu {
      width: 100%; }
      .menu ul {
        width: 170px;
        margin-bottom: 30px; }
        .menu ul li {
          margin-bottom: 30px; }
          .menu ul li a {
            font-size: 20px; }
            .menu ul li a img {
              width: 32px;
              height: auto; } }

.btn_twitter {
  transition: .3s; }
  @media (min-width: 750px) {
    .btn_twitter:hover {
      filter: brightness(1.5); } }
  @media (max-width: 750px) {
    .btn_twitter img {
      width: 60%;
      height: auto; } }

.show {
  right: 90px; }
  @media (max-width: 1024px) {
    .show {
      right: 0; } }

.icon_twitter {
  position: fixed;
  bottom: 10px;
  right: 8px;
  z-index: 1150; }
  @media (max-width: 1024px) {
    .icon_twitter {
      display: none; } }

.rote1 {
  transform: rotate(45deg);
  position: absolute;
  top: 30px;
  left: 25px; }
  @media (max-width: 1024px) {
    .rote1 {
      top: 25px;
      left: 15px; } }

.rote2 {
  transform: rotate(-45deg);
  position: absolute;
  top: 30px;
  left: 25px; }
  @media (max-width: 1024px) {
    .rote2 {
      top: 25px;
      left: 15px; } }

.scroll {
  font-size: 14px;
  color: #000;
  display: flex;
  justify-content: center;
  flex-wrap: nowrap;
  align-items: center;
  transform: rotate(90deg);
  position: absolute;
  bottom: 41px;
  right: -10px; }
  .scroll span {
    width: 30px;
    height: 1px;
    background: #000;
    display: block;
    margin-left: 5px; }
  @media (max-width: 750px) {
    .scroll {
      display: none; } }

.scroll2 {
  font-size: 14px;
  color: #fff;
  display: flex;
  justify-content: center;
  flex-wrap: nowrap;
  align-items: center;
  transform: rotate(90deg);
  position: absolute;
  bottom: 76px;
  right: -10px; }
  .scroll2 span {
    width: 30px;
    height: 1px;
    background: #fff;
    display: block;
    margin-left: 5px; }
  @media (max-width: 750px) {
    .scroll2 {
      display: none; } }

.jump_menu {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  position: relative;
  z-index: 1000; }
  .jump_menu li {
    color: #000;
    font-size: 16px;
    display: flex;
    justify-content: flex-start;
    align-items: center;
    margin-right: 40px;
    display: flex;
    justify-content: flex-start;
    align-items: center;
    font-weight: 700; }
    .jump_menu li a {
      color: #000;
      text-decoration: none;
      display: flex;
      justify-content: flex-start;
      align-items: center;
      transition: .3s; }
      @media (min-width: 750px) {
        .jump_menu li a:hover {
          opacity: 0.8; } }
    .jump_menu li img {
      margin-right: 5px; }
    .jump_menu li:last-child {
      margin-right: 0; }
  @media (max-width: 750px) {
    .jump_menu {
      display: none; } }

.jump_menu2 {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  position: relative; }
  .jump_menu2 li {
    color: #fff;
    font-size: 16px;
    display: flex;
    justify-content: flex-start;
    align-items: center;
    margin-right: 40px;
    display: flex;
    justify-content: flex-start;
    align-items: center;
    font-weight: 700; }
    .jump_menu2 li a {
      color: #fff;
      text-decoration: none;
      display: flex;
      justify-content: flex-start;
      align-items: center;
      transition: .3s; }
      @media (min-width: 750px) {
        .jump_menu2 li a:hover {
          opacity: 0.8; } }
    .jump_menu2 li img {
      margin-right: 5px; }
    .jump_menu2 li:last-child {
      margin-right: 0; }
  @media (max-width: 750px) {
    .jump_menu2 {
      display: none; } }

.main_vs {
  padding-left: 90px;
  display: flex;
  justify-content: space-between;
  flex-wrap: nowrap;
  align-items: flex-end;
  margin-top: -100px;
  position: relative; }
  @media (max-width: 1024px) {
    .main_vs {
      padding-left: 40px; } }
  @media (max-width: 750px) {
    .main_vs {
      padding-left: 0;
      display: block;
      margin: 0 0 15px 0; } }

.main_txt {
  position: absolute;
  top: 0;
  left: 90px; }
  @media (max-width: 1024px) {
    .main_txt {
      left: 40px; } }

.main {
  width: 67.2vw;
  height: auto; }
  @media (max-width: 750px) {
    .main {
      width: calc(100% - 20px);
      margin: 0 auto; } }

.movie {
  width: 17.7%;
  height: auto;
  margin-right: 32px;
  cursor: pointer;
  transition: .3s;
  position: absolute;
  bottom: -3vw;
  right: 0; }
  @media (min-width: 750px) {
    .movie:hover {
      filter: brightness(1.5); } }
  @media (max-width: 750px) {
    .movie {
      position: static;
      margin: 20px auto;
      width: calc(100% - 40px);
      max-width: 639px; } }

.btn_more {
  transition: .3s;
  margin: 0 auto 0 90px; }
  @media (min-width: 750px) {
    .btn_more:hover {
      filter: brightness(1.5); } }
  @media (max-width: 1024px) {
    .btn_more {
      margin: 0 auto 0 40px; } }
  @media (max-width: 750px) {
    .btn_more {
      margin: 0; }
      .btn_more img {
        display: block;
        margin: 0 auto;
        width: 60%;
        height: auto;
        max-width: 210px; } }

.pick {
  display: flex;
  justify-content: flex-start;
  margin: 50px auto 0 0; }
  .pick div {
    border: 1px solid #C4C4C4;
    display: flex;
    justify-content: flex-start;
    align-items: center;
    width: 660px;
    background: #fff; }
    @media (max-width: 1250px) {
      .pick div {
        width: 480px; } }
    .pick div p {
      padding: 0 23px;
      color: #2F3742;
      line-height: 1.3em; }
      .pick div p a {
        color: #000;
        text-decoration: none;
        transition: .3s; }
        @media (min-width: 750px) {
          .pick div p a:hover {
            color: #525252; } }
  @media (max-width: 1024px) {
    .pick {
      margin: 50px auto 0 0; }
      .pick div {
        width: 440px; }
        .pick div p {
          font-size: 14px; }
      .pick img {
        width: 200px;
        height: auto; } }
  @media (max-width: 750px) {
    .pick {
      display: block;
      width: 100%;
      margin: 0; }
      .pick img {
        width: 100%; }
      .pick div {
        width: calc(100% - 30px);
        padding: 20px 10px;
        border: 5px solid #2f3742; }
        .pick div p {
          padding: 0; } }

.pick_pos {
  position: absolute;
  bottom: 0;
  left: 0; }
  @media (max-width: 750px) {
    .pick_pos {
      position: static; } }

.spc_back {
  background: url("../img/campaign/main.png") no-repeat;
  background-size: cover; }
  @media (max-width: 750px) {
    .spc_back {
      background: url("../img/campaign/main_sp.png") no-repeat;
      background-size: cover; } }

.spc_back2 {
  /*background: url("../img/fankit/main.png") no-repeat;
  background-size: cover;
  @media(max-width: 750px){
  	background: url("../img/fankit/main_sp.png") no-repeat;
  	background-size: cover;
  }*/ }
  .spc_back2 img {
    width: 100%;
    height: auto; }

.mes_area {
  position: relative;
  width: 100%;
  height: 52vw; }
  @media (max-width: 750px) {
    .mes_area {
      overflow: hidden; } }

@media (max-width: 750px) {
  .mes_h1 {
    height: 270vw; } }

@media (max-width: 750px) {
  .mes_h2 {
    height: 322vw; } }

.mes_wrap h2 {
  padding-top: 4vw;
  margin-left: 10vw; }
  .mes_wrap h2 img {
    width: calc(65% + 4px);
    height: auto; }
.mes_wrap p {
  font-family: 'Noto Serif JP', sans-serif;
  font-weight: 400;
  font-size: 0.9vw;
  line-height: 2em;
  padding: 2.5vw 0 2.5vw 10vw;
  width: calc(70% - 10vw);
  background: -moz-linear-gradient(left, rgba(6, 13, 24, 0.7) 0%, rgba(6, 13, 24, 0.7) 77%, rgba(6, 13, 24, 0) 100%);
  /* FF3.6-15 */
  background: -webkit-linear-gradient(left, rgba(6, 13, 24, 0.7) 0%, rgba(6, 13, 24, 0.7) 77%, rgba(6, 13, 24, 0) 100%);
  /* Chrome10-25,Safari5.1-6 */
  background: linear-gradient(to right, rgba(6, 13, 24, 0.7) 0%, rgba(6, 13, 24, 0.7) 77%, rgba(6, 13, 24, 0) 100%);
  /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */ }
  @media (max-width: 1250px) {
    .mes_wrap p {
      font-size: 1vw;
      padding: 1.5vw 0 1.5vw 10vw; } }
  @media (max-width: 1024px) {
    .mes_wrap p {
      font-size: 0.9vw;
      padding: 1vw 0 2vw 10vw; } }
  @media (max-width: 750px) {
    .mes_wrap p {
      padding: 0 20px;
      width: calc(100% - 40px);
      font-size: 3.2vw; } }
.mes_wrap ul {
  display: flex;
  justify-content: flex-start;
  align-items: center;
  margin-left: 9vw; }
@media (max-width: 750px) {
  .mes_wrap h2 {
    margin: 0;
    padding: 0;
    text-align: center;
    padding-top: 12vw; }
    .mes_wrap h2 img {
      width: calc(100% - 40px); }
  .mes_wrap ul {
    margin: 10px 0;
    justify-content: center; }
  .mes_wrap p {
    background: none; } }

.mes1 {
  background: url("../img/img_mes_1.png") no-repeat;
  background-size: 100%;
  width: 100%;
  height: 52vw;
  position: relative; }
  .mes1 li:nth-of-type(1) img {
    width: 12.9vw;
    height: auto; }
    @media (max-width: 1024px) {
      .mes1 li:nth-of-type(1) img {
        width: 16.596491228vw; } }
    @media (max-width: 750px) {
      .mes1 li:nth-of-type(1) img {
        width: 40vw;
        max-width: 248xx; } }
  .mes1 li:nth-of-type(2) {
    margin-left: -1.5vw; }
    .mes1 li:nth-of-type(2) img {
      width: 12.9vw;
      height: auto; }
      @media (max-width: 1024px) {
        .mes1 li:nth-of-type(2) img {
          width: 16.596491228vw; } }
      @media (max-width: 750px) {
        .mes1 li:nth-of-type(2) img {
          width: 40vw;
          max-width: 248xx; } }
    @media (max-width: 750px) {
      .mes1 li:nth-of-type(2) {
        margin-left: 0; } }
  @media (max-width: 750px) {
    .mes1 {
      background: url("../img/bg_mes_1_sp.png") no-repeat;
      background-size: cover;
      height: auto;
      padding-bottom: 100%; } }

.mes2 {
  background: url("../img/img_mes_2.png") no-repeat;
  background-size: 100%;
  width: 100%;
  height: 52vw;
  position: absolute;
  top: 0;
  left: 0;
  display: none; }
  .mes2 li:nth-of-type(1) img {
    width: 12.9vw;
    height: auto; }
    @media (max-width: 1024px) {
      .mes2 li:nth-of-type(1) img {
        width: 16.596491228vw; } }
    @media (max-width: 750px) {
      .mes2 li:nth-of-type(1) img {
        width: 40vw;
        max-width: 248xx; } }
  .mes2 li:nth-of-type(2) {
    margin-left: -1.5vw; }
    .mes2 li:nth-of-type(2) img {
      width: 12.9vw;
      height: auto; }
      @media (max-width: 1024px) {
        .mes2 li:nth-of-type(2) img {
          width: 16.596491228vw; } }
      @media (max-width: 750px) {
        .mes2 li:nth-of-type(2) img {
          width: 40vw;
          max-width: 248xx; } }
    @media (max-width: 750px) {
      .mes2 li:nth-of-type(2) {
        margin-left: 0; } }
  @media (max-width: 750px) {
    .mes2 {
      background: url("../img/bg_mes_2_sp.png") no-repeat;
      background-size: cover;
      height: auto;
      padding-bottom: 100%; } }

.change1 {
  cursor: pointer;
  transition: .3s; }
  @media (min-width: 750px) {
    .change1:hover {
      filter: brightness(1.5); } }

.change2 {
  cursor: pointer;
  transition: .3s; }
  @media (min-width: 750px) {
    .change2:hover {
      filter: brightness(1.5); } }

.swiper-container {
  width: calc(100% - 40px);
  margin: 0 auto;
  padding: 0 20px;
  position: relative; }

.swiper-slide {
  opacity: 0.4;
  overflow: hidden;
  transition: .7s;
  transform: scale(0.8); }
  .swiper-slide p {
    display: flex;
    justify-content: center;
    flex-wrap: nowrap;
    align-items: center;
    font-size: 14px;
    margin-top: -15px;
    text-align: center;
    line-height: 1.3em; }
    .swiper-slide p img {
      width: 84px;
      height: auto; }
      @media (max-width: 750px) {
        .swiper-slide p img {
          width: 50px; } }
    @media (max-width: 1024px) {
      .swiper-slide p {
        margin-top: -10px; } }
    @media (max-width: 750px) {
      .swiper-slide p {
        font-size: 14px;
        margin-top: -10px; } }
    @media (max-width: 450px) {
      .swiper-slide p {
        font-size: 12px; } }
    @media (max-width: 390px) {
      .swiper-slide p {
        height: 17vw; } }
  @media (max-width: 750px) {
    .swiper-slide {
      transform: scale(1); } }

.swiper-slide img {
  width: 100%;
  height: auto; }

.swiper-slide-active {
  opacity: 1;
  z-index: 1;
  transform: scale(1); }
  @media (max-width: 750px) {
    .swiper-slide-active {
      transform: scale(1); }
      .swiper-slide-active p {
        transform: scale(1); } }

.swiper-horizontal > .swiper-pagination-bullets, .swiper-pagination-bullets.swiper-pagination-horizontal, .swiper-pagination-custom, .swiper-pagination-fraction {
  bottom: -90px; }
  @media (max-width: 750px) {
    .swiper-horizontal > .swiper-pagination-bullets, .swiper-pagination-bullets.swiper-pagination-horizontal, .swiper-pagination-custom, .swiper-pagination-fraction {
      bottom: -40px; } }

.swiper-button-prev:after, .swiper-rtl .swiper-button-next:after {
  content: ""; }

.swiper-button-next:after, .swiper-rtl .swiper-button-prev:after {
  content: ""; }

.swiper-button-next, .swiper-button-prev {
  top: 44%; }

.swiper-button-prev, .swiper-rtl .swiper-button-next {
  left: 19.5vw;
  background: url("../img/btn_back.png") no-repeat;
  background-size: 100%;
  width: 4%;
  height: 7vw; }
  @media (max-width: 1250px) {
    .swiper-button-prev, .swiper-rtl .swiper-button-next {
      left: 18.5vw; } }
  @media (max-width: 750px) {
    .swiper-button-prev, .swiper-rtl .swiper-button-next {
      width: 8%;
      height: 12vw;
      left: 0; } }

.swiper-button-next, .swiper-rtl .swiper-button-prev {
  right: 19.5vw;
  background: url("../img/btn_next.png") no-repeat;
  background-size: 100%;
  width: 4%;
  height: 7vw; }
  @media (max-width: 1250px) {
    .swiper-button-next, .swiper-rtl .swiper-button-prev {
      right: 18.5vw; } }
  @media (max-width: 750px) {
    .swiper-button-next, .swiper-rtl .swiper-button-prev {
      width: 8%;
      height: 12vw;
      right: 0; } }

.swiper-pagination-bullet {
  width: 25px;
  height: 25px; }

.swiper-pagination-bullet {
  background: url("../img/slider_off.png") no-repeat;
  background-size: 25px 25px;
  opacity: 1; }

.swiper-pagination-bullet-active {
  background: url("../img/slider_on.png") no-repeat;
  background-size: 25px 25px; }

.tr_area {
  background: -moz-linear-gradient(top, #041e31 0%, #356cb4 100%);
  /* FF3.6-15 */
  background: -webkit-linear-gradient(top, #041e31 0%, #356cb4 100%);
  /* Chrome10-25,Safari5.1-6 */
  background: linear-gradient(#041e31 0%, #356cb4 100%);
  padding: 80px 0 160px 0;
  overflow: hidden; }
  .tr_area h3 {
    text-align: center;
    margin-bottom: 40px; }
    @media (max-width: 1024px) {
      .tr_area h3 img {
        height: 80px;
        width: auto; } }
  @media (max-width: 750px) {
    .tr_area {
      padding: 10vw 0 18vw 0; }
      .tr_area h3 {
        margin-bottom: 20px; }
        .tr_area h3 img {
          height: 55px; } }

.news_area {
  background: #fff;
  padding: 100px 0; }
  @media (max-width: 750px) {
    .news_area {
      padding: 10vw 0 1vw 0; } }

.news_flex {
  display: flex;
  justify-content: space-between;
  flex-wrap: nowrap;
  align-items: flex-start;
  max-width: 1332px;
  width: calc(100% - 40px);
  padding: 0 20px;
  margin: 0 auto; }
  @media (max-width: 750px) {
    .news_flex {
      display: block; } }

.news_frame {
  max-width: 610px;
  width: calc(50% - 40px);
  height: auto;
  margin: 0 20px; }
  .news_frame h3 {
    text-align: center;
    margin-bottom: 30px; }
    @media (max-width: 1024px) {
      .news_frame h3 img {
        height: 60px;
        width: auto; } }
    @media (max-width: 750px) {
      .news_frame h3 {
        margin-bottom: 5vw; } }
  .news_frame .imgreset {
    width: 100%;
    height: auto; }
  @media (max-width: 750px) {
    .news_frame {
      width: 100%;
      margin: 0 0 10vw 0; }
      .news_frame h3 img {
        height: 45px; } }

.news_frame_mid {
  background: url("../img/news_frame_mid.png") repeat-y;
  background-size: 100%;
  width: 100%; }

.tweet_wrap {
  width: calc(100% - 30px);
  max-height: 471px;
  height: 33vw;
  margin: 0 auto;
  display: block;
  border: 1px solid #c1c1c1;
  overflow-y: scroll; }
  @media (max-width: 1350px) {
    .tweet_wrap {
      height: 29vw; } }
  @media (max-width: 750px) {
    .tweet_wrap {
      height: 65vw; } }

.news_bk {
  background: url("../img/news_bk.png") no-repeat;
  background-size: 100%;
  width: calc(100% - 30px);
  max-height: 471px;
  height: 33vw;
  margin: 0 auto;
  overflow-y: scroll; }
  @media (max-width: 1350px) {
    .news_bk {
      height: 29vw; } }
  @media (max-width: 750px) {
    .news_bk {
      height: 65vw; } }

.link_wrap {
  padding: 5vw 3vw 0 3vw;
  width: calc(100% - 6vw); }
  .link_wrap p {
    padding-bottom: 20px;
    border-bottom: 1px solid #364b5b;
    width: 100%;
    margin-bottom: 10px; }
  .link_wrap a {
    color: #fff;
    text-decoration: none;
    transition: .3s;
    font-size: 14px;
    line-height: 1.3em;
    padding-left: 81px;
    text-indent: -81px;
    display: inline-block; }
    @media (max-width: 1250px) {
      .link_wrap a {
        font-size: 1.2vw;
        padding-left: 7.2vw;
        text-indent: -7.2vw; } }
    @media (min-width: 750px) {
      .link_wrap a:hover {
        color: #ccc; } }
    @media (max-width: 750px) {
      .link_wrap a {
        font-size: 14px;
        padding-left: 83px;
        text-indent: -83px; } }

.camp_area {
  background: url("../img/bg_cp.png") no-repeat;
  background-size: cover;
  text-align: center;
  padding: 80px 0; }
  .camp_area .imgreset {
    margin: 0 auto 30px auto; }
    @media (max-width: 1024px) {
      .camp_area .imgreset {
        width: 600px;
        height: auto; } }
  .camp_area h3 {
    margin-bottom: 30px; }
    @media (max-width: 1024px) {
      .camp_area h3 img {
        height: 80px;
        width: auto; } }
  .camp_area a {
    transition: .3s; }
    @media (min-width: 750px) {
      .camp_area a:hover {
        filter: brightness(1.5); } }
    @media (max-width: 1024px) {
      .camp_area a img {
        width: 300px;
        height: auto; } }
  @media (max-width: 750px) {
    .camp_area {
      padding: 10vw 0; }
      .camp_area h3 img {
        height: 55px; }
      .camp_area .imgreset {
        width: calc(100% - 40px);
        margin: 0 auto 20px auto; }
      .camp_area a img {
        width: 60%; } }

.banner_area {
  background: #fff;
  padding: 50px 20px 30px 20px;
  width: calc(100% - 40px); }

.banner_flex {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  align-items: center;
  max-width: 1405px;
  width: 100%;
  margin: 0 auto;
  opacity: 0;
  transition: .7s; }
  .banner_flex a {
    margin: 0 5px 20px 5px;
    transition: .3s; }
    @media (min-width: 750px) {
      .banner_flex a:hover {
        opacity: 0.9; } }
  .banner_flex img {
    width: auto;
    height: 3.65vw; }
    @media (max-width: 1600px) {
      .banner_flex img {
        height: 4vw; } }
    @media (max-width: 1024px) {
      .banner_flex img {
        height: 6.5vw; } }
  @media (max-width: 750px) {
    .banner_flex a {
      width: calc(50% - 20px);
      margin: 0 5px 10px 5px; }
      .banner_flex a:nth-of-type(1) {
        margin: 0 15px 10px 15px;
        width: 100%; }
      .banner_flex a:nth-of-type(6) {
        width: calc(55% - 20px); }
      .banner_flex a:nth-of-type(7) {
        width: calc(45% - 20px); }
    .banner_flex img {
      width: 100%;
      height: auto; } }

.news_bk::-webkit-scrollbar {
  width: 3px; }

.news_bk::-webkit-scrollbar-track {
  background-color: #A8A8A8; }

.news_bk::-webkit-scrollbar-thumb {
  box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.5); }

.tweet_wrap::-webkit-scrollbar {
  width: 3px; }

.tweet_wrap::-webkit-scrollbar-track {
  background-color: #A8A8A8; }

.tweet_wrap::-webkit-scrollbar-thumb {
  box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.5); }

.news_bk {
  scrollbar-color: rgba(0, 0, 0, 0.5) #A8A8A8;
  scrollbar-width: thin; }

.tweet_wrap {
  scrollbar-color: rgba(0, 0, 0, 0.5) #A8A8A8;
  scrollbar-width: thin; }

.page_top {
  position: fixed;
  bottom: 10px;
  right: 100px;
  z-index: 500;
  display: none; }
  @media (max-width: 1024px) {
    .page_top {
      right: 5px; }
      .page_top img {
        width: 4.3vw;
        max-width: 20px;
        height: auto; } }

/*スペシャル*/
.main_vs_c .main_text {
  width: 54.65vw;
  height: auto; }
  @media (max-width: 750px) {
    .main_vs_c .main_text {
      width: 100%; } }
.main_vs_c a {
  position: absolute;
  bottom: 2vw;
  left: calc(50% - 10vw); }
  .main_vs_c a img {
    width: 19.9vw;
    height: auto;
    transition: .3s; }
    @media (min-width: 750px) {
      .main_vs_c a img:hover {
        filter: brightness(1.5); } }
  .main_vs_c a:nth-of-type(2) {
    bottom: -5.6vw; }
    @media (max-width: 750px) {
      .main_vs_c a:nth-of-type(2) {
        bottom: -16.7vw; } }
.main_vs_c .rel {
  width: 54vw; }
@media (max-width: 750px) {
  .main_vs_c {
    width: 100%; }
    .main_vs_c .rel {
      width: 100%; }
    .main_vs_c a img {
      width: 56vw; }
    .main_vs_c a {
      bottom: 6.5vw;
      left: calc(50% - 28vw); } }

.catch {
  width: 100%;
  height: auto;
  display: block;
  transition: .3s;
  cursor: pointer; }
  .catch:hover {
    filter: brightness(1.3); }

.catch_wrap {
  background: #041e32; }

.catch_trig {
  width: 6.927083333%;
  margin: 0 auto;
  position: relative; }
  .catch_trig img {
    width: 100%;
    height: auto; }
  @media (max-width: 750px) {
    .catch_trig {
      width: 17.733333333%;
      margin: 0 auto; } }

.icon_close {
  width: 2.03125vw !important;
  height: auto;
  position: absolute;
  left: calc(50% - 1vw);
  top: -1.6vw;
  transition: .3s;
  transform: rotate(180deg); }
  @media (max-width: 750px) {
    .icon_close {
      width: 5.2vw !important;
      left: calc(50% - 2.6vw);
      top: -5.6vw; } }

.rota {
  transform: rotate(0deg); }

.main_vs_c {
  padding-bottom: 5vw; }
  @media (max-width: 750px) {
    .main_vs_c {
      padding-bottom: 15vw; } }

footer {
  position: relative;
  z-index: 1200; }

.camp_dest {
  background: #fff;
  padding: 80px 0; }
  @media (max-width: 750px) {
    .camp_dest {
      padding: 10vw 0 0 0; } }

.camp_flex {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  max-width: 1136px;
  color: #000;
  margin: 0 auto 80px auto;
  padding: 0 20px; }
  .camp_flex .img_cp {
    width: calc(50% - 10px);
    height: auto;
    margin-right: 10px; }
  .camp_flex div {
    width: calc(50% - 10px);
    margin-left: 10px; }
    .camp_flex div p:nth-of-type(1) {
      font-size: 20px;
      margin-bottom: 20px;
      line-height: 1.3em; }
    .camp_flex div p:nth-of-type(2) {
      font-size: 16px;
      line-height: 1.5em; }
    .camp_flex div h3 {
      margin-top: 30px;
      margin-bottom: 40px; }
      .camp_flex div h3 img {
        max-width: 100%;
        height: auto; }
  @media (max-width: 750px) {
    .camp_flex {
      display: block;
      padding: 0 10px;
      margin: 0 auto 5vw auto; }
      .camp_flex h3 {
        margin-bottom: 20px; }
        .camp_flex h3 img {
          width: 100%;
          height: auto; }
      .camp_flex .img_cp {
        width: 100%;
        margin: 0 auto 20px auto; }
      .camp_flex div {
        width: 100%;
        margin: 0 auto 20px auto; }
        .camp_flex div p:nth-of-type(1) {
          font-size: 16px;
          margin-bottom: 20px; }
        .camp_flex div p:nth-of-type(2) {
          font-size: 14px;
          line-height: 1.5em; } }

.method_area {
  background: -webkit-linear-gradient(#041e31 0%, #2b5c9a 100%);
  background: -o-linear-gradient(#041e31 0%, #2b5c9a 100%);
  background: linear-gradient(#041e31 0%, #2b5c9a 100%);
  padding: 80px 0;
  max-width: 1136px;
  width: calc(100% - 80px);
  padding: 0 20px;
  margin: 0 auto;
  padding: 80px 0; }
  .method_area h3 {
    text-align: center;
    margin-bottom: 30px; }
  @media (max-width: 750px) {
    .method_area {
      width: 100%;
      padding: 10vw 0; }
      .method_area h3 img {
        width: 100%;
        height: auto; } }

.icon_left {
  width: 7vw;
  height: auto; }
  @media (max-width: 750px) {
    .icon_left {
      width: 16vw; } }

.method_flex {
  display: flex;
  justify-content: flex-start;
  align-items: flex-start;
  width: calc(100% - 60px);
  margin: 0 auto; }
  @media (max-width: 750px) {
    .method_flex {
      width: calc(100% - 40px); } }

.method_right {
  width: calc(100% - 7vw);
  margin-left: 20px;
  margin-top: 10px; }
  @media (max-width: 750px) {
    .method_right {
      width: 100%;
      margin-left: 5px; } }

.step_line {
  display: block;
  margin: 20px 0;
  width: 100%;
  height: auto; }
  .step_line:nth-of-type(2) {
    margin: 2vw 0 1vw 0; }
  @media (max-width: 750px) {
    .step_line {
      margin-bottom: 10px; }
      .step_line:nth-of-type(2) {
        margin-bottom: 15px; } }

.img_step_sp {
  width: 100% !important; }

.icon_left_sp {
  display: none; }
  @media (max-width: 750px) {
    .icon_left_sp {
      display: block; } }
  @media (max-width: 365px) {
    .icon_left_sp {
      display: none; } }

.icon_left_sp2 {
  display: none; }
  @media (max-width: 365px) {
    .icon_left_sp2 {
      display: block; } }

.method_in {
  display: flex;
  justify-content: flex-start;
  align-items: center; }
  .method_in p {
    line-height: 2em;
    width: calc(100% - 19vw);
    font-size: 15px; }
  .method_in a {
    color: #11FFCC;
    transition: .2s; }
    .method_in a:hover {
      color: #b5ffef; }
  .method_in img {
    width: 20vw;
    height: auto;
    transform: translate(28px, 0px);
    transition: .3s; }
    @media (max-width: 1600px) {
      .method_in img {
        width: 22vw;
        transform: translate(18px, 0px); } }
    @media (max-width: 1024px) {
      .method_in img {
        width: 22vw;
        transform: translate(0, 0); } }
    @media (min-width: 750px) {
      .method_in img:hover {
        filter: brightness(1.5); } }
  @media (max-width: 750px) {
    .method_in {
      display: block; }
      .method_in p {
        width: 100%;
        font-size: 12px;
        margin-bottom: 10px;
        line-height: 1.8em; }
      .method_in img {
        width: 60vw; } }

.method_in2 p {
  line-height: 2em;
  width: 100%;
  font-size: 15px; }
.method_in2 a {
  color: #11FFCC; }
@media (max-width: 750px) {
  .method_in2 {
    display: block; }
    .method_in2 p {
      width: 100%;
      font-size: 12px;
      margin-bottom: 10px;
      line-height: 1.8em; } }

.sub {
  line-height: 2em;
  font-size: 15px;
  margin-bottom: 30px; }
  @media (max-width: 750px) {
    .sub {
      font-size: 12px;
      line-height: 1.8em;
      margin-bottom: 5vw; } }

.pr_area {
  background: url("../img/campaign/bg_cp.png") no-repeat;
  background-size: cover;
  padding: 80px 0; }
  .pr_area h3 {
    text-align: center;
    margin-bottom: 30px; }
  @media (max-width: 750px) {
    .pr_area {
      padding: 10vw 0; }
      .pr_area h3 img {
        width: 100%;
        height: auto; } }

.btn_campaign {
  transition: .3s; }
  .btn_campaign a {
    display: block; }
  .btn_campaign img {
    width: auto;
    height: auto; }
  @media (min-width: 750px) {
    .btn_campaign:hover {
      filter: brightness(1.5); } }

.pr_frame_top, .pr_frame_btm {
  display: block;
  margin: 0 auto;
  max-width: 100%;
  height: auto; }
  @media (max-width: 750px) {
    .pr_frame_top, .pr_frame_btm {
      width: calc(100% - 30px);
      height: auto;
      margin: 0 auto; } }

.pr_frame_mid {
  background: url("../img/campaign/pr_frame_mid.png") repeat-y;
  background-size: 100%;
  width: 826px;
  max-width: 100%;
  margin: 0 auto;
  display: flex;
  justify-content: flex-start;
  align-items: center;
  height: 340px; }
  .pr_frame_mid div {
    margin-left: 25px; }
  .pr_frame_mid p {
    text-align: center;
    margin-top: 10px;
    font-size: 11px; }
    .pr_frame_mid p:nth-of-type(2) {
      padding-bottom: 30px; }
      @media (max-width: 750px) {
        .pr_frame_mid p:nth-of-type(2) {
          padding-bottom: 0; } }
  .pr_frame_mid img {
    height: auto; }
  @media (max-width: 750px) {
    .pr_frame_mid {
      width: calc(100% - 30px);
      display: block;
      height: auto;
      padding: 20px 0; }
      .pr_frame_mid div {
        margin-left: 0; }
      .pr_frame_mid img {
        width: calc(100% - 60px);
        height: auto;
        margin: 0 auto 10px auto;
        display: block; } }

.p_a {
  padding-top: 20px; }
  @media (max-width: 750px) {
    .p_a {
      padding: 20px 0; } }

.term_area {
  background: #fff;
  padding: 80px 0; }
  .term_area h3 {
    text-align: center;
    margin-bottom: 30px; }
  @media (max-width: 750px) {
    .term_area {
      padding: 10vw 20px; }
      .term_area img {
        width: 100%;
        height: auto; } }

.frame_top, .frame_btm {
  display: block;
  margin: 0 auto;
  max-width: 100%;
  height: auto; }
  @media (max-width: 750px) {
    .frame_top, .frame_btm {
      width: 100%;
      height: auto; } }

.frame_mid {
  background: url("../img/campaign/frame_mid.png") repeat-y;
  background-size: 100%;
  width: 913px;
  margin: 0 auto;
  padding: 30px 0;
  max-width: 100%; }
  .frame_mid div {
    height: 430px;
    overflow-y: scroll;
    width: calc(100% - 85px);
    margin: 0 auto;
    line-height: 1.8em;
    color: #000; }
    .frame_mid div p {
      padding-right: 10px; }
      .frame_mid div p span {
        font-weight: 700; }
  .frame_mid a {
    color: #0000ff; }
  @media (max-width: 750px) {
    .frame_mid {
      width: 100%;
      padding: 10px 0; }
      .frame_mid div {
        width: calc(100% - 30px);
        font-size: 14px;
        height: 90vw; } }

.frame_mid div::-webkit-scrollbar {
  width: 10px; }

.frame_mid div::-webkit-scrollbar-track {
  background-color: #fff;
  border: 1px solid #000; }

.frame_mid div::-webkit-scrollbar-thumb {
  background: #000; }

.frame_mid div {
  scrollbar-color: black #ededed;
  scrollbar-width: thin; }

.foot_camp {
  opacity: 0;
  transition: .7s; }
  .foot_camp img {
    width: 100%;
    height: auto; }

.movie_pop {
  position: fixed;
  top: calc(50% - 220px);
  left: calc(50% - 375px);
  z-index: 1200;
  width: 560px;
  display: none;
  width: 750px;
  height: 440px; }
  .movie_pop iframe {
    width: 750px;
    height: 440px; }
  @media (max-width: 750px) {
    .movie_pop {
      width: calc(100% - 40px);
      top: calc(50% - 27vw);
      left: 20px; }
      .movie_pop iframe {
        width: 100%;
        height: 54vw; } }

.close {
  width: 30px;
  height: 30px;
  position: absolute;
  top: -30px;
  right: 0;
  cursor: pointer; }
  .close span {
    width: 30px;
    height: 2px;
    background: #fff;
    display: block; }
    .close span:nth-of-type(1) {
      transform: rotate(45deg);
      position: absolute;
      top: 12px;
      left: 0; }
    .close span:nth-of-type(2) {
      transform: rotate(-45deg);
      position: absolute;
      top: 12px;
      left: 0; }

.movie1, .movie2, .movie3, .movie4, .movie5, .movie6, .movie7, .movie8 {
  width: 100%;
  padding-top: 61%;
  position: absolute;
  top: 0;
  left: 0;
  cursor: pointer;
  z-index: -1; }

.swiper-slide-active div {
  z-index: 10; }

.down1, .down2, .down3, .down4, .down5, .down6, .down7 {
  opacity: 0;
  transition: .7s; }

.cp01, .cp02, .cp03, .cp04, .cp05, .cp06, .cp07 {
  display: none; }

.pick_up {
  width: 20.8vw;
  position: absolute;
  bottom: 34px;
  right: 92px;
  border: 1px solid #042f65; }
  .pick_up h4 img {
    width: 100%;
    height: auto;
    display: block; }
  @media (max-width: 1300px) {
    .pick_up {
      width: 24.8vw;
      right: 60px; } }
  @media (max-width: 1024px) {
    .pick_up {
      width: 31.8vw; } }
  @media (max-width: 750px) {
    .pick_up {
      position: relative;
      right: auto;
      width: calc(100% - 60px);
      margin: 0 auto 5vw auto; } }

.pick_flex {
  display: flex;
  justify-content: flex-start;
  align-items: flex-start;
  background: url("../img/campaign/pick_in.png") no-repeat;
  background-size: cover;
  padding: 10px; }
  .pick_flex img {
    width: 7.3vw;
    height: auto;
    box-shadow: 1px 1px 4px rgba(8, 95, 202, 0.4), -1px 1px 4px rgba(8, 95, 202, 0.4), 1px -1px 4px rgba(8, 95, 202, 0.4), -1px -1px 4px rgba(8, 95, 202, 0.4); }
  .pick_flex p {
    font-size: 0.7vw;
    line-height: 1.5em; }
  .pick_flex div {
    margin-left: 5px; }
  .pick_flex span {
    color: #fff;
    text-decoration: none;
    font-size: 0.7vw;
    position: absolute;
    bottom: 0.8vw;
    right: 10px;
    cursor: pointer; }
    @media (min-width: 750px) {
      .pick_flex span:hover {
        text-decoration: underline; } }
  @media (max-width: 1300px) {
    .pick_flex p {
      font-size: 0.8vw;
      line-height: 1.8em; }
    .pick_flex span {
      font-size: 0.8vw; } }
  @media (max-width: 1024px) {
    .pick_flex img {
      width: 10.3vw; } }
  @media (max-width: 750px) {
    .pick_flex img {
      width: 32.5vw; }
    .pick_flex p {
      font-size: 3vw;
      line-height: 1.5em; } }
  @media (max-width: 750px) and (max-width: 420px) {
    .pick_flex p {
      font-size: 12px; } }
  @media (max-width: 750px) {
    .pick_flex span {
      font-size: 3vw;
      bottom: 10px; } }
  @media (max-width: 750px) and (max-width: 420px) {
    .pick_flex span {
      font-size: 12px; } }

.step_left {
  width: 6vw;
  max-width: 136px; }
  .step_left img {
    display: block;
    width: 100%;
    height: auto; }
  .step_left div {
    width: 1px;
    height: auto;
    background: #fff;
    margin: 0 auto; }
  @media (max-width: 750px) {
    .step_left {
      width: 16vw; } }

.icon_wrap {
  background: #fff;
  padding: 100px 0 30px 0; }
  .icon_wrap h2 {
    margin: 0 auto 50px auto;
    text-align: center; }
    .icon_wrap h2 img {
      max-width: 100%;
      height: auto; }
  @media (max-width: 750px) {
    .icon_wrap {
      padding: 10vw 0 5vw 0; }
      .icon_wrap h2 {
        margin: 0 auto 10vw auto;
        width: calc(100% - 40px); } }

.icon_wrap2 {
  background: #fff;
  padding: 0 0 50px 0; }
  .icon_wrap2 h2 {
    margin: 0 auto 50px auto;
    text-align: center; }
  @media (max-width: 750px) {
    .icon_wrap2 {
      padding: 0; } }

.icon_sect {
  width: calc(100% - 40px);
  max-width: 1389px;
  background: -webkit-linear-gradient(#041e31 0%, #2b5c9a 100%);
  background: -o-linear-gradient(#041e31 0%, #2b5c9a 100%);
  background: linear-gradient(#041e31 0%, #2b5c9a 100%);
  margin: 0 auto;
  padding: 20px; }
  @media (max-width: 750px) {
    .icon_sect {
      padding: 10px; } }

.waku {
  display: block;
  margin: 0 auto;
  width: 100%;
  height: auto; }
  @media (max-width: 750px) {
    .waku {
      margin-bottom: 10vw; } }

.waku2 {
  display: block;
  margin: 0 auto;
  width: 100%;
  height: auto;
  margin-top: -50px; }
  @media (max-width: 750px) {
    .waku2 {
      margin-top: 0; } }

.icon_flex {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-wrap: wrap;
  max-width: 1040px;
  width: calc(100% - 40px);
  margin: 0 auto;
  position: relative;
  z-index: 100;
  padding: 0 20px; }
  .icon_flex a {
    max-width: 150px;
    width: calc(16.6% - 20px);
    height: auto;
    margin: 0 10px 20px 10px;
    display: block;
    transition: .3s;
    border-radius: 50%; }
    .icon_flex a img {
      width: 100%;
      height: auto;
      display: block; }
    @media (min-width: 750px) {
      .icon_flex a:hover {
        box-shadow: 1px 1px 10px #1a68af, -1px 1px 10px #1a68af, 1px -1px 10px #1a68af, -1px -1px 10px #1a68af; } }
  @media (max-width: 750px) {
    .icon_flex a {
      width: calc(25% - 10px);
      margin: 0 5px 10px 5px; } }

.icon_flex2 {
  display: flex;
  justify-content: flex-start;
  align-items: center;
  flex-wrap: wrap;
  max-width: 1040px;
  width: calc(100% - 40px);
  margin: 0 auto;
  position: relative;
  z-index: 100;
  padding: 0 20px; }
  .icon_flex2 a {
    max-width: 240px;
    width: calc(25% - 20px);
    height: auto;
    margin: 0 10px 20px 10px;
    transition: .3s; }
    .icon_flex2 a img {
      width: 100%;
      height: auto;
      display: block; }
    @media (min-width: 750px) {
      .icon_flex2 a:hover {
        box-shadow: 1px 1px 10px #1a68af, -1px 1px 10px #1a68af, 1px -1px 10px #1a68af, -1px -1px 10px #1a68af; } }
  @media (max-width: 750px) {
    .icon_flex2 a {
      width: calc(50% - 10px);
      margin: 0 5px 10px 5px; } }

.d_notice {
  margin: 0 auto 50px auto;
  width: 480px; }
  .d_notice li {
    list-style: none;
    display: flex;
    justify-content: flex-start;
    align-items: center;
    font-size: 15px;
    color: #333;
    margin-bottom: 5px; }
  @media (max-width: 750px) {
    .d_notice {
      width: calc(100% - 40px);
      margin: 0 auto 10vw auto; }
      .d_notice li {
        font-size: 12px; } }