@charset "UTF-8";
* {
  margin: 0px;
  padding: 0px; }

*:focus {
  outline: none; }

html, body {
  height: 100%; }

html {
  min-height: 100%; }

body > .wrap {
  height: auto; }

html {
  height: 100%;
  font-size: 62.5%;
  /* font-sizeは16pxの62.5%の10px */ }

a:link,
a:visited {
  color: #83fff2 !important;
  text-decoration: none;
  border-bottom: 1px dotted #83fff2 !important; }

a:hover {
  color: #e9ff56 !important;
  text-decoration: none;
  border-bottom: 1px dotted #e9ff56 !important; }

a:active {
  color: #fe7800 !important;
  text-decoration: none;
  border-bottom: 1px dotted #fe7800 !important; }

a img {
  border-bottom: none !important; }

.is-sp {
  display: block; }

.is-pc {
  display: none; }

.is-spimg {
  display: block; }

.is-pcimg {
  display: none; }

.itemwrap {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-content: center;
  width: 100%;
  height: auto;
  min-height: 100vh !important;
  margin: 0;
  padding: 20px 0 50px 0;
  background: #D5F0FF;
  background: linear-gradient(rgba(213, 240, 255, 0.4), rgba(255, 255, 255, 0.9)), url(../img/bg_island.webp);
  background-position: center top;
  background-repeat: no-repeat;
  background-attachment: fixed;
  background-size: 100% 100%, 170% auto;
  position: relative;
  z-index: 15; }
  .itemwrap img {
    width: 100%;
    height: auto; }

.closeWrap {
  display: block;
  width: 100%;
  height: 100vh;
  min-height: 100vh;
  background-color: transparent;
  margin: 0;
  padding: 0;
  left: 0;
  top: 0;
  position: fixed;
  z-index: 15; }

.logoBox {
  display: block;
  width: 100%;
  height: auto;
  margin: 0 auto -3% auto;
  padding: 0;
  text-align: center;
  position: relative;
  z-index: 15; }
  .logoBox img {
    width: 94%;
    max-width: 800px;
    margin: 0 auto; }

.inner_wrap {
  display: block;
  width: 98%;
  max-width: 1100px;
  margin: 60px auto 10px auto;
  padding: 0 0 40px 0;
  line-height: 0;
  position: relative;
  background: url("../img/bg_dot2.png") center top repeat;
  background-size: 20px 20px;
  border-radius: 30px;
  z-index: 15; }

.subline {
  display: flex;
  flex-wrap: nowrap;
  justify-content: center;
  align-items: center;
  width: 90%;
  margin: -6% auto 0 auto;
  padding: 0; }
  .subline .logo1 {
    display: none; }
  .subline .logo2 {
    width: 86%;
    max-width: 460px; }

/*--- 本文　---*/
.frame_center {
  display: block;
  width: 98%;
  max-width: 980px;
  height: auto;
  margin: 0 auto;
  padding: 0 10px;
  position: relative;
  background-image: url("../img2/bg_br.png");
  background-position: center bottom;
  background-size: 100% auto;
  background-repeat: repeat;
  z-index: 14; }
  .frame_center .title {
    display: block;
    width: 100%;
    max-width: 600px;
    margin: 0 auto 2% auto;
    padding: 0;
    text-align: center;
    position: relative; }
    .frame_center .title img {
      width: 100%; }
  .frame_center .textWrap {
    display: block;
    width: 90%;
    max-width: 800px;
    height: auto;
    margin: 20px auto 8px auto;
    padding: 0;
    font-family: "M PLUS 2", sans-serif;
    /*font-optical-sizing: auto;*/
    font-size: 1.38rem;
    font-weight: 400;
    line-height: 1.86;
    letter-spacing: 0.03rem;
    color: #fff;
    position: relative; }
    .frame_center .textWrap ul.list1 {
      list-style: none;
      padding-left: 8px;
      padding-top: 10px;
      line-height: 1.64; }
      .frame_center .textWrap ul.list1 li {
        padding-left: 0.8rem;
        text-indent: -0.8rem;
        margin-bottom: 2px;
        /*padding-right: 2px;*/ }
      .frame_center .textWrap ul.list1 li::before {
        content: "※";
        width: auto;
        padding-right: 2px;
        height: 16px;
        display: inline-block;
        /*background-color: #BC0003;
        border-radius:  50%;
        position:  relative;
        top: -1px;*/ }
  .frame_center .photoBox {
    display: block;
    width: 100%;
    max-width: 860px;
    height: auto;
    margin: 0 auto;
    padding: 0; }
    .frame_center .photoBox .caption1 {
      width: 100%;
      margin: 0 auto;
      padding: 0;
      text-align: center; }

.photo_flex {
  display: block;
  width: 100%;
  height: auto;
  margin: 0 0 20px 0;
  padding: 0; }
  .photo_flex img {
    width: 100%;
    height: auto;
    margin: 0 0 16px 0; }
  .photo_flex .flex_txt {
    width: 100%;
    height: auto;
    text-align: left;
    margin: 0 0 16px 0; }

@media screen and (min-width: 542px) {
  .is-sp {
    display: none; }

  .is-pc {
    display: block; } }
/*--------------
   TABLET,PC
---------------*/
@media screen and (min-width: 640px) {
  /*.is-sp{display:none;}
  .is-pc{display:block;}*/
  .is-spimg {
    display: none; }

  .is-pcimg {
    display: block; }

  .itemwrap {
    background-size: 100% 100%, 120% auto; }

  .item_inner {
    border-left: 2px solid #fff;
    border-right: 2px solid #fff; }

  .frame_center .textWrap {
    font-size: 1.5rem !important;
    letter-spacing: 0.01rem;
    font-weight: 500; }

  .photo_flex {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: flex-start;
    width: 100%;
    height: auto;
    margin: 0 0 20px 0;
    padding: 0; }
    .photo_flex img {
      width: 49%;
      height: auto;
      margin: 0 0.5% 16px 0.5%; }
    .photo_flex .flex_txt {
      width: 49%;
      height: auto;
      text-align: center;
      margin: 0 0.5% 16px 0.5%; }
      .photo_flex .flex_txt img {
        width: 94%;
        height: auto;
        margin: 0 0.5% 0 0.5%; } }
@media screen and (min-width: 1280px) {
  .itemwrap {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-content: center;
    width: 100%;
    height: auto;
    min-height: 100vh !important;
    margin: 0;
    padding: 20px 0 50px 0;
    background: #D5F0FF;
    background: linear-gradient(rgba(213, 240, 255, 0.4), rgba(255, 255, 255, 0.9)), url(../img/bg_left.png), url(../img/bg_right.png), url(../img/bg_island.webp);
    background-position: center top, left center,right center,center top;
    background-repeat: no-repeat;
    background-size: calc(100% - 100px) 100%, 50px auto, 50px auto, calc(100% - 100px) auto;
    background-attachment: fixed;
    position: relative;
    z-index: 15; }

  .subline {
    display: flex;
    flex-wrap: nowrap;
    justify-content: space-between;
    align-items: center;
    width: 90%;
    margin: -6% auto 0 auto;
    padding: 0; }
    .subline .logo1 {
      display: block;
      width: 40%;
      max-width: 260px; }
    .subline .logo2 {
      width: 60%;
      max-width: 420px; }

  .frame_center .title {
    display: block;
    width: 100%;
    max-width: 600px;
    margin: -3.6% auto 10px auto;
    padding: 0;
    text-align: center;
    position: relative; }
    .frame_center .title img {
      width: 100%; }
  .frame_center .textWrap {
    font-size: 1.6rem !important;
    letter-spacing: 0.01rem;
    font-weight: 500; } }
/*---etc.---*/
.closebtn {
  display: block;
  width: 100%;
  height: auto;
  margin: 20px auto 60px auto;
  padding: 0;
  text-align: center;
  z-index: 15; }
  .closebtn img {
    width: 50%;
    max-width: 130px; }
  .closebtn a {
    border-bottom: none !important; }

.go_himitsu {
  display: block;
  width: 100%;
  height: auto;
  margin: 20px auto 60px auto;
  padding: 0;
  text-align: center;
  z-index: 15; }
  .go_himitsu img {
    width: 70%;
    max-width: 340px;
    filter: drop-shadow(2px 2px 4px rgba(0, 0, 0, 0.4)); }
  .go_himitsu a, .go_himitsu a:hover {
    color: #000 !important;
    font-size: 1.2rem;
    line-htight: 0;
    border-bottom: none !important; }

.movieBox {
  display: block;
  width: 100%;
  height: auto;
  margin: 0;
  padding: 0;
  text-align: center; }

.trailer {
  display: block;
  width: 100%;
  max-width: 860px;
  height: auto;
  margin: 0 auto;
  padding: 10px 0 10px 0;
  background: transparent;
  text-align: center;
  position: relative; }

.player {
  width: 100%;
  margin: 0 auto;
  position: relative;
  padding-bottom: 56.25%;
  padding-top: 20px;
  height: 0;
  overflow: hidden; }

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

.btList {
  display: block;
  margin: 20px auto 10px auto;
  width: auto;
  /*text-align: center;*/
  position: relative; }

.btList.platform {
  margin: 20px auto 0 auto; }

.bt_margin {
  margin: 0 2px 0 2px; }

.minw {
  min-width: 196px; }

.btList a {
  line-height: 1;
  display: inline-block;
  width: auto;
  position: relative;
  border-bottom: none !important;
  border-radius: 30px;
  padding: 12px 40px 12px 20px;
  background-color: #faff6d;
  text-decoration: none !important;
  text-align: left;
  color: #009ce2 !important;
  font-weight: 500;
  margin: 0 auto;
  transition: .3s; }

.btList a::after {
  content: "";
  position: absolute;
  top: 0;
  right: 17px;
  bottom: 0;
  width: 8px;
  height: 8px;
  margin: auto;
  border-right: #009ce2 2px solid;
  border-bottom: #009ce2 2px solid;
  transform: rotate(-45deg); }

.btList a:hover {
  background-color: #ff89b8;
  text-decoration: none;
  color: #fff !important;
  transition: .3s; }

.btList a:hover::after {
  content: "";
  position: absolute;
  top: 0;
  right: 17px;
  bottom: 0;
  width: 8px;
  height: 8px;
  margin: auto;
  border-right: #fff 2px solid;
  border-bottom: #fff 2px solid;
  transform: rotate(-45deg); }

.alphaBnr a img {
  transition: .3s; }

.alphaBnr a:hover img {
  opacity: 0.6; }

.orange {
  color: #ee8600; }

.yellow {
  color: #FFF6B0; }

.yellow2 {
  color: #FFC900; }

.notice_inner {
  display: block;
  width: 100% !important;
  margin: 0;
  padding: 0;
  position: relative;
  font-size: 1.28rem;
  line-height: 1.5; }
  .notice_inner h3 {
    font-weight: 700;
    text-align: center;
    font-size: 1.5rem;
    color: #000; }

@media screen and (min-width: 720px) {
  .notice_inner {
    font-size: 1.36rem;
    line-height: 1.5; }
    .notice_inner h3 {
      font-weight: 700;
      text-align: center;
      font-size: 1.6rem; } }
.text_wrap {
  display: block;
  width: 100% !important;
  height: 210px;
  overflow-x: hidden;
  overflow-y: hidden;
  max-width: 980px;
  margin: 0 auto;
  padding: 0 10px 8px 12px;
  background: rgba(255, 255, 255, 0.8);
  border-radius: 20px;
  position: relative; }
  .text_wrap .text_inner {
    display: block;
    width: 100%;
    height: 180px;
    overflow-x: hidden;
    overflow-y: scroll;
    margin: 0;
    padding: 14px 2px 14px 14px;
    /*border-radius: 20px;*/
    position: relative; }
    .text_wrap .text_inner a {
      color: #c10c00;
      text-decoration: none; }
    .text_wrap .text_inner a:hover {
      color: #ff3224;
      text-decoration: underline; }
    .text_wrap .text_inner ul {
      list-style: none;
      font-weight: 500; }
    .text_wrap .text_inner li {
      text-indent: -1.4rem;
      margin-bottom: 8px;
      padding-right: 5px;
      color: #000; }
    .text_wrap .text_inner li::before {
      content: "";
      width: 8px;
      height: 8px;
      display: inline-block;
      background-color: #BC0003;
      border-radius: 50%;
      position: relative;
      top: -1px;
      margin-right: 5px; }

@media screen and (min-width: 720px) {
  .text_wrap {
    height: 220px;
    padding: 0 10px 14px 24px; }
    .text_wrap .text_inner {
      height: 184px;
      padding: 16px 6px 18px 18px; } }
.lead_txt {
  font-family: YakuHanMPs,"Noto Serif JP", serif;
  font-optical-sizing: auto;
  font-weight: 600;
  font-size: 1.48rem;
  line-height: 1.6;
  transform: scale(0.85, 1);
  transform-origin: 0 0;
  width: 118%; }

@media screen and (min-width: 720px) {
  .lead_txt {
    font-size: 1.78rem;
    ine-height: 1.7; } }
.ff_yakuhan_go {
  font-family: YakuHanJPs,"M PLUS 2", sans-serif; }

.ff_yakuhan_min {
  font-family: YakuHanMPs,"Noto Serif JP", serif; }

.ff_mincho {
  font-family: "Noto Serif JP", serif; }

.chotai {
  transform: scale(0.85, 1);
  transform-origin: 0 0;
  width: 118%; }

.copyright {
  display: block;
  width: auto;
  margin: 0 auto;
  font-size: 9px;
  color: #3E3E3E;
  z-index: 15; }

.btTxt {
  display: block;
  margin: 20px auto 0 auto;
  width: auto;
  /*text-align: center;*/
  position: relative; }

.btTxt span {
  /*line-height: 1;*/
  display: inline-block;
  width: auto;
  min-width: 196px;
  position: relative;
  border-radius: 30px;
  padding: 10px 40px 10px 20px;
  background-color: #1681cc;
  text-decoration: none !important;
  text-align: left;
  color: #fff !important;
  font-weight: 500;
  line-height: 1.4;
  margin: 0 auto; }

.btTxt span::after {
  content: "";
  position: absolute;
  top: 0;
  right: 17px;
  bottom: 0;
  width: 8px;
  height: 8px;
  margin: auto;
  border-right: rgba(255, 255, 255, 0) 2px solid;
  border-bottom: rgba(255, 255, 255, 0) 2px solid;
  transform: rotate(-45deg); }