@charset "UTF-8";
/*
@import "compass";
@include global-reset;
@include reset-html5;
*/
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;
  font: inherit;
  font-size: 100%;
  vertical-align: baseline; }

html {
  line-height: 1; }

ol, ul {
  list-style: none; }

table {
  border-collapse: collapse;
  border-spacing: 0; }

caption, th, td {
  text-align: left;
  font-weight: normal;
  vertical-align: middle; }

q, blockquote {
  quotes: none; }

q:before, q:after, blockquote:before, blockquote:after {
  content: "";
  content: none; }

a img {
  border: none; }

article, aside, details, figcaption, figure, footer, header, hgroup, main, menu, nav, section, summary {
  display: block; }

article, aside, details, figcaption, figure, footer, header, hgroup, main, menu, nav, section, summary {
  display: block; }

.nav01-sprite, .nav01-nav01, .nav01 {
  background-image: url("../img/nav01-sa149b2e848.png");
  background-repeat: no-repeat; }

.nav01-nav01 {
  background-position: 0 0;
  height: 15px;
  width: 35px; }

.nav01-nav01:hover, .nav01-nav01.nav01-hover {
  background-position: 0 -25px; }

.nav01 {
  background-position: 0 0;
  height: 15px;
  width: 35px; }

.nav01:hover, .nav01.nav01-hover {
  background-position: 0 -25px; }

.nav02-sprite, .nav02-nav02, .nav02 {
  background-image: url("../img/nav02-s8131d46aa3.png");
  background-repeat: no-repeat; }

.nav02-nav02 {
  background-position: 0 0;
  height: 15px;
  width: 86px; }

.nav02-nav02:hover, .nav02-nav02.nav02-hover {
  background-position: 0 -25px; }

.nav02 {
  background-position: 0 0;
  height: 15px;
  width: 86px; }

.nav02:hover, .nav02.nav02-hover {
  background-position: 0 -25px; }

.nav03-sprite, .nav03-nav03, .nav03 {
  background-image: url("../img/nav03-sd63a75effd.png");
  background-repeat: no-repeat; }

.nav03-nav03 {
  background-position: 0 0;
  height: 15px;
  width: 56px; }

.nav03-nav03:hover, .nav03-nav03.nav03-hover {
  background-position: 0 -25px; }

.nav03 {
  background-position: 0 0;
  height: 15px;
  width: 56px; }

.nav03:hover, .nav03.nav03-hover {
  background-position: 0 -25px; }

.nav04-sprite, .nav04-nav04, .nav04 {
  background-image: url("../img/nav04-sd5ceb0d1e8.png");
  background-repeat: no-repeat; }

.nav04-nav04 {
  background-position: 0 0;
  height: 15px;
  width: 73px; }

.nav04-nav04:hover, .nav04-nav04.nav04-hover {
  background-position: 0 -25px; }

.nav04 {
  background-position: 0 0;
  height: 15px;
  width: 73px; }

.nav04:hover, .nav04.nav04-hover {
  background-position: 0 -25px; }

.modal01-sprite, .modal01-modal01 {
  background-image: url("../img/modal/modal01-s9aac901b27.png");
  background-repeat: no-repeat; }

.modal01-modal01 {
  background-position: 0 0;
  height: 109px;
  width: 192px; }

.modal01-modal01:hover, .modal01-modal01.modal01-hover {
  background-position: 0 -119px; }

.modal02-sprite, .modal02-modal02 {
  background-image: url("../img/modal/modal02-s2f83eede03.png");
  background-repeat: no-repeat; }

.modal02-modal02 {
  background-position: 0 0;
  height: 109px;
  width: 192px; }

.modal02-modal02:hover, .modal02-modal02.modal02-hover {
  background-position: 0 -119px; }

.modal03-sprite, .modal03-modal03 {
  background-image: url("../img/modal/modal03-sa7121d0195.png");
  background-repeat: no-repeat; }

.modal03-modal03 {
  background-position: 0 0;
  height: 109px;
  width: 192px; }

.modal03-modal03:hover, .modal03-modal03.modal03-hover {
  background-position: 0 -119px; }

.modal04-sprite, .modal04-modal03 {
  background-image: url("../img/modal/modal04-s5f1ec6c9ba.png");
  background-repeat: no-repeat; }

.modal04-modal03 {
  background-position: 0 0;
  height: 109px;
  width: 192px; }

.modal04-modal03:hover, .modal04-modal03.modal03-hover {
  background-position: 0 -119px; }

.modal05-sprite, .modal05-modal05 {
  background-image: url("../img/modal/modal05-s6b0c7b253e.png");
  background-repeat: no-repeat; }

.modal05-modal05 {
  background-position: 0 0;
  height: 109px;
  width: 192px; }

.modal05-modal05:hover, .modal05-modal05.modal05-hover {
  background-position: 0 -119px; }

.modal06-sprite, .modal06-modal06 {
  background-image: url("../img/modal/modal06-sbf93967b1c.png");
  background-repeat: no-repeat; }

.modal06-modal06 {
  background-position: 0 0;
  height: 109px;
  width: 192px; }

.modal06-modal06:hover, .modal06-modal06.modal06-hover {
  background-position: 0 -119px; }

.modal07-sprite, .modal07-modal07 {
  background-image: url("../img/modal/modal07-s87a447c874.png");
  background-repeat: no-repeat; }

.modal07-modal07 {
  background-position: 0 0;
  height: 109px;
  width: 192px; }

.modal07-modal07:hover, .modal07-modal07.modal07-hover {
  background-position: 0 -119px; }

.modal08-sprite, .modal08-modal08 {
  background-image: url("../img/modal/modal08-sa6823188d1.png");
  background-repeat: no-repeat; }

.modal08-modal08 {
  background-position: 0 0;
  height: 109px;
  width: 192px; }

.modal08-modal08:hover, .modal08-modal08.modal08-hover {
  background-position: 0 -119px; }

.modal09-sprite, .modal09-modal09 {
  background-image: url("../img/modal/modal09-se2ef5ef940.png");
  background-repeat: no-repeat; }

.modal09-modal09 {
  background-position: 0 0;
  height: 109px;
  width: 192px; }

.modal09-modal09:hover, .modal09-modal09.modal09-hover {
  background-position: 0 -119px; }

.modal10-sprite, .modal10-modal10 {
  background-image: url("../img/modal/modal10-s88a5f2d453.png");
  background-repeat: no-repeat; }

.modal10-modal10 {
  background-position: 0 0;
  height: 109px;
  width: 192px; }

.modal10-modal10:hover, .modal10-modal10.modal10-hover {
  background-position: 0 -119px; }

.modal11-sprite, .modal11-modal11 {
  background-image: url("../img/modal/modal11-sf257d28320.png");
  background-repeat: no-repeat; }

.modal11-modal11 {
  background-position: 0 0;
  height: 109px;
  width: 192px; }

.modal11-modal11:hover, .modal11-modal11.modal11-hover {
  background-position: 0 -120px; }

/* CSS Sprite */
/*
$nav01-sprite-dimensions: true;
$nav01-spacing: 10px;
@import "nav01/*.png";
@include all-nav01-sprites;
.nav01 { @include nav01-sprite(nav01);}

$nav02-sprite-dimensions: true;
$nav02-spacing: 10px;
@import "nav02/*.png";
@include all-nav02-sprites;
.nav02 { @include nav02-sprite(nav02);}

$nav03-sprite-dimensions: true;
$nav03-spacing: 10px;
@import "nav03/*.png"; 
@include all-nav03-sprites;
.nav03 { @include nav03-sprite(nav03);}

$nav04-sprite-dimensions: true;
$nav04-spacing: 10px;
@import "nav04/*.png"; 
@include all-nav04-sprites;
.nav04 { @include nav04-sprite(nav04);}

$modal01-sprite-dimensions: true;
$modal01-spacing: 10px;
@import "modal/modal01/*.png"; 
@include all-modal01-sprites;
// .modal01 { @include modal01-sprite(modal01);}

$modal02-sprite-dimensions: true;
$modal02-spacing: 10px;
@import "modal/modal02/*.png"; 
@include all-modal02-sprites;

$modal03-sprite-dimensions: true;
$modal03-spacing: 10px;
@import "modal/modal03/*.png"; 
@include all-modal03-sprites;

$modal04-sprite-dimensions: true;
$modal04-spacing: 10px;
@import "modal/modal04/*.png"; 
@include all-modal04-sprites;

$modal05-sprite-dimensions: true;
$modal05-spacing: 10px;
@import "modal/modal05/*.png"; 
@include all-modal05-sprites;

$modal06-sprite-dimensions: true;
$modal06-spacing: 10px;
@import "modal/modal06/*.png"; 
@include all-modal06-sprites;

$modal07-sprite-dimensions: true;
$modal07-spacing: 10px;
@import "modal/modal07/*.png"; 
@include all-modal07-sprites;

$modal08-sprite-dimensions: true;
$modal08-spacing: 10px;
@import "modal/modal08/*.png"; 
@include all-modal08-sprites;

$modal09-sprite-dimensions: true;
$modal09-spacing: 10px;
@import "modal/modal09/*.png"; 
@include all-modal09-sprites;

$modal10-sprite-dimensions: true;
$modal10-spacing: 10px;
@import "modal/modal10/*.png"; 
@include all-modal10-sprites;

$modal11-sprite-dimensions: true;
$modal11-spacing: 11px;
@import "modal/modal11/*.png"; 
@include all-modal11-sprites;
*/
body, html {
  height: 100%;
  line-height: 1em;
  width: 100%;
  font-size: 100%;
  font-family: 'Hiragino Kaku Gothic ProN', 'ヒラギノ角ゴ ProN W3', sans-serif; }
  @media (min-width: 426px) {
    body, html {
      min-width: 1280px; } }
  body img, html img {
    vertical-align: bottom;
    width: 100%; }

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

  .sp {
    display: block !important; } }
@media (min-width: 426px) {
  .sp {
    display: none !important; }

  .pc {
    display: block !important; } }
#loading {
  background-color: #fff;
  width: 100%;
  height: 100%;
  position: fixed;
  z-index: 9999; }
  #loading img {
    position: absolute;
    top: 0;
    bottom: 0;
    right: 0;
    left: 0;
    margin: auto;
    width: 50px; }

body.fixed {
  position: fixed;
  width: 100%;
  height: 100%; }

.rotation {
  background-color: #dc2e8b; }

#list {
  margin: auto;
  position: relative;
  overflow: hidden;
  height: 100%;
  background-repeat: no-repeat; }
  @media (min-width: 426px) {
    #list {
      min-width: 1280px;
      background-image: url("../img/top_block.png");
      background-size: contain; } }
  @media (max-width: 425px) {
    #list {
      background-image: url("../img/top_block_sp.png");
      background-size: cover; } }
  #list h1 {
    background-color: #333333;
    position: relative; }
    @media (min-width: 426px) {
      #list h1 {
        min-width: 250px; } }
    #list h1.patapata:before {
      content: "";
      position: absolute;
      background-color: #dc2e8b;
      top: -40%;
      left: 0;
      width: 100%;
      height: 140%;
      animation: shutter_h 1s 0s; }
@keyframes shutter_h {
  0% {
    transform: skewY(-20deg) translateY(-100%); }
  100% {
    transform: skewY(0deg) translateY(0%); } }
    #list h1 img {
      display: block;
      position: absolute;
      margin: auto;
      z-index: 999; }
      @media (min-width: 426px) {
        #list h1 img {
          width: 80%;
          padding: 26% 10%; } }
      @media (max-width: 425px) {
        #list h1 img {
          width: 79%;
          top: 0;
          bottom: 0;
          right: 0;
          left: 0; } }
  #list #rotation .wrapper {
    overflow: hidden;
    position: absolute;
    margin: 0 auto; }
    @media (min-width: 426px) {
      #list #rotation .wrapper {
        width: 5.56%; } }
    @media (max-width: 425px) {
      #list #rotation .wrapper {
        width: 11.1%; } }
  #list #rotation .inner {
    position: relative;
    height: 100%;
    overflow: hidden; }
    @media (min-width: 426px) {
      #list #rotation .inner {
        z-index: 1; } }
  #list #rotation .front,
  #list #rotation .back {
    overflow: hidden;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    -webkit-backface-visibility: hidden;
    -ms-backface-visibility: hidden;
    -moz-backface-visibility: hidden;
    backface-visibility: hidden;
    text-align: center; }
    @media (min-width: 426px) {
      #list #rotation .front,
      #list #rotation .back {
        transition: 0.3s linear 0s; } }
    @media (max-width: 425px) {
      #list #rotation .front,
      #list #rotation .back {
        transition: 0.3s linear 0.6s; } }
    #list #rotation .front img,
    #list #rotation .back img {
      width: 100%;
      position: absolute;
      left: 0;
      top: 0; }
      @media (min-width: 426px) {
        #list #rotation .front img,
        #list #rotation .back img {
          transition: 0s linear 0.2s; } }
      @media (max-width: 425px) {
        #list #rotation .front img,
        #list #rotation .back img {
          transition: 0s linear 0s; } }
    #list #rotation .front span,
    #list #rotation .back span {
      display: block;
      width: 100%;
      height: 100%;
      z-index: -1; }
    @media (max-width: 425px) {
      #list #rotation .front,
      #list #rotation .back {
        background-position: center -3px; } }
  #list #rotation .front {
    z-index: 2;
    -webkit-transform: rotateY(0deg);
    -ms-transform: rotateY(0deg);
    -moz-transform: rotateY(0deg);
    transform: rotateY(0deg); }
    #list #rotation .front img {
      visibility: hidden; }
    #list #rotation .front:after {
      content: "";
      display: block;
      position: absolute;
      top: -30%;
      left: 0;
      width: 100%;
      height: 150%;
      transform: skewY(-40deg) translateY(-100%);
      -webkit-backface-visibility: hidden;
      -ms-backface-visibility: hidden;
      -moz-backface-visibility: hidden;
      backface-visibility: hidden; }
@-moz-document url-prefix() {
  #list #rotation .front:after {
    height: 200%; } }
    #list #rotation .front.shutter_op:after {
      -webkit-backface-visibility: hidden;
      -ms-backface-visibility: hidden;
      -moz-backface-visibility: hidden;
      backface-visibility: hidden; }
      @media (min-width: 426px) {
        #list #rotation .front.shutter_op:after {
          animation: shutterstart 2s 0s; } }
      @media (max-width: 425px) {
        #list #rotation .front.shutter_op:after {
          animation: shutterstart 1.5s 0s; } }
    #list #rotation .front.fin:after {
      display: none; }
@keyframes shutterstart {
  0% {
    transform: skewY(-40deg) translateY(-100%); }
  50% {
    transform: skewY(-10deg) translateY(0%); }
  100% {
    transform: skewY(-40deg) translateY(-100%); } }
@-moz-document url-prefix() {
  #list #rotation .front.shutter_op:after {
    animation: shutterstart_ff 3.5s 0s;
    -webkit-backface-visibility: hidden;
    -ms-backface-visibility: hidden;
    -moz-backface-visibility: hidden;
    backface-visibility: hidden; }
  @keyframes shutterstart_ff {
    0% {
      transform: skewY(-20deg) translateY(-100%); }
    50% {
      transform: skewY(-10deg) translateY(4%); }
    100% {
      transform: skewY(-20deg) translateY(-100%); } } }
    #list #rotation .front img.vis {
      visibility: visible !important; }
  #list #rotation .back {
    z-index: 1;
    -webkit-transform: rotateY(180deg);
    -ms-transform: rotateY(180deg);
    -moz-transform: rotateY(180deg);
    transform: rotateY(180deg); }
    #list #rotation .back:before {
      content: "";
      display: block;
      width: 100%;
      height: 100%;
      position: absolute;
      z-index: -1;
      top: 0; }
  #list #rotation .on .front {
    z-index: 1;
    -webkit-transform: rotateY(180deg);
    -ms-transform: rotateY(180deg);
    -moz-transform: rotateY(180deg);
    transform: rotateY(180deg); }
  #list #rotation .on .back {
    z-index: 2;
    -webkit-transform: rotateY(0deg);
    -ms-transform: rotateY(0deg);
    -moz-transform: rotateY(0deg);
    transform: rotateY(0deg); }
  #list .y1 {
    top: 0; }
  @media (min-width: 426px) {
    #list .x1 {
      left: 0; }
    #list .x2 {
      left: 5.56%; }
    #list .x3 {
      left: 11.12%; }
    #list .x4 {
      left: 16.68%; }
    #list .x5 {
      left: 22.24%; }
    #list .x6 {
      left: 27.8%; }
    #list .x7 {
      left: 33.36%; }
    #list .x8 {
      left: 38.92%; }
    #list .x9 {
      left: 44.48%; }
    #list .x10 {
      left: 50.04%; }
    #list .x11 {
      left: 55.6%; }
    #list .x12 {
      left: 61.16%; }
    #list .x13 {
      left: 66.72%; }
    #list .x14 {
      left: 72.28%; }
    #list .x15 {
      left: 77.84%; }
    #list .x16 {
      left: 83.4%; }
    #list .x17 {
      left: 88.96%; }
    #list .x18 {
      left: 94.52%; } }
  @media (max-width: 425px) {
    #list .x1 {
      left: 0; }
    #list .x2 {
      left: 11.11%; }
    #list .x3 {
      left: 22.22%; }
    #list .x4 {
      left: 33.33%; }
    #list .x5 {
      left: 44.44%; }
    #list .x6 {
      left: 55.55%; }
    #list .x7 {
      left: 66.66%; }
    #list .x8 {
      left: 77.77%; }
    #list .x9 {
      left: 88.88%; }
    #list .x10 {
      left: 0; }
    #list .x11 {
      left: 11.11%; }
    #list .x12 {
      left: 22.22%; }
    #list .x13 {
      left: 33.33%; }
    #list .x14 {
      left: 44.44%; }
    #list .x15 {
      left: 55.55%; }
    #list .x16 {
      left: 66.66%; }
    #list .x17 {
      left: 77.77%; }
    #list .x18 {
      left: 88.88%; }
    #list .y1.x10 {
      left: 44.44%; }
    #list .y1.x11 {
      left: 55.55%; }
    #list .y1.x12 {
      left: 66.66%; }
    #list .y1.x13 {
      left: 77.77%; }
    #list .y1.x14 {
      left: 88.88%; }
    #list .y1.x15 {
      left: 0; }
    #list .y1.x16 {
      left: 11.11%; }
    #list .y1.x17 {
      left: 22.22%; }
    #list .y1.x18 {
      left: 33.33%; } }
  #list li[data-color="color01"] span {
    background-color: #ea5541; }
  #list li[data-color="color01"]:after {
    background-color: #ea5541; }
  #list li[data-color="color01"]:before {
    background-color: #ea5541; }
  #list li[data-color="color02"] span {
    background-color: #7fcdec; }
  #list li[data-color="color02"]:after {
    background-color: #7fcdec; }
  #list li[data-color="color02"]:before {
    background-color: #7fcdec; }
  #list li[data-color="color03"] span {
    background-color: #a5308d; }
  #list li[data-color="color03"]:after {
    background-color: #a5308d; }
  #list li[data-color="color03"]:before {
    background-color: #a5308d; }
  #list li[data-color="color04"] span {
    background-color: #f39800; }
  #list li[data-color="color04"]:after {
    background-color: #f39800; }
  #list li[data-color="color04"]:before {
    background-color: #f39800; }
  #list li[data-color="color05"] span {
    background-color: #abce23; }
  #list li[data-color="color05"]:after {
    background-color: #abce23; }
  #list li[data-color="color05"]:before {
    background-color: #abce23; }
  #list li[data-color="color06"] span {
    background-color: #ffd801; }
  #list li[data-color="color06"]:after {
    background-color: #ffd801; }
  #list li[data-color="color06"]:before {
    background-color: #ffd801; }
  #list li[data-color="color07"] span {
    background-color: #0086cd; }
  #list li[data-color="color07"]:after {
    background-color: #0086cd; }
  #list li[data-color="color07"]:before {
    background-color: #0086cd; }
  #list li[data-color="color08"] span {
    background-color: #dc2e8b; }
  #list li[data-color="color08"]:after {
    background-color: #dc2e8b; }
  #list li[data-color="color08"]:before {
    background-color: #dc2e8b; }
  #list li[data-color="color09"] span {
    background-color: #2eb5aa; }
  #list li[data-color="color09"]:after {
    background-color: #2eb5aa; }
  #list li[data-color="color09"]:before {
    background-color: #2eb5aa; }
  #list li[data-color="color10"] span {
    background-color: #2bb560; }
  #list li[data-color="color10"]:after {
    background-color: #2bb560; }
  #list li[data-color="color10"]:before {
    background-color: #2bb560; }
  #list li[data-color="color11"] span {
    background-color: #17ade6; }
  #list li[data-color="color11"]:after {
    background-color: #17ade6; }
  #list li[data-color="color11"]:before {
    background-color: #17ade6; }
  #list li[data-color="color12"] span {
    background-color: #774f9e; }
  #list li[data-color="color12"]:after {
    background-color: #774f9e; }
  #list li[data-color="color12"]:before {
    background-color: #774f9e; }
  #list li[data-color="color13"] span {
    background-color: #ea609e; }
  #list li[data-color="color13"]:after {
    background-color: #ea609e; }
  #list li[data-color="color13"]:before {
    background-color: #ea609e; }

.sptop {
  z-index: 999;
  height: 40px;
  background-color: #dc2e8b;
  width: 100%;
  position: fixed;
  top: -100px; }
  .sptop.spfixed {
    top: 0px; }
  .sptop h2 {
    width: 60px;
    margin: auto;
    padding-top: 12px;
    padding-bottom: 12px; }

nav {
  overflow: hidden;
  z-index: 999;
  transition: 0.5s linear 0s; }
  nav div {
    height: 100%; }
  @media (max-width: 425px) {
    nav {
      height: 40px;
      background-color: #dc2e8b;
      width: 100%; }
      nav h2 {
        width: 60px;
        margin: auto;
        padding-top: 12px;
        padding-bottom: 12px; } }
  @media (min-width: 426px) {
    nav {
      min-width: 1280px; }
      nav div {
        height: 50px; } }
  nav .left {
    box-sizing: border-box; }
    @media (min-width: 426px) {
      nav .left {
        background-color: #dc2e8b;
        width: 25%;
        float: left;
        position: relative;
        display: block !important; }
        nav .left .on li {
          background-position: 0 -25px; } }
    @media (max-width: 425px) {
      nav .left {
        display: none; } }
    nav .left ul {
      position: absolute;
      overflow: hidden;
      right: 5%;
      width: 92%;
      bottom: 0;
      top: 0;
      margin: auto;
      max-width: 410px;
      line-height: 0em;
      height: 15px; }
      @media (min-width: 426px) {
        nav .left ul a {
          float: left;
          margin-right: 5%; }
          nav .left ul a:nth-child(4) {
            margin-right: 0; } }
      nav .left ul li {
        text-align: center;
        box-sizing: border-box; }
        nav .left ul li a {
          display: block; }
        @media (min-width: 426px) {
          nav .left ul li:nth-child(3) {
            float: left;
            width: 27%;
            max-width: 56px;
            margin-right: 5%;
            cursor: pointer; } }
  nav .right {
    background-color: #fff;
    float: left;
    width: 75%;
    position: relative; }
    nav .right dl {
      position: absolute;
      height: 20px;
      bottom: 0;
      top: 0;
      margin: auto;
      left: 3%;
      width: 95%; }
    nav .right dt, nav .right dd {
      display: table-cell;
      vertical-align: middle; }
    nav .right dt {
      width: 50px; }
      nav .right dt img {
        max-width: 48px; }
    nav .right dd {
      color: #333333; }
    nav .right .date {
      font-family: "メイリオ","Meiryo", sans-serif;
      font-size: 16px;
      padding-top: 2px;
      width: 140px;
      text-align: center; }
    nav .right .txt {
      font-size: 16px;
      line-height: 1.3em; }

.is-fixed {
  position: fixed;
  top: 0 !important;
  left: 0 !important;
  z-index: 999;
  width: 100%; }

#spnav {
  display: none;
  height: 100vh;
  width: 100%;
  z-index: 9999;
  background-color: #dc2e8b;
  position: fixed;
  top: 0; }
  #spnav span {
    display: block;
    position: absolute;
    top: 0px;
    right: 0px;
    z-index: 999;
    width: 50px;
    height: 50px; }
    #spnav span img {
      width: 18px;
      position: absolute;
      top: 0;
      bottom: 0;
      right: 0;
      left: 0;
      margin: auto; }
  @media (max-width: 425px) {
    #spnav a {
      display: block;
      margin: auto; }
      #spnav a:first-child {
        width: 15%; }
        #spnav a:first-child img {
          max-width: 35px; }
      #spnav a:nth-child(2) {
        width: 33%; }
        #spnav a:nth-child(2) img {
          max-width: 86px; }
      #spnav a:nth-child(4) {
        width: 40%; } }
    @media (max-width: 425px) and (min-width: 426px) {
      #spnav a:nth-child(4) {
        margin-right: 0; } }
  @media (max-width: 425px) {
        #spnav a:nth-child(4) img {
          max-width: 73px; }
      #spnav a:last-child {
        width: 40%; }
        #spnav a:last-child img {
          max-width: 50px; }
    #spnav ul {
      position: absolute;
      overflow: hidden;
      right: 0;
      left: 0;
      width: 90%;
      display: table;
      bottom: 0;
      top: 0;
      margin: auto;
      line-height: 0em; }
    #spnav li {
      display: block;
      margin: auto;
      margin-bottom: 1em;
      text-align: center; }
      #spnav li img {
        width: 90%;
        vertical-align: middle;
        padding: 10px 0px; }
      #spnav li:nth-child(3) {
        width: 24%; }
        #spnav li:nth-child(3) img {
          max-width: 56px; } }

#concept {
  background-image: url("../img/concept04.png");
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat; }
  #concept section {
    max-width: 2000px;
    margin: auto; }
    @media (min-width: 426px) {
      #concept section {
        padding-bottom: 130px; } }
    @media (max-width: 425px) {
      #concept section {
        padding-bottom: 15%;
        min-width: 320px; } }
  @media (min-width: 426px) {
    #concept h1 {
      max-width: 232px;
      padding-top: 56px;
      margin-left: 4%;
      margin-bottom: 3%; } }
  @media (max-width: 425px) {
    #concept h1 {
      max-width: 366px;
      width: 57.18%;
      padding-top: 7%;
      margin-left: 3%; } }
  #concept h2 {
    opacity: 0;
    transition: 2s; }
    @media (min-width: 426px) {
      #concept h2 {
        width: 564px;
        margin: auto;
        margin-bottom: 50px; } }
    @media (max-width: 425px) {
      #concept h2 {
        margin-bottom: 10%; } }
  #concept div {
    width: 90%;
    margin: auto; }
    @media (min-width: 426px) {
      #concept div {
        max-width: 612px;
        margin-bottom: 3%; } }
    @media (max-width: 425px) {
      #concept div {
        padding-top: 16%;
        margin-bottom: 4%; } }
  #concept p {
    opacity: 0;
    margin: auto;
    transition: 2s;
    transition-delay: .8s; }

#member {
  background-color: #ffd801;
  position: relative;
  overflow: hidden; }
  #member section {
    max-width: 2000px;
    margin: auto;
    position: relative;
    width: 100%; }
    @media (min-width: 426px) {
      #member section {
        height: 940px; } }
    @media (max-width: 425px) {
      #member section {
        min-width: 320px; } }
  @media (max-width: 425px) {
    #member .spwrap {
      margin: auto;
      position: relative; } }
  @media (min-width: 426px) {
    #member h1 {
      max-width: 199px;
      padding-top: 56px;
      margin-left: 4%; } }
  @media (max-width: 425px) {
    #member h1 {
      max-width: 359px;
      width: 56%;
      padding-top: 7%;
      margin-left: 3%; } }
  #member #search {
    position: absolute; }
    @media (min-width: 426px) {
      #member #search {
        margin-top: 45px;
        margin-left: 4%;
        width: 330px;
        display: block !important;
        z-index: 1; } }
    @media (max-width: 425px) {
      #member #search {
        display: none;
        z-index: 998;
        width: 90%;
        left: 0;
        right: 0;
        top: 13%;
        max-width: 320px;
        margin: auto; } }
    #member #search h2 {
      background-color: #fff;
      padding: 20px;
      box-sizing: border-box;
      border-radius: 10px 10px 0 0 / 10px 10px 0 0;
      -webkit-border-radius: 10px 10px 0 0 / 10px 10px 0 0;
      -moz-border-radius: 10px 10px 0 0 / 10px 10px 0 0; }
      #member #search h2 img {
        width: 145px; }
    #member #search ul {
      color: #dc2e8b;
      overflow: hidden; }
      @media (min-width: 426px) {
        #member #search ul {
          font-size: 16px;
          padding: 10px 0; } }
      @media (max-width: 425px) {
        #member #search ul {
          font-size: 12px;
          padding-bottom: 5%; } }
      #member #search ul li {
        float: left;
        border: solid 2px #dc2e8b;
        border-radius: 4px;
        box-sizing: border-box;
        cursor: pointer; }
        @media (min-width: 426px) {
          #member #search ul li {
            padding: 5px 21px;
            margin-right: 5px; }
            #member #search ul li:hover {
              background-color: #dc2e8b;
              color: #fff; } }
        @media (max-width: 425px) {
          #member #search ul li {
            padding: 2% 6.6%;
            margin-right: 1.5%; } }
        #member #search ul li:nth-child(5n) {
          margin-right: 0px; }
        #member #search ul li:nth-child(n+6) {
          margin-top: 5px; }
      #member #search ul .active {
        color: #ffd801;
        background-color: #dc2e8b; }
    #member #search #songs {
      color: #dc2e8b;
      border: solid 2px #dc2e8b;
      margin-bottom: 10px; }
      @media (min-width: 426px) {
        #member #search #songs {
          font-size: 16px; } }
      @media (max-width: 425px) {
        #member #search #songs {
          font-size: 13px; } }
      #member #search #songs dt {
        position: relative;
        cursor: pointer;
        box-sizing: border-box; }
        @media (min-width: 426px) {
          #member #search #songs dt {
            padding: 10px 10px; } }
        @media (max-width: 425px) {
          #member #search #songs dt {
            padding: 3%; } }
        #member #search #songs dt.close {
          background-color: #dc2e8b;
          color: #ffd801; }
      #member #search #songs dd {
        cursor: pointer;
        box-sizing: border-box;
        display: none; }
        @media (min-width: 426px) {
          #member #search #songs dd {
            padding: 10px 10px; } }
        @media (max-width: 425px) {
          #member #search #songs dd {
            padding: 3%; } }
        #member #search #songs dd:last-child {
          margin-bottom: 0; }
        #member #search #songs dd:hover, #member #search #songs dd.on {
          color: #ffd801;
          background-color: #dc2e8b; }
      #member #search #songs span {
        display: block;
        float: right;
        transition: 0.5s linear 0s; }
        @media (min-width: 426px) {
          #member #search #songs span {
            width: 16px;
            height: 16px; } }
        @media (max-width: 425px) {
          #member #search #songs span {
            width: 14px;
            height: 14px;
            margin: 2px; } }
        #member #search #songs span.on {
          transform: rotate(180deg);
          /* 標準 */
          -ms-transform: rotate(180deg);
          /* IE */
          -moz-transform: rotate(180deg);
          /* Firefox */
          -o-transform: rotate(180deg);
          /* Opera */
          -webkit-transform: rotate(180deg);
          /* Chrome, Safari */ }
    #member #search #songsmember #m11, #member #search #songsmember #m12 {
      color: #dc2e8b;
      font-weight: bold; }
    #member #search .musiclist {
      position: relative;
      background-color: #fff;
      box-sizing: border-box;
      overflow: hidden;
      border-radius: 0 0 10px 10px/ 0 0 10px 10px;
      -webkit-border-radius: 0 0 10px 10px/ 0 0 10px 10px;
      -moz-border-radius: 0 0 10px 10px/ 0 0 10px 10px; }
      #member #search .musiclist.off,
      #member #search .musiclist .off {
        display: none; }
      @media (min-width: 426px) {
        #member #search .musiclist {
          height: 300px;
          border-top: solid 10px #fff;
          padding: 10px 10px 30px 10px; } }
      #member #search .musiclist dl {
        margin-bottom: 1em;
        overflow: hidden; }
        @media (min-width: 426px) {
          #member #search .musiclist dl {
            width: 92%;
            margin-left: 10px; } }
        @media (max-width: 425px) {
          #member #search .musiclist dl {
            font-size: 13px; } }
      #member #search .musiclist dd {
        float: left;
        margin-left: 8px;
        line-height: 1.5em;
        cursor: pointer;
        max-width: 116px; }
        @media (min-width: 426px) {
          #member #search .musiclist dd {
            width: 45%; } }
        @media (max-width: 425px) {
          #member #search .musiclist dd {
            width: 30%; } }
        #member #search .musiclist dd.active {
          color: #dc2e8b;
          font-weight: bold; }
        #member #search .musiclist dd:hover {
          color: #dc2e8b; }
    #member #search .list {
      position: relative;
      background-color: #fff;
      box-sizing: border-box;
      overflow: hidden;
      border-radius: 0 0 10px 10px/ 0 0 10px 10px;
      -webkit-border-radius: 0 0 10px 10px/ 0 0 10px 10px;
      -moz-border-radius: 0 0 10px 10px/ 0 0 10px 10px; }
      #member #search .list.off {
        display: none; }
      @media (min-width: 426px) {
        #member #search .list {
          height: 434px;
          padding: 20px 10px 30px 10px; } }
      @media (max-width: 425px) {
        #member #search .list {
          height: 200px; } }
      #member #search .list dl {
        margin-bottom: 1em;
        overflow: hidden;
        width: 92%; }
        @media (min-width: 426px) {
          #member #search .list dl {
            margin-left: 10px; } }
      #member #search .list dt {
        color: #dc2e8b;
        line-height: 1em;
        padding-bottom: 0.5em;
        margin-bottom: 0.5em;
        border-bottom: solid 2px #dc2e8b; }
        @media (min-width: 426px) {
          #member #search .list dt {
            font-size: 24px; } }
        @media (max-width: 425px) {
          #member #search .list dt {
            font-size: 15px; } }
      #member #search .list dd {
        float: left;
        margin-left: 3%;
        cursor: pointer; }
        @media (min-width: 426px) {
          #member #search .list dd {
            width: 45%;
            line-height: 1.5em; }
            #member #search .list dd:hover {
              color: #dc2e8b; } }
        @media (max-width: 425px) {
          #member #search .list dd {
            line-height: 1.8em;
            font-size: 13px;
            width: 30%; } }
        #member #search .list dd.active {
          color: #dc2e8b;
          font-weight: bold; }
      @media (min-width: 426px) {
        #member #search .list #wa {
          margin-bottom: 310px; } }
      @media (max-width: 425px) {
        #member #search .list #wa {
          margin-bottom: 170px; } }
  #member #hukidashi {
    width: 64px;
    height: 50px;
    background-image: url("../img/member06.png");
    background-size: contain;
    background-repeat: no-repeat;
    position: absolute;
    font-size: 28px;
    color: #dc2e8b;
    top: 210px;
    right: -56px; }
    #member #hukidashi.off {
      display: none !important; }
    #member #hukidashi span {
      display: block;
      position: absolute;
      right: 13px;
      top: 15px; }
  @media (min-width: 426px) {
    #member #photo {
      width: 900px;
      height: 100%;
      position: absolute;
      left: 0;
      right: 0;
      bottom: 0;
      margin: auto; } }
  @media (max-width: 425px) {
    #member #photo {
      width: 110%;
      height: 100%;
      position: absolute;
      left: -30%;
      bottom: 0px;
      margin: auto; } }
  #member #photo img {
    opacity: 0;
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0; }
    @media (min-width: 426px) {
      #member #photo img {
        margin: auto; } }
    @media (max-width: 425px) {
      #member #photo img {
        width: 100%;
        top: 0; } }
  #member #photo .display {
    opacity: 1; }
  #member #box {
    position: absolute;
    color: #dc2e8b; }
    @media (min-width: 426px) {
      #member #box {
        width: 400px;
        height: 310px;
        right: 0;
        top: 0;
        bottom: 0;
        margin: auto; } }
    @media (max-width: 425px) {
      #member #box {
        width: 170px;
        background-color: #fff;
        border-radius: 10px;
        right: 2.5%;
        padding: 4%;
        width: 50%;
        box-sizing: border-box;
        top: 22%; } }
    #member #box h2 {
      line-height: 1em; }
      @media (min-width: 426px) {
        #member #box h2 {
          font-size: 44px;
          margin-bottom: 0.2em; } }
      @media (max-width: 425px) {
        #member #box h2 {
          font-size: 22px;
          margin-bottom: 0.1em; } }
    @media (min-width: 426px) {
      #member #box p {
        font-size: 18px; } }
    @media (max-width: 425px) {
      #member #box p {
        font-size: 10px; } }
    #member #box dl {
      line-height: 1em;
      overflow: hidden; }
      @media (min-width: 426px) {
        #member #box dl {
          font-size: 20px;
          margin-top: 2.5em; } }
      @media (max-width: 425px) {
        #member #box dl {
          font-size: 10px;
          margin-top: 1em; } }
    #member #box dt, #member #box dd {
      float: left;
      margin-bottom: 1em; }
    #member #box dt {
      clear: both; }
      @media (min-width: 426px) {
        #member #box dt {
          width: 7em; } }
      @media (max-width: 425px) {
        #member #box dt {
          width: 6em; } }
    @media (min-width: 426px) {
      #member #box dd {
        width: 10em; }
        #member #box dd:before {
          content: '：'; } }
    @media (max-width: 425px) {
      #member #box dd {
        width: 7em; } }
    #member #box ul {
      line-height: 1.5em;
      margin-top: 3em; }
      @media (min-width: 426px) {
        #member #box ul {
          width: 232px; } }
      @media (max-width: 425px) {
        #member #box ul {
          position: absolute;
          width: 100%; } }
      #member #box ul li {
        cursor: pointer; }
        #member #box ul li img {
          vertical-align: middle; }
          @media (min-width: 426px) {
            #member #box ul li img {
              width: 56px; } }
          @media (max-width: 425px) {
            #member #box ul li img {
              width: 35px; } }
      #member #box ul.off {
        display: none !important; }
      #member #box ul #prev {
        float: left; }
        @media (max-width: 425px) {
          #member #box ul #prev img {
            margin-left: 15px; } }
        @media (min-width: 426px) {
          #member #box ul #prev:hover:before, #member #box ul #prev:hover:after {
            left: -10px; }
          #member #box ul #prev img {
            margin-left: 15px; }
          #member #box ul #prev:before {
            left: 0;
            width: 20px;
            height: 20px;
            -webkit-border-radius: 50%;
            border-radius: 50%;
            background-color: #dc2e8b; }
          #member #box ul #prev:after {
            left: 0;
            left: 2px;
            box-sizing: border-box;
            width: 4px;
            height: 8px;
            border: 4px solid transparent;
            border-right: 7px solid #fff; } }
      #member #box ul #next {
        float: right; }
        @media (max-width: 425px) {
          #member #box ul #next img {
            margin-right: 20px; } }
        @media (min-width: 426px) {
          #member #box ul #next:hover:before, #member #box ul #next:hover:after {
            right: -10px; }
          #member #box ul #next img {
            margin-right: 28px; }
          #member #box ul #next:before {
            right: 0;
            width: 20px;
            height: 20px;
            -webkit-border-radius: 50%;
            border-radius: 50%;
            background-color: #dc2e8b; }
          #member #box ul #next:after {
            right: 2px;
            box-sizing: border-box;
            width: 4px;
            height: 8px;
            border: 4px solid transparent;
            border-left: 7px solid #fff; } }
      #member #box ul #prev, #member #box ul #next {
        position: relative;
        display: inline-block;
        color: #000;
        vertical-align: middle;
        text-decoration: none;
        font-size: 15px; }
        @media (min-width: 426px) {
          #member #box ul #prev, #member #box ul #next {
            padding: 0 0 0 16px; } }
      @media (min-width: 426px) {
        #member #box ul #prev:before,
        #member #box ul #prev:after,
        #member #box ul #next:before,
        #member #box ul #next:after {
          position: absolute;
          top: 0;
          bottom: 0;
          margin: auto;
          content: "";
          vertical-align: middle;
          transition: 0.2s linear 0s; } }
  #member #spsearch {
    width: 100%;
    background-color: #fff;
    height: 8%;
    position: absolute;
    bottom: 0;
    transition: 0.2s linear 0s; }
    #member #spsearch img {
      min-width: 75px;
      width: 16%;
      display: block;
      margin: auto;
      margin-top: 2.5%; }
    #member #spsearch.open {
      height: 87%; }

#news {
  background-color: #dc2e8b; }
  #news section {
    width: 90%;
    margin: auto;
    padding: 5% 0px; }
    #news section h1 {
      margin-bottom: 1em; }
      #news section h1 img {
        width: 64px; }
    #news section ul {
      background-color: #fff;
      border-radius: 10px;
      padding: 20px;
      box-sizing: border-box;
      font-size: 12px; }
    #news section .date {
      margin-bottom: 0.8em; }
    #news section .txt {
      line-height: 1.5em; }

@media (max-width: 425px) {
  #music_tit_sp {
    visibility: hidden;
    position: absolute;
    color: #dc2e8b;
    font-size: 14px;
    right: 2.5%;
    width: 51%;
    top: 16%;
    text-align: center; }
    #music_tit_sp.on_tit {
      visibility: visible; }

  .mCSB_inside > .mCSB_container {
    margin-right: 0px !important; }

  .mCSB_scrollTools .mCSB_draggerRail {
    width: 5px !important; }

  .mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar {
    width: 15px !important; }

  .mCSB_scrollTools .mCSB_dragger {
    min-height: 15px !important;
    height: 15px !important;
    margin-top: 1px; } }
footer {
  width: 100%; }
  @media (min-width: 426px) {
    footer {
      background-color: #dc2e8b;
      height: 154px;
      position: relative; } }
  @media (max-width: 425px) {
    footer {
      background-color: #333333; } }
  footer .frame {
    max-width: 2000px; }
    @media (min-width: 426px) {
      footer .frame {
        width: 95%;
        position: absolute;
        top: 0;
        bottom: 0;
        right: 0;
        left: 0;
        margin: auto;
        height: 70px;
        box-sizing: border-box; } }
    @media (max-width: 425px) {
      footer .frame {
        padding: 5%;
        box-sizing: border-box; } }
  footer #banner {
    overflow: hidden; }
    @media (min-width: 426px) {
      footer #banner li {
        width: 320px;
        float: left;
        margin-right: 30px; } }
    footer #banner li:first-child {
      margin-bottom: 1em; }
    footer #banner li:last-child {
      margin-bottom: 2em; }
    footer #banner a:hover {
      opacity: .8; }
  footer .wrap {
    color: #fff; }
    @media (min-width: 426px) {
      footer .wrap {
        font-size: 14px;
        position: absolute;
        right: 0;
        bottom: 0;
        top: 0;
        margin: auto;
        text-align: right;
        line-height: 1.4em; } }
    @media (max-width: 425px) {
      footer .wrap {
        font-size: 10px; } }
    footer .wrap .jas {
      overflow: hidden; }
      footer .wrap .jas li {
        float: left; }
      @media (min-width: 426px) {
        footer .wrap .jas {
          margin-bottom: 1em; } }
      @media (max-width: 425px) {
        footer .wrap .jas {
          margin-bottom: 0.5em; } }
    footer .wrap .icon {
      width: 35px; }
      @media (min-width: 426px) {
        footer .wrap .icon {
          display: inline-block;
          float: right;
          margin-left: 10px; } }
      @media (max-width: 425px) {
        footer .wrap .icon {
          margin-right: 10px; } }
    footer .wrap .copy {
      margin-right: 45px; }

#browser {
  background-color: #dc2e8b;
  position: relative;
  width: 100%;
  display: table;
  height: 100vh; }
  #browser .wrapper {
    display: table-cell;
    width: 100%;
    vertical-align: middle;
    text-align: center; }
    #browser .wrapper .lead {
      max-width: 818px;
      margin: auto; }
  #browser .links {
    margin-top: 60px; }
    #browser .links a {
      display: inline-block;
      margin: 0 10px; }
      #browser .links a:hover {
        opacity: .8; }

#modal-content {
  position: fixed;
  z-index: 9999;
  margin: 0 auto; }
  @media (min-width: 426px) {
    #modal-content h1 {
      width: 100%;
      max-width: 2000px;
      position: fixed;
      left: 0;
      right: 0;
      top: 0;
      margin: auto; }
      #modal-content h1 img {
        max-width: 147px;
        padding-top: 56px;
        margin-left: 4%; } }
  @media (max-width: 425px) {
    #modal-content h1 {
      width: 100%;
      max-width: 2000px;
      position: fixed;
      left: 0;
      right: 0;
      top: 0;
      margin: auto; }
      #modal-content h1 img {
        max-width: 183px;
        width: 57.18%;
        padding-top: 4%;
        margin-left: 3%; } }
  @media (min-width: 426px) {
    #modal-content {
      width: 70%;
      visibility: hidden; } }
  @media (max-width: 425px) {
    #modal-content {
      width: 90%;
      visibility: hidden; } }
  #modal-content button {
    background-color: transparent;
    border: none;
    outline: none;
    padding: 0;
    appearance: none;
    position: absolute;
    top: 50%;
    margin: auto;
    width: 70px;
    max-width: 70px;
    height: 70px; }
    @media (min-width: 426px) {
      #modal-content button {
        display: block; } }
    @media (max-width: 425px) {
      #modal-content button {
        display: none; } }
    #modal-content button img {
      cursor: pointer; }
      #modal-content button img:hover {
        opacity: .8; }
    #modal-content button#modal_pre {
      left: -80px;
      visibility: hidden; }
    #modal-content button#modal_next {
      right: -86px; }
  #modal-content #modal_main {
    position: relative;
    margin: auto; }
    @media (min-width: 426px) {
      #modal-content #modal_main {
        left: -1000px;
        opacity: 0; } }
    #modal-content #modal_main p {
      visibility: hidden;
      height: 100%; }
      #modal-content #modal_main p img {
        height: 100%; }
  @media (min-width: 426px) {
    #modal-content #modal_thum {
      position: inherit;
      margin: auto;
      margin-top: 30px;
      width: 78%;
      left: 0;
      right: -1000px; }
      #modal-content #modal_thum p {
        display: none; } }
  @media (max-width: 425px) {
    #modal-content #modal_thum {
      margin-top: 20px;
      position: relative; }
      #modal-content #modal_thum p {
        display: block;
        position: absolute;
        top: 0; } }
  #modal-content #modal_thum ul {
    position: relative; }
    #modal-content #modal_thum ul .new {
      position: absolute;
      z-index: 3;
      transform: scale(0); }
      #modal-content #modal_thum ul .new.on {
        transform: scale(1); }
    @media (min-width: 426px) {
      #modal-content #modal_thum ul {
        display: -webkit-box;
        /*--- Androidブラウザ用 ---*/
        display: -ms-flexbox;
        /*--- IE10 ---*/
        display: -webkit-flex;
        /*--- safari（PC）用 ---*/
        display: flex;
        -webkit-box-pack: justify;
        /*--- Androidブラウザ用 ---*/
        -ms-flex-pack: justify;
        /*--- IE10 ---*/
        -webkit-justify-content: space-between;
        /*--- safari（PC）用 ---*/
        justify-content: space-between;
        flex-wrap: wrap; }
        #modal-content #modal_thum ul .new {
          /*left: 83.5%;*/
          left: 83%;
          top: -15%; }
          #modal-content #modal_thum ul .new.on {
            width: 3.5%;
            transform: scale(1);
            transition: 0.3s linear 0s; } }
    @media (max-width: 425px) {
      #modal-content #modal_thum ul {
        height: 116px;
        padding-top: 30%; }
        #modal-content #modal_thum ul + ul {
          padding-top: 0;
          margin-top: -20%; }
        #modal-content #modal_thum ul .new {
          left: 24%;
          top: 72%; }
          #modal-content #modal_thum ul .new.on {
            width: 7%;
            transform: scale(1);
            transition: 0.3s linear 0.3s; } }
  #modal-content #modal_thum li {
    overflow: hidden;
    float: left;
    position: relative; }
    #modal-content #modal_thum li .back {
      z-index: 1;
      opacity: 0;
      -webkit-transform: rotateY(180deg);
      -ms-transform: rotateY(180deg);
      -moz-transform: rotateY(180deg);
      transform: rotateY(180deg); }
    #modal-content #modal_thum li .front {
      z-index: 2;
      margin-top: 0 !important;
      -webkit-transform: rotateY(0deg);
      -ms-transform: rotateY(0deg);
      -moz-transform: rotateY(0deg);
      transform: rotateY(0deg); }
    #modal-content #modal_thum li img {
      position: absolute;
      top: 0;
      left: 0; }
    @media (min-width: 426px) {
      #modal-content #modal_thum li.panel img {
        transition: 0.3s linear 0s; } }
    @media (max-width: 425px) {
      #modal-content #modal_thum li.panel img {
        transition: 0.3s linear 0s; } }
    #modal-content #modal_thum li.panel .front {
      opacity: 0;
      z-index: 1;
      -webkit-transform: rotateY(180deg);
      -ms-transform: rotateY(180deg);
      -moz-transform: rotateY(180deg);
      transform: rotateY(180deg); }
    #modal-content #modal_thum li.panel .back {
      opacity: 1;
      z-index: 2;
      -webkit-transform: rotateY(0deg);
      -ms-transform: rotateY(0deg);
      -moz-transform: rotateY(0deg);
      transform: rotateY(0deg); }
    @media (min-width: 426px) {
      #modal-content #modal_thum li {
        cursor: pointer;
        width: 15.2%;
        margin-right: -500px;
        opacity: 0; }
        #modal-content #modal_thum li.hover-thum {
          width: 15.86%; }
        #modal-content #modal_thum li.corsor_def {
          cursor: default; } }
    @media (max-width: 425px) {
      #modal-content #modal_thum li {
        width: 23.8%;
        /*width: 31.5%;*/
        margin-right: 2.5%;
        margin-bottom: 2.2%;
        /*&:nth-child(3),&:last-child{margin-right: 1.2%;}
        &:nth-child(4),&:last-child{margin-right: 1.2%;}*/ }
        #modal-content #modal_thum li.hover-thum {
          width: 23.8%;
          margin-right: 1.2%; } }
    #modal-content #modal_thum li img {
      vertical-align: top; }
  #modal-content #youtube {
    position: relative;
    background-color: #fff;
    box-sizing: border-box;
    margin: auto;
    border: solid 3px #fff;
    border-radius: 10px;
    overflow: hidden; }
    @media (min-width: 426px) {
      #modal-content #youtube {
        width: 80%; } }
    @media (max-width: 425px) {
      #modal-content #youtube {
        z-index: 1;
        width: 100%;
        height: 150px; } }
    #modal-content #youtube span {
      position: absolute;
      bottom: 0;
      left: 0;
      right: 0;
      margin: auto; }
      @media (min-width: 426px) {
        #modal-content #youtube span {
          display: block; } }
      @media (max-width: 425px) {
        #modal-content #youtube span {
          display: none !important; } }
  #modal-content #youtube iframe {
    margin-left: -1%;
    margin-top: -0.5%; }
    @media (min-width: 426px) {
      #modal-content #youtube iframe {
        width: 102% !important;
        height: 102% !important; } }
    @media (max-width: 425px) {
      #modal-content #youtube iframe {
        display: none;
        transform: scale(0.51);
        -o-transform: scale(0.51);
        -webkit-transform: scale(0.51);
        -moz-transform: scale(0.51);
        -ms-transform: scale(0.51);
        transform-origin: 0 0;
        -o-transform-origin: 0 0;
        -webkit-transform-origin: 0 0;
        -moz-transform-origin: 0 0;
        -ms-transform-origin: 0 0; } }
  #modal-content #modal-close {
    text-align: right;
    width: 100%;
    position: fixed;
    top: 0;
    left: 0; }
    @media (min-width: 426px) {
      #modal-content #modal-close {
        max-width: 2000px;
        right: 0;
        margin: auto; } }
    @media (min-width: 426px) {
      #modal-content #modal-close img {
        width: 37px;
        cursor: pointer;
        padding-top: 56px;
        margin-right: 4%; } }
    @media (max-width: 425px) {
      #modal-content #modal-close img {
        width: 18px;
        padding-top: 4%;
        margin-right: 3%; } }

#modal-overlay {
  z-index: 999;
  display: none;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 120%;
  background-color: rgba(220, 58, 145, 0.9); }

@media all and (-ms-high-contrast: none) {
  *::-ms-backdrop, #modal-overlay {
    background-color: rgba(220, 58, 145, 0.8); }

  /* IE11 */ }