@charset "UTF-8";
@import url('https://fonts.googleapis.com/css?family=Audiowide|Lilita+One|Noto+Sans+JP:100,300,400,500,700|Sawarabi+Gothic&display=swap');

html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed,
figure, figcaption, footer, header, hgroup,
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
margin: 0;
padding: 0;
border: 0;
vertical-align: baseline;

/* font-size: 62.5%; sets the base font to 10px for easier math */
 font-size: 62.5%;
}

body {
  width: 100%;
  margin: 0 auto;
  text-align: center;
  background-color: #000;
  color: #fff;
  font-family: "Noto Sans JP","Lilita One", "Audiowide", "Sawarabi Gothic", "Ro GSan Serif Std B","A-OTF Shin Go Pr5", "メイリオ", Meiryo, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;

  display: flex;
  flex-direction: column;
  min-height: 100vh;

  font-size:1.6rem;/* 16px*/
  line-height: 2;
}

h1 {
  font-size: 36px;
  font-size: calc(2.4rem + ((1vw - 0.64rem) * 2.1429));
  line-height: 1.3;
}

h2 {
  font-size: 24px;
  font-size: calc(2rem + ((1vw - 0.64rem) * 0.7143));
  line-height: 1.3;
}

@media (min-width: 1200px) {/* 1200px以上*/
  h1 {
    font-size: 3.6rem;/* 36px*/
  }
  h2 {
    font-size: 2.4rem;/* 24px*/
  }
}
@media screen and (max-width: 640px) {/* 640px以下*/
  body{
    line-height: 2;
  }
  h1{
    font-size: 2.4rem;/* 24px*/
  }
  h2 {
    font-size: 2rem;/* 20px*/
  }
}


a.disabled{
  pointer-events: none;
}
ul li {
  list-style: none;
}
img {
  max-width: 100%;
  margin: 0;
}
.pc-visible {
  display: block;
}
.sp-visible {
  display: none;
}

h2 {
  margin: 0 auto;
}

#wrap {
  box-sizing: border-box;
  position: relative;
}

/************** フッター ***************/
#footer {
  background-image: url(../img/common/top_story_illust.png);
  background-repeat: no-repeat;
  background-position:right bottom;
  background-size: 60vh;

  font-family: 'Noto Sans JP', sans-serif;
  font-weight: 100;

  background-color: black;
  text-align: center;
  width: 100%;
  color: #fff;
  z-index: 61;

  font-size: 16px;
  font-size: calc(1.4rem + ((1vw - 0.64rem) * 0.7143));
  line-height: 2;

  padding: 19vh 0 18vh 0;
  bottom: 0;
}

#footer:after {
-moz-transform: scaleX(-1);
-o-transform: scaleX(-1);
-webkit-transform: scaleX(-1);
transform: scaleX(-1);
filter: FlipH;
-ms-filter: "FlipH";
}

#footer div.footer_link {
  padding: 1vh auto;

  font-size: 14px;
  font-size: calc(1.4rem + ((1vw - 0.64rem) * 0.7143));
}
#footer div.footer_link ul li {
  list-style: none;
  display: inline-block;

  font-size: 14px;
  font-size: calc(1.4rem + ((1vw - 0.64rem) * 0.7143));
}
#footer div.footer_link a {
  font-size: 14px;
  font-size: calc(1.4rem + ((1vw - 0.64rem) * 0.7143));
  color: #fff;
}

#footer div.footer_link a:hover{
  color:#d563c9;
}

#footer div.footer-bottom {
}

#footer div.footer-bottom p{
  font-size: 14px;
  font-size: calc(1.4rem + ((1vw - 0.64rem) * 0.7143));
}
#footer .footer-logo {
  margin: 2em 0 2.2em 0;
}
#footer .footer-seec-logo {
  margin: 1.5em 0 1.5em 0;
}

@media screen and (max-width: 480px) {
  #footer {
    padding: 20vh 0 10vh 0;
    background-size: 50vh;
    font-weight: 300;
  }
  #footer div.footer_link {
    font-size: 14px;
    font-size: calc(1.4rem + ((1vw - 0.64rem) * 0.7143));
  }
  #footer div.footer_link ul li {
    font-size: 14px;
    font-size: calc(1.4rem + ((1vw - 0.64rem) * 0.7143));
  }
  #footer div.footer-bottom {
    font-size: 14px;
    font-size: calc(1.4rem + ((1vw - 0.64rem) * 0.7143));
  }
  #footer div.footer_link a {
    font-size: 14px;
    font-size: calc(1.4rem + ((1vw - 0.64rem) * 0.7143));
  }
  #footer div.footer-bottom p{
    font-size: 14px;
    font-size: calc(1.4rem + ((1vw - 0.64rem) * 0.7143));
  }
}

#container {
  position: relative;
  margin: 0 auto;
  width: 100%;
}

#campaing-banner {
  position: fixed;
  left: 0;
  bottom: 0;
  z-index: 999999;
  width: 21.442307692%;
  max-width: 223px;
}
#campaing-banner img {
  vertical-align:bottom;
  width: 100%;
}

#top-back {
  position: fixed;
  right: 2vw;
  bottom: 2vw;
  z-index: 999999;
}

#reservation-top-back {
  position: fixed;
  left: 2vw;
  bottom: 2vw;
  z-index: 999999;
}


div.black {
  background: black;
}
div.white {
  background: white;
}
div.contents-bg {
  display: none;
  position:fixed; /* 位置の固定 */
  top: 0; /* 表示位置 */
  left: 0;/* 表示位置 */
  height: 100%;   /* 画面全体に表示 */
  width: 100%;/* 画面全体に表示 */
  opacity: 0.60;  /* 透明度 */
  margin: 0;  /* 余白の削除 */
  padding: 0; /* 余白の削除 */
  z-index:10000;
}

@media screen and (max-width: 480px) {
  #reservation-top-back img {
    width: 25vw;
  }

  #top-back {
    right: 5vw;
  }
  #top-back img {
    width: 14vw;
  }
  #loading img {
    width: 50%;
  }
  #campaing-banner {
    width: 30.298913043%;
  }

  .pc-visible {
    display: none;
  }
  .sp-visible {
    display: block;
  }
}

/************** 色 ***************/
.light-blue {
  color: #2bc3ff;
}
.pink {
  color: #e4007f;
}
.purple {
  color: #7c27ff;
}

.disble {
  color: #4b4b4b;
}

/************** 共通 ***************/
.clearfix:after {
  content: " ";
  display: block;
  clear: both;
  height: 0;
  visibility: hidden;
}
/* IE7,MacIE5 */
.clearfix {
  display: inline-block;
}
/* WinIE6 below, Exclude MacIE5 \*/
* html .clearfix {
  height: 1%;
}
.clearfix {
  display: block;
}

.pc-only {
  display: block;
}
.sp-only {
  display: none;
}

img.left,
img.right {
  transition: 1.0s;
  transition-delay: 0s;
}
.left {
  float: left;
}
.left-move{
  opacity: 0;
  transform: translateX(-50px);
  -webkit-transform: translateX(-50px);
}
.right {
  float: right;
}
.right-move{
  opacity: 0;
  transform: translateX(50px);
  -webkit-transform: translateX(50px);
}


@media screen and (max-width: 480px) {
  br.pc-br {
    display: none;
  }

  .pc-only {
    display: none;
  }
  .sp-only {
    display: block;
  }
}

/************** 共通ラベル ***************/
.chara-label {
  margin: 0 auto;
  width: 100%;
}
.chara-label div.label-wrap:nth-child(1) {
  margin-right: .5vw;
}
.chara-label div.label-wrap:nth-child(2) {
  margin-left: .5vw;
}
.label-wrap {
  display: inline-block;
  width: 48%;
}
.label-outer,
.label-inner {
  margin: 0 auto;
  width: 280.8px;
  height: 39.52px;
  display: block;
  position: relative;
  background: #414141;
  transition: all 0.2s linear;
  max-width: 280.8px;
  max-height: 39.52px;
}

.label-outer span {
  width: 100%;
  height: 100%;
  font-size: 1.6vw;
  color: #fff;
  text-align: center;
  display: flex;
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: center;
}

.label-outer:before,
.label-outer:after {
  content: '';
  top: 0;
  left: 0;
  width: 8%;
  height: 100%;
  position: absolute;
  background: #414141;
  transition: all 0.2s linear;
  z-index: 0;
}
.label-outer:before {
  transform: rotate(60deg);
}
.label-outer:after {
  transform: rotate(-60deg);
}

.label-inner:before,
.label-inner:after {
  content: '';
  top: 0;
  right: 0;
  width: 8%;
  height: 100%;
  position: absolute;
  background: #414141;
  transition: all 0.2s linear;
  z-index: 0;
}
.label-inner:before {
  transform: rotate(60deg);
}
.label-inner:after {
  transform: rotate(-60deg);
}

@media screen and (min-width: 1041px) {
  .label-outer span {
    font-size: 16.64px;
  }
}

@media screen and (max-width: 480px) {
  .label-outer span {
    font-size: 2vw;
  }
  .label-outer,
  .label-inner {

    width: 40vw;
    height: 5.5vw;

    max-width: none;
    max-height: none;
  }
  .label-outer:before,
  .label-outer:after,
  .label-inner:before,
  .label-inner:after {
    width: 7.8%;
  }
}

/************** 共通ボタン(もっと見る) ***************/
.button-wrap {
  margin-top: 1.5vw;
  margin-bottom: 1.5vw;
  width: auto;
  height: auto;
}
.button-wrap-adjustment {
	width: 80%;
	margin: 5vh auto;
	padding:5vh 0 0 0;
}
@media screen and (max-width: 480px) {
.button-wrap-adjustment {
	margin: 2vh auto;
	padding:2vh 0 0 0;
}
}

.more {
	position: relative;
	margin: 0 auto;

	width: 50%;
	height: 100%;

	display: flex;
	display: -ms-flexbox; /* IE10 */
	flex-wrap: wrap;
	-ms-flex-wrap: wrap; /* IE10 */
}

.more a{
  position: absolute;

  width: 100%;
  height: 0;
  /*   (コンテンツ幅 *  画像の縦幅 / 画像の横幅)  */
  padding-bottom: calc(100% * 67/440);

  background-image: url(../img/top/top_button.png);
  background-repeat: no-repeat;
  background-position: center center;
  background-size: cover;
}

 .more span {
   position: absolute;

   width: 100%;
   height: 0;
  /*   (コンテンツ幅 *  画像の縦幅 / 画像の横幅) / 2 = 中間 */
  padding-top: calc((100%*70/440)/2.1);

  font-size: 18px;
  font-size: calc(1.6rem + ((1vw - 0.64rem) * 0.7143));
  line-height: 1.3;

  color: #fff;
  text-align: center;
  display: flex;
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 400;

}


.more {

}

.more a.off{
 pointer-events:none;
}
.more a.off::after {
  content: '';
  background-color: rgba(0,0,0,.5);
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
}
 .more span.off {
  color: rgba(255,255,255,.5);
}



@media screen and (min-width: 1041px) {

}

@media screen and (max-width: 480px) {

.more a{
/*   padding-bottom: calc((100% * 67/440)*1.25); */
}
.more span {
  /*   (コンテンツ幅 *  画像の縦幅 / 画像の横幅) / 2 = 中間 */
  padding-top: calc((100% * 70/440)/2.2);

  font-size: 16px;
  font-size: calc(1.5rem + ((1vw - 0.64rem) * 0.7143));
  line-height: 1.3;
  font-weight: bold;
}

}

.comming-soon-wrap {
  position: relative;
  width: 40vw;
  height: 5.7vw;
  margin: 0 auto;
  margin-top: 1vw;
  margin-bottom: 1.5vw;

  max-width: 416px;
  max-height: 59.27px;
}
.comming-soon-square {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: white;
}
.comming-soon-wrap p {
  /* color: #e4007f; */
  color: #bababa;
  width: 100%;
  height: 100%;
  font-size: 1.6vw;
  font-weight: bold;
  position: absolute;
  display: -webkit-flex;
  display: flex;
  -webkit-align-items: center;
  align-items: center;
  -webkit-justify-content: center;
  justify-content: center;
}
.comming-soon-upper-left, .comming-soon-bottom-left {
  position: absolute;
  top: 0;
  left: 0;
  width: 8%;
  height: 100%;
}
.comming-soon-upper-left,
.comming-soon-bottom-right {
  transform: rotate(120deg);
}
.comming-soon-upper-left div {
  background: white;
  width: 87%;
  height: 50%;
  left: 7%;
  bottom: 0;
  position: fixed;
}
.comming-soon-upper-right div {
  background: white;
  width: 87%;
  height: 50%;
  left: 6%;
  bottom: 0px;
  position: fixed;
}
.comming-soon-bottom-left div {
  background: white;
  width: 87%;
  height: 50%;
  left: 6%;
  top: 0px;
  position: fixed;
}
.comming-soon-bottom-right div {
  background: white;
  width: 87%;
  height: 50%;
  left: 6%;
  top: 0px;
  position: fixed;
}
.comming-soon-upper-right, .comming-soon-bottom-right {
  position: absolute;
  top: 0;
  right: 0;
  width: 8%;
  height: 100%;
}
.comming-soon-bottom-left,
.comming-soon-upper-right {
  transform: rotate(-120deg);
}
.comming-soon-square::before, .comming-soon-square::after,
.comming-soon-upper-left::after,
.comming-soon-upper-right::after,
.comming-soon-bottom-right::before,
.comming-soon-bottom-left::before {
  position: absolute;
  left: 0;
  right: 0;
  height: .3vw;
  content: '';
  /* background-color: #e4007f; */
  background-color: #bababa;
  z-index: 10;
}
.comming-soon-square::before,
.comming-soon-upper-left::before, .comming-soon-bottom-left::before,
.comming-soon-upper-right::before, .comming-soon-bottom-right::before {
  top: 0;
  z-index: 100;
}
.comming-soon-square::after,
.comming-soon-upper-left::after, .comming-soon-bottom-left::after,
.comming-soon-upper-right::after, .comming-soon-bottom-right::after {
  bottom: 0;
  z-index: 100;
}


@media screen and (min-width: 1041px) {
  .comming-soon-wrap p {
    font-size: 16.64px;
  }
}

@media screen and (max-width: 480px) {
  .comming-soon-wrap p {
    font-size: 3vw;
  }
  .comming-soon-wrap {
    width: 50vw;
    height: 9.7vw;

    max-width: none;
    max-height: none;
  }
  .comming-soon-upper-right,
  .comming-soon-bottom-right,
  .comming-soon-upper-left,
  .comming-soon-bottom-left {
    width: 11%;
  }
}

/************** 体験版 ***************/
.webgl-content {
  background-color: black;
  width: 960px;
  margin: 0 auto;
}
#trial-wrap {
  margin-top: 20px;
}
#trial-line {
  display: block;
  width:100%;
  margin-top: 10px;
}
#gameContainer {
}

div.caution {
  font-size: 1em;
  width: 80%;
  color: #f80b41;
  margin: 0 auto;
  margin-top: 85px;
  font-family: "Sawarabi Mincho",Georgia,游明朝,"Yu Mincho",YuMincho,"Hiragino Mincho ProN",HGS明朝E,メイリオ,Meiryo,serif;
  font-weight: bold;
}

/************** メインビジュアル ***************/
.top-illust-teaser,
.top-illust {
  position: relative;
  width: 95%;
  height: 95%;
  padding: 68% 0 0;

  margin: 8vh auto 8vh auto;
}

.top-illust-teaser {
  margin: 3vh auto 0 auto;
}


#particle-area {
  position: absolute;
  top: 0px;
  left: 0px;
  z-index: 2;
  width: 100%;
  height: 100%;
}

#particle-canvas-pc,
#particle-canvas-sp {
  position: relative;
  width: 100%;
  height: 100%;

}
#flash{
  width:128px;
  height:128px;
  background-color:#a0a0a0;
}
 .pc-teaser-pos {
  position: relative;
  top: 3vh;
  left: -35%;
  bottom: 0;
  right: 0;
}

.top-illust-teaser img,
.top-illust img {
  width: 100%;
}

.illust-bg {
  position: absolute;
  z-index: -1;

  top: 0px;
  left: 0px;
}
.top-chara {
  position: absolute;
  z-index: 2;

  top: 0px;
  left: 0px;
  right: 0;
  bottom: 0;
}
.bottom-chara {
  position: absolute;
  z-index: 1;

  top: 0px;
  left: 0px;
  right: 0;
  bottom: 0;
}

.top-text {
  position: absolute;
  z-index: 5;
  top: 0px;
  left: 0px;
  right: 0;
  bottom: 0;
}


.pc {
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  display: block;
}
.sp {
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  display: none;

}

.top-arrow {
  position: absolute;
  z-index: 10;
  bottom: 0;
  margin-bottom: .2vw;
  width: 100%;
}
.arrow-animation {
  animation: vertical 2s linear infinite normal;
}
/** sp **/
.top-chara1 {
  position: absolute;
  z-index: 4;
  top: 0;
}
.top-chara2 {
  position: absolute;
  z-index: 3;
  top: 5px;
}
.top-chara3 {
  position: absolute;
  z-index: 2;
  top: -16px;
}
.sp-arrow-wrap {
  background: black;
  padding-top: .4em;
  display: none;
}
.top-sp-arrow {
  z-index: 10;
  margin-top: .4em;
  display: none;
}

a.top-app-store {
  position: absolute;
  top: 43.75vw;
  left: 3.365384615vw;
  width:16.923076923vw;
  height:6.346153846vw;
  display:inline-block;
  overflow:hidden;
  background:url(https://linkmaker.itunes.apple.com/ja-jp/badge-lrg.svg?releaseDate=2019-04-17&kind=iossoftware&bubble=ios_apps) no-repeat;
  background-size:contain;
}
a.top-googleplay {
  position: absolute;
  top: 42.5vw;
  left: 20.192307692vw;
  width: 19.326923076vw;
  display: inline-block;
  overflow: hidden;
  background-size: contain;
}
@media screen and (min-width: 1041px) {

}
@media screen and (max-width: 480px) {

  .top-illust-teaser,
  .top-illust {
    padding: 135% 0 0;
    margin: 8vh auto 3vh auto;
  }

  .top-illust-teaser {
    margin: 3vh auto 0 auto;
  }

  .pc {
    display: none;
  }
  .sp,
  .top-sp-arrow,
  .sp-arrow-wrap {
    display: block;
  }
  body {
    max-width: 480px;
  }

  a.top-app-store {
    top: 123vw;
    left: 2vw;
    width: 27.173913043vw;
    height: 59.2592592593px;
  }
  a.top-googleplay {
    top: 123vw;
    left: 30vw;
    width: 27.173913043vw;
    height: 59.2592592593px;
  }
}


@keyframes vertical {
  0% { transform:translateY(0px); }
  18% { transform:translateY(-5px); }
  36% { transform:translateY(0px); }
  54% { transform:translateY(-5px); }
  82% { transform:translateY(-5px); }
  100% { transform:translateY(0px); }
}
@keyframes left-horizontal {
  0% { transform:translateX(0px); }
  10% { transform:translateX(2.5px); }
  20% { transform:translateX(0px); }
  30% { transform:translateX(2.5px); }
  90% { transform:translateX(2.5px); }
  100% { transform:translateX(0px); }
}
@keyframes right-horizontal {
  0% { transform:translateX(0px); }
  10% { transform:translateX(-2.5px); }
  20% { transform:translateX(0px); }
  30% { transform:translateX(-2.5px); }
  90% { transform:translateX(-2.5px); }
  100% { transform:translateX(0px); }
}

/************** フェードイン表示するやつ ***************/
.left-fadein,
.right-fadein,
.fadein-common,
.fadein-delay-common,
.fadein-delay-common02,
.fadein-last {
	list-style-type: none;
	overflow: hidden;
}
.left-fadein img {
	transition: 1.0s;
}
.right-fadein img {
	transition: 1.0s;
  transition-delay: .7s;
}
.fadein-common * {
	transition: 1.0s;
  transition-delay: 1s;
}
.fadein-delay-common img {
  transition: 1.0s;
  transition-delay: 1.5s;
}
.fadein-delay-common02 img {
  transition: 1.0s;
  transition-delay: 2.5s;
}
.fadein-delay-chara1 img {
  transition: 0.5s;
  transition-delay: 0.5s;
}
.fadein-delay-chara2 img {
  transition: 0.5s;
  transition-delay: 0.75s;
}
.fadein-delay-chara3 img {
  transition: 0.5s;
  transition-delay: 1.0s;
}

.fadein-last img {
  transition: 1.0s;
  transition-delay: 2s;
}
.fadein-last div {
  transition: 1.0s;
  transition-delay: 1.5s;
}
.list-scale{
	transform: scale(0, 0);
	-webkit-transform: scale(0, 0);
}
.scale{
  transform: scale(1, 1);
	-webkit-transform: scale(1, 1);
}
.list-move{
	opacity: 0;
	transform: translate(0,60px);
	-webkit-transform: translate(0,60px);
}

.list-move-up{
	opacity: 0;
	transform: translate(0,60px);
	-webkit-transform: translate(0,60px);
}

.list-move-down{
	opacity: 0;
	transform: translate(0,-60px);
	-webkit-transform: translate(0,-60px);
}

.list-move-right{
	opacity: 0;
	transform: translate(-60px,0);
	-webkit-transform: translate(60px,0);
}


.half-move{
	opacity: 0;
	transform: translate(0,30px);
	-webkit-transform: translate(0,30px);
}

.move{
	opacity: 1.0;
	transform: translate(0,0);
	-webkit-transform: translate(0,0);
}
.list-fade-last,
.list-fade {
   opacity: 0;
}
.fade{
  opacity: 1.0;
}
.fade-last{
  opacity: 1.0;
  transition-delay: 3.0s;
}

.list-fade-system01,
.list-fade-system02,
.list-fade-system03
{
 opacity: 0;
}

.inviewKey-system01,
.inviewKey-system02,
.inviewKey-system03
{
/* viewのトリガー位置に配置 */
}

/************** メインdiv ***************/
.child-contents {
  max-width: 1040px;
  margin: 0 auto;
}

.child-contents img{
  max-width: 100%;

}

.child-contents-title {
  width: 100%;
  height: auto;
  margin: 10vh auto 0 auto;
}

.child-contents-title .title {
  text-align:left;
  width:25vw;
  max-width:400px;
  max-height:140px;
}

#pickup {
  width: 100%;
  padding: 2.7vw 0;
  margin: 0 auto;
  max-width: 30%;
}


#pickup p {
  display: inline-block;
  width: 50%;
  max-width: 372px;
}

p.left {
  float: left;
}
p.right {
  float: right;
}

.child-contents-title .title {
  width: 35vw;
}

#pickup {
}
.fixed-under-contents {
  margin-top: 5vw;
}

.pc-pickup {
  display: none;
}
.sp-pickup {
  display: block;

  width: 80%;
  height: auto;
  padding: 0 0 0 0;
  box-sizing: border-box;
  position: relative;
  margin: 0 auto 8vh auto;

  text-align: center;
}

/************** 見出し ***************/

.slideConts {
  -webkit-transition: .5s;
  -o-transition: .5s;
  transition: .5s;
}

.caption-wrap.show {
  transform: translate(0px, 0) !important;
}

.caption-wrap {
  width: 100%;
  transform: translate(-800px, 0);
}

.caption-wrap-fixed {
  width: 100%;

}


div.caption-wrap,
div.caption-wrap-fixed {
  margin: 3vh auto 0 0;
}

div.setMargin01 {
  margin: 10vh auto 0 0;
}


div.caption-wrap,
div.caption-wrap-fixed img{
  text-align:left;

  width:25vw;
/*   height:15vh; */

  max-width:400px;
  max-height:140px;
}

.caption-wrap-fixed {
  margin-top: 70px;
}
div.caption {
  width: 100%;
  max-height: 84.28px;
  margin: 1vw auto;
text-align:left;
}
div.caption-inner {
  max-height: 84.28px;
}
.caption h2 {
  font-size: 2vw;
  max-height: 71.58px;
  background-color: black;
  transform: rotate(.7deg);
  padding: 2.3vw 0 1.7vw;
}

@media screen and (min-width: 1041px) {
  div.caption {
margin: 10.408px auto;
  }
  .caption h2 {
font-size: 20.8px;
padding: 23.92px 0 17.68px;
  }
}

@media screen and (max-width: 480px) {
  div.caption-wrap,
  div.caption-wrap-fixed {
/* height: 17.798913043vw; */
/* margin-top: -1.494565217vw; */
max-height: unset;
  }
  div.setMargin01 {
  margin: 3vh auto 0 0;
}

  div.caption-wrap,
  div.caption-wrap-fixed img{
width:35vw;
/* height:20vh; */
  }

  div.caption-wrap-fixed {
position: fixed;
z-index: 999;
  }
  div.caption {
margin: 1.414130434vw auto;
max-height: unset;
  }
  div.caption-inner {
max-height: unset;
  }
  .caption h2 {
max-height: unset;
font-size: 3.6vw;
padding: 4.483695652vw 0 5.027173913vw;
  }
}

/************** 矢印共通 ***************/
.arrow{
  position: relative;
}
.arrow::before {
  content: '';
  width: 4vw;
  height: 4vw;
  border: 0px;
  border-top: solid 0.3vw #620474;
  border-right: solid 0.3vw #620474;
  -ms-transform: rotate(45deg);
  -webkit-transform: rotate(45deg);
  transform: rotate(45deg);
  position: absolute;
  right: 2vw;
  top: 33%;
}
#ss-list article.arrow::before {
  top: 36%;
}

@media screen and (min-width: 1041px) {
  .arrow::before {
    content: '';
    width: 41.6px;
    height: 41.6px;
    right: 20.8px;
    border-top: solid 5.408px #620474;
    border-right: solid 5.408px #620474;
    top: 38%;
  }
}
@media screen and (max-width: 480px) {

  .arrow::before {
    content: '';
    width: 4vw;
    height: 4vw;
    top: 38%;
  }
}

/************** top back ***************/


/************** story-list ***************/
#story-list-box {
width: 100%;
max-width: 850px;
height: 100%;

	display: flex;
	display: -ms-flexbox; /* IE10 */
	flex-wrap: wrap;
	-ms-flex-wrap: wrap; /* IE10 */

	margin: 0 auto;
}

#story-list-box .story-inner {
  position: relative;
  width: 100%;
  height: auto;

  margin: 1vh auto;
  font-family: 'Noto Sans JP', sans-serif;
}

#story-list-box .img-right {

  position:absolute;
  top: calc( ( 100% - 100vw ) /  10);
  right: 0;
  height: -webkit-fill-available;
}

#story-list-box .img-right img{
  height : calc(100vw / 2  * 583 / 426);
  max-height : 490px;
}

#story-list-box ul.story-list{
  position: relative;
  z-index: 99;
  width: auto;
   /* 上 右 下 左 */
  margin: 0 auto 0 2.0vw;
  text-align: left;
  overflow: visible;
  white-space:nowrap;

  font-size: 22px;
  font-size: calc(2.2rem + ((1vw - 0.64rem) * 0.7143));
}

#story-list-box .story-list li {
  overflow:visible;
  margin-top: .8vh;
}

#story-list-box .story-list #li-nbsp01{
  margin-top: 1.6vh;
}
#story-list-box .story-list #li-nbsp02{
  margin-top: 5.6vh;
}
#story-list-box .story-list #li-nbsp03{
  margin-bottom: 4.4vh;
}


@media screen and (max-width: 480px) {

  #story-list-box .img-right {
    width: 48%;
  }

  #story-list-box img {
    -webkit-filter: brightness(0.6);
    -moz-filter: brightness(0.6);
    -o-filter: brightness(0.6);
    -ms-filter: brightness(0.6);
    filter: brightness(0.6);
  }

  #story-list-box ul.story-list {
    font-size: 22px;
    font-size: calc(2.0rem + ((1vw - 0.64rem) * 0.7143));
  }

}

/************** news-list ***************/
#news-list,
#ss-list {
  width: 80%;
  margin: 0 auto;
  padding: 2.5vh 0 10vh;
}
#news-list article,
#ss-list article {
  color: black;
  display: inline-block;
  width: 90%;
  background-color: white;
  border: 1px solid #282828;
  box-shadow: .8vw .5vw 1px rgba(166,117,255,.2);
  padding: 2vw 6vw 2vw 2vw;
  margin-bottom: 2vw;
  text-align: left;

  font-family: 'Noto Sans JP', sans-serif;
}
#news-list article h2 {
  font-size: 16px;
  font-size: calc(1.4rem + ((1vw - 0.64rem) * 0.7143));

  font-weight: normal;
  margin-left: .5vw;
}
#news-list article p {
  font-size: 20px;
  font-size: calc(1.8rem + ((1vw - 0.64rem) * 0.7143));

  font-weight: normal;
  margin-left: .5vw;
  margin-top: .8vw;
}


/************** ss ***********/
#ss-list article {
  padding: 0 6vw 0 0;
}
#ss-list .arrow div {
  padding: 2vw 0 0 0;
}
#ss-list img {
  width: 24%;
  float: left;
}

#ss-list article h2 {
  font-size: 2.3vw;

  font-weight: normal;
  margin-left: .5vw;
}
#ss-list article p {
  font-size: 2.8vw;

  font-weight: normal;
  margin-left: .5vw;
  margin-top: .8vw;
}

@media screen and (min-width: 1041px) {
  #news-list,
  #ss-list {
    padding: 2.5vh 0 10vh;
  }
  #news-list article {
    box-shadow: 8.32px 5.2px 10.4px rgba(166,117,255,.2);
    padding: 20.8px 62.4px 20.8px 20.8px;
    margin-bottom: 20.8px;
  }

  #ss-list .arrow div {
    padding: 20.8px 0 0 0;
  }
  #ss-list article {
    box-shadow: 8.32px 5.2px 10.4px rgba(166,117,255,.2);
    padding: 0 20.8px 0 0;
    margin-bottom: 20.8px;
  }
  #ss-list article h2 {
    font-size: 23.92px;
    margin-left: 5.2px;
  }
  #ss-list article p {
    font-size: 29.12px;

    margin-left: 5.2px;
    margin-top: 8.32px;
  }
}

@media screen and (max-width: 480px) {
  #news-list,
  #ss-list {
    width: 95%;
  }
  #news-list article h2 {
    font-size: 2.5vw;
    font-size: calc(1.2rem + ((1vw - 0.64rem) * 0.7143));
  }
  #news-list article p {
    font-size: 2.8vw;
    font-size: calc(1.4rem + ((1vw - 0.64rem) * 0.7143));
  }

  #ss-list article h2 {
    font-size: 2.5vw;
  }
  #ss-list article p {
    font-size: 3.3vw;
  }
}

/************** pager ***************/
.pager {
  text-align: center;
  padding: 4vw 0 0 0;
  overflow: hidden;
}
.pager-notice {
  text-align: center;
  padding: 0 0 3vw 0;
  overflow: hidden;
}
.pager > div {
  width: 35%;
  color: white;
  padding: 0.3vw;
  display: inline-block;
  background: #620474;
  transform: skewY(0deg) skewX(11deg);
  position: relative;
}
.pager-notice > div {
  width: 35%;
  color: black;
  padding: 0.3vw;
  display: inline-block;
  background: none;
  position: relative;
}
.pager-notice > div > div {
  font-size: calc(1.2rem + ((1vw - 0.64rem) * 0.7143));
}
.pager div.left,
.pager-notice div.left {
  width: 38%;
  transform: skewY(0deg) skewX(11deg);
  left: -1vw;
  height: 5vw;
}
.pager div.right,
.pager-notice div.right {
  width: 38%;
  transform: skewY(0deg) skewX(11deg);
  right: -1vw;
  height: 5vw;
}
.pager-notice > div.notice {
  text-align: center;
  transform: skewY(0deg) skewX(0deg);
}

.pager div.left div {
  line-height: 5vw;
  font-size: calc(1.4rem + ((1vw - 0.64rem) * 0.7143));
  transform: skewY(0deg) skewX(-11deg);
}
.pager div.right div {
  line-height: 5vw;
  font-size: calc(1.4rem + ((1vw - 0.64rem) * 0.7143));
  transform: skewY(0deg) skewX(-11deg);
}

.pager div.left div::before {
  content: '';
  width: 2vw;
  height: 2vw;
  border: 0px;
  border-top: solid 0.15vw #fff;
  border-right: solid 0.15vw #fff;
  -ms-transform: rotate(225deg);
  -webkit-transform: rotate(225deg);
  transform: rotate(225deg);
  position: absolute;
  left: 2vw;
  top: 1.4vw;
}
.pager div.right div::before {
  content: '';
  width: 2vw;
  height: 2vw;
  border: 0px;
  border-top: solid 0.15vw #fff;
  border-right: solid 0.15vw #fff;
  -ms-transform: rotate(45deg);
  -webkit-transform: rotate(45deg);
  transform: rotate(45deg);
  position: absolute;
  right: 2vw;
  top: 1.4vw;
}

@media screen and (min-width: 1040px) {
  .pager div.left div::before {
    width: 13px;
    height: 13px;
    top: 32%;
  }
  .pager div.right div::before {
    width: 13px;
    height: 13px;
    top: 32%;
  }

  .pager div.left,
  .pager-notice div.left {
    left: -10.4px;
    height: 52px;
  }
  .pager div.right,
  .pager-notice div.right {
    right: -10.4px;
    height: 52px;
  }

  .pager div.right div {
    line-height: 52px;
  }
  .pager div.left div {
    line-height: 52px;
  }
}
/************** news ***************/
#news {
  width: 80%;
  margin: 0 auto 2vh auto;
  padding: 2.5vh 0 10vh;
}
#news article {
  color: black;
  display: inline-block;
  width: 95%;
  background-color: white;
  border: 1px solid #282828;
  box-shadow: .8vw .5vw 1px rgba(166,117,255,.2);
  padding: 2.5vw 2.5vw 2.5vw 2.5vw;
  margin-bottom: 2vw;
  text-align: left;

 font-family: 'Noto Sans JP', sans-serif;
/*   font-size: 1.4vw; */
/*   font-weight: 100; */
}
#news article a {
  color: rgba(166,117,255,1);
  border-bottom: .1vw solid rgba(166,117,255,1);
  font-family: 'Noto Sans JP', sans-serif;

  font-size: 18px;
  font-size: calc(1.4rem + ((1vw - 0.64rem) * 0.7143));
}

#news article h2 {
  font-size: 14px;
  font-size: calc(1.2rem + ((1vw - 0.64rem) * 0.7143));

  margin: 2vh auto ;

  font-weight: normal;
}
#news article h1 {
  font-size: 20px;
  font-size: calc(1.6rem + ((1vw - 0.64rem) * 0.7143));
  margin: 2vh auto ;

  font-weight: 400;
}
#news article h1::after {
  margin: 3vh 0 3vh auto;
  content:"";
  display:block;
  height:2px;
  width:100%;
  background:-webkit-gradient(#a1a1a1, #a1a1a1);
  background:-moz-linear-gradient(#a1a1a1, #a1a1a1);
  background:linear-gradient(#a1a1a1, #a1a1a1);
}
#news article h1 span {
  margin-left: .5vw;
}
#news article p {
  font-size: 18px;
  font-size: calc(1.4rem + ((1vw - 0.64rem) * 0.7143));

  font-weight: normal;
  margin-left: .5vw;
}
#news article aside.notes {
	eft: 0;
    top: 0;
    right: 0;
    margin: 18% auto auto auto;
    width: 100%;
    height: auto;
    border: 1px solid #000;
    margin-top: 6vw;
}
#news article aside.notes h1 {
	font-size: 1.2vw;
    line-height: 1.5;
    margin: 1.5vh 1vw 0vh 1vw;
    text-align: left;
}
#news article aside.notes  h1::after {
    margin: 1vh 0 1vh auto;
    content: "";
    display: block;
    height: 2px;
    width: 100%;
    background: -webkit-gradient(#a1a1a1, #a1a1a1);
    background: -moz-linear-gradient(#a1a1a1, #a1a1a1);
    background: linear-gradient(#a1a1a1, #a1a1a1);
}
#news article aside.notes h2 {
	font-size: 1.0vw;
	line-height: 1.2;
    margin: 0vh 0vw 2vh 2vw;
}

#news article aside.notes p {
	font-size: 1.0vw;
	line-height: 1.5;
    margin: 0vh 1.5vw 2vh 1.5vw;
    text-align: left;
}

#news article b{

  font-size: 18px;
  font-size: calc(1.4rem + ((1vw - 0.64rem) * 0.7143));

	font-family:  "Sawarabi Gothic", sans-serif;
	line-height: 1.6;
	color:#040544;
    text-align: left;
}

#news article b.news-pc{
  margin: 0vh 1.5vw 4vh 1.5vw;
  display: block;
}

#news article b.news-sp{
  margin: 0vh 1.5vw 4vh 1.5vw;
  display: none;
}

#news article div.news-pc {
  margin: 0;
  display: block;
}
#news article div.news-sp{
  margin: 0vh 1.5vw 4vh 1.5vw;
  display: none;
}

#news article div.flexbox {
  display: flex;
  flex-wrap: wrap;
  padding: 0em;
  margin: 0 0 0em;
}

#news article div.flexbox > div {
    padding: 1em;
    flex: 1 0 1vw;
    margin: 0.4em 3vw 0.4em auto;
}
#news article div.flexbox .item2 {
  margin: 0.4em auto 0.4em;
}

#news article .twitter-box
{
		display: block;
position: relative;
width: 100%;
height: 600px;
margin: 1vh auto;
}

#news article .twitter-box-left,
#news article .twitter-box-right {
 position: absolute;
 height: 500px;
 width:40%;
}

#news article .twitter-box-left {
 background: orange;
  margin: 0  0 auto auto ;
  top: 0;
  left: 0;
}

#news article .twitter-box-right {
  background:  blue;
  margin: 0  auto auto 0;
  top: 0;
  right: 0;
}



@media screen and (max-width: 480px) {

#news article  b{
	font-size: 3.3vw;
	  font-family:  "Sawarabi Gothic", sans-serif;
	line-height: 1.5;
	color:#040544;
    margin: 0vh 1.5vw 2vh 1.5vw;
    text-align: left;
}

#news article aside.notes h1 {
    font-size: 14px;
    font-size: calc(1.4rem + ((1vw - 0.64rem) * 0.7143));
    margin: 2vh 2vw 2vh 2vw;
    text-align: left;
}
#news article aside.notes  h1::after {
    margin: 2vh 2vw 2vh 2vw;
    content: "";
    display: block;
    height: 2px;
    width: 95%;
    background: -webkit-gradient(#a1a1a1, #a1a1a1);
    background: -moz-linear-gradient(#a1a1a1, #a1a1a1);
    background: linear-gradient(#a1a1a1, #a1a1a1);
}

#news article aside.notes h2 {
    font-size: 13px;
    font-size: calc(1.3rem + ((1vw - 0.64rem) * 0.7143));
    margin: 1vh 4vw 2vh 4vw;
}

#news article aside.notes p {
    font-size: 12px;
    font-size: calc(1.2rem + ((1vw - 0.64rem) * 0.7143));
    line-height: 1.5;
    margin: 1vh 4vw 1vh 4vw;
}
#news article div.news-pc,
#news article b.news-pc{
 display: none;
}
#news article div.news-sp,
#news article b.news-sp{
  display: block;
}

}

@media screen and (min-width: 1041px) {

}

@media screen and (max-width: 480px) {
/*   #news {
width: 95%;
  }
  #news article {
width: 92%;
padding: 3.5vw 3.5vw 3.5vw 3.5vw;
  }
  #news article h2 {
font-size: 2.5vw;
  }
  #news article h1 {
font-size: 3.5vw;
margin-top: .7vw;
  }
  #news article p {
font-size: 2.8vw;
margin: 0 .5vw;
  } */
}

/************** ss-contents ***************/
#ss-contents div.ss {
  color: black;
  display: inline-block;
  width: 95%;
  background-color: white;
  border: 1px solid #282828;
  box-shadow: .8vw .5vw 1px rgba(166,117,255,.2);
  margin-bottom: 2vw;
  text-align: left;

 font-family: 'Noto Sans JP', sans-serif;
/*   font-size: 1.4vw; */
/*   font-weight: 100; */
}
#ss-contents div.ss article {
  padding: 2.5vw 2.5vw 2.5vw 2.5vw;
}

#ss-contents article a {
  color: rgba(166,117,255,1);
  border-bottom: .1vw solid rgba(166,117,255,1);
  font-family: 'Noto Sans JP', sans-serif;

  font-size: 18px;
  font-size: calc(1.4rem + ((1vw - 0.64rem) * 0.7143));
}

#ss-contents article h2 {
  font-size: 14px;
  font-size: calc(1.2rem + ((1vw - 0.64rem) * 0.7143));

  margin: 2vh auto ;

  font-weight: normal;
}
#ss-contents article h1 {
  font-size: 20px;
  font-size: calc(1.6rem + ((1vw - 0.64rem) * 0.7143));
  margin: 2vh auto ;

  font-weight: 400;
}
#ss-contents article h1::after {
  margin: 3vh 0 3vh auto;
  content:"";
  display:block;
  height:2px;
  width:100%;
  background:-webkit-gradient(#a1a1a1, #a1a1a1);
  background:-moz-linear-gradient(#a1a1a1, #a1a1a1);
  background:linear-gradient(#a1a1a1, #a1a1a1);
}
#ss-contents article h1 span {
  margin-left: .5vw;
}
#ss-contents article p {
  font-size: 18px;
  font-size: calc(1.4rem + ((1vw - 0.64rem) * 0.7143));

  font-weight: normal;
  margin-left: .5vw;
}
#ss-contents article aside.notes {
	eft: 0;
    top: 0;
    right: 0;
    margin: 18% auto auto auto;
    width: 100%;
    height: auto;
    border: 1px solid #000;
    margin-top: 6vw;
}
#ss-contents article aside.notes h1 {
	font-size: 1.2vw;
    line-height: 1.5;
    margin: 1.5vh 1vw 0vh 1vw;
    text-align: left;
}
#ss-contents article aside.notes  h1::after {
    margin: 1vh 0 1vh auto;
    content: "";
    display: block;
    height: 2px;
    width: 100%;
    background: -webkit-gradient(#a1a1a1, #a1a1a1);
    background: -moz-linear-gradient(#a1a1a1, #a1a1a1);
    background: linear-gradient(#a1a1a1, #a1a1a1);
}
#ss-contents article aside.notes h2 {
	font-size: 1.0vw;
	line-height: 1.2;
    margin: 0vh 0vw 2vh 2vw;
}

#ss-contents article aside.notes p {
	font-size: 1.0vw;
	line-height: 1.5;
    margin: 0vh 1.5vw 2vh 1.5vw;
    text-align: left;
}

#ss-contents article b{

  font-size: 18px;
  font-size: calc(1.4rem + ((1vw - 0.64rem) * 0.7143));

	font-family:  "Sawarabi Gothic", sans-serif;
	line-height: 1.6;
	color:#040544;
    text-align: left;
}

#ss-contents article b.news-pc{
  margin: 0vh 1.5vw 4vh 1.5vw;
  display: block;
}

#ss-contents article b.news-sp{
  margin: 0vh 1.5vw 4vh 1.5vw;
  display: none;
}

#ss-contents article div.news-pc {
  margin: 0;
  display: block;
}
#ss-contents article div.news-sp{
  margin: 0vh 1.5vw 4vh 1.5vw;
  display: none;
}

#ss-contents article div.flexbox {
  display: flex;
  flex-wrap: wrap;
  padding: 0em;
  margin: 0 0 0em;
}

#ss-contents article div.flexbox > div {
    padding: 1em;
    flex: 1 0 1vw;
    margin: 0.4em 3vw 0.4em auto;
}
#ss-contents article div.flexbox .item2 {
  margin: 0.4em auto 0.4em;
}

#ss-contents article .twitter-box
{
		display: block;
position: relative;
width: 100%;
height: 600px;
margin: 1vh auto;
}

#ss-contents article .twitter-box-left,
#ss-contents article .twitter-box-right {
 position: absolute;
 height: 500px;
 width:40%;
}

#ss-contents article .twitter-box-left {
 background: orange;
  margin: 0  0 auto auto ;
  top: 0;
  left: 0;
}

#ss-contents article .twitter-box-right {
  background:  blue;
  margin: 0  auto auto 0;
  top: 0;
  right: 0;
}
/************** character ***************/

.character-illust {
position: relative;
width: 100%;
margin: 0 auto;
padding: 3.5vw 0 5.5vw;
}
.character-illust::before {
  content:"";
  display: block;
  padding-top: 60%;
}

 .character-illust img.illust-bg {
width: 100%;
  }
.character-illust .illust-bg {
  position: absolute;
  z-index: -1;

  top: 0px;
  left: 0px;
}


#character-profile-box {
  width: 100%;
  height: 100%;

  display: flex;
  display: -ms-flexbox; /* IE10 */
  flex-wrap: wrap;
  -ms-flex-wrap: wrap; /* IE10 */

  margin: 0 0 4vh 0;
}

#character-profile-box .character-profile-inner {
  position: relative;
  width: 100%;
  height: auto;
  margin: 1vh 5vw 1vh 5vw;
  font-family: 'Noto Sans JP', sans-serif;
}

#character-profile-box .character-profile-img {
  position:absolute;
  z-index: 99;
  width: 42%;
  margin: 0 1vw auto auto;
  top: -10vh;
  right: 0;
  z-index:-1;
}

#character-profile-box .character-profile-img img{

}

#character-profile-box .character-profile-text {
  position: relative;
  z-index: 99;
  width: 50%;
  width: calc(50% + 0.25em * 2);

   /* 上 右 下 左 */
  margin: 0 auto auto 1vw;
  text-align: left;

  bottom: -20%;
  bottom: calc(50px + (50 - 100) * (50vw - 100px) / (200 - 100));
/*   bottom: -15vh; */
  right: -2.5vw;

}

#character-profile-box .character-profile-text h2{
  margin-bottom: 2vh;
/*   font-weight: 400; */

  font-size: 27px;
  font-size: calc(2.4rem + ((1vw - 0.64rem) * 0.7143));
  line-height: 1.3;
}

#character-profile-box .character-profile-text  p{
/* white-space:nowrap; */
  border-top: 1px solid #f5f5f5;

  margin-top: 2vh;
  padding: 2vh 0 0 0;
  font-weight: 100;

  font-size: 1.4rem;
  font-size: calc(1.3rem + ((1vw - 0.64rem) * 0.7143));
  line-height: 2;
}



.sp-profile .character-profile-text-sp {
  position: relative;
  z-index: 99;
  width: 100%;
  text-align: left;

}
.sp-profile .character-profile-text-sp h2{
  margin-bottom: 2vh;
/*   font-weight: 400; */
  color:#FFFFFF;
  font-size: 27px;
  font-size: calc(2.4rem + ((1vw - 0.64rem) * 0.7143));
  line-height: 1.3;
}

.sp-profile .character-profile-text-sp  p{
/* white-space:nowrap; */
  border-top: 1px solid #f5f5f5;

  margin-top: 2vh;
  padding: 2vh 0 0 0;
/*   font-weight: 300; */
  color:#FFFFFF;
  font-size: 1.6rem;
  font-size: calc(1.4rem + ((1vw - 0.64rem) * 0.7143));
  line-height: 2;
}


.chara-info-box {
  position: relative;

  width: 100%;
  height: 100%;
  padding: 75% 0 0;
}

.box-inner-title{
  left: 0;
  top: 0;
  right: 0;
  margin: auto;

  width: 50%;
  height: auto;
  text-align: center;
  border: 1px solid #ffffff;
  background: rgba(0,0,0,.65);
}

.box-inner-title h1{
  font-weight: 400;
  margin: 1vh auto;
/*   font-size: 2.3125em; 37px */

  font-weight: bold;
  color:#E3DBFF;
  font-size: 37px;
  font-size: calc(3.2rem + ((1vw - 0.64rem) * 2.1429));
  line-height: 1.3;
}

.special-inner-center .box-inner-title h1{
/* font-weight: bold; */
}

.box-inner-title h2{
  margin: 1vh auto;
}
.box-inner-title h3{
/*   font-weight: 300; */
  margin: 1vh auto;
/*
font-size: 1.5em; 24px
   */
  font-size: 24px;
  font-size: calc(2.2rem + ((1vw - 0.64rem) * 0.7143));
  line-height: 1.3;
}
.box-inner-title p{
/*   font-weight: 100; */
/*   font-size: 0.875em; 14px */
  margin: 1vh auto 2vh ;

font-size: 14px;
  font-size: calc(1.6rem + ((1vw - 0.64rem) * 0.7143));
  line-height: 1.3;
}


.box-inner-chara-villan-sp,
.box-inner-chara-sp {
	display: none;
}

.box-inner-chara-pc {
	display: block;
position: relative;
width: 100%;
height: 100%;
padding: 45% 0 0;

margin: 5vh auto 2vh ;
}

.box-inner-chara-pc .separator-inner {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}

.box-inner-chara-pc .separator-inner-question {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
.box-inner-chara-pc .separator-inner .flex{
/*   padding: 2.5% 0; */
  display: flex;
  justify-content: space-evenly;
}
.box-inner-chara-pc .separator-inner-question .flex{
	/*   padding: 2.5% 0; */
  display: flex;
  justify-content: center;
}
.box-inner-chara-pc .separator-inner .flex > *,
.box-inner-chara-pc .separator-inner-question .flex > *{
  width: 15%;
  text-align: center;
}
.box-inner-chara-pc .separator-inner .flex,
.box-inner-chara-pc .separator-inner .flex > *,
.box-inner-chara-pc .separator-inner-question .flex,
.box-inner-chara-pc .separator-inner-question .flex > *{

}

.box-inner-chara-pc .separator-inner img,
.box-inner-chara-pc .separator-inner-question img {
  position: relative;
  z-index: 99;
}

.box-inner-chara-pc .separator-inner .separator-villan {
	position: absolute;

top: 10vh;
bottom: 0;
right: 0;
left: 0;
height: 40%;
background-image: linear-gradient(#620474, #620474);
transform-origin: top left;
overflow: visible;
margin-left: calc( ( 100% - 98vw ) / 2 );
margin-right: calc( ( 100% - 98vw ) / 2 );
}

.box-inner-chara-pc .separator-inner-question .separator-question {
	position: absolute;

top: 10vh;
bottom: 0;
right: 0;
left: 0;
height: 40%;
background-image: linear-gradient(#001492, #001492);
transform-origin: top left;
overflow: visible;
margin-left: calc( ( 100% - 98vw ) / 2 );
margin-right: calc( ( 100% - 98vw ) / 2 );
}


/* スマホ */
@media screen and (max-width: 480px) {

.box-inner-title{
  width: 80%;
}
.box-inner-title h1{
/*   font-size: 1.8em; */
}
.box-inner-title h2{
}
.box-inner-title h3{
/*   font-size: 1em; */
}
.box-inner-title p{
/*   font-weight: 300; */
/*   font-size: 0.9em; */

font-size: 18px;
  font-size: calc(1.7rem + ((1vw - 0.64rem) * 0.7143));
  line-height: 1.5;
}


.box-inner-chara-pc {
	display: none;
}

.box-inner-chara-villan-sp,
.box-inner-chara-sp {
	display: block;
}

.box-inner-chara-villan-sp .separator-inner .flex-top,
.box-inner-chara-villan-sp .separator-inner .flex-bottom{
	/*   padding: 2.5% 0; */
  display: flex;
  justify-content: center;
}
.box-inner-chara-villan-sp .separator-inner .flex-top > *,
.box-inner-chara-villan-sp .separator-inner .flex-bottom  > *{
  width: 15%;
  text-align: center;
  flex-basis: 80px;
}

.box-inner-chara-villan-sp .separator-inner .flex-bottom
.box-inner-chara-villan-sp .separator-inner .flex-bottom > * {

}


.box-inner-chara-sp {
position: relative;
width: 100%;
height: 100%;
padding: 60% 0 0;

margin: 5vh auto 10vh ;
}

.box-inner-chara-villan-sp {
position: relative;
width: 100%;
height: 100%;
padding: 125% 0 0;

margin: 5vh auto 10vh ;
}
.box-inner-chara-sp .separator-inner ,
.box-inner-chara-villan-sp .separator-inner {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}

.box-inner-chara-sp .separator-inner-question {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
.box-inner-chara-sp .separator-inner .flex,
.box-inner-chara-villan-sp .separator-inner .flex{
/*   padding: 2.5% 0; */
  display: flex;
  flex-direction: row;
  justify-content: space-evenly;
}
.box-inner-chara-sp .separator-inner-question .flex{
	/*   padding: 2.5% 0; */
  display: flex;
  justify-content: center;
}
.box-inner-chara-villan-sp .separator-inner .flex > *,
.box-inner-chara-sp .separator-inner-question .flex > *{
  width: 15%;
  text-align: center;
  flex-basis: 80px;
}

.box-inner-chara-villan-sp .separator-inner .flex,
.box-inner-chara-villan-sp .separator-inner .flex > *,
.box-inner-chara-sp .separator-inner-question .flex,
.box-inner-chara-sp .separator-inner-question .flex > *{

}
.box-inner-chara-villan-sp .separator-inner img,
.box-inner-chara-sp .separator-inner-question img {
  position: relative;
  z-index: 99;
}

.box-inner-chara-villan-sp .separator-inner .separator-villan {
	position: absolute;

top: 10vh;
bottom: 0;
right: 0;
left: 0;
height: 55%;
background-image: linear-gradient(#620474, #620474);
transform-origin: top left;
overflow: visible;
margin-left: calc( ( 100% - 98vw ) / 2 );
margin-right: calc( ( 100% - 98vw ) / 2 );
}

.box-inner-chara-sp .separator-inner-question .separator-question {
	position: absolute;

top: 5vh;
bottom: 0;
right: 0;
left: 0;
height: 40%;
background-image: linear-gradient(#001492, #001492);
transform-origin: top left;
overflow: visible;
margin-left: calc( ( 100% - 98vw ) / 2 );
margin-right: calc( ( 100% - 98vw ) / 2 );
}
}

/* スマホ -------- */
/* 1020 */

#top-character,
#detail-character {
  width: 50%;
  min-width: 700px;
  margin: 0 auto;
  padding: 3.5vw 0 5.5vw;
}
#detail-character {
  width: 81%;
}
#character {
  width: 100%;
/*   min-width: 700px; */
  margin: 0 auto;
  padding: 3.5vw 0 5.5vw;
}
div.top-chara-back {
  display: block;
  position: relative;
  background-image:url(../img/top/top_story_illust2.png);

  background-size: 90%;
  background-repeat: no-repeat;
  background-position: top left;

   margin-top: 2.5vh;
   margin-bottom: 2.5vh;
}

div.top-chara-back img.chara-right {
 text-align:  right;
 margin: -13.0vw 0px -20.0vw 0px;
 z-index: 99;
}

div.top-chara-back img.chara-center {
 text-align: center;
 margin: -13.0vw 0px -20.0vw 0px;
 z-index: 99;
}

.button-wrap-charaSub {
  position: relative;
  top: -15vh;


  width: 80%;
  height: auto;

  margin: 1.5vw auto;

}

#chara-separator {
  position: relative;

  width: 100%;
  height: 100%;
  padding: 75% 0 0;
}

#chara-separator .separator-inner {
  position: absolute;
  top: -8vh;
  left: 0;
  width: 100%;
  height: 100%;
}


#chara-separator .separator {
  position: relative;
  top: -25vh;
  bottom: 0;
  right: 0;
  left: 0;
  height: 20%;
  background-image: linear-gradient(#620474, #620474);
  transform: skewY(-10deg);
  transform-origin: top left;

  overflow: visible;

  margin-left: calc( ( 100% - 98vw ) / 2 );
  margin-right: calc( ( 100% - 98vw ) / 2 );
}


#chara-separator img{
  text-align: center;

  position: relative;
  width:auto;
  height:auto;
  max-width:100%;
  max-height:100%;
  z-index: 10;
/*   transform: skewY(10deg); */
}

#top-character li,
#character li,
#detail-character li {
  display: inline-block;
}

.top-chara-list {
  padding: 3vw 0 2.5vw;
}
.top-chara-list li {
  padding: 0 1vw;
}
.chara-list {
  padding: 2vw 0 5.5vw;
}
.chara-list li:nth-child(2){
  padding: 0 1.4vw 0 1vw;
}
.chara-list li:nth-child(3) {
  padding: 0 1vw 0 1.4vw;
}
.chara-square-list {
  padding: 6vw 0 4vw;
}

.chara-square-list li {
  width: 10.938%;
}

@media screen and (min-width: 1041px) {
  #top-character,
  #character,
  #detail-character {
padding: 36.4px 0 57.2px;
  }
  .top-chara-list {
padding: 36.4px 0 25px;
  }
  .chara-square-list {
padding: 62.4px 0 41.6px;;
  }
  .chara-list {
padding: 20.8px 0 57.2px;
  }
  .chara-list li:nth-child(2),
  .chara-list li:nth-child(3) {
padding: 0 20.8px 0 20.8px;
  }
}

/*
 min-width 横幅1024px以下のデバイス
*/
@media screen and (max-width: 768px) {
.button-wrap-charaSub {
  position: relative;
  top: -10vh;
  margin-top: 1.5vw;
  margin-bottom: 1.5vw;
}

#chara-separator .separator-inner {
  position: absolute;
  top: -8vh;
  left: 0;
  width: 100%;
  height: 100%;
}

}

/*

100% = 1em = 1rem = 16px = 12pt

画面の横幅が320pxの時に、14pxのフォントサイズで表示したいときは、
14px÷320px=0.04375(4.375%)なので「4.375vw」と記述。

screen プリンターとスピーチシンセサイザ以外の全てのデバイスで有効となるスタイル
max-width 横幅480px以下のデバイス
*/
@media screen and (max-width: 480px) {
  #top-character,
  #character,
  #detail-character {
width: 100%;
min-width: unset;
  }
  #detail-character {
margin-top: 6vw;
  }
  #top-character li,
  #character li,
  #detail-character li {
width: 21%;
  }

  .chara-list {
padding: 3.5vw 0 7vw;
  }
  .chara-list li:nth-child(2) {
padding: 0 2vw 0 1.6vw;
  }
  .chara-list li:nth-child(3) {
padding: 0 1.6vw 0 2vw;
  }
/*
  .character-illust .sp {
height: 130vw;
overflow: hidden;
  }
 */
  #detail-character li {
padding: 0vw 1vw 2vw;
  }
  .chara-square-list img {
width: 100%;
  }

  #chara-separator  {
top: -5vh;
  }

  .button-wrap-charaSub {
	top: -12vh;
}

#chara-separator .separator-inner {
top: -1vh;
}

  #chara-separator .separator {
top: -15vh;
height: 13vh;
  }
}

/************** character個別 ***************/
div.profile-wrap {
  position: relative;
  width: 100%;
  max-width: 1040px;
  height: 100%;
  max-height: 510px;
  margin: 0 auto;
}
.chara-stand {
  position: absolute;
/*
   height: 46.153846153vw;
  width: 26.538461538%;
  */
  top: 3vw;
  right: 9vw;
  overflow: hidden;
}
.chara-stand img {
  width: auto;
  position: absolute;
  right: 0;
  bottom: 0;
}
.chara-big-stand {
  position: absolute;
  height: 491.34615384vw;
  width: 61.153846153%;
  top: 0;
  left: 57.5vw;
  overflow: hidden;
}
.chara-big-stand img {
  right: 0;
  position: absolute;
  width: 100%;
  max-width: 636px;
}
.voice-button {
  position: absolute;
  width: 9.615384615%;
  top: 4vw;
  right: 8vw;
  z-index: 9999;
}
.chara-arrow {
  position: absolute;
  top: 30%;
  width: 98%;
  font-size: 6vw;
  z-index: 5;

  margin: auto;
  left: 0;
  right: 0;
}
.chara-arrow a img {
/*   width: 65%; */
  width: 5vw;
  max-width: 63px;
  min-width: 30px;
}


.left-arrow-animation {
  animation: left-horizontal 3.5s linear infinite normal;
}
.right-arrow-animation {
  animation: right-horizontal 3.5s linear infinite normal;
}
.profile {
  color:black;
  position: relative;
  z-index: 1;
}
.profile table {
  display: block;
  padding: 7vw 0 0 36vw;
  font-size: 1.4vw;
}
.profile table th {
  width: 12%;
  text-align: left;
  font-weight: normal;
  vertical-align: middle;
  padding-right: 1vw;
}
.profile table td {
  text-align: left;
  vertical-align: middle;
}
td.name {
  font-size: 3.7vw;
  line-height: 2.8vw;
}
td.ruby {
  font-size: 1.7vw;
}
td.cv {
  font-size: 2.7vw;
  padding: 1.5vw 0 3vw;
}
td.profile-text {
  line-height: 2.4vw;
  padding-bottom: 2.3vw;
}

/************** character個別 profile ***************/
.sp-profile {
  display: none;
  background: #000000;
  padding: 7vw 6vw;
}
.sp-profile p {
  font-size: 3.85vw;
  text-align: left;
  color: black;
  margin-bottom: 4vw;
}
.sp-profile table {
  font-size: 3.5vw;
  width: 100%;
  border-collapse: collapse;
  margin-bottom: 5vw;
}
.sp-profile table tr {
  border-top: none;
}
.sp-profile table tr + tr {
  border-top: .3vw solid #f5f5f5;
}
.sp-profile table th {
  width: 30%;
}
.sp-profile table th,
.sp-profile table td {
  padding: 1vw 0 .5vw;
  color: black;
  font-weight: normal;
  text-align: left;
}

/************** character個別-PROFLILEラベル ***************/
.label-profile {
  width: 100%;
  margin: 1vw 0 4vw;
}
.profile-outer,
.profile-inner {
  margin: 0 auto;
  width: 53vw;
  height: 5vw;
  display: block;
  position: relative;
  background: #414141;
  transition: all 0.2s linear;
}

.profile-outer span {
  width: 100%;
  height: 100%;
  font-size: 3.6vw;
  color: #fff;
  text-align: center;
  display: flex;
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: center;
}

.profile-outer:before,
.profile-outer:after {
  content: '';
  top: 0;
  left: 0;
  width: 5.3%;
  height: 100%;
  position: absolute;
  background: #414141;
  transition: all 0.2s linear;
  z-index: 0;
}
.profile-outer:before {
transform: rotate(60deg);
}
.profile-outer:after {
transform: rotate(-60deg);
}

.profile-inner:before,
.profile-inner:after {
  content: '';
  top: 0;
  right: 0;
  width: 5.3%;
  height: 100%;
  position: absolute;
  background: #414141;
  transition: all 0.2s linear;
  z-index: 0;
}
.profile-inner:before {
transform: rotate(60deg);
}
.profile-inner:after {
transform: rotate(-60deg);
}

@media screen and (min-width: 1041px) {
/*
   .character-illust {
height: 646.88px;
  }

  .chara-stand {
height: 480px;
width: 276px;
top: 31.2px;
left: 93.6px;
  }
  .chara-big-stand {
height: 511px;
width: 636px;
left: 598px;
  }
*/
  .profile table {
padding: 72.8px 0 0 374.4px;
font-size: 14.56px;
  }
  .profile table th {
padding-right: 10.4px;
  }
  td.name {
font-size: 38.48px;
line-height: 29.12px;
  }
  td.ruby {
font-size: 17.68px;
  }
  td.cv {
font-size: 28.08px;
padding: 15.6px 0 31.2px;
  }
  td.profile-text {
line-height: 24.96px;
padding-bottom: 23.92px;
  }

  .chara-arrow {
top: 208px;
font-size: 62.4px;
  }

  .voice-button {
width: 99.999999996px;
top: 41.6px;
right: 83.2px;
  }
}
@media screen and (max-width: 480px) {

  .chara-stand {
position: absolute;
height: 100%;
width: 100%;
top: unset;
bottom: 0;
left: 0;
overflow: visible;
z-index: 1;
  }
  .chara-stand img {
left: 0;
top: -5vh;
position: absolute;
width: 100%;
max-width: unset;

z-index: 99;
  }
  .chara-big-stand {
position: absolute;
height: 100%;
width: 65.353260869%;
top: unset;
bottom: 0;
right: 0;
left: unset;
overflow: hidden;
  }
  .chara-big-stand img {
right: 0;
bottom: 0;
position: absolute;
width: 100%;
max-width: unset;
  }

  .chara-arrow {
position: absolute;
top: 20%;
left: 1vw;
width: 98%;
margin: 0;
font-size: 8vw;
z-index: 5;
  }

  .profile {
position: relative;
width: 100%;
top: 16vw;
position: absolute;
  }
  .profile table {
font-size: 4vw;
padding: 0;
width: 56vw;
right: 0;
position: absolute;
  }
  td.name {
font-size: 8.2vw;
line-height: 7.5vw;
  }
  td.ruby {
font-size: 3.5vw;
line-height: 4vw;
  }
  td.cv {
font-size: 6vw;
padding: 3vw 0 0;
  }
  td.profile-text {
padding-bottom: 1.5vw;
  }
  .voice-button {
position: absolute;
width: 13%;
top: 43vw;
right: 5vw;
  }

  .sp-profile {
display: block;
  }
}

/************** 見出し ***************/
div.chara-balloon-wrap,
div.chara-balloon-wrap-fixed {
  width: 100%;
  overflow: hidden;
  height: 14vw;
  margin-top: -1.8vw;
}
div.chara-balloon {
  width: 100%;
  background-color: #2bc3ff;
  margin: 1vw auto;
  text-align: center;
  transform: rotate(.7deg);
}
div.chara-balloon-inner {
  background-color: #e4007f;
  transform: rotate(-1.4deg);
}
div.chara-balloon-contents {
  font-size: 2vw;
  background-color: black;
  transform: rotate(.7deg);
  padding: .8vw 0;
  max-height: 124.63px;
}

.chara-balloon-contents ul li {
  width: 47%;
  text-align: left;
  display: inline-block;
  vertical-align: middle;
}
.chara-balloon-contents ul li + li {
  width: 9.711538461%;
  margin-left: 1.6vw;
}
img.chara-icon {
  width: auto;
}
div.balloon {
  position: relative;
  color: black;
  background: white;
  font-size: 1.4vw;
  padding: 1.5vw 3.5vw;
  border-radius: 13px;
}
.balloon:before {
  content: "";
  position: absolute;
  top: 50%;
  left: 100%;
  margin-top: -.961538461vw;
  border: .961538461vw solid transparent;
  border-left: 1.442307692vw solid #fff;
}

@media screen and (min-width: 1041px) {
  div.chara-balloon {
    margin: 10.408px auto;
  }
  div.chara-balloon-wrap {
    height: 156px;
    position: absolute;
    bottom: -11px;
  }
  div.chara-balloon-contents {
    font-size: 20.8px;
    padding: 8.32px 0;
  }
  div.balloon {
    font-size: 14.56px;
    padding: 15.6px 36.4px;
    border-radius: 13px;
  }
  .chara-balloon-contents ul li {
    width: 488.8px;
  }
  .chara-balloon-contents ul li + li {
    width: 101px;
    margin-left: 16.64px;
  }
  .balloon:before {
  	margin-top: -10px;
  	border: 10px solid transparent;
  	border-left: 15px solid #fff;
  }
}

@media screen and (max-width: 480px) {
  div.chara-balloon-wrap,
  div.chara-balloon-wrap-fixed {
    height: 27.173913043%;
    margin-top: -5%;
  }
  div.chara-balloon {
    margin: 10.408px auto;
  }
  div.chara-balloon-contents {
    padding: 3vw 0;
    max-height: unset;
  }
  .chara-balloon-contents ul li {
    width: 69%;
  }
  .chara-balloon-contents ul li + li {
    width: 20%;
    margin-left: 4vw;
  }
  div.balloon {
    font-size: 3.3vw;
    padding: 2vw 8vw 2vw 5vw;
  }
  .balloon:before {
    margin-top: -2.445652173vw;
    border: 2.038043478vw solid transparent;
    border-left: 3.532608695vw solid #fff;
  }
  img.chara-icon {
    width: 90%;
  }
}


/************** system-contents ***************/
#system-contents {
/*   background:white; */
  text-align: left;
  color: #FFFFFF;
  font-family: 'Noto Sans JP', sans-serif;
/*   font-size: 1.4vw; */
/*   font-weight: 100; */
}

#system-contents small {
  font-size: 10px;
  font-size: calc(0.7rem + ((1vw - 0.64rem) * 0.7143));
  line-height: 0.5;

  color: #B3B3B3;
}
#system-contents .ruby_villan{
  font-size: 12px;
  font-size: calc(1.0rem + ((1vw - 0.64rem) * 0.7143));
  line-height: 0.5;
  color: #FFFFFF;
  margin: 0 0 auto 0.3vw;
  vertical-align: text-bottom;
}

#system-contents h1 {
  font-size: 37px;
  font-size: calc(2.2rem + ((1vw - 0.64rem) * 2.1429));
  line-height: 1.2;
}
#system-contents h2 {
  font-size: 37px;
  font-size: calc(2.2rem + ((1vw - 0.64rem) * 2.1429));
  line-height: 1.2;
}

#system-contents img.line {
  width: 100%;
}

#system-contents img.pc_chara{
  display: block;
}
#system-contents img.sp_chara{
  display: none;
}
@media screen and (max-width: 480px) {
#system-contents img.pc_chara{
  display: none;
}
#system-contents img.sp_chara{
  display: block;
}
}

#system-contents img.chara01,
#system-contents img.chara02,
#system-contents img.chara03 {
  position: absolute;
  width: 100%;
  bottom: 0;
  right: 0;
}

#system-contents img.blackline01,
#system-contents img.blackline02,
#system-contents img.blackline03 {
  position: absolute;
  width: 100%;
  height: calc(((518/488) * 98vw) / 10);
  bottom: 0.5vh;
  right: 0;
}

#system-contents img.blackline02 {
  bottom: 0vh;
}

#system-contents img.blackline03 {
  bottom: 0vh;
}



#system-contents .contents-title {

}

#system-contents .title-back {
  position: relative;
  width: 100%;
  height: calc(((518/488) * 98vw) / 3);
  top: 0;
  left: 0;
}

.title-back .title-back-inner {
  position: relative;
  width: 100%;
  height: calc(((518/488) * 98vw) / 3);
}

.title-back-inner .inner-line {
  position: absolute;
  width: 100%;
  height: calc(((518/488) * 98vw) / 3);
  margin: auto;
  bottom: 0;
  right: 0;
}
.title-back-inner .inner-chara-blackline{
  position: absolute;
  height: auto;
  width: calc(((488/518) * 98vw) / 3);
  height: calc(((518/488) * 98vw) / 3);
  max-width:488px;
  bottom: 20px;
  right: 0;
}

.title-back-inner .inner-chara-blackline-big {
  position: absolute;
  height: auto;
  width: calc(((488/518) * 98vw) / 2);
  height: calc(((518/488) * 98vw) / 2);
  max-width:488px;
  bottom: 0;
  right: 0;
}

#system-contents .inner-box {
  position: absolute;
  width: 100%;
  top: 0;
  right: 0;
  height: calc(((518/488) * 100vw) / 3);
}

#system-contents .left-box {
  position: absolute;
  width: 50%;
  height: calc(((518/488) * 100vw) / 3);

  bottom:0;
  left:0;
  margin: 0 auto;
}
#system-contents .left-box .left-box-inner {
  position: relative;
  width: 100%;
  height: calc(((518/488) * 100vw) / 3);
}

#system-contents .left-box-inner .left-box-top-chara {
  position: absolute;
  width: 50%;
  height:auto;
  top:0;
  bottom:0;
  left:0;
  right:0;
  margin: 0 0 auto 10%;
}
#system-contents .inner-box .left-box-top {
  position: absolute;
  width: 100%;
  top:0;
  bottom:0;
  left:0;
  right:0;
  margin: 11% auto auto auto;
/*   margin: calc(((518/488) * 100vw) / 8) 1vw 0 auto; */
  text-align: center;
}
#system-contents .left-box-inner .left-box-bottom {
  position: absolute;
  width: 160%;
  bottom: 1vh;
  left: 0;
  margin: 0 0 auto 20%;
}

#system-contents .right-box {
  position: absolute;
  width: 50%;
  top:0;
  right:0;
  margin: 0 auto;
}

#system-contents .right-box .right-box-inner {
  position: relative;
  width: 100%;
  height: calc(((518/488) * 100vw) / 3);
  max-height:518px;
}


#system-contents #system {
  width: 80%;
  margin: 0 auto 20vh auto;
  padding: 0 0 10vh;
}

#system-contents #system  li {
  display: inline-block;
  width: 31.5%;
}
#system-contents #system .system-info{
  margin: 3vh auto;

  font-size: 24px;
  font-size: calc(2.0rem + ((1vw - 0.64rem) * 0.7143));
  line-height: 3;
}

@media screen and (max-width: 480px) {

#system-contents .inner-box .left-box-top {
margin: 10% auto auto auto;
}

  #system-contents small{
font-size: 10px;
font-size: calc(1.0rem + ((1vw - 0.64rem) * 0.7143));
line-height: 1.5;
line-height: calc(1.5rem + ((1vw - 0.64rem) * 0.7143));
  }
  #system-contents h1 {
line-height: 1.5;
line-height: calc(1.5rem + ((1vw - 0.64rem) * 0.7143));
  }
  #system-contents h2 {
line-height: 1.5;
line-height: calc(1.5rem + ((1vw - 0.64rem) * 0.7143));
  }

  #system-contents .ruby_villan{
/*     color: #FFB3B3; */

   font-size: 1.0px;
  font-size: calc(1.0rem + ((1vw - 0.64rem) * 0.7143));
   line-height: 1.5;
  line-height: calc(1.5rem + ((1vw - 0.64rem) * 0.7143));
  }

  #system-contents .title-back {
height: calc(((518/488) * 100vw) / 2);
  }

  .title-back .title-back-inner {
height: calc(((518/488) * 100vw) / 2);
  }

  .title-back-inner .inner-line {
height: calc(((518/488) * 100vw) / 2);
  }

  .title-back-inner .inner-chara-blackline {
width: calc(((488/518) * 100vw) / 2);
height: calc(((518/488) * 100vw) / 2);
  }

  #system-contents img.blackline01 {
   height: calc(((518/488) * 100vw) / 4);
  }

  #system-contents img.blackline03 {
  }


  #system-contents .inner-box {
height: calc(((518/488) * 100vw) / 2);
  }

  #system-contents .left-box {
height: calc(((518/488) * 100vw) / 2);
  }
  #system-contents .left-box .left-box-inner {
height: calc(((518/488) * 100vw) / 2);
  }

  #system-contents .left-box-inner .left-box-top-chara {
margin: calc(((518/488) * 100vw) / 10) 0 auto 10%;
  }

  #system-contents .left-box-inner .left-box-top {
margin: calc(((518/488) * 100vw) / 10) 1vw 0 auto;
  }
  #system-contents .right-box .right-box-inner {
height: calc(((518/488) * 100vw) / 3);
  }

  #system-contents #system {
margin: 0 auto 2vh auto;
  }

  #system-contents #system .system-info{
margin: 2vh auto;

font-size: 14px;
font-size: calc(1.8rem + ((1vw - 0.64rem) * 0.7143));
line-height: 1.6;
  }
}
/************** system ***************/
#system {
  width: 80%;
  margin: 0 auto 5vh auto;
  padding: 4.5vw 0 8vw;
}
#system article {
  color: black;
}
.system-list {
  padding: 4vw 0 0;
}
#system li {
  display: inline-block;
  width: 40%;
}
#system li:nth-child(2) {
  padding: 0 1.2vw;
}
#system aside {
  text-align: center;
  color: white;
  padding: 3vh 0 2vh;

  font-family: 'Noto Sans JP', sans-serif;

  font-size: 16px;
  font-size: calc(1.2rem + ((1vw - 0.64rem) * 0.7143));
  line-height: 1.5;
}

@media screen and (max-width: 480px) {
  #system {
    width: 90%;
    margin: 0 auto 5vh auto;
    padding: 4.5vw 0 8vw;
  }
  #system li {
    display: inline-block;
    width: 45%;
  }
  #system aside {
    font-size: 14px;
    font-size: calc(1.4rem + ((1vw - 0.64rem) * 0.7143));
    line-height: 1.5;
  }
}


.popupimg {
  pointer-events: none;
}


#system-head {
  display: none;
}

img.system-bg {
  position: fixed;
  top: 0;
  left: 0;
  z-index: -1;
  width: 100%;
  /* max-height: 483.16px; */
}

img.system-sp-bg {
  display: none;
  position: fixed;
  top: 0;
  left: 0;
  z-index: -1;
  width: 100%;
}

div.system-contents {
  max-width: 1040px;
  margin: 0 auto;
  position: relative;
  overflow: hidden;
}

div.system-img {
  max-width: 1040px;
}
div.system-img img {
  position: absolute;
}
div.system-caption {
  margin-top: -1vw;
}

/* 1セクション目 */
div.section-1 {
height: 68vw;
max-height: 707.19px;
}
div.pc-a1 img {
  left: 1.5vw;
  max-width: 412px;
  bottom: -40px;
  width: 39.615384615%;

  transition: 1s;
  transition-delay: 0s;
}
div.pc-a2 img {
  right: 18.5vw;
  top: 1.6vw;
  max-width: 291px;
  width: 27.98076923%;

  transition: 0s;
  transition-delay: .5s;
}
div.pc-a3 img {
  right: 18.5vw;
  top: 14vw;
  max-width: 291px;
  width: 27.98076923%;

  transition: 0s;
  transition-delay: 1.5s;
}
div.pc-a4 img {
  right: 18.5vw;
  top: 26.4vw;
  max-width: 291px;
  width: 27.98076923%;

  transition: 0s;
  transition-delay: 2.5s;
}
div.pc-a5 img {
  left: 18vw;
  top: 3vw;
  max-width: 324px;
  width: 31.153846153%;

  transition: 1s;
  transition-delay: 0s;
}
div.sp-a1 img {
  display: none;

  transition: 1s;
  transition-delay: 0s;
}

div.system-img-1 {
  transition: 1s;
  transition-delay: 0s;
}
div.system-text-1 {
  transition: 1s;
  transition-delay: 0s;
}


/* 2セクション目 */
div.section-2 {
  height: 86vw;
  max-height: 894.39px;
  margin-bottom: 3.5vw;
}
div.pc-b1 img {
  left: 6vw;
  max-width: 390px;
  top: 8.5vw;
  width: 37.5%;

  transition: 1s;
  transition-delay: 0s;
}
div.pc-b2 img {
  right: 10.5vw;
  bottom: 1vw;
  max-width: 441px;
  width: 42.403846153%;

  transition: 1s;
  transition-delay: 0s;
}
div.pc-b3 img {
  left: 21vw;
  top: 3vw;
  max-width: 686px;
  width: 65.961538461%;

  transition: 1s;
  transition-delay: 0s;
}
div.sp-b1 img {
  display: none;

  transition: 1s;
  transition-delay: 0s;
}
div.system-text-2 {
  color: black;
  background-color: rgba(255, 255, 255, 0.5);
  width: 36.673076923%;
  height: 15.23076923vw;
  bottom: 0vw;
  padding: 2vw;
  left: 17.5vw;
  position: absolute;
  font-size: 1.78vw;
  text-align: left;
  line-height: 3vw;

  transition: 1s;
  transition-delay: 0s;
}

/* 3セクション目 */
div.section-3 {
  height: 64vw;
  max-height: 665.59px;
}
div.pc-c1 img {
  right: 27vw;
  max-width: 287px;
  top: 12.5vw;
  width: 27.596153846%;

  transition: 1s;
  transition-delay: 0s;
}
div.pc-c2 img {
  left: 3.5vw;
  top: 2vw;
  max-width: 489px;
  width: 47.019230769%;

  transition: 1s;
  transition-delay: 0s;
}
div.pc-c3 img {
  right: 9.5vw;
  top: 5vw;
  max-width: 417px;
  width: 40.096153846%;

  transition: 1s;
  transition-delay: 0s;
}
div.sp-c1 img {
  display: none;

  transition: 1s;
  transition-delay: 0s;
}
div.system-text-3 {
  letter-spacing: -1px;
  color: black;
  background-color: rgba(255, 255, 255, 0.5);
  width: 31.192307692%;
  height: 11.5vw;
  top: 45vw;
  padding: 2vw;
  right: 11.5vw;
  position: absolute;
  font-size: 1.78vw;
  text-align: left;
  line-height: 3vw;

  transition: 1s;
  transition-delay: 0s;
}


/* 4セクション目 */
div.section-4 {
  height: 89vw;
  max-height: 925.59px;
}
div.pc-d1 img {
  right: 4vw;
  top: 2.5vw;
  max-width: 217px;
  width: 20.865384615%;

  transition: 1s;
  transition-delay: 0s;
}
div.pc-d2 img {
  left: 6.4vw;
  top: 37vw;
  max-width: 223px;
  width: 21.442307692%;

  transition: 1s;
  transition-delay: 0s;
}
div.pc-d3 img {
  right: 3.5vw;
  top: 2vw;
  max-width: 913px;
  width: 87.788461538%;

  transition: 1s;
  transition-delay: 0s;
}
div.sp-d1 img {
  display: none;

  transition: 1s;
  transition-delay: 0s;
}
div.system-text-4 {
  letter-spacing: -1px;
  color: black;
  background-color: rgba(255, 255, 255, 0.5);
  width: 38%;
  height: 12.161538461vw;
  bottom: 4vw;
  padding: 1.8vw;
  left: 9.5vw;
  position: absolute;
  font-size: 1.78vw;
  text-align: left;
  line-height: 3vw;

  transition: 1s;
  transition-delay: 0s;
}


/* 5セクション目 */
div.section-5 {
  height: 73vw;
  max-height: 759.19px;
  margin-bottom: 4vw;
}
div.pc-e1 img {
  right: 5.4vw;
  bottom: 0vw;
  max-width: 211px;
  width: 20.288461538%;

  transition: 1s;
  transition-delay: 0s;
}
div.pc-e2 img {
  left: 23.5vw;
  top: 1vw;
  max-width: 602px;
  width: 57.884615384%;

  transition: 1s;
  transition-delay: 0s;
}
div.pc-e3 img {
  right: -0.5vw;
  top: 14vw;
  max-width: 202px;
  width: 19.423076923%;

  transition: 1s;
  transition-delay: 0s;
}
div.pc-e4 img {
  left: 3.3vw;
  top: 17.8vw;
  max-width: 285px;
  width: 27.403846153%;

  transition: 1s;
  transition-delay: 0s;
}
div.sp-e1 img {
  display: none;

  transition: 1s;
  transition-delay: 0s;
}
div.system-text-5 {
  letter-spacing: -1px;
  color: black;
  background-color: rgba(255, 255, 255, 0.5);
  width: 34.188461538%;
  height: 15.63076923vw;
  bottom: 0vw;
  padding: 1.8vw;
  left: 11.5vw;
  position: absolute;
  font-size: 1.78vw;
  text-align: left;
  line-height: 3vw;

	transition: 1s;
  transition-delay: 0s;
}


@media screen and (min-width: 1041px) {
/*   #system {
padding: 46.8px 0 57.2px;
  }
  .system-list {
padding: 41.6px 0 0;
  }
  #system aside {
padding: 0 0 41.6px;
  }
 */

  /* 1セクション目 */
  div.pc-a1 img {
left: 15.6px;
max-width: 412px;
bottom: -40px;
  }
  div.pc-a2 img {
right: 192.4px;
top: 16.64px;
  }
  div.pc-a3 img {
right: 192.4px;
top: 145.6px;
  }
  div.pc-a4 img {
right: 192.4px;
top: 274.56px;
  }
  div.pc-a5 img {
left: 187.2px;
top: 31.2px;
  }
  div.system-text-1 {
/* width: 391.399999994px;
height: 190.399999993px;
top: 436.8px;
padding: 20.8px;
right: 109.2px;
font-size: 18.512px;
line-height: 31.2px; */
  }


  /* 2セクション目 */
  div.section-2 {
margin-bottom: 36.4px;
  }
  div.pc-b1 img {
left: 62.4px;
top: 88.4px;
  }
  div.pc-b2 img {
right: 109.2px;
bottom: 10.4px;
  }
  div.pc-b3 img {
left: 218.4px;
top: 31.2px;
  }
  div.system-text-2 {
    width: 381.399999999px;
    height: 158.399999992px;
    padding: 20.8px;
    left: 182px;
    font-size: 18.512px;
    line-height: 31.2px;
  }


  /* 3セクション目 */
  div.pc-c1 img {
    right: 280.8px;
    top: 130px;
  }
  div.pc-c2 img {
    left: 36.4px;
    top: 20.8px;
  }
  div.pc-c3 img {
    right: 98.8px;
    top: 52px;
  }
  div.system-text-3 {
    width: 324.399999997px;
    height: 119.59px;
    top: 468px;
    padding: 20.8px;
    right: 119.6px;
    font-size: 18.512px;
    line-height: 31.2px;
  }

  /* 4セクション目 */
  div.pc-d1 img {
    right: 41.6px;
    top: 26px;
  }
  div.pc-d2 img {
    left: 66.56px;
    top: 384.8px;
  }
  div.pc-d3 img {
    right: 36.4px;
    top: 20.8px;
  }
  div.system-text-4 {
    width: 395.19px;
    height: 126.479999994px;
    bottom: 41.6px;
    padding: 18.72px;
    left: 98.8px;
    font-size: 18.512px;
    line-height: 31.2px;
  }


  /* 5セクション目 */
  div.section-5 {
    margin-bottom: 41.6px;
  }
  div.pc-e1 img {
    right: 56.16px;
    bottom: 0vw;
  }
  div.pc-e2 img {
    left: 244.4px;
    top: 10.4px;
  }
  div.pc-e3 img {
    right: -5.2px;
    top: 145.6px;
  }
  div.pc-e4 img {
    left: 34.32px;
    top: 185.12px;
  }
  div.system-text-5 {
    width: 355.559999995px;
    height: 162.559999992px;
    padding: 18.72px;
    left: 119.6px;
    font-size: 18.512px;
    line-height: 31.2px;
  }
}
@media screen and (max-width: 480px) {
  .popupimg {
    pointer-events: auto;
  }

  #system-head {
    display: block;
    height: 18vw;
  }

  img.system-bg {
    display: none;
  }
  img.system-sp-bg {
    display: block;
  }

  div.system-caption {
    position: relative;
    z-index: 1;
  }
  div.system-top-caption {
    position: relative;
    z-index: 1;
  }

  /* 1セクション目 */
div.section-1 {
  height: 114vw;
  max-height: unset;
}
  div.pc-a1 img,
  div.pc-a2 img,
  div.pc-a3 img,
  div.pc-a4 img,
  div.pc-a5 img {
  display: none;
}
div.sp-a1 img {
  display: block;
  top: 4vw;
  left: 0;
  right: 0;
  margin: auto;
  width: 96.739130434%;
}
div.system-text-1 {
/* width: 83.2%;
height: 32.084vw;
top: 69vw;
padding: 4vw;
right: 0;
left: 0;
margin: 0 auto;
font-size: 3.85vw;
line-height: 5.4vw; */
}

/* 2セクション目 */
div.section-2 {
  height: 161vw;
  max-height: unset;
  margin-bottom: 5.5vw;
}
div.pc-b1 img,
div.pc-b2 img,
div.pc-b3 img {
  display: none;
}
div.sp-b1 img {
  display: block;
  top: 2vw;
  left: 0;
  right: 0;
  margin: auto;
  width: 99.864130434%;
}
div.system-text-2 {
  width: 83.17%;
  height: 28.278vw;
  bottom: 0vw;
  padding: 4vw;
  right: 0;
  left: 0;
  margin: 0 auto;
  font-size: 3.85vw;
  line-height: 5.4vw;
}


  /* 3セクション目 */
  div.section-3 {
    height: 112vw;
    max-height: unset;
    margin-bottom: 5.5vw;
  }
  div.pc-c1 img,
  div.pc-c2 img,
  div.pc-c3 img {
    display: none;
  }
  div.sp-c1 img {
    display: block;
    top: 2vw;
    left: 0;
    right: 0;
    margin: auto;
    width: 95.923913043%;
  }
  div.system-text-3 {
    width: 83.17%;
    height: 21.682vw;
    top: 83vw;
    padding: 4vw;
    right: 0;
    left: 0;
    margin: 0 auto;
    font-size: 3.85vw;
    line-height: 5.4vw;
  }


  /* 4セクション目 */
  div.section-4 {
    height: 131vw;
    max-height: unset;
    margin-bottom: 5.5vw;
  }
  div.pc-d1 img,
  div.pc-d2 img,
  div.pc-d3 img {
    display: none;
  }
  div.sp-d1 img {
    display: block;
    top: 2vw;
    left: 0;
    right: 0;
    margin: auto;
    width: 97.14673913%;
  }
  div.system-text-4 {
    width: 83.17%;
    height: 22.98vw;
    bottom: 0vw;
    padding: 4vw;
    right: 0;
    left: 0;
    margin: 0 auto;
    font-size: 3.85vw;
    line-height: 5.4vw;
  }


  /* 5セクション目 */
  div.section-5 {
    height: 136.5vw;
    max-height: unset;
    margin-bottom: 5.5vw;
  }
  div.pc-e1 img,
  div.pc-e2 img,
  div.pc-e3 img,
  div.pc-e4 img {
    display: none;
  }
  div.sp-e1 img {
    display: block;
    top: 1vw;
    left: 0;
    right: 0;
    margin: auto;
    width: 95.244565217%;
  }
  div.system-text-5 {
    width: 83.17%;
    height: 28.278vw;
    bottom: 0vw;
    padding: 4vw;
    right: 0;
    left: 0;
    margin: 0 auto;
    font-size: 3.85vw;
    line-height: 5.4vw;
  }
}


/************** special-list ***************/
#special {
  width: 90%;
  margin: 1vh auto;
  padding: 5vh 0 20vh 0;
}
#special ul {
  right: 0;
  left: 0;
  top: 0;
  bottom: 0;

/*   margin: 1vh auto; */
}

#special li {
/*   width: 36.826923076%; */
  margin: 0 auto;
  display: block;

  margin: 1vh auto;

/*   border: 1px solid #282828; */
}
#special li img {

}

div.special-list {
  height: 23.076923076vw;
  background: white;
  box-shadow: 0.6vw 0.6vw 5px rgba(166,117,255,.2);
}
div.special-list div {
  color: black;
  font-size: 1.4vw;
  margin-top: 1.5vw;
}


/************** sns items ***************/
.special-container {
}

.special-title {
  text-align: center;
  background-color: #333;
  color: #fff;
  font-size: 24px;
  line-height: 50px;
  width: 500px;
  height: 50px;
  margin: 3vh auto;
}

.contents-inner-sns {
  width: 90%;
  margin: 5vh auto;
}

.contents-inner-sns .box-inner-title{
  left: 0;
  top: 0;
  right: 0;
  margin: auto;

  width: 70%;
  height: auto;
  text-align: center;
  border: 1px solid #ffffff;
  background: rgba(0,0,0,.65);
}

.contents-inner-sns .box-inner-title h1{
  font-weight: 400;
  margin: 5vh 0vw 5vh 0vw;

  color:#E3DBFF;
  font-size: 37px;
  font-size: calc(3.0rem + ((1vw - 0.64rem) * 2.1429));
  line-height: 1.3;
}

.contents-inner-sns p{
  font-family:  "Sawarabi Gothic", sans-serif;
  color: #ffffff;

  margin: 3vh auto 1vh ;

  font-size: 14px;
  font-size: calc(1.4rem + ((1vw - 0.64rem) * 0.7143));
  line-height: 2;
}

.contents-inner-sns small{
  font-family:  "Sawarabi Gothic", sans-serif;
  color: #ffffff;

  font-size: .9vw;
  font-size: calc(0.9rem + ((1vw - 0.64rem) * 0.7143));
}

.snsitem-wallpaper {
  margin: 0 0 0;
}
.snsitem-wallpaper li {
  display: inline-block;
  margin: 10px;
}
.snsitem-wallpaper img {
  width: 200px;
  height: auto;
}
.snsitem-wallpaper a:hover {
  filter: alpha(opacity=50);
  -moz-opacity: 0.5;
  opacity: 0.5;
  transition-property: all;
  transition: 0.2s linear;
}
.snsitem-icon-pc {
  margin: 5vh 0 auto;
}
.snsitem-icon-sp {
  margin: 5vh 0 auto;
}
.snsitem-icon-pc li{
  display: inline-block;
  margin: 10px;
}
.snsitem-icon-sp li {
  display: inline-block;
  margin: 5px;
}
.snsitem-icon-pc img{
  width: 150px;
  height: auto;
}
.snsitem-icon-sp img {
  width: 84px;
  height: 84px;
}
.snsitem-icon-pc a:hover ,
.snsitem-icon-sp a:hover {
  filter: alpha(opacity=50);
  -moz-opacity: 0.5;
  opacity: 0.5;
  transition-property: all;
  transition: 0.2s linear;
}
.snsitem-icon-pc
 {
  display: block;
}
.snsitem-icon-sp {
  display: none;
}

@media screen and (max-width: 768px) {

	.contents-inner-sns .box-inner-title{
  	  width: 80%;
	}

	.contents-inner-sns .box-inner-title h1{
/*   	  font-size: 30px;
  	  font-size: calc(2.6rem + ((1vw - 0.64rem) * 2.1429));
      line-height: 1.3; */
	}

	.contents-inner-sns p{
      font-size: 14px;
      font-size: calc(1.4rem + ((1vw - 0.64rem) * 0.7143));
      line-height: 1.8;
	}

	.contents-inner-sns small{
	  font-size: .9vw;
 	  font-size: calc(0.9rem + ((1vw - 0.64rem) * 0.7143));
	}

	.snsitem-wallpaper {
/*    	   margin: 0 20px 0; */
	}
	.snsitem-wallpaper li {
   	   display: inline-block;
   	   margin: 2px;
	}
	.snsitem-wallpaper img {
   	  width: 26vw;
      height: auto;
	}
	.snsitem-wallpaper a:hover {
      filter: alpha(opacity=50);
      -moz-opacity: 0.5;
      opacity: 0.5;
      transition-property: all;
      transition: 0.2s linear;
	}

	.snsitem-icon-pc {
        margin: 5vh 0 auto;
	}
	.snsitem-icon-pc li {
      display: inline-block;
      margin: 2px;
	}
	.snsitem-icon-pc img {
      width: 14vw;
      height: auto;
	}
}

@media screen and (max-width: 480px) {

.snsitem-icon-pc {
   display: none;
}
.snsitem-icon-sp {
  display: block;
}

	.contents-inner-sns .box-inner-title{
  	 width: 90%;
	}

	.contents-inner-sns .box-inner-title h1{
      margin: 3vh 0vw 3vh 0vw ;

      font-weight: bold;

      font-size: 22px;
      font-size: calc(2.8rem + ((1vw - 0.64rem) * 2.1429));
      line-height: 1.3;
	}

	.contents-inner-sns p{
	  margin: 3vh auto 0;
	  font-size: 14px;
	  font-size: calc(1.5rem + ((1vw - 0.64rem) * 0.7143));
	  line-height: 1.8;
	}

	.contents-inner-sns p small{
	  font-size: .7vw;
 	  font-size: calc(0.7rem + ((1vw - 0.64rem) * 0.7143));
	}
}
/************** shindan ***************/

#shindan {
  display: none;
  width: 100%;
  top: 15px;
  position: fixed;
  z-index: 99999;
}
.device-contents {
  color:black;
  height: 100%;
}
.device-contents:before {
  content: "";
  position: absolute;
  width: 200%;
  height: 200%;
  top: -50%;
  left: -50%;
  z-index: -1;
  background-image: url(../img/special/shindan/lime_bg.png);
  background-repeat: repeat;
  -webkit-transform: rotate(15deg);
  transform: rotate(15deg);
}

#shindan .header {

}
#shindan .header .title {
  position: absolute;
  top: 1vh;
  font-size: 1.8vh;
  left: 0;
  text-align: center;
  width: 100%;
  color: white;
}
#close-button {
  position: absolute;
  right: .6vh;
  top: .6vh;
  height: 3.7vh;
}

.lime-contents {
  z-index: -1;
  height: 100%;
  position: relative;
  margin-top: .5vh;
}
.lime-contents ul {
  top: 0px;
  position: absolute;
  width: 100%;
  z-index: -1;
}
.lime-contents li {
  width: 100%;
  position: relative;
}
.lime-contents .lime-icon {
  width: 12%;
  position: absolute;
  left: 1vh;
}
.lime-contents label {
  font-weight: bold;
  font-size: 1.5vh;
  position: absolute;
  left: 6.6vh;
  top: -.3vh;
}
.lime-contents .balloon {
  text-align: left;
  font-weight: bold;
  position: absolute;
  color: black;
  display: inline-block;
  font-size: 1.65vh;
  padding: 1vh 1.4vh;
  border-radius: 2vh;
  line-height: 2vh;
  top: 2.2vh;
}
.lime-contents .lime-balloon {
  background: white;
  left: 7.5vh;
}
.lime-contents .lime-balloon:before {
  content: "";
  position: absolute;
  top: 4%;
  left: -11px;
  margin-top: 0;
  transform: rotate(35deg);
  border: 4px solid transparent;
  border-right: 11px solid #fff;
}

.lime-contents .lime-reply-balloon {
  background: #fbb6e4;
  right: 15px;
}
.lime-contents .lime-reply-balloon:before {
  content: "";
  position: absolute;
  top: 4%;
  right: -11px;
  margin-top: 0px;
  margin-left: -4px;
  transform: rotate(-35deg);
  border: 4px solid transparent;
  border-left: 11px solid #fbb6e4;
}

#lime {
  transition: .5s;
}

.show-choices {
  bottom: 0 !important;
}
#choices img {
  width: 100%;
  height: auto;
  position: absolute;
  left: 0;
  top: 0;
}
#choices {
  width: 100%;
  transition: .5s;
  position: absolute;
  height: 20vh;
  bottom: -20vh;
  background: rgba(0,0,0,.55);
}
#choices .select {
  font-size: 1.8vh;
  font-weight: bold;
  border: 1px solid #5d636a;
  box-shadow: 1px 1px 2px rgba(0,0,0,0.6);
  background: linear-gradient(to top, #dfe0e1 0%, #dfe0e1 50%, #edeeef 50%, #edeeef 100%);
  margin-left: 1vh;
  margin-right: 1vh;
  padding: 1.5vh;
  border-radius: 1vh;
  cursor: pointer;
}
.top-choice {
  margin-top: 4vh;
  margin-bottom: 1.5vh;
}


#shindan .footer {
  position: absolute;
  bottom: 2vh;
}
#tap-button {
  width: 63%;
  display: none;
  margin: 0 auto;
}
div.shindan-top {
  width: 100%;
  margin: 0 auto;
  margin-top: 36px;
  position: relative;
  margin-bottom: 100px;
}
div.shindan-top img {
  width: 100%;
}
div.shindan-button {
  position: absolute;
  bottom: -15px;
  width: 100%;
  margin: 0 auto;
}

#shindan-start {
  width: 30%;
  font-size: 2vw;
  padding: 1.057692307vw 2.403846153vw;
}

/** 診断結果 **/
#shindan-result {
  position: absolute;
  bottom: -360px;
  transition: .5s;
}
#shindan-result img {
  width: 90%;
  margin: 0 auto;
}
.result-up {
  bottom: 0;
}

/** ツイートでシェア **/
.tweet-button-wrap {
  margin: 10px 0 15px 0;
}
.tweet-button,
.tweet-button-inner {
  margin: 0 auto;
  width: 140px;
  height: 27px;
  display: block;
  position: relative;
  background: #5ccdf7;
  transition: all 0.2s linear;
}
.tweet-button span {
  width: 100%;
  height: 100%;
  font-size: 11px;
  color: #fff;
  text-align: center;
  display: flex;
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: center;
}

.tweet-button:before,
.tweet-button:after {
  content: '';
  top: 0;
  left: 0;
  width: 10%;
  height: 100%;
  position: absolute;
  background: #5ccdf7;
  transition: all 0.2s linear;
  z-index: 0;
}
.tweet-button:before {
  transform: rotate(60deg);
}
.tweet-button:after {
  transform: rotate(-60deg);
}

.tweet-button-inner:before,
.tweet-button-inner:after {
  content: '';
  top: 0;
  right: 0;
  width: 10%;
  height: 100%;
  position: absolute;
  background: #5ccdf7;
  transition: all 0.2s linear;
  z-index: 0;
}
.tweet-button-inner:before {
  transform: rotate(60deg);
}
.tweet-button-inner:after {
  transform: rotate(-60deg);
}

/** もう一度診断ボタン **/
.retry-button-wrap {
  margin: 25px 0 15px 0;
}
.retry-button,
.retry-button-inner {
  margin: 0 auto;
  width: 205px;
  height: 40px;
  display: block;
  position: relative;
  background: #f034ad;
  transition: all 0.2s linear;
}
.retry-button span {
  width: 100%;
  height: 100%;
  font-size: 17px;
  color: #fff;
  text-align: center;
  display: flex;
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: center;
}

.retry-button:before,
.retry-button:after {
  content: '';
  top: 0;
  left: 0;
  width: 11%;
  height: 100%;
  position: absolute;
  background: #f034ad;
  transition: all 0.2s linear;
  z-index: 0;
}
.retry-button:before {
  transform: rotate(60deg);
}
.retry-button:after {
  transform: rotate(-60deg);
}

.retry-button-inner:before,
.retry-button-inner:after {
  content: '';
  top: 0;
  right: 0;
  width: 11%;
  height: 100%;
  position: absolute;
  background: #f034ad;
  transition: all 0.2s linear;
  z-index: 0;
}
.retry-button-inner:before {
  transform: rotate(60deg);
}
.retry-button-inner:after {
  transform: rotate(-60deg);
}


@media screen and (max-width: 480px) {

  #shindan {
    width: 100%;
    height: 100%;
    top: -105px;
    left: -24px;
    position: fixed;
  }
  .marvel-device.iphone8 {
    width: 100%;
    height: 100%;
  }
  #shindan .header .title {
    top: 2.8vw;
    font-size: 4vw;
  }
  #shindan .footer {
    width: 100%;
  }
  #close-button {
    right: 1.3vw;
    top: 1.3vw;
    height: 9vw;
  }

  .lime-contents label {
    font-size: 3.5vw;
    font-weight: normal;
    left: 16vw;
    top: 0vw;
  }
  .lime-contents .lime-balloon {
    left: 16.5vw;
  }
  .lime-contents .balloon {
    font-weight: normal;
    font-size: 4vw;
    padding: 2vw 4vw;
    border-radius: 3vw;
    line-height: 4.7vw;
    top: 6vw;
  }

  .lime-contents .lime-icon {
    left: 2vw;
  }

  #choices img {

  }
  #choices {
    bottom: -40vw;
    height: auto;
    padding-bottom: 1vw;
  }
  #choices .select {
    font-size: 4vw;
    margin-left: 2vw;
    margin-right: 2vw;
    padding: 3vw;
    border-radius: 1.3vw;
  }
  #choices .select {
    font-weight: normal;
    border: 0.266666666vw solid #5d636a;
    box-shadow: 0.266666666vw 0.266666666vw 0.533333333vw rgba(0,0,0,0.6);
  }
  .top-choice {
    margin-top: 8vw;
    margin-bottom: 2vw;
  }
  .bottom-choice {
    margin-bottom: 2.5vw;
  }
}

/************** special pre registration ***************/
#reservation {
  width: 80%;
  margin:8vh auto 0 auto;
  padding: 5vw 0 8vw;
}

#reservation .separator {
  position: relative;
  bottom: 75%;
  left: 0;
  height: calc(100vw / 3);
  background-image: linear-gradient(#620474, #620474);
  transform: skewY(-5deg);
  transform-origin: top left;
  overflow: visible;
  margin-left: calc( ( 100% - 98vw ) / 2 );
  margin-right: calc( ( 100% - 98vw ) / 2 );
  z-index:-1;
}

#reservation .special-inner-center {
  position: absolute;
  width: 90%;
  top: 0;
  right: 0;
  left: 0;
  bottom: 0;
  margin: 0 auto;
}

#reservation .special-inner-center .box-inner-title{
  left: 0;
  top: 0;
  right: 0;
  margin: 18% auto auto auto;

  width: 50%;
  height: auto;
  text-align: center;
  border: 1px solid #ffffff;

  background: rgba(0,0,0,.0);
}

#reservation .special-inner-center .box-inner-title h1{
  font-weight: bold;
  margin: 0 auto 4vh auto;

  color: #ffffff;

  font-size: 50px;
  font-size: calc(3.8rem + ((1vw - 0.64rem) * 2.1429));
  line-height: 1.3;
}
#reservation .special-inner-center .box-inner-title h2{
  margin: 1vh auto;
}
#reservation .special-inner-center .box-inner-title h3{
  font-weight: 400;
  margin: 4vh auto 1vh;

  font-size: 28px;
  font-size: calc(2.4rem + ((1vw - 0.64rem) * 0.7143));
  line-height: 1.3;
}

@media screen and (max-width: 1041px) {
  #reservation {
    width: 90%;
    margin:8vh auto 0 auto;
  }

  #reservation .special-inner-center .box-inner-title{
    margin: 13% auto auto auto;
  }
}

@media screen and (max-width: 1041px) {

  #reservation .separator {
    bottom: 85%;
    height: calc(100vw / 2.5);
  }
}

@media screen and (max-width: 800px) {

  #reservation {
	width: 90%;
	margin: 8vh auto 0 auto;
	padding: 6vw 0 8vw;
  }

  #reservation .special-inner-center .box-inner-title{
/* 	margin: 15% auto auto auto; */
  }
  #reservation .special-inner-center .box-inner-title h1{
	font-size: 36px;
	font-size: calc(3.2rem + ((1vw - 0.64rem) * 2.1429));
	margin: 0 auto 3vh auto;
  }
  #reservation .special-inner-center .box-inner-title h2{
  }
  #reservation .special-inner-center .box-inner-title h3{
	font-size: 20px;
	font-size: calc(1.8rem + ((1vw - 0.64rem) * 0.7143));
	margin: 3vh auto 0.8vh;
  }

}

@media screen and (max-width: 600px) {

  #reservation .separator {
    bottom: 95%;
    height: calc(100vw / 2.3);
  }
  #reservation {
    width: 98%;
    margin:12vh auto 0 auto ;
  }
  #reservation .special-inner-center .box-inner-title{
    margin: 8% auto auto auto;
  }
  #reservation .special-inner-center .box-inner-title h1{
    font-size: 30px;
    font-size: calc(3.0rem + ((1vw - 0.64rem) * 2.1429));

    margin: 0 auto 3vh auto;
  }
  #reservation .special-inner-center .box-inner-title h2{
  }
  #reservation .special-inner-center .box-inner-title h3{
    font-size: 18px;
    font-size: calc(1.8rem + ((1vw - 0.64rem) * 0.7143));
    margin: 3vh auto 1vh;
  }
}

@media screen and (max-width: 480px) {
  #reservation {
    width: 100%;
  }
  #reservation .special-inner-center .box-inner-title{
    margin: 6% auto auto auto;
  }
  #reservation .special-inner-center .box-inner-title h1{
    font-size: 20px;
    font-size: calc(2.6rem + ((1vw - 0.64rem) * 2.1429));
    margin: 0 auto 2vh auto;
  }
  #reservation .special-inner-center .box-inner-title h2{
  }
  #reservation .special-inner-center .box-inner-title h3{
    font-size: 14px;
    font-size: calc(1.4rem + ((1vw - 0.64rem) * 0.7143));
    margin: 2.5vh auto 0.25vh auto ;
  }
}

#reservation .special-inner-left {
  position: absolute;
  width: 30%;
/*   top: 0; */
/*   right: 0; */
  left: 0;
  bottom: 0;

  margin: 0 auto auto 2vw;
}

#reservation .special-inner-right {
  position: absolute;
  width: 30%;
/*   top: 0; */
  right: 0;
/*   left: 0; */
  bottom: 0;

  margin: 0 2vw auto auto ;
}

#reservation div.special-top {
  position: relative;
/*   margin-top: 4.807692vw; */
height: 45vw;
  margin: 0 auto 5vh auto ;
}


#reservation div.special-inner {
  width: 100%;
  height: 45vw;
}

div.special-top {
  position: relative;
/*   margin-top: 4.807692vw; */
  height: 75vw;
}
div.special-top img {
/*   position: absolute; */
}
div.special-top img.bg {
  top: 0;
  left: 0;
  width: 100%;
}
div.special-top img.sp-bg {
  top: 0;
  left: 0;
  width: 100%;
  display: none;
}
div.special-top img.left {
  width: 40.576923%;
  left: 0;
}
div.special-top img.right {
  width: 40.576923%;
  right: 0;
}
div.special-top img.front {
  top: 0;
  left: 0;
  width: 100%;
}
div.special-top img.sp-front {
  top: 0;
  left: 0;
  width: 100%;
  display: none;
}
div.entry-group-top {
  position: absolute;
  left: -9vw;
  top: 37vw;
}
ul.entry-list-top {
  width: 54.807692vw;
  margin: 0 auto;
}
ul.entry-list-top li {
  display: inline-block;
  width: 30%;
}
ul.entry-list-top li img {
  max-width: none;
  width: 26.7%;
}

#reservation div.bonus {
  position: sticky;
  width: auto;
}
#reservation div.bonus ul.bonus-list {
  margin: 15vh auto 15vh auto;
}
#reservation div.bonus ul.bonus-list li {
  max-width: 1040px;
  margin: 0 auto;
  margin-top: 8vh;
  position: relative;
}
#reservation div.bonus ul.bonus-list li:nth-child(1){
  max-height: 340px;
}
#reservation div.bonus ul.bonus-list li:nth-child(2){
  max-height: 340px;
  margin-top: 8vh;
}
#reservation div.bonus ul.bonus-list li:nth-child(3){
  max-height: 340px;
  margin-top: 8vh;
}
#reservation div.bonus ul.bonus-list li:nth-child(4){
  max-height: 370px;
  margin-top: 6vh;
}
#reservation div.bonus ul.bonus-list li:nth-child(5){
  max-height: 340px;
  margin-top: 7.5vh;
}
#reservation div.bonus ul.bonus-list li:nth-child(6){
  max-height: 340px;
  margin-top: 6vh;
}
#reservation div.bonus ul.bonus-list li img {
  transition: 1s;
  transition-delay: 0s;
}

@media screen and (max-width: 480px) {

  #reservation div.bonus {
    width: 90%;
    margin: 0 auto;
  }
  #reservation div.bonus ul.bonus-list {
    margin: 5vh auto 10vh auto;
  }
#reservation div.bonus ul.bonus-list li {
  max-width: 1040px;
  margin: 0 auto;
  margin-top: 8vh;
  position: relative;
}
#reservation div.bonus ul.bonus-list li:nth-child(1){
  max-height: 340px;
}
#reservation div.bonus ul.bonus-list li:nth-child(2){
  max-height: 340px;
  margin-top: 4vh;
}
#reservation div.bonus ul.bonus-list li:nth-child(3){
  max-height: 340px;
  margin-top: 4vh;
}
#reservation div.bonus ul.bonus-list li:nth-child(4){
  max-height: 370px;
  margin-top: 4vh;
}
#reservation div.bonus ul.bonus-list li:nth-child(5){
  max-height: 340px;
  margin-top: 4.5vh;
}
#reservation div.bonus ul.bonus-list li:nth-child(6){
  max-height: 340px;
  margin-top: 4vh;
}
}
#reservation div.bonus img.clear {
 filter: brightness(50%);
}
#reservation div.bonus img.icon-clear {
  position: absolute;
  display: inline;
  right: 0;
  bottom: 60%;
  width: 25.769230769vw;
  max-width: 268px;

  transition: 1s;
  transition-delay: 0s;
}

#reservation .notes-wrap {
  left: 0;
  top: 0;
  right: 0;
  margin: 18% auto auto auto;

  width: 100%;
  height: auto;
  border: 1px solid #ffffff;

  margin-top: 6vw;
}

#reservation .notes-wrap .notes {
  width: 100%;
}


@media screen and (max-width: 600px) {
  #reservation .notes-wrap {
    width: 90%;
  }
}
#reservation .notes-wrap .notes h2 {
  font-size: 20px;
  font-size: calc(1.8rem + ((1vw - 0.64rem) * 0.7143));
  line-height: 1.3;

  margin: 4vh 6vw 4vh 6vw;

  text-align: left;
}

#reservation .notes-wrap .notes p {
  font-size: 14px;
  font-size: calc(1.0rem + ((1vw - 0.64rem) * 0.7143));
  line-height: 1.8;
  font-weight: 100;

  color: #FFFFFF;
  text-align: left;
  margin: 8vh 6vw 5vh 6vw;
  max-width: 915.2px;
  margin-top: -2vw;

/* white-space: nowrap; */
  border-top: 1px solid #f5f5f5;

}
#reservation .notes-wrap .notes p a {
  text-decoration: underline;

  font-size: 14px;
  font-size: calc(1.0rem + ((1vw - 0.64rem) * 0.7143));
  line-height: 1.8;
  font-weight: 100;

  text-decoration: none;
}
#reservation .notes-wrap .notes p a:link,
#reservation .notes-wrap .notes p a:visited {
  color: #FFFFFF;
}

#reservation .notes-wrap .notes p a:hover{
  color:#d563c9;
}


@media screen and (max-width: 480px) {
  #reservation .notes-wrap .notes h2 {
  }

  #reservation .notes-wrap .notes p {
    font-size: 14px;
    font-size: calc(1.4rem + ((1vw - 0.64rem) * 0.7143));
    font-weight: 300;
  }
  #reservation .notes-wrap .notes p a {
    font-size: 14px;
    font-size: calc(1.4rem + ((1vw - 0.64rem) * 0.7143));
    font-weight: 300;
  }
}

h2.entry-head {
  color: black;
  font-size: 3vw;
  font-weight: bold;
  text-align: center;
  margin-bottom: 4vw;
}

div.how-to-entry {
  margin-top: -1.057692307vw;
  z-index: -1;
  width: 100%;
}

img.entry-button-bg {
  position: absolute;
  left: 0;
  margin-top: -12px;
  z-index: -1;
}
div.entry-group {
  margin: 5vw 0;
  padding: 6vw 0 8vw;
}
ul.entry-list {
/*   width: 60.576923076vw;
  max-width: 630px; */
  margin: 0 auto;
}
ul.entry-list li {
  display: inline-block;
  width: 25%;
  margin: 0 1.5vw;
}

div.campaign-contents-group {
  max-width: 1040px;
  margin: 0 auto;
}

div.campaign-bg {
  background-color: #e93398;
  width: 100%;
  height: 32.115384615vw;334px;
  margin: 12vw 0 5vw;
}
div.campaign-bg-child {
  max-width: 1040px;
  overflow: hidden;
  margin: 0 auto;
  text-align: center;
  position: relative;
  top: -7.596153846vw;-79px;
}
img.campaign-head {
  max-width: 1158px;
  width: 111.346153846%;
  position: relative;
  left: -9.807692307vw;-102px;
}
img.sp-campaign-head {
  display: none;
}

div.campaign-bg,
img.sp-campaign-head {
  transition: 1s;
  transition-delay: 0s;
}

.label-campaign-wrap {
  margin: 5vw 0 3vw;
  display: inline-block;
  width: 72%;
}
.label-campaign-outer,
.label-campaign-inner {
  margin: 0 auto;
  width: 100%;
  height: 4.3vw;
  display: block;
  position: relative;
  background: #414141;
  transition: all 0.2s linear;
}

.label-campaign-outer span {
  width: 100%;
  height: 100%;
  font-size: 2.2vw;
  color: #fff;
  text-align: center;
  display: flex;
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: center;
}

.label-campaign-outer:before,
.label-campaign-outer:after {
  content: '';
  top: 0;
  left: 0;
  width: 3.3%;
  height: 100%;
  position: absolute;
  background: #414141;
  transition: all 0.2s linear;
  z-index: 0;
}
.label-campaign-outer:before {
transform: rotate(60deg);
}
.label-campaign-outer:after {
transform: rotate(-60deg);
}

.label-campaign-inner:before,
.label-campaign-inner:after {
  content: '';
  top: 0;
  right: 0;
  width: 3.3%;
  height: 100%;
  position: absolute;
  background: #414141;
  transition: all 0.2s linear;
  z-index: 0;
}
.label-campaign-inner:before {
transform: rotate(60deg);
}
.label-campaign-inner:after {
transform: rotate(-60deg);
}

.campaign-conetnts {
  color: black;
  font-size: 3vw;
  font-weight: bold;
  text-align: center;
  margin-bottom: 5vw;
  margin: 0 auto;
  max-width: 100%;
}
.campaign-conetnts twitter-widget {
  margin: 0 auto;
}

.rt3 twitter-widget {
  width: 100% !important;
}
.rt3-pc > div.item1 {
  width: 40%;
  display: inline-block;
}
.rt3-pc > div.item2 {
  width: 55%;
  display: inline-block;
  float: right;
  margin-top: 10px;
}

.label-campaign-wrap,
.campaign-conetnts {
  transition: 1s;
  transition-delay: 0s;
}

.campaign-contents-group article {
  color: black;
  display: inline-block;
  width: 85%;
  background-color: white;
  border: 1px solid #282828;
  box-shadow: .8vw .5vw 1px rgba(166,117,255,.2);
  padding: 2.5vw 2.5vw 2.5vw 2.5vw;
  text-align: left;
  margin: 10vw 0 0;
  transition: 1s;
  transition-delay: 0s;
}

.campaign-contents-group article h1 {
  font-weight: bold;
  font-size: 1.7vw;
  margin-top: .5vw;
}
.campaign-contents-group article h1::after {
  margin: .8vw 0 1.5vw;
  content:"";
  display:block;
  height:2px;
  width:100%;
  background:-webkit-gradient(#b17eff, #d8bfff);
  background:-moz-linear-gradient(#b17eff, #d8bfff);
  background:linear-gradient(#b17eff, #d8bfff);
}
.campaign-contents-group article h1 span {
  margin-left: .5vw;
}

section.notes-wrap {
  margin-top: 6vw;
}

.notes {
  width: 100%;
 /*
  background-image: url(../img/common/bg.png);
  background-repeat: repeat;
  */
}
div.notes p {
  font-size: 1.1em;
  color: #FFFFFF;
  text-align: left;
/*   padding: 0 0 3vw 0; */
  max-width: 915.2px;
  margin: 0 auto;
  margin-top: -2vw;
}
div.notes p a {
  text-decoration: underline;
}
div.notes p a:link,
div.notes p a:visited {
   color: #FFFFFF;
}

@media screen and (min-width: 1041px) {
/*   #special {
padding: 46.8px 0 57.2px;
  }
  #special li {
width: 382.99999999px;
margin: 0 16.64px 31.2px 16.64px;
  }
  div.special-list {
height: 239.99999999px;
box-shadow: 6.24px 6.24px 5px rgba(166,117,255,.2);
  }
  div.special-list div {
font-size: 14.56px;
margin-top: 15.6px;
  }

  div.special-top {
margin-top: 50px;
  } */

  div.notes p {
/* padding: 72.8px 62.4px 52px 62.4px;
margin-top: -20.8px; */
  }


  ul.entry-list li {
    margin: 0 15.6px;
  }


  h2.entry-head {
    font-size: 31.2px;
    margin-bottom: 41.6px;
  }

  div.entry-group {
    margin: 52px 0;
    padding: 83.2px 0 83.2px;
  }

  div.campaign-bg {
    height: 334px;
    margin: 124.8px 0 52px;
  }
  div.campaign-bg-child {
    top: -79px;
/* overflow: hidden; */
  }
  img.campaign-head {
    left: -102px;
  }

  .label-campaign-wrap {
    margin: 52px 0 31.2px;
    width: 72%;
  }
  .label-campaign-outer,
  .label-campaign-inner {
    height: 44.72px;
  }

  .label-campaign-outer span {
    font-size: 22.88px;
  }

  .label-campaign-outer:before,
  .label-campaign-outer:after {
    width: 24.71px;
  }

  .label-campaign-inner:before,
  .label-campaign-inner:after {
    width: 24.71px;
  }


  p.campaign-conetnts {
    font-size: 31.2px;
    margin-bottom: 52px;
  }

  .campaign-contents-group article {
    margin: 104px 0 0;
  }

  section.notes-wrap {
    margin-top: 62.4px;
  }
}

@media screen and (min-width: 1159px) {

  div.campaign-bg-child {
    overflow: visible;
  }
}
@media screen and (max-width: 480px) {
  #special {
    padding: 46.8px 0 57.2px;
  }
  #special li {
    width: 85%;
/* margin: 0 16.64px 31.2px 16.64px; */
  }
  div.special-list {
/* height: 54vw;
box-shadow: 6.24px 6.24px 5px rgba(166,117,255,.2); */
  }
  div.special-list img {
    width: 100%;
  }
  div.special-list div {
    font-size: 3vw;
    margin-top: 4.5vw;
  }

  div.special-top {
    margin-top: 0px;
  }
  div.notes p {
/* font-size: 3vw; */
  }

  div.special-top img.bg,
  div.special-top img.front {
    display: none;
  }
  div.special-top img.sp-bg,
  div.special-top img.sp-front {
    display: block;
  }

  div.special-top img.left {
    width: 47%;
    left: -2vw;
  }
  div.special-top img.right {
    width: 47%;
/* right: -2vw; */
  }

  div.shindan-top {
    margin-bottom: 30vw;
  }
  div.shindan-button {
    bottom: -9.6vw
  }
  #shindan-start {
    width: 63%;
    font-size: 4.5vw;
    padding: 2vw 2.4vw;
    margin-top: 1vw;
  }

  h2.entry-head {
    font-size: 3.6vw;
  }

  div.entry-group-top {
    position: relative;
    top: 41vw;
    left: 0;
    width: 100%;
  }
  ul.entry-list-top {
    width: 80%;
    margin: 0 auto;
  }
  ul.entry-list-top li {
    display: inline-block;
    width: 31%;
  }
  ul.entry-list-top li img {
    max-width: none;
    width: 85%;
    position: unset;
  }

  ul.entry-list {
/* width: 80%; */
  }
  ul.entry-list li {
    width: 28%;
  }

  ul.bonus-list {
    margin-top: 9vw;
  }

  div.campaign-bg {
    display: none;
  }
  img.sp-campaign-head {
    display: block;
  }
  .label-campaign-wrap {
    width: 85%;
  }
  .label-campaign-outer,
  .label-campaign-inner {
    height: 6vw
  }

  .label-campaign-outer span {
    font-size: 3vw;
  }

  .label-campaign-outer:before,
  .label-campaign-outer:after,
  .label-campaign-inner:before,
  .label-campaign-inner:after {
    width: 4%;
  }
  .campaign-conetnts {
    font-size: 4vw;
    max-width: 85%;
  }

  .campaign-contents-group article {
    font-size: 3vw;
    width: 80%;
    box-shadow: .8vw .5vw 1px rgba(166,117,255,.2);
    padding: 4.5vw 4.5vw 4.5vw 4.5vw;
    margin: 10vw 0 0;
  }
  .campaign-contents-group article h1 {
    font-size: 3.5vw;
  }

  section.notes-wrap {
    margin-top: 9vw;
  }
}



/************** mail form ***************/
div.mail-form {
  display: none;
  position:fixed;
  top: 9vw;
  left: 0;
  height: 100%;
  width: 100%;
  margin: 0;
  padding: 0;
  z-index:100000;
}
div.mail-form-dialog {
  display: inline-block;
  background:#fff;
  width: 75.288461538%;
  height: 43.269230769%;
  border: 2px solid black;
  border-radius: 20px;
  z-index:100000;
  overflow: hidden;
  position: relative;
}

div.close-button {
  color: black;
  position: relative;
  font-size: 2.4em;
  font-weight: bold;
  text-align: right;
  top: 1.5vw;
  right: .5vw;
  float: right;
}
.my-parts {
  display: inline-block;
  width: 33px;
  height: 20px;
  width: 5vw;
  height: 3vw;
  position: relative;
  cursor: pointer;
}
.my-parts span::before,
.my-parts span::after {
  display: block;
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 84%;
  height: 16%;
  margin: -8% 0 0 -42%;
  background: rgb(0, 0, 0);
}
.my-parts span::before {
  transform: rotate(-45deg);
}
.my-parts span::after {
  transform: rotate(45deg);
}

div.mail-form-label {
  padding: 0 10vw;
}
div.mail-form-label img {
  margin-top: 3.846153846vw;
  width: 32.98076923vw;
}

div.mail-input {
  margin-top: 2.403846153vw;
  margin-bottom: 3.076923076vw;
}
div.mail-input input {
  border: 1px solid black;
  width: 55%;
  height: 35px;
  margin: 0 auto;
  border-radius: 7px;
  font-size: 1em;
  text-align: left;
  padding: 0 10px;
}

button.entry {
  color: white;
  background-color: #620474;
  box-shadow: 0 0 0 5px #620474, 0 0 0 0px #FFF, 0 0 0 0px #620474;
  border-radius: 25px;
  font-size: 1em;
  padding: 9px 25px;
  border-style: none;
}

#mail-success {
  display: none;
  font-weight: bold;
  color: black;
  font-size: 3vw;
  margin: 4.28vw;
}
#mail-notvalue {
  display: none;
  font-weight: bold;
  color: #e4007f;
  font-size: 1.8vw;
  margin: 0.865384615vw 0 -3.461538461vw;
}
#mail-error {
  display: none;
  font-weight: bold;
  color: #e4007f;
  font-size: 1.8vw;
  margin: 0.865384615vw 0 -3.461538461vw;
}

#loading-roll {
  width: 100%;
  height: 100%;
  display: inline-block;
  position: absolute;
}

/* メールフォーム下段 */
div.mail-form-footer-wrap {
  width: 108%;
  overflow: hidden;
  position: relative;
  top: 3.5vw;
  left: -4%;
  margin: 0 auto;
}
div.mail-form-footer {
  width: 100%;
/*   background-color: #e4007f; */
  margin: 10.4px auto;
  text-align: center;
/*   transform: rotate(1.5deg); */
}
div.mail-form-footer-inner {
/*   background-color: #2bc3ff;
  transform: rotate(-3deg); */
}
.mail-form-footer p {
/*   background-image: url(../img/common/bg_mail_form.png); */
  background-repeat: repeat;
  font-size: 13px;
  line-height: 22px;
  height: auto;
  background-color: black;
/*   transform: rotate(1.5deg); */
  padding: 1.73076923vw 4.807692307vw 4vw;
  text-align: left;
}
.mail-form-footer p a {
  text-decoration: underline;
}
.mail-form-footer p a:link,
.mail-form-footer p a:visited {
   color: #fff001;
}

@media screen and (min-width: 1041px) {
  div.mail-form {
    top: 93.6px;   /* 表示位置 */
  }
  div.mail-form-dialog {
    width: 783px;
    height: 450px;
    border: 2px solid black;
    border-radius: 20px;
  }
  div.close-button {
    font-size: 2.4em;
    top: 16px;
    right: 7px;
  }
  .my-parts {
    width: 52px;
    height: 31.2px;
  }

  div.mail-form-label img {
    margin-top: 40px;
    width: 343px;
  }
  div.mail-input {
    margin-top: 25px;
    margin-bottom: 32px;
  }
  div.mail-input input {
    border: 1px solid black;
    width: 55%;
    height: 35px;
    margin: 0 auto;
    border-radius: 7px;
    font-size: 1em;
    padding: 0 10px;
  }

  button.entry {
    background-color: #620474;
    box-shadow: 0 0 0 5px #620474, 0 0 0 0px #FFF, 0 0 0 0px #620474;
    border-radius: 40px;
    font-size: 1em;
    padding: 9px 25px;
  }

  #mail-success {
    font-size: 31.2px;
    margin: 44.512px
  }
  #mail-notvalue {
    font-size: 18.72px;
    margin: 9px 0 -36px;
  }
  #mail-error {
    font-size: 18.72px;
    margin: 9px 0 -36px;
  }

  /* メールフォーム下段 */
  div.mail-form-footer-wrap {
    width: 108%;
    overflow: hidden;
    position: relative;
    top: 36.4px;
    left: -4%;
    margin: 0 auto;
  }
  div.mail-form-footer {
    width: 100%;
    margin: 10.4px auto;
  }
  .mail-form-footer p {
    font-size: 13px;
    line-height: 22px;
    height: 156px;
    padding: 18px 50px 17.68px;
  }
}
@media screen and (max-width: 480px) {
  /************** mail form ***************/
  div.mail-form {
    top: 20vw;
  }
  div.mail-form-dialog {
    width: 85%;
    height: 43.269230769%;
    border: 2px solid black;
    border-radius: 10px;
  }

  div.close-button {
    font-size: 8vw;
    top: 2vw;
    right: 1vw;
    font-weight: normal;
  }

  .my-parts {
    width: 7vw;
    height: 5vw;
  }

  div.mail-form-label img {
    margin-top: 5vw;
    width: 49vw;
  }

  div.mail-input {
    margin-top: 2vw;
    margin-bottom: 3.5vw;
  }
  div.mail-input input {
    border: 1px solid black;
    width: 67%;
    height: 7vw;
    margin: 0 auto;
    border-radius: 3px;
    font-size: 3vw;
    padding: 0 2vw;
  }

  button.entry {
    box-shadow: 0 0 0 0px #620474, 0 0 0 0px #FFF, 0 0 0 0px #620474;
    border-radius: 40px;
    font-size: 3.5vw;
    padding: 1.8vw 4vw;
  }

  #mail-success {
    display: none;
    font-weight: bold;
    color: black;
    font-size: 3vw;
    margin: 4.28vw;
  }
  #mail-notvalue {
    display: none;
    font-weight: bold;
    color: #e4007f;
    font-size: 1.8vw;
    margin: 0.865384615vw 0 -3.461538461vw;
  }
  #mail-error {
    display: none;
    font-weight: bold;
    color: #e4007f;
    font-size: 1.8vw;
    margin: 0.865384615vw 0 -3.461538461vw;
  }

  #loading-roll {
    width: 100%;
    height: 100%;
    display: inline-block;
    position: absolute;
  }

  /* メールフォーム下段 */
  div.mail-form-footer-wrap {
    width: 108%;
    top: 3.5vw;
    left: -4%;
    margin: 0 auto;
  }
  div.mail-form-footer {
    width: 100%;
    margin: 10.4px auto;
  }
  .mail-form-footer p {
    font-size: 3vw;
    line-height: 1.8em;
    padding: 3vw 6.5vw 5vw;
  }
}


/************** twitter ***************/
#twitter {
  width: 80%;
  margin: 0 auto;
  padding: 2.5vw 0 5.5vw;
}
#twitter-iframe-pc,
#twitter-iframe-sp {
/*   margin-bottom: 4vw; */
}

#twitter-iframe-pc {
  display: block;
}
#twitter-iframe-sp {
  display: none;
}

/* Twitterウィジェット */
.SandboxRoot .timeline-Tweet-text {
	font-size: 30px!important;
}

@media screen and (min-width: 1041px) {
  #twitter {
    padding: 26px 0 57.2px;
  }
  #twitter-iframe-pc {
    margin-bottom: 41.6px;
  }
}

@media screen and (max-width: 480px) {
  #twitter {
    width: 93%;
  }

  #twitter-iframe-pc {
    display: none;
  }
  #twitter-iframe-sp {
    display: block;
  }
}


/************** spec+Twitter ***************/
.flexbox {
  display: flex;
  flex-wrap: wrap;
  padding: 0.4em;
  margin: 0 0 2em;

  font-size: 1.4vw;
  font-size: calc(1.4rem + ((1vw - 0.64rem) * 0.7143));
}

.flexbox > div {
  padding: 1em;
  flex: 1 0 10vw;
  margin: 0.4em 3vw 0.4em auto;
}
.flexbox .item2{
    margin: 0.4em auto 0.4em 3vw;
}

#spec {
  background: #001492;
  width: 100%;

  position: relative;
}

#spec span {

}

#spec .spec-inner {
  width: 80%;
  margin: 1vh auto;
}

#spec .app_info {
  display: block;
  margin: 8vh auto;
}

#spec .app_info .app_info_icon {

}


#spec img.icon {
/*   padding: 0; */
}


#spec .app_info_text {

}

#spec ul.store_text {
  display: flex;
  flex-direction: column;

   margin: 1vh auto;

  font-size: 3vw;
  font-size: calc(3.5rem + ((1vw - 0.64rem) * 0.7143));
}

#spec .store_banner {
  display: -webkit-flex;
  display: flex;
}
#spec .store_banner a.left{
  margin: 1vh 0.5vw auto auto ;
}
#spec .store_banner a.right{
  margin: 1vh auto auto 0.5vw;
}

#spec ul.store_text li{

}


#spec .twitter_text_pc {
  display: block;
  margin: .5vh auto;
}
#spec .twitter_text_sp {
  display: none;
  margin: .5vh auto;
  text-align: left;
}
#spec .twitter_text_pc .twitter_text_line {
  display: inline;
  vertical-align: middle;

  font-size: 1.4vw;
  font-size: calc(1.4rem + ((1vw - 0.64rem) * 0.7143));
}
#spec .twitter_text_pc .twitter_icon_line {
  height: 5vw;
  display:inline-block;
  vertical-align: middle;
}

#spec .twitter_text_sp .twitter_text_line {
  display: inline;
  vertical-align: middle;

  font-size: 1.4vw;
  font-size: calc(1.4rem + ((1vw - 0.64rem) * 0.7143));
}
#spec .twitter_text_sp .twitter_icon_line {
  height: 5vw;
  display:inline-block;
  vertical-align: middle;
}




a.spec-app-store {
  width: 161.91px;
  height: 12.841515427vh;
  display: inline-block;
  overflow: hidden;
  background: url(https://linkmaker.itunes.apple.com/ja-jp/badge-lrg.svg?releaseDate=2019-04-17&kind=iossoftware&bubble=ios_apps) no-repeat;
  background-size: contain;
}
a.spec-googleplay {
  width: 185.19px;
  display: inline-block;
  overflow: hidden;
  background-size: contain;
}
a.spec-googleplay img {
  max-height:49px;
}


@media (min-width: 1200px) {/* 1200px以上*/
  #spec .spec-inner {
    width: 80%;
  }
}
@media screen and (max-width: 1200px) {/* 1200px以下*/
  .flexbox > div {

  }

  .flexbox .item2{
  }

  #spec .spec-inner {
    width: 90%;
  }
}
@media screen and (max-width: 810px) {/* 810px以下*/

  #spec .app_info .app_info_icon {
    height: 100%;
    width: 30%;
    padding: 0;
    float: left;

    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    margin: auto 0 auto auto;
  }

  #spec .app_info_text {
   width: 65%;
   float: left;

    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    margin: 1.5vh auto 2.5vh 2vw;
  }

  #spec .app_info {
  margin: auto;
  }

  .flexbox > div {
    flex: 90% 0 0;
  }
  .flexbox .item2{
    margin: 6vh auto 4vh 3vw;
  }
    #spec .spec-inner {
    width: 90%;
  }

    #spec ul.store_text {
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;

    display: flex;
    flex-direction: column;
    padding: 0;
     margin: auto;

     font-size: 5.5vw;
  }

  #spec .store_banner {
    display: block;
    height: 20vh;
    width: 100%;
  }
  #spec .store_banner a.left{
    margin: 1vh 0.5vw auto auto ;
  }
  #spec .store_banner a.right{
    margin: 1vh auto auto 0.5vw;
  }
}
@media screen and (max-width: 650px) {
#spec .store_banner {
    display: -webkit-flex;
    display: flex;
}
}
@media screen and (max-width: 480px) {

  #spec .app_info .app_info_icon {
    height: 20vh;
    width: 100%;
    margin: 0 auto 5vh auto;
  }

  #spec .app_info_text {
    height: 17vh;
    width: 100%;
  }

  .flexbox > div {
    padding: 1em 0 0 0;
    flex: 90% 0 0;
    margin: 0 auto 2vh auto;
  }
  .flexbox .item2{
    margin: 0.4em auto 0.4em auto;
  }

  #spec ul.store_text {
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;

    width: 90%;
    display: flex;
    flex-direction: column;
    padding: 0;
    margin: auto;

    font-size: 30px;
    font-size: calc(3.2rem + ((1vw - 0.64rem) * 0.7143));
  }


#spec .twitter_text_pc {
  display: none;
}
#spec .twitter_text_sp {
  display: block;
}

#spec .spec-inner {
  width: 95%;
  margin: 1vh auto;
}
/* #spec .app_info {
  display: block;
  margin: 1vh auto;
} */

  #spec {
height: unset;
  }
  table.spec-table {
font-size: 3vw;
padding: 7vw 0 1.5vw;
  }
  img.icon {
/* height: 24vw;
padding-right: 5vw;
padding-top: 2vw; */
  }

  #store-button-table {
width: unset;
padding: 0 0 3vw 25vw;
margin: 0 auto;
table-layout:fixed;
  }
  a.spec-app-store {
width: 30.173913043vw;
height: 59.2592592593px;
  }
  a.spec-googleplay {
max-height: none;
width: 30.030135725vw;
  }
  a.spec-googleplay img {
max-height:none;
  }
  td.td-apple {
width: unset;
padding-left: 4vw;
  }
  td.td-google {
width: unset;
padding-left: 3vw;
  }

  #spec .store_banner {
  display: -webkit-flex;
  display: flex;

  height: 8vh;
    width: 100%;
}
#spec .store_banner a.left{
  margin: 1vh 0.5vw auto auto ;
}
#spec .store_banner a.right{
  margin: 1vh auto auto 0.5vw;
}
}

@media screen and (max-width: 345px) {
  #spec ul.store_text {
    width: 100%;
  }
}


@media screen and (min-width: 1041px) {
  img.icon {
padding-right: 93.6px;
  }

  table.spec-table {
/* padding: 72.8px; */
  }
  table.spec-table th {
padding-right: 20.8px;
  }
}


/************** 画像ポップアップ用 ***************/
#popup-background{
position:fixed;
top: 0;
left: 0;
height: 100%;
width: 100%;
background:#000;
opacity: 0.60;
margin: 0;
padding: 0;
z-index:1000000;
}
#popup-item{
position:fixed;
top: 50%;
left: 50%;
margin: 0;
padding: 0;
z-index:1000001;
}



/************** リンクの挙動 ***************/
a {
outline: none;
text-decoration: none;
}
a:link, a:visited {
color: #fff;
transition: 0.3s;
-webkit-transition: 0.3s;
}
.kiji-honbun a {
text-decoration: underline;
color: #E9C286;
}
a img {
transition: opacity .3s ease;
-webkit-transition: opacity .3s ease;
-moz-transition: opacity .3s ease;
-ms-transition: opacity .3s ease;
}

/************** ページ全体のフェード ***************/
body {
/* animation: fadeIn 1s ease 0s 1 normal;
-webkit-animation: fadeIn 1s ease 0s 1 normal; */
}
@keyframes fadeIn {
/* 0% {opacity: 0}
100% {opacity: 1} */
}
@-webkit-keyframes fadeIn {
/* 0% {opacity: 0}
100% {opacity: 1} */
}

/************** Animate.CSSの設定 ***************/
@media only screen and (min-width: 737px) {
.animated {
animation-duration: 1s;
animation-fill-mode: both;
}
.animated.infinite {
animation-iteration-count: infinite;
}
.animated.hinge {
animation-duration: 2s;
}
.animated.flipOutX,
.animated.flipOutY,
.animated.bounceIn,
.animated.bounceOut {
animation-duration: .75s;
}
}
@keyframes fadeInUp {
from {
opacity: 0;
transform: translate3d(0, 100%, 0);
}
to {
opacity: 1;
transform: none;
}
}
.fadeInUp {
animation-name: fadeInUp;
-webkit-animation-duration: 1.7s;
animation-duration: 1.7s;
-webkit-animation-delay: .5s;
animation-delay:.5s;
}
@keyframes fadeInUp2 {
from {
opacity: 0;
transform: translate3d(0, 3%, 0);
}
to {
opacity: 1;
transform: none;
}
}
.fadeInUp2 {
animation-name: fadeInUp2;
-webkit-animation-duration: 1.2s;
animation-duration: 1.2s;
-webkit-animation-delay: .3s;
animation-delay: .3s;
}

@keyframes fadeInDown {
  from {
    opacity: 0;
    transform: translate3d(0, -10%, 0);
  }
  to {
    opacity: 1;
    transform: none;
  }
}
.fadeInDown {
  animation-name: fadeInDown;
  animation-duration: 1.5s;
  -webkit-animation-duration: 1.5s;
}



/************** Hover.CSSの設定 ***************/
/* Buzz Out */
@-webkit-keyframes hvr-buzz-out {
  10% {
-webkit-transform: translateX(3px) rotate(2deg);
transform: translateX(3px) rotate(2deg);
  }
  20% {
-webkit-transform: translateX(-3px) rotate(-2deg);
transform: translateX(-3px) rotate(-2deg);
  }
  30% {
-webkit-transform: translateX(3px) rotate(2deg);
transform: translateX(3px) rotate(2deg);
  }
  40% {
-webkit-transform: translateX(-3px) rotate(-2deg);
transform: translateX(-3px) rotate(-2deg);
  }
  50% {
-webkit-transform: translateX(2px) rotate(1deg);
transform: translateX(2px) rotate(1deg);
  }
  60% {
-webkit-transform: translateX(-2px) rotate(-1deg);
transform: translateX(-2px) rotate(-1deg);
  }
  70% {
-webkit-transform: translateX(2px) rotate(1deg);
transform: translateX(2px) rotate(1deg);
  }
  80% {
-webkit-transform: translateX(-2px) rotate(-1deg);
transform: translateX(-2px) rotate(-1deg);
  }
  90% {
-webkit-transform: translateX(1px) rotate(0);
transform: translateX(1px) rotate(0);
  }
  100% {
-webkit-transform: translateX(-1px) rotate(0);
transform: translateX(-1px) rotate(0);
  }
}
@keyframes hvr-buzz-out {
  10% {
-webkit-transform: translateX(3px) rotate(2deg);
transform: translateX(3px) rotate(2deg);
  }
  20% {
-webkit-transform: translateX(-3px) rotate(-2deg);
transform: translateX(-3px) rotate(-2deg);
  }
  30% {
-webkit-transform: translateX(3px) rotate(2deg);
transform: translateX(3px) rotate(2deg);
  }
  40% {
-webkit-transform: translateX(-3px) rotate(-2deg);
transform: translateX(-3px) rotate(-2deg);
  }
  50% {
-webkit-transform: translateX(2px) rotate(1deg);
transform: translateX(2px) rotate(1deg);
  }
  60% {
-webkit-transform: translateX(-2px) rotate(-1deg);
transform: translateX(-2px) rotate(-1deg);
  }
  70% {
-webkit-transform: translateX(2px) rotate(1deg);
transform: translateX(2px) rotate(1deg);
  }
  80% {
-webkit-transform: translateX(-2px) rotate(-1deg);
transform: translateX(-2px) rotate(-1deg);
  }
  90% {
-webkit-transform: translateX(1px) rotate(0);
transform: translateX(1px) rotate(0);
  }
  100% {
-webkit-transform: translateX(-1px) rotate(0);
transform: translateX(-1px) rotate(0);
  }
}
@media only screen and (min-width: 737px) {
.hvr-buzz-out {
display: inline-block;
vertical-align: middle;
-webkit-transform: perspective(1px) translateZ(0);
transform: perspective(1px) translateZ(0);
box-shadow: 0 0 1px transparent;
}
.hvr-buzz-out:hover, .hvr-buzz-out:focus, .hvr-buzz-out:active {
-webkit-animation-name: hvr-buzz-out;
animation-name: hvr-buzz-out;
-webkit-animation-duration: 0.75s;
animation-duration: 0.75s;
-webkit-animation-timing-function: linear;
animation-timing-function: linear;
-webkit-animation-iteration-count: 1;
animation-iteration-count: 1;
}
}
/* Bob */
@-webkit-keyframes hvr-bob {
  0% {
-webkit-transform: translateY(-8px);
transform: translateY(-8px);
  }
  50% {
-webkit-transform: translateY(-4px);
transform: translateY(-4px);
  }
  100% {
-webkit-transform: translateY(-8px);
transform: translateY(-8px);
  }
}
@keyframes hvr-bob {
0% {
-webkit-transform: translateY(-8px);
transform: translateY(-8px);
}
50% {
-webkit-transform: translateY(-4px);
transform: translateY(-4px);
}
100% {
-webkit-transform: translateY(-8px);
transform: translateY(-8px);
}
}
@-webkit-keyframes hvr-bob-float {
100% {
-webkit-transform: translateY(-8px);
transform: translateY(-8px);
}
}
@keyframes hvr-bob-float {
100% {
-webkit-transform: translateY(-8px);
transform: translateY(-8px);
}
}
@media only screen and (min-width: 737px) {
.hvr-bob {
display: inline-block;
vertical-align: middle;
-webkit-transform: perspective(1px) translateZ(0);
transform: perspective(1px) translateZ(0);
box-shadow: 0 0 1px transparent;
}
.hvr-bob:hover, .hvr-bob:focus, .hvr-bob:active {
-webkit-animation-name: hvr-bob-float, hvr-bob;
animation-name: hvr-bob-float, hvr-bob;
-webkit-animation-duration: .3s, 1.5s;
animation-duration: .3s, 1.5s;
-webkit-animation-delay: 0s, .3s;
animation-delay: 0s, .3s;
-webkit-animation-timing-function: ease-out, ease-in-out;
animation-timing-function: ease-out, ease-in-out;
-webkit-animation-iteration-count: 1, infinite;
animation-iteration-count: 1, infinite;
-webkit-animation-fill-mode: forwards;
animation-fill-mode: forwards;
-webkit-animation-direction: normal, alternate;
animation-direction: normal, alternate;
}
}
/* Rotate */
.hvr-rotate {
display: inline-block;
vertical-align: middle;
-webkit-transform: perspective(1px) translateZ(0);
transform: perspective(1px) translateZ(0);
box-shadow: 0 0 1px transparent;
-webkit-transition-duration: 0.3s;
transition-duration: 0.3s;
-webkit-transition-property: transform;
transition-property: transform;
}
.hvr-rotate:hover, .hvr-rotate:focus, .hvr-rotate:active {
-webkit-transform: rotate(4deg);
transform: rotate(4deg);
}

/* Underline From Left */
.hvr-underline-from-left {
display: inline-block;
vertical-align: middle;
-webkit-transform: perspective(1px) translateZ(0);
transform: perspective(1px) translateZ(0);
box-shadow: 0 0 1px transparent;
position: relative;
overflow: hidden;
}
.hvr-underline-from-left:before {
content: "";
position: absolute;
z-index: -1;
left: 0;
right: 100%;
bottom: 0;
background: #fffc00;
height: .1vh;
-webkit-transition-property: right;
transition-property: right;
-webkit-transition-duration: 0.2s;
transition-duration: 0.2s;
-webkit-transition-timing-function: ease-out;
transition-timing-function: ease-out;
}
.hvr-underline-from-left:hover:before, .hvr-underline-from-left:focus:before, .hvr-underline-from-left:active:before {
right: 0;
}





/************** loading.CSSの設定 ***************/

#loading {
  position: fixed;
  width: 100%;
  height: 100%;
  background: #000000;
  z-index: 999999999;
  transition: .5s;
  transition-delay: .7s;
  pointer-events: none;
}
#loading .orbit-spinner {
  width: 15vw;
  height: 15vw;

  text-align: center;
  margin: auto;
}
#loading .loadingItem {
  width: 50%;
  height: 100%;
  text-align: center;

  margin: 20vw auto;
}

#loading .loadingItem p{
  text-align: center;
}

.loading {
  font-family: "Audiowide", sans-serif;

  font-size: 35px;
  font-size: calc(3.4rem + ((1vw - 0.64rem) * 0.7143));
}

.loading span {
  display: inline-block;
  margin: 0 0.05em;
  animation: loading .7s infinite alternate;
}
.loading span:nth-child(2) {
  animation-delay: .1s;
}
.loading span:nth-child(3) {
  animation-delay: .2s;
}
.loading span:nth-child(4) {
  animation-delay: .3s;
}
.loading span:nth-child(5) {
  animation-delay: .4s;
}
.loading span:nth-child(6) {
  animation-delay: .5s;
}
.loading span:nth-child(7) {
  animation-delay: .6s;
}
@keyframes loading {
  0% {
    color: #f9f9f9;
    opacity: 1;
    transform: scale(1.1) ;
  }
  100% {
    color: #393939;
    opacity: 0.7;
    transform: scale(1);
  }
}

@media screen and (max-width: 480px) {
  #loading .orbit-spinner {
    width: 30vw;
    height: 30vw;
  }

  #loading .loadingItem {
    margin: 30vw auto;
  }

  .loading {
    font-family: "Audiowide", sans-serif;

    font-size: 30px;
    font-size: calc(3.0rem + ((1vw - 0.64rem) * 0.7143));
  }
}

.orbit-spinner, .orbit-spinner * {
  box-sizing: border-box;
}

.orbit-spinner {
  height: 55px;
  width: 55px;
  border-radius: 50%;
  perspective: 800px;
}

.orbit-spinner .orbit {
  position: absolute;
  box-sizing: border-box;
  width: 100%;
  height: 100%;
  border-radius: 50%;
}

.orbit-spinner .orbit:nth-child(1) {
  left: 0%;
  top: 0%;
  animation: orbit-spinner-orbit-one-animation 1200ms linear infinite;
  border-bottom: 3px solid #620474;
}

.orbit-spinner .orbit:nth-child(2) {
  right: 0%;
  top: 0%;
  animation: orbit-spinner-orbit-two-animation 1200ms linear infinite;
  border-right: 3px solid #620474;
}

.orbit-spinner .orbit:nth-child(3) {
  right: 0%;
  bottom: 0%;
  animation: orbit-spinner-orbit-three-animation 1200ms linear infinite;
  border-top: 3px solid #620474;
}

@keyframes orbit-spinner-orbit-one-animation {
  0% {
transform: rotateX(35deg) rotateY(-45deg) rotateZ(0deg);
  }
  100% {
transform: rotateX(35deg) rotateY(-45deg) rotateZ(360deg);
  }
}

@keyframes orbit-spinner-orbit-two-animation {
  0% {
transform: rotateX(50deg) rotateY(10deg) rotateZ(0deg);
  }
  100% {
transform: rotateX(50deg) rotateY(10deg) rotateZ(360deg);
  }
}

@keyframes orbit-spinner-orbit-three-animation {
  0% {
transform: rotateX(35deg) rotateY(55deg) rotateZ(0deg);
  }
  100% {
transform: rotateX(35deg) rotateY(55deg) rotateZ(360deg);
  }
}



/************** (header)グローバルナビゲーション ***************/

header {
  display: inline-block;
  position:fixed;

  width: 100%;
  font-size: 1.6vw;
  background-color: rgba(0,0,0,0.8);
  background: rgba(0,0,0,0.8);
  box-shadow:0 2px 8px rgba(30,30,80,.3);
  left:0;
  line-height:1;
  top:0;
  height:8vh;
  z-index: 999;
}

header div.toplink{
  position: absolute;
  width: auto;
  height:5vh;
  top: 1vh;
  left: 1vw;
  margin: 0.5vh 1vh auto;
}
header div.toplink img{
  width: 4.5vw;
  width: 5.0vh;
  cursor: pointer;
}

header b{
  font-family:  "Ro GSan Serif Std B", "Audiowide", sans-serif;
  color: #fffc00;

  font-size: 2.6vw;
  font-size: calc(1.6rem + ((1vw - 0.64rem) * 0.7143));
  font-weight: bold;
}

header small{
  font-family:  "Sawarabi Gothic", sans-serif;
  color: #ffffff;

  font-size: .9vw;
  font-size: calc(0.9rem + ((1vw - 0.64rem) * 0.7143));
}

header b.off {
  font-family:  "Ro GSan Serif Std B", "Audiowide", sans-serif;
  color: #4D4B00;

  font-size: 2.6vw;
  font-size: calc(1.6rem + ((1vw - 0.64rem) * 0.7143));
  font-weight: bold;
}

header small.off{
  font-family:  "Sawarabi Gothic", sans-serif;
  color: #999999;

  font-size: .9vw;
  font-size: calc(0.9rem + ((1vw - 0.64rem) * 0.7143));
}
header a.off {
  pointer-events:none;
}

@media screen and (max-width: 480px) {

  header b{
/*
   font-size: 2.6vw;
   font-size: calc(1.6rem + ((1vw - 0.64rem) * 0.7143));
  */
  }
  header small{
    font-size: 1.2vw;
    font-size: calc(1.2rem + ((1vw - 0.64rem) * 0.7143));
  }
}

header b::after{
  content: "\A";
  white-space: pre;
}


#global-nav,
#global-nav-fixed {

}
#global-nav-fixed {

}
#global-nav span,
#global-nav-fixed span {
  display: inline-block;
  float: left;
  position: absolute;
  top: .5%;
  left: 7px;
  height: 3.8vw;
  max-height: 39.52px;
}
#global-nav-fixed span {
  top: 8.5%;
}
#global-nav img,
#global-nav-fixed img {
  height: 100%;
}
#global-nav ul,
#global-nav-fixed ul {
  padding:0;
  list-style-type:none;
  display:box;
  overflow: hidden;
}
#global-nav ul li,
#global-nav-fixed ul li {
  float: right;
  padding: 1.2vw 1.25vw 1.2vw 1.25vw;
}
#global-nav ul li + li,
#global-nav-fixed ul li + li {
  float: right;
  padding: 1.2vw 1.25vw 1.2vw 1.25vw;
}


@media screen and (min-width: 1041px) {
  #global-nav,
  #global-nav-fixed {
font-size: 16.64px;
  }
  #global-nav ul li,
  #global-nav-fixed ul li {
padding: 12.48px 13px 12.48px 13px;
  }
  #global-nav ul li + li,
  #global-nav-fixed ul li + li{
padding: 12.48px 13px 12.48px 13px;
  }
}

/** スマホ用グローバルナビ **/
#global-nav-sp {
  position: fixed;
  z-index: 9999;
  top: 0;
  left: 0;
  text-align: center;
  transform: translateY(-100%);
  transition: all 0.6s;
  width: 100%;
}

#global-nav-sp ul {
  background: #000;
  margin: 0 auto;
  padding: 0;
  width: 100%;
}

#global-nav-sp ul li {
  font-size: 4.5vw;
  list-style-type: none;
  width: 100%;
  border-bottom: 1px solid #333;
  /* padding: 3.5vw 0; */
}

/* 最後はラインを描かない */
#global-nav-sp ul li:last-child {
  /* padding: 3.5vw 0; */
  /* border-bottom: none; */
}

#global-nav-sp ul li a {
  color: #fff;
  display: block;
  width: 100%;
  padding: 3.5vw 0;
}

/* このクラスを、jQueryで付与・削除する */
#global-nav-sp.active {
  transform: translateY(0%);
}
.navToggle {
  display: none;
  position: fixed;
  right: 4%;
  top: 4.5vw;
  width: 8.15vw;
  height: 5.434782608vw;
  cursor: pointer;
  z-index: 10000;
}

.navToggle span {
  display: block;
  position: absolute;
  width: 100%;
  border-bottom: solid .815vw #fff;
  -webkit-transition: .35s ease-in-out;
  -moz-transition: .35s ease-in-out;
  transition: .35s ease-in-out;
}

.navToggle span:nth-child(1) {
  top: 0;
}

.navToggle span:nth-child(2) {
  top: 2.309891304vw;
}

.navToggle span:nth-child(3) {
  bottom: 0;
}

.navToggle span:nth-child(4) {
  border: none;
  color: #eee;
  font-size: 9px;
  font-weight: bold;
  top: 34px;
}

/* 最初のspanをマイナス45度に */
.navToggle.active span:nth-child(1) {
  top: 2.2vw;
  left: 0;
  -webkit-transform: rotate(-45deg);
  -moz-transform: rotate(-45deg);
  transform: rotate(-45deg);
}

/* 2番目と3番目のspanを45度に */
.navToggle.active span:nth-child(2),
.navToggle.active span:nth-child(3) {
  top: 2.2vw;
  right: 0;
  bottom: unset;
  -webkit-transform: rotate(45deg);
  -moz-transform: rotate(45deg);
  transform: rotate(45deg);
}

.nnn {
  display: none;
}

/* Toggle Button */
#nav-toggle {
  display: none;
  position: absolute;
  right: 25px;
  top: 20px;
  width:30px;
  height: 28px;
  cursor: pointer;
  z-index: 600;
}
#nav-toggle span {
  display: block;
  position: absolute;
  height: 2px;
  width: 100%;
  background: #E9C286;
  left: 0;
  -webkit-transition: .35s ease-in-out;
  -moz-transition: .35s ease-in-out;
  transition: .35s ease-in-out;
}
#nav-toggle span:nth-child(1) {
  top: 0;
}
#nav-toggle span:nth-child(2) {
  top: 11px;
}
#nav-toggle span:nth-child(3) {
  top: 22px;
}

@media screen and (max-width: 480px) {
  .navToggle {
display: block;
  }
  #global-nav-fixed,
  #global-nav {
display: none;
  }
  #top-head {
background-image: none;
  }
  .top-illust {
/* margin: 8vh auto -1vh auto;
max-height: 300px; */
  }
  div.logo {
width: 20%;
  }
}

/****************************
 * Grid
 ****************************/
.content {
  width: 100%;
  margin: 0 auto;
  overflow: hidden;
  padding: 0 1em;
}

.row {
  width: auto;
  overflow: hidden;
}

.grid {
  float: none;
  margin: 0;
  width: auto;
}

.mrow {
  margin: 0 -1em;
}

.mgrid {
  float: left;
  padding: 0 1em;
  overflow: hidden;
}

.mgrid-1 {
  width: 8.3333%;
}

.mgrid-2 {
  width: 16.6666%;
}

.mgrid-3 {
  width: 25%;
}

.mgrid-4 {
  width: 33.3333%;
}

.mgrid-5 {
  width: 41.6666%;
}

.mgrid-6 {
  width: 50%;
}

.mgrid-7 {
  width: 58.3333%;
}

.mgrid-8 {
  width: 66.6666%;
}

.mgrid-9 {
  width: 75%;
}

.mgrid-10 {
  width: 83.3333%;
}

.mgrid-11 {
  width: 91.6666%;
}

.mgrid-12 {
  width: 100%;
}

@media screen and (min-width: 800px) {
  .content {
padding: 0 1.8em;
 } }

@media screen and (min-width: 960px) {
  .row {
margin: 0 -1em;
 }
  .grid {
float: left;
padding: 0 1em;
overflow: hidden;
 }
  .grid-center {
margin-left: auto;
margin-right: auto;
float: none;
 }
  .grid-full {
padding: 0; }
  /* for columns */
  .grid-1 {
width: 8.3333%; }
  .grid-2 {
width: 16.6666%; }
  .grid-3 {
width: 25%; }
  .grid-4 {
width: 33.3333%; }
  .grid-5 {
width: 41.6666%; }
  .grid-6 {
width: 50%; }
  .grid-7 {
width: 58.3333%; }
  .grid-8 {
width: 66.6666%; }
  .grid-9 {
width: 75%; }
  .grid-10 {
width: 83.3333%; }
  .grid-11 {
width: 91.6666%; }
  .grid-12 {
width: 100%; }
  /* push */
  .push-7 {
margin-left: 58.3333%; } }

@media screen and (min-width: 1240px) {
  .content, .row {
    max-width: 1240px;
  }
}

.flexbox .item2{
}
.flexbox .item2 ul li{
  width: 100%;
  margin: 0 0 0 0;
}

.flexbox .item2 li span.left{
  margin-right: 1em;
  text-align: right;
  width: 20%;
}
.flexbox .item2 li span.right{
  text-align: left;
  width: 75%;
}