@charset "UTF-8";
/* 各種指定
--------------------------- */
* {
  margin: 0;
  padding: 0;
  border: 0;
}

html {
  overflow-y: scroll;
}

html, body {
  width: 100%;
  overflow-x: hidden;
  position: relative;
}

body {
  width: 100%;
  font-family: "游ゴシック", "Yu Gothic", "游ゴシック体", "YuGothic", "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "Meiryo UI", "メイリオ", "Avenir", "Open Sans", "Helvetica Neue", Helvetica, Arial, Verdana, Roboto, Meiryo, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
  color: #a3a6a7;
}

.wrapper {
  width: 100%;
  height: 100%;
  overflow-x: hidden;
}

.emj {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 90%;
}

/* プロモ用
--------------------------- */
.prmtitle {
  position: absolute;
  width: 80%;
  max-width: 800px;
  top: 50%;
  left: 50%;
  -webkit-transform: translate(-50%, -50%);
  /* Safari用 */
  transform: translate(-50%, -50%);
}
.prmtitle img {
  width: 100%;
}
.prmtitle h1 {
  display: none;
}

/* 初期ムービー
--------------------------- */
#movie_first {
  display: none;
}

/* メニュー
--------------------------- */
.smicon {
  position: fixed;
  width: 40px;
  height: 40px;
  border-radius: 10%;
  z-index: 350;
  top: 10px;
  right: 10px;
}
.smicon span {
  font-size: 20px;
  border-radius: 10%;
  padding: 10px;
  width: 20px;
  height: 20px;
  position: absolute;
  top: 50%;
  left: 50%;
  margin-top: -20px;
  margin-left: -20px;
}
.smicon span.icon-navicon {
  color: #ffffff;
  background-color: #ff75a4;
}
.smicon span.icon-cross {
  color: #ff75a4;
  display: none;
}

#menu {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  z-index: 300;
  display: none;
}
#menu .menuback {
  width: 100%;
  height: 30px;
  position: absolute;
  background-color: rgba(255, 255, 255, 0.6);
  border-bottom: 1px rgba(255, 117, 164, 0.6) solid;
  display: none;
}
#menu ul {
  width: 100%;
  height: 100%;
  background-color: rgba(255, 255, 255, 0.8);
  padding: 30px 0;
  list-style-type: none;
}
#menu ul li {
  height: 25px;
  padding: 25px 0;
}
#menu ul li img {
  height: 25px;
  width: auto;
}
#menu ul li:hover {
  animation: fadelink 0.5s ease 0s 1 normal both;
}
#menu ul li.m_volicon {
  display: none;
}
#menu ul li.m_volicon span.icon-volume-medium {
  color: #ff75a4;
}
#menu ul li.m_volicon span.icon-volume-mute2 {
  color: #999999;
  display: none;
}

/* メインイメージ
--------------------------- */
#main {
  position: relative;
  height: 100vh;
}
#main .main_mei {
  position: absolute;
  width: 100%;
  height: 100%;
  background-image: url(../img/mainimg.png);
  background-size: cover;
  background-position: center center;
  background-repeat: no-repeat;
}
#main .mainsd_cyn, #main .mainsd_aki, #main .mainsd_mil {
  position: absolute;
}
#main .mainsd_cyn img, #main .mainsd_aki img, #main .mainsd_mil img {
  width: 100%;
}
#main .mainsd_cyn {
  width: 100px;
  height: 100px;
  top: 50%;
  right: -10px;
  margin-top: -220px;
}
#main .sdcyn_anime {
  animation: main_cyn_anime 10s ease 6s infinite normal both;
}
#main .mainsd_aki {
  width: 90px;
  height: 90px;
  right: 5px;
  padding-top: 0;
  margin-top: 0;
}
#main .sdaki_anime {
  animation: main_aki_anime 10s ease 3s infinite normal both;
}
#main .mainsd_mil {
  width: 100px;
  height: 100px;
  top: 50%;
  left: -25px;
  padding-top: 25px;
  margin-top: -160px;
}
#main .sdmil_anime {
  animation: main_milia_anime 10s ease 0s infinite normal both;
}
#main .title {
  width: 100%;
  position: absolute;
  top: 40px;
  left: 0;
  animation-timing-function: ease-out;
}
#main .title img {
  width: 100%;
}
#main .title h1 {
  display: none;
}
#main .aori_first {
  display: none;
  position: absolute;
  width: 70%;
  top: 50%;
  left: 50%;
  animation-timing-function: ease-out;
  -webkit-transform: translate(-50%, -50%);
  /* Safari用 */
  transform: translate(-50%, -50%);
}
#main .aori_first h2 {
  display: none;
}
#main .aori_first img {
  width: 100%;
}
#main .aori_main {
  position: absolute;
  width: 104%;
  bottom: 90px;
  left: 51%;
  -webkit-transform: translate(-50%, -50%);
  /* Safari用 */
  transform: translate(-50%, -50%);
}
#main .aori_main h2, #main .aori_main h3 {
  display: none;
}
#main .aori_main img {
  width: 100%;
  transform: rotate(6deg);
}
#main .todown {
  width: 40px;
  position: absolute;
  left: 50%;
  margin-left: -20px;
  bottom: 90px;
}
#main .todown img {
  width: 100%;
}

/* コンテンツ
--------------------------- */
.contents {
  width: 100%;
  margin: 0 auto;
  position: relative;
  top: -20px;
  z-index: 30;
  font-size: 12px;
}

#movie, #story, #chara, #product, #creator, #info {
  width: 100%;
  position: relative;
  padding-bottom: 30px;
}
#movie:before, #story:before, #chara:before, #product:before, #creator:before, #info:before {
  z-index: 50;
}
#movie .title, #story .title, #chara .title, #product .title, #creator .title, #info .title {
  width: 50%;
  position: relative;
  z-index: 110;
  margin-left: 20px;
}
#movie .title img, #story .title img, #chara .title img, #product .title img, #creator .title img, #info .title img {
  width: 100%;
}

.incont {
  width: 100%;
  max-width: 900px;
  position: relative;
  margin: 0 auto;
  padding-top: 35px;
  padding-bottom: 20px;
}
.incont[data-emergence=hidden] {
  opacity: 0;
}
.incont[data-emergence=visible] {
  animation: incont_fadein 0.8s ease 0s 1 normal both;
  opacity: 1;
}

#movie, #chara, #creator {
  background-color: #ff75a4;
}
#movie:before, #chara:before, #creator:before {
  content: '';
  width: 100%;
  height: 16px;
  background-image: url(../img/san_pink.png);
  background-position: 50% 0;
  background-repeat: repeat-x;
  position: absolute;
  top: -15px;
  left: 0;
  display: block;
}

#story, #product, #info {
  background-color: #ffffff;
}
#story:before, #product:before, #info:before {
  content: '';
  width: 100%;
  height: 16px;
  background-image: url(../img/san_white.png);
  background-position: 50% 0;
  background-repeat: repeat-x;
  position: absolute;
  top: -15px;
  left: 0;
  display: block;
}

/* MOVIE
--------------------------- */
#movie .sd_cyn {
  width: 80px;
  position: absolute;
  z-index: 100;
}
#movie .sd_cyn:hover img {
  animation: swing 1s;
}
#movie .sd_cyn img {
  width: 100%;
}
#movie .sd_cyn[data-emergence=hidden] {
  opacity: 0;
  transform: rotate(15deg);
  top: -100px;
  right: -50px;
}
#movie .sd_cyn[data-emergence=visible] {
  animation: sd_cyn_anime 0.8s ease 0s 1 normal both;
  opacity: 1;
  transform: rotate(0deg);
  top: -50px;
  right: -20px;
}
#movie .inswipemv {
  width: 75%;
  margin: 0 auto;
}
#movie .inswipemv h3 {
  text-align: center;
  font-family: "Rounded Mplus 1c", "游ゴシック", "Yu Gothic", "游ゴシック体", "YuGothic", "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "Meiryo UI", "メイリオ", "Avenir", "Open Sans", "Helvetica Neue", Helvetica, Arial, Verdana, Roboto, Meiryo, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
  font-size: 12px;
  color: #ffffff;
  margin-bottom: 8px;
}
#movie .inswipemv .video {
  position: relative;
  width: 100%;
}
#movie .inswipemv .video img {
  width: 100%;
  vertical-align: middle;
  border: solid #fff 1px;
  border-radius: 10px;
}
#movie .inswipemv .video figure {
  overflow: hidden;
  position: relative;
  display: table;
}
#movie .inswipemv .video figure:before {
  content: "\ea15";
  font-family: 'icomoon' !important;
  font-size: 70px;
  position: absolute;
  top: 50%;
  left: 50%;
  -webkit-transform: translateY(-50%) translateX(-50%);
  transform: translateY(-50%) translateX(-50%);
  z-index: 9999;
  opacity: 0.8;
}
#movie .inswipemv .video figure:after {
  content: "";
  background-color: rgba(0, 0, 0, 0.1);
  width: 100%;
  height: 100%;
  position: absolute;
  left: 0;
  top: 0;
  z-index: 9998;
}
#movie .inswipemv .video figure:hover:before {
  animation: playicon 0.1s ease-out 0s 1 normal both;
}
#movie .swiper-button-prev span, #movie .swiper-button-next span {
  font-size: 40px;
  color: rgba(80, 80, 80, 0.6);
}
#movie .swiper-button-next {
  text-align: right;
}
#movie .mimi01 {
  position: absolute;
  width: 12px;
  top: 25px;
  left: 55%;
}
#movie .mimi01 img {
  width: 100%;
}
#movie .mimi02 {
  position: relative;
  width: 35px;
  left: 25px;
  bottom: 10px;
}
#movie .mimi02 img {
  width: 100%;
}

/* STORY
--------------------------- */
#story .mimi {
  width: 60px;
  position: absolute;
  left: 40%;
  top: 20px;
}
#story .mimi img {
  width: 100%;
}
#story .mfkg {
  width: 30%;
  position: absolute;
  top: 25px;
  right: 20px;
}
#story .mfkg img {
  width: 100%;
}
#story .mfkg p {
  display: none;
}
#story .aori {
  width: 90%;
  position: relative;
  top: 5px;
  margin: 0 auto;
  z-index: 100;
}
#story .aori img {
  width: 100%;
}
#story .aori p {
  display: none;
}
#story .aori[data-emergence=hidden] {
  opacity: 0;
}
#story .aori[data-emergence=visible] {
  animation: slideInUp 0.8s ease 0s 1 normal both;
  opacity: 1;
}
#story .storycont {
  width: 300px;
  font-size: 13.5px;
  position: absolute;
  z-index: 100;
  right: 10px;
  bottom: 120px;
}
#story .storycont p {
  color: #898c8e;
  text-shadow: #ffffff 0px 0px 1px, #ffffff 0px 0px 1px, #ffffff 0px 0px 1px, #ffffff 0px 0px 1px, #ffffff 0px 0px 1px, #ffffff 0px 0px 1px, #ffffff 0px 0px 1px, #ffffff 0px 0px 1px;
}
#story .storycont[data-emergence=hidden] {
  opacity: 0;
}
#story .storycont[data-emergence=visible] {
  animation: fadein 1s ease 0s 1 normal both;
  opacity: 1;
}
#story .four_chara {
  width: 165%;
  position: relative;
  top: -65px;
  left: -41%;
  z-index: 80;
}
#story .four_chara img {
  width: 100%;
}
#story .four_chara[data-emergence=hidden] {
  opacity: 0;
}
#story .four_chara[data-emergence=visible] {
  animation: bounceIn 0.8s ease 0s 1 normal both;
  opacity: 1;
}

/* CHARACTER
--------------------------- */
#chara {
  margin-top: -110px;
}
#chara .mimi {
  position: absolute;
  width: 50px;
  top: 20px;
  right: 5px;
}
#chara .mimi img {
  width: 100%;
}
#chara .incont {
  height: 280px;
}
#chara .swiper-container {
  position: absolute;
  width: 100%;
  height: 280px;
  top: 85px;
}
#chara .swiper-container .swiper-button-prev span, #chara .swiper-container .swiper-button-next span {
  font-size: 30px;
  color: rgba(255, 255, 255, 0.6);
}
#chara .swiper-container .swiper-button-next {
  text-align: right;
}
#chara .swiper-container .swiper-pagination-bullet {
  width: 50px;
  height: 50px;
}
#chara .swiper-container .swiper-pagination-bullet img {
  width: 50px;
  height: 50px;
  border-radius: 50%;
  border: 2.5px #ffffff solid;
}
#chara .swiper-container .swiper-pagination-bullet-active img {
  border: 2.5px rgba(255, 255, 255, 0.6) solid;
}
#chara .inswipech img.chara_main {
  position: absolute;
  width: 55%;
  opacity: 0;
}
#chara .inswipech .characont {
  color: #ffffff;
  width: 45%;
  position: absolute;
  top: 10px;
  right: 30px;
}
#chara .inswipech .characont h2 {
  font-size: 25px;
}
#chara .inswipech .characont p {
  font-size: 10px;
  line-height: 1rem;
}
#chara .mei img {
  top: 10px;
}
#chara .aki img {
  top: 20px;
}
#chara .swiper-slide-active img.chara_main {
  opacity: 1;
  animation: bounceInUp2 0.5s ease-out 0.1s 1 normal both;
}
#chara .swiper-slide-active .characont {
  opacity: 0;
  animation: fadeIn 0.5s ease-in 0.2s 1 normal both;
}

/* PRODUCT
--------------------------- */
#product .package {
  width: 80%;
  margin: 0 auto;
}
#product .package img {
  width: 100%;
}
#product .package[data-emergence=hidden] {
  opacity: 0;
}
#product .package[data-emergence=visible] {
  animation: bounceIn 0.8s ease 0s 1 normal both;
  opacity: 1;
}
#product .aori {
  width: 90%;
  margin: 0 auto;
  padding-top: 30px;
}
#product .aori img {
  width: 100%;
}
#product .aori h2, #product .aori h3 {
  display: none;
}
#product .aori[data-emergence=hidden] {
  opacity: 0;
}
#product .aori[data-emergence=visible] {
  animation: fadeIn 0.8s ease 0s 1 normal both;
  opacity: 1;
}
#product .prodcont {
  width: 90%;
  margin: 0 auto;
  padding-top: 10px;
  font-size: 10px;
  padding-bottom: 15px;
}
#product .prodcont[data-emergence=hidden] {
  opacity: 0;
}
#product .prodcont[data-emergence=visible] {
  animation: fadeIn 0.8s ease 0s 1 normal both;
  opacity: 1;
}
#product .tracklist {
  font-family: "Rounded Mplus 1c", "游ゴシック", "Yu Gothic", "游ゴシック体", "YuGothic", "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "Meiryo UI", "メイリオ", "Avenir", "Open Sans", "Helvetica Neue", Helvetica, Arial, Verdana, Roboto, Meiryo, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
  width: 90%;
  margin: 0 auto;
}
#product .tracklist h2 {
  color: #ff75a4;
  font-weight: 800;
  font-size: 25px;
  padding-bottom: 15px;
}
#product .tracklist[data-emergence=hidden] {
  opacity: 0;
}
#product .tracklist[data-emergence=visible] {
  animation: fadeIn 0.8s ease 0s 1 normal both;
  opacity: 1;
}
#product .tracklist .cd, #product .tracklist .dvd {
  width: 100%;
  margin: 0 auto;
  padding-left: 10px;
  font-size: 14px;
  padding-bottom: 15px;
}
#product .tracklist .cd h3, #product .tracklist .dvd h3 {
  font-size: 20px;
  margin-bottom: 10px;
}
#product .tracklist .cd ol, #product .tracklist .dvd ol {
  margin-left: 2em;
  font-weight: 300;
}
#product .tracklist .cd ol li, #product .tracklist .dvd ol li {
  margin-bottom: 5px;
}
#product .tracklist .cd h3 {
  color: #9dbde4;
}
#product .tracklist .dvd h3 {
  color: #ee86b4;
}
#product .mimi {
  width: 60px;
  position: absolute;
  right: 20px;
  top: 20px;
}
#product .mimi img {
  width: 100%;
}

/* CREATOR
--------------------------- */
#creator .mimi {
  width: 80px;
  position: absolute;
  top: 25px;
  right: 40px;
}
#creator .mimi img {
  width: 100%;
}
#creator dl.creator_info {
  color: #ffffff;
  margin-top: 20px;
}
#creator dl.creator_info dt {
  width: 95px;
  float: left;
  clear: both;
  margin-top: 5px;
  margin-left: 25px;
}
#creator dl.creator_info dt img {
  width: 100%;
  border-radius: 50%;
  border: 2px #d7829f solid;
}
#creator dl.creator_info dd {
  width: 60%;
  margin-left: 135px;
  position: relative;
  margin-bottom: 30px;
}
#creator dl.creator_info dd p.name {
  font-size: 20px;
  font-weight: bold;
  font-family: "Rounded Mplus 1c", "游ゴシック", "Yu Gothic", "游ゴシック体", "YuGothic", "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "Meiryo UI", "メイリオ", "Avenir", "Open Sans", "Helvetica Neue", Helvetica, Arial, Verdana, Roboto, Meiryo, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
}
#creator dl.creator_info dd p.hp {
  width: 75px;
  text-align: center;
  background-color: #ffffff;
  border-radius: 5px;
  font-weight: bold;
  color: #ff75a4;
  font-family: "Rounded Mplus 1c", "游ゴシック", "Yu Gothic", "游ゴシック体", "YuGothic", "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "Meiryo UI", "メイリオ", "Avenir", "Open Sans", "Helvetica Neue", Helvetica, Arial, Verdana, Roboto, Meiryo, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
  position: absolute;
  top: 3px;
  right: 10px;
  border: 1px #ffffff solid;
}
#creator dl.creator_info dd p.hp:hover {
  animation: sns_hp_link 0.5s ease 0s 1 normal both;
}
#creator dl.creator_info dd p.tantou {
  line-height: 1.2em;
  font-size: 14px;
}
#creator dl.creator_info dd p.info {
  font-size: 10px;
  line-height: 1.5em;
  padding-top: 5px;
}

/* INFO
--------------------------- */
#info {
  margin-bottom: 20px;
}
#info .sd_mei {
  width: 120px;
  position: absolute;
  z-index: 100;
}
#info .sd_mei:hover img {
  animation: swing 1s;
}
#info .sd_mei img {
  width: 100%;
}
#info .sd_mei[data-emergence=hidden] {
  opacity: 0;
  right: -100px;
  top: -100px;
  transform: rotate(15deg);
}
#info .sd_mei[data-emergence=visible] {
  animation: sd_mei_anime 0.8s ease 0s 1 normal both;
  opacity: 1;
  right: -20px;
  top: -30px;
  transform: rotate(0deg);
}
#info .itaku {
  padding: 50px 0;
}
#info .itaku .shop {
  width: 80%;
  margin: 0 auto;
  padding: 10px 0;
}
#info .itaku .shop:hover {
  animation: fadelink 1s;
}
#info .itaku img {
  width: 100%;
}
#info .where {
  position: relative;
  padding: 20px 0;
  margin-top: 20px;
}
#info .where:before {
  content: "";
  background: url(../img/info_end.png) no-repeat center center;
  position: absolute;
  top: 50%;
  left: 50%;
  -webkit-transform: translateY(-50%) translateX(-50%);
  transform: translateY(-50%) translateX(-50%);
  width: 80%;
  height: 100px;
  background-size: contain;
  z-index: 9999;
}
#info .where:after {
  content: "";
  background-color: rgba(0, 0, 0, 0.1);
  width: 100%;
  height: 100%;
  position: absolute;
  left: 0;
  top: 0;
  z-index: 9998;
}
#info .where p {
  width: 45%;
  float: left;
  margin-left: 25px;
  font-size: 10px;
  font-family: "Rounded Mplus 1c", "游ゴシック", "Yu Gothic", "游ゴシック体", "YuGothic", "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "Meiryo UI", "メイリオ", "Avenir", "Open Sans", "Helvetica Neue", Helvetica, Arial, Verdana, Roboto, Meiryo, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
  font-weight: bold;
  line-height: 1.2em;
}
#info .where p img {
  width: 90%;
  margin-bottom: 10px;
}
#info .where img.map {
  width: 40%;
  margin-top: 10px;
}
#info .sns {
  width: 270px;
  padding-top: 30px;
  margin: 0 auto;
  display: flex;
}
#info .sns .icon {
  border-radius: 50%;
  border: 1px #d8d8d8 solid;
  width: 80px;
  height: 80px;
  margin: 0 5px;
  color: #ff75a4;
  position: relative;
}
#info .sns .icon:hover {
  animation: sns_hp_link 0.5s ease 0s 1 normal both;
}
#info .sns .icon span {
  position: absolute;
  top: 50%;
  left: 50%;
  margin-top: -15px;
  margin-left: -15px;
  font-size: 30px;
}
#info .mfkg_banner {
  width: 85%;
  margin: 0 auto;
  margin-top: 30px;
}
#info .mfkg_banner:hover img {
  animation: flipX 0.5s;
}
#info .mfkg_banner img {
  width: 100%;
}

.totop {
  width: 80px;
  position: fixed;
  z-index: 200;
  right: 10px;
  bottom: 10px;
}
.totop:hover {
  animation: fadelink 0.5s ease 0s 1 normal both;
}
.totop img {
  width: 100%;
}

#footer {
  width: 100%;
  border-top: 1px #ff75a4 solid;
}
#footer .circle_logo {
  width: 30%;
  margin-left: 20px;
}
#footer .circle_logo img {
  width: 100%;
}
#footer .circle_logo img:hover {
  animation: fadelink 0.5s ease 0s 1 normal both;
}
#footer .circle_logo h2 {
  display: none;
}
#footer .copyright {
  font-size: 10px;
  text-align: right;
  position: absolute;
  top: 45px;
  right: 10px;
}

@media screen and (max-width: 900px) {
  #menu ul li {
    position: relative;
    left: 50%;
    margin-left: -25%;
  }

  #main #sd .mainsd_aki {
    top: 50%;
  }

  #info .where {
    width: 90%;
    margin: 0 auto;
  }
}
@media screen and (min-width: 900px) {
  .smicon {
    display: none;
  }

  #menu {
    height: auto;
    display: block;
  }
  #menu ul {
    background-color: transparent;
    width: 720px;
    position: absolute;
    top: 5px;
    right: 0;
    padding: 0;
  }
  #menu ul li {
    display: inline-block;
    width: auto;
    height: 15px;
    margin: 0 10px;
    padding: 0;
  }
  #menu ul li img {
    width: auto;
    height: 100%;
  }
  #menu ul li.m_volicon {
    display: inline;
    width: 20px;
  }
  #menu ul li.m_volicon span {
    font-size: 20px;
    color: #ff75a4;
  }

  #main {
    margin: 0 auto;
    width: 900px;
  }
  #main .prmtitle {
    margin-top: -100px;
  }
  #main .title {
    width: 80%;
    top: 10px;
    left: 50%;
    margin-left: -40%;
  }
  #main .main_mei {
    width: 100vw;
    position: absolute;
    left: 50%;
    margin-left: -50vw;
    background-image: url(../img/mainimg_pc.png);
    background-size: cover;
  }
  #main .mainsd_cyn, #main .mainsd_mil {
    width: 150px;
  }
  #main .mainsd_cyn {
    padding-top: 0;
    right: 50px;
    top: 400px;
  }
  #main .mainsd_mil {
    padding-top: 0;
    top: 450px;
  }
  #main .mainsd_aki {
    padding-top: 0;
    bottom: 275px;
    width: 120px;
  }
  #main .sdaki_anime {
    animation: main_aki_anime_pc 10s ease 3s infinite normal both;
  }
  #main .aori_main {
    width: 85%;
    bottom: 0;
  }
  #main .aori_main img {
    transform: rotate(-0.2deg);
  }
  #main .todown {
    bottom: 45px;
  }

  #movie .sd_cyn {
    width: 150px;
  }
  #movie .inswipemv h3 {
    font-size: 18px;
  }
  #movie .mimi01 {
    width: 30px;
  }
  #movie .mimi02 {
    width: 80px;
  }

  #story .storycont {
    width: 475px;
    font-size: 17px;
    top: 250px;
  }
  #story .mimi {
    width: 100px;
    top: 30px;
  }

  #chara .mimi {
    width: 100px;
  }
  #chara .incont {
    height: 500px;
  }
  #chara .swiper-container {
    height: 500px;
  }
  #chara .swiper-container .swiper-pagination-bullet {
    width: 80px;
    height: 80px;
    margin: 0 8px;
  }
  #chara .swiper-container .swiper-pagination-bullet img {
    width: 80px;
    height: 80px;
  }
  #chara .inswipech .characont {
    color: #ffffff;
    width: 45%;
    position: absolute;
    top: 70px;
    right: 30px;
  }
  #chara .inswipech .characont h2 {
    font-size: 40px;
  }
  #chara .inswipech .characont p {
    font-size: 16px;
    line-height: 1.5rem;
  }
  #chara .mei img {
    top: 50px;
  }
  #chara .aki img {
    top: 60px;
  }

  #product .prodcont {
    font-size: 17px;
  }
  #product .tracklist h2 {
    font-size: 50px;
    font-weight: 800;
    padding-top: 20px;
  }
  #product .tracklist .cd, #product .tracklist .dvd {
    float: left;
  }
  #product .tracklist .cd h3, #product .tracklist .dvd h3 {
    font-size: 35px;
    padding-bottom: 15px;
  }
  #product .tracklist .cd ol, #product .tracklist .dvd ol {
    font-size: 18px;
  }
  #product .tracklist .cd ol li, #product .tracklist .dvd ol li {
    margin-bottom: 15px;
  }
  #product .tracklist .cd {
    width: 440px;
  }
  #product .tracklist .dvd {
    width: 350px;
  }
  #product .mimi {
    width: 120px;
  }

  #creator .mimi {
    width: 150px;
  }
  #creator dl.creator_info {
    width: 730px;
    margin: 0 auto;
    padding-top: 30px;
  }
  #creator dl.creator_info dt {
    width: 150px;
  }
  #creator dl.creator_info dd {
    width: 450px;
    margin-left: 200px;
    margin-bottom: 60px;
  }
  #creator dl.creator_info dd p.name {
    font-size: 30px;
  }
  #creator dl.creator_info dd p.hp {
    width: 100px;
    font-size: 25px;
    right: 50px;
  }
  #creator dl.creator_info dd p.tantou {
    font-size: 20px;
    line-height: 1.8em;
  }
  #creator dl.creator_info dd p.info {
    font-size: 15px;
  }

  #info .sd_mei {
    width: 200px;
  }
  #info .itaku .shop {
    width: 60%;
  }
  #info .where {
    width: 800px;
    margin: 0 auto;
  }
  #info .where p {
    width: 50%;
    font-size: 18px;
  }
  #info .where p img {
    margin-left: -20px;
  }
  #info .where img.map {
    width: 40%;
  }
  #info .sns {
    width: 450px;
    margin: 0 auto;
    display: flex;
  }
  #info .sns .icon {
    border-radius: 50%;
    border: 1px #d8d8d8 solid;
    width: 100px;
    height: 100px;
    margin: 0 25px;
    color: #ff75a4;
    position: relative;
  }
  #info .sns .icon span {
    position: absolute;
    top: 50%;
    left: 50%;
    margin-top: -15px;
    margin-left: -15px;
    font-size: 30px;
  }
  #info .mfkg_banner {
    width: 70%;
  }

  #footer .copyright {
    font-size: 14px;
    width: 50%;
  }
}
@media screen and (min-width: 1200px) {
  #movie .sd_cyn {
    width: 250px;
  }

  #info .sd_mei {
    width: 300px;
  }
}
/* #共通
--------------------------- */
.clear {
  clear: both;
}

a {
  color: #ffffff;
}
a:hover {
  color: #ffa8c6;
}

p {
  line-height: 2em;
}

h1 {
  font-family: "游ゴシック", "Yu Gothic", "游ゴシック体", "YuGothic", "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "Meiryo UI", "メイリオ", "Avenir", "Open Sans", "Helvetica Neue", Helvetica, Arial, Verdana, Roboto, Meiryo, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
}

@keyframes fadelink {
  0% {
    opacity: 1;
  }
  100% {
    opacity: 0.5;
  }
}
@keyframes fadein {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}
@keyframes sns_hp_link {
  0% {
    color: #ff75a4;
  }
  100% {
    background-color: #ff75a4;
    color: #ffffff;
  }
}
@keyframes sd_cyn_anime {
  0% {
    opacity: 0;
    transform: rotate(15deg);
    top: -100px;
    right: -100px;
  }
  100% {
    opacity: 1;
    transform: rotate(0deg);
    top: -50px;
    right: -20px;
  }
}
@keyframes sd_mei_anime {
  0% {
    opacity: 0;
    right: -100px;
    top: -100px;
    transform: rotate(15deg);
  }
  100% {
    opacity: 1;
    right: -20px;
    top: -30px;
    transform: rotate(0deg);
  }
}
@keyframes main_cyn_anime {
  0% {
    margin-top: -220px;
  }
  1% {
    margin-top: -210px;
  }
  3% {
    margin-top: -240px;
  }
  9% {
    margin-top: -220px;
  }
  100% {
    margin-top: -220px;
  }
}
@keyframes main_milia_anime {
  0% {
    margin-top: -160px;
  }
  1% {
    margin-top: -150px;
  }
  3% {
    margin-top: -180px;
  }
  9% {
    margin-top: -160px;
  }
  100% {
    margin-top: -160px;
  }
}
@keyframes main_aki_anime {
  0% {
    margin-top: 0px;
  }
  1% {
    margin-top: 10px;
  }
  3% {
    margin-top: -20px;
  }
  9% {
    margin-top: 0px;
  }
  100% {
    margin-top: 0px;
  }
}
@keyframes main_aki_anime_pc {
  0% {
    bottom: 275px;
  }
  1% {
    bottom: 265px;
  }
  3% {
    bottom: 295px;
  }
  9% {
    bottom: 275px;
  }
  100% {
    bottom: 275px;
  }
}
@keyframes incont_fadein {
  0% {
    opacity: 0;
    top: 50px;
  }
  100% {
    opacity: 1;
    top: 0;
  }
}
@keyframes playicon {
  0% {
    color: #ffffff;
    font-size: 70px;
  }
  100% {
    color: #ff75a4;
    font-size: 90px;
  }
}



/****APP升級包********/
.mofu-main{position: fixed;width: 540px;top: 30%;left: 50%;margin-left: -270px;z-index:1002;background-color:#fff;border-radius:5px;overflow:auto;box-shadow:1px 1px 50px rgba(0,0,0,.3);display: none;}
.mofu-main .mofu-header{position:relative;width:100%;height:48px;line-height:48px;border-bottom:1px solid #e6e6e6;background: #fff;}
.mofu-main .mofu-header .mofu-title{margin-left:30px;color:#999}
.mofu-main .mofu-close{cursor:pointer;position:absolute;top:0;right:15px;font-size:32px;color:#b6b5b5;text-align:center;z-index:2;border:none;transition:.3s}
.mofu-main .mofu-close:hover{color:#8d8d8d}
.mofu-main .mofu-close:hover{transform:rotate(90deg)}
.mofu-main .mofu-content{padding-top:20px;width:100%;background-color:#f7f7f7;border-bottom-right-radius:5px;border-bottom-left-radius:5px}
.mofu-main .mofu-content .mofu-box{margin:0 auto;color:#4c4c4c;border-collapse:none}
.mofu-main .mofu-content .mofu-box .mofu-box-btn{margin:2px;padding:8px;border-radius: 5px;color: #fff;text-decoration-line: none;display: inline-table;}
.mofu-main .mofu-content .mofu-rule{padding:20px 30px;margin-top:32px;font-size:12px;color:#b2b2b2;border-top:1px solid #e6e6e6}
.mofu-main .mofu-bg{-webkit-backdrop-filter: blur(10px);backdrop-filter: blur(10px);width: 100%;height: 100%;position: fixed;background: rgb(0 0 0 / 0.3);top: 0;left: 0;z-index: -1;}


	
@media only screen and ( max-width : 640px ){
.mofu-main {width: 300px;margin-left: -150px;}
}