@charset "UTF-8";
/* CSS Document */
@media only screen and (min-width: 768px) {
  .sp {
    display: none; }

  .pc {
    display: block; } }
@media only screen and (max-width: 767px) {
  .pc {
    display: none; }

  .sp {
    display: block; } }
.sp {
  display: none; }

.disnone {
  display: none; }

.idol {
  background: #fff;
  text-align: justify; }

#idol * {
  box-sizing: border-box;
  font-feature-settings: "palt"; }

img {
  vertical-align: bottom; }

#idol_header {
  display: flex;
  width: 950px;
  padding: 10px 0;
  align-items: center !important;
  margin: auto;
  justify-content: space-between; }
  @media only screen and (max-width: 767px) {
    #idol_header {
      width: 100%;
      align-items: center !important; } }
  #idol_header #logo {
    width: 580px; }
    @media only screen and (max-width: 767px) {
      #idol_header #logo {
        height: 20px;
        width: 70%;
        margin-left: 10px; } }
  @media only screen and (max-width: 767px) {
    #idol_header #twitter {
      height: 20px;
      margin-right: 10px; } }
  @media only screen and (max-width: 767px) {
    #idol_header #twitter img {
      width: 20px;
      height: 20px; } }

#header {
  background: #ffdce5;
  padding-bottom: 70px; }
  @media only screen and (max-width: 767px) {
    #header {
      padding-bottom: 20px; } }
  #header .inner {
    width: 950px;
    margin: auto; }
    @media only screen and (max-width: 767px) {
      #header .inner {
        width: 90%; } }

#nav {
  margin-top: -75px; }
  @media only screen and (max-width: 767px) {
    #nav {
      margin: 0;
      background: #fff; } }
  #nav ul {
    width: 1100px;
    margin: auto;
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
    padding-top: 35px !important; }
    @media only screen and (max-width: 767px) {
      #nav ul {
        width: 100%;
        justify-content: center; } }
    #nav ul li {
      width: calc((100% - 30px) / 6); }
      #nav ul li:hover {
        opacity: 0.8; }
      @media only screen and (max-width: 767px) {
        #nav ul li {
          width: calc((100% - 30px) / 3);
          margin: 0 1%; } }

#project {
  background: #fff; }
  #project .inner {
    padding: 0 0 100px 0;
    width: 950px;
    margin: auto;
    background: url("../img/bg_project.png");
    background-repeat: no-repeat;
    background-position: right bottom;
    background-size: 330px auto; }
    @media only screen and (max-width: 767px) {
      #project .inner {
        width: 100%;
        background-size: 150px auto;
        padding-bottom: 50px; } }
    #project .inner .text {
      width: 600px; }
      @media only screen and (max-width: 767px) {
        #project .inner .text {
          width: 90%;
          margin: auto; } }
      #project .inner .text p {
        font-weight: bold; }
    #project .inner h2 {
      margin-bottom: 35px; }
      @media only screen and (max-width: 767px) {
        #project .inner h2 {
          margin-top: 35px;
          width: 90%;
          margin: auto;
          padding: 30px 0; } }

#enjoy {
  background: url("../img/bg_stripe.png");
  padding: 100px 0; }
  @media only screen and (max-width: 767px) {
    #enjoy {
      padding-top: 50px;
      padding-bottom: 50px; } }
  #enjoy .inner {
    display: flex;
    justify-content: space-between; }
    @media only screen and (max-width: 767px) {
      #enjoy .inner {
        display: block; } }
    #enjoy .inner .enjoy_block,
    #enjoy .inner .menu_block {
      display: flex;
      flex-direction: column;
      justify-content: center;
      width: 49%;
      position: relative; }
      @media only screen and (max-width: 767px) {
        #enjoy .inner .enjoy_block,
        #enjoy .inner .menu_block {
          display: block;
          width: 100%;
          margin: auto;
          position: static !important; } }
      #enjoy .inner .enjoy_block div,
      #enjoy .inner .menu_block div {
        text-align: center;
        background: #fff;
        position: absolute;
        padding: 50px;
        top: auto;
        border-radius: 15px; }
        @media only screen and (max-width: 767px) {
          #enjoy .inner .enjoy_block div,
          #enjoy .inner .menu_block div {
            padding: 25px;
            width: auto;
            margin: 0 auto;
            position: static; } }
        #enjoy .inner .enjoy_block div h3,
        #enjoy .inner .menu_block div h3 {
          height: 80px;
          width: auto;
          margin: auto auto 10px auto; }
          @media only screen and (max-width: 767px) {
            #enjoy .inner .enjoy_block div h3,
            #enjoy .inner .menu_block div h3 {
              height: 40px; } }
          #enjoy .inner .enjoy_block div h3 img,
          #enjoy .inner .menu_block div h3 img {
            height: 80px;
            width: auto; }
            @media only screen and (max-width: 767px) {
              #enjoy .inner .enjoy_block div h3 img,
              #enjoy .inner .menu_block div h3 img {
                width: auto;
                height: 40px; } }
          #enjoy .inner .enjoy_block div h3 + p,
          #enjoy .inner .menu_block div h3 + p {
            font-weight: bold;
            color: #e25684;
            font-size: 1.2em;
            margin-bottom: 15px; }
        #enjoy .inner .enjoy_block div p:last-child,
        #enjoy .inner .menu_block div p:last-child {
          margin-top: 15px;
          margin-left: auto;
          margin-right: auto;
          width: 140px;
          text-align: center; }
    #enjoy .inner .enjoy_block {
      align-items: flex-end; }
      #enjoy .inner .enjoy_block div {
        margin-right: 3%;
        width: 400px; }
        @media only screen and (max-width: 767px) {
          #enjoy .inner .enjoy_block div {
            width: 90%;
            margin: 0 auto; } }
    #enjoy .inner .menu_block div {
      margin-left: 3%;
      width: 400px; }
      @media only screen and (max-width: 767px) {
        #enjoy .inner .menu_block div {
          width: 90%;
          margin: 30px auto auto auto; } }

#member {
  background: #ffedf2;
  padding: 100px 0 70px 0; }
  @media only screen and (max-width: 767px) {
    #member {
      padding-top: 50px;
      padding-bottom: 50px; } }
  #member .inner {
    width: 900px;
    margin: auto; }
    @media only screen and (max-width: 767px) {
      #member .inner {
        width: 90%; } }
    #member .inner h2 {
      width: 340px;
      height: auto;
      margin: auto auto 70px auto; }
      @media only screen and (max-width: 767px) {
        #member .inner h2 {
          width: 50%;
          margin: auto auto 35px auto;
          text-align: center; }
          #member .inner h2 img {
            height: 50px;
            width: auto; } }
    #member .inner #member_list {
      display: flex;
      flex-wrap: wrap;
      justify-content: space-between; }
      #member .inner #member_list li {
        width: calc((100% - 90px) / 4);
        text-align: center;
        font-weight: bold;
        margin-bottom: 40px; }
        @media only screen and (max-width: 767px) {
          #member .inner #member_list li {
            width: calc((100% - 30px) / 3) !important;
            margin-bottom: 20px; } }
        #member .inner #member_list li img {
          margin-bottom: 15px;
          line-height: 1.0;
          vertical-align: bottom; }

#recruit {
  background: url("../img/bg_stripe.png");
  text-align: center; }
  @media only screen and (max-width: 767px) {
    #recruit {
      padding-top: 0;
      padding-bottom: 0; } }
  #recruit p {
    width: 900px;
    margin: auto; }
    @media only screen and (max-width: 767px) {
      #recruit p {
        width: 100%;
        margin: auto; } }
    @media only screen and (max-width: 767px) {
      #recruit p :last-child {
        margin-top: 15px;
        margin-top: 0; } }

#information {
  padding: 100px 0;
  background: #ffedf2; }
  @media only screen and (max-width: 767px) {
    #information {
      padding: 50px 0; } }
  #information h2 {
    width: 530px;
    margin: auto auto 70px auto; }
    @media only screen and (max-width: 767px) {
      #information h2 {
        width: 50%;
        margin-bottom: 35px; } }
  #information h3 {
    color: #ea628f;
    font-weight: bold;
    text-align: left;
    font-size: 1.5em; }
  #information .store_map {
    margin-bottom: 70px; }
    @media only screen and (max-width: 767px) {
      #information .store_map {
        margin-bottom: 35px; } }
    #information .store_map iframe {
      height: 450px;
      width: 100%; }
      @media only screen and (max-width: 767px) {
        #information .store_map iframe {
          height: 180px;
          width: 100%; } }
  #information .inner {
    width: 950px;
    margin: auto; }
    @media only screen and (max-width: 767px) {
      #information .inner {
        display: block;
        width: 100%; } }
    #information .inner .address {
      width: 100%; }
      @media only screen and (max-width: 767px) {
        #information .inner .address {
          width: 90%;
          margin: auto; } }
      #information .inner .address dl {
        display: flex;
        flex-wrap: wrap; }
        @media only screen and (max-width: 767px) {
          #information .inner .address dl {
            display: block; } }
        #information .inner .address dl dt, #information .inner .address dl dd {
          padding: 10px 0;
          border-bottom: #ccc 1px solid; }
          @media only screen and (max-width: 767px) {
            #information .inner .address dl dt, #information .inner .address dl dd {
              width: 100%; } }
        #information .inner .address dl dt {
          width: 15%; }
          @media only screen and (max-width: 767px) {
            #information .inner .address dl dt {
              width: 100%; } }
        #information .inner .address dl dd {
          width: 85%; }
          @media only screen and (max-width: 767px) {
            #information .inner .address dl dd {
              width: 100%; } }
      #information .inner .address .reserve {
        width: 300px;
        margin: 30px auto auto auto; }

#sns {
  background: url("../img/bg_stripe.png");
  width: 100%;
  margin: 0 auto auto auto;
  padding: 100px 0; }
  @media only screen and (max-width: 767px) {
    #sns {
      padding: 30px 0; } }
  #sns .inner {
    width: 950px;
    margin: auto; }
    #sns .inner h2 {
      width: 165px;
      margin: auto auto 70px auto; }
      @media only screen and (max-width: 767px) {
        #sns .inner h2 {
          width: 20%;
          margin-bottom: 35px; } }
    #sns .inner ul {
      margin-top: 30px;
      width: 90%;
      margin: auto; }
      @media only screen and (max-width: 767px) {
        #sns .inner ul {
          width: 100%; } }
      #sns .inner ul li {
        margin: 0 0 30px 0; }
        @media only screen and (max-width: 767px) {
          #sns .inner ul li {
            width: 100%;
            margin-bottom: 15px; } }
        #sns .inner ul li img {
          width: 100%; }
    @media only screen and (max-width: 767px) {
      #sns .inner {
        width: 90%;
        margin: 20px auto auto auto; } }

#idol-recruit {
  background: #fff; }
  #idol-recruit .nav {
    margin-top: -75px; }
    @media only screen and (max-width: 767px) {
      #idol-recruit .nav {
        margin: 0 0 0 0;
        background: #fff; } }
    #idol-recruit .nav ul {
      width: 800px;
      margin: auto;
      display: flex;
      justify-content: space-between;
      flex-wrap: wrap; }
      @media only screen and (min-width: 768px) {
        #idol-recruit .nav ul {
          padding-top: 35px; } }
      @media only screen and (max-width: 767px) {
        #idol-recruit .nav ul {
          display: block;
          width: 80%;
          padding-top: 10px !important; } }
      #idol-recruit .nav ul li {
        width: calc((100% - 30px) / 2); }
        #idol-recruit .nav ul li:hover {
          opacity: 0.8; }
        @media only screen and (max-width: 767px) {
          #idol-recruit .nav ul li {
            width: 100%;
            margin-top: 20px; } }
  #idol-recruit .reverse {
    flex-direction: row-reverse; }
  #idol-recruit #header {
    background: url("../img/bg_stripe.png"); }
  #idol-recruit .block {
    border-bottom: 1px solid #929898;
    padding: 70px 0; }
    @media only screen and (max-width: 767px) {
      #idol-recruit .block {
        padding: 35px 0; } }
    #idol-recruit .block .inner {
      width: 950px;
      margin: auto;
      justify-content: space-between;
      display: flex; }
      @media only screen and (max-width: 767px) {
        #idol-recruit .block .inner {
          display: block;
          width: 90%;
          margin: auto; } }
      #idol-recruit .block .inner .img_big {
        width: 460px; }
        @media only screen and (max-width: 767px) {
          #idol-recruit .block .inner .img_big {
            width: 100%;
            margin-bottom: 30px; } }
      #idol-recruit .block .inner .text_big {
        width: 460px; }
        @media only screen and (max-width: 767px) {
          #idol-recruit .block .inner .text_big {
            width: 100%; } }
        #idol-recruit .block .inner .text_big dl {
          margin: 0;
          padding: 0; }
        #idol-recruit .block .inner .text_big dt {
          font-weight: bold;
          font-size: 36px;
          color: #e25684;
          line-height: 1.0;
          margin-bottom: 15px; }
          @media only screen and (max-width: 767px) {
            #idol-recruit .block .inner .text_big dt {
              font-size: 20px;
              text-align: center; } }
          #idol-recruit .block .inner .text_big dt img {
            width: 60px;
            height: auto;
            margin-bottom: 15px;
            vertical-align: bottom; }

/* -----ボタンの装飾----- */
.modal-open {
  text-align: center;
  cursor: pointer;
  color: #c61722;
  text-decoration: underline; }

.modal-open:hover {
  color: #c61722;
  text-decoration: none; }

/* ---ここからモーダル--- */
.modal-body {
  display: none;
  position: fixed;
  z-index: 10;
  /* ←他より数字を大きくする */
  top: 0;
  left: 0;
  width: 100%;
  height: 100%; }

.modal-close {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(255, 232, 238, 0.8);
  cursor: pointer; }

.modal-contents {
  position: absolute;
  top: 0;
  /* ←中央にする(height/2)+(padding/2) */
  bottom: 0;
  left: 0;
  right: 0;
  margin: 90px auto auto auto;
  /* ←中央にする(width/2)+(padding/2) */
  height: 85%;
  width: 60%;
  text-align: center; }
  @media only screen and (max-width: 767px) {
    .modal-contents {
      margin: auto; } }
  @media only screen and (max-width: 767px) {
    .modal-contents {
      width: 95%; } }

.modal-peke {
  position: absolute;
  top: 3rem;
  right: 1.2rem;
  cursor: pointer;
  background: #ea628f;
  color: #fff;
  font-weight: bold;
  padding: 5px 30px;
  border-radius: 100px; }
  @media only screen and (max-width: 767px) {
    .modal-peke {
      top: 1em; } }
  @media only screen and (max-width: 767px) {
    .modal-peke {
      padding-left: 1em;
      padding-right: 1em; } }