/*=============================================================================================================================

	front-page

=============================================================================================================================*/
#keyVisual {
  position: relative;
  display: block;
  width: 100%;
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center;
  background-image: url(../images/mainVis.jpg); }
  #keyVisual .inner {
    position: relative; }
    #keyVisual .inner:before {
      /*	content: "";*/
      display: block;
      padding-top: 75%; }
    #keyVisual .inner #copyArea {
      max-width: 1200px;
      margin: 0 auto 0 0;
      width: 50%;
      padding: 8vh 0 160px; }
      #keyVisual .inner #copyArea .svgWrap {
        max-width: 38vh;
        margin-bottom: 4vh;
        width: 80%; }
        #keyVisual .inner #copyArea .svgWrap:after {
          padding-top: 52.96%; }
        #keyVisual .inner #copyArea .svgWrap path {
          fill: #ffffff; }
      #keyVisual .inner #copyArea .formArea {
        background: rgba(255, 255, 255, 0.8);
        padding: 4vh 60px;
        text-align: center; }
        #keyVisual .inner #copyArea .formArea h3 {
          font-size: 24px;
          font-weight: bold; }
        #keyVisual .inner #copyArea .formArea dl {
          display: -webkit-box;
          display: -moz-box;
          display: -ms-flexbox;
          display: -webkit-flex;
          display: flex;
          justify-content: flex-start;
          align-items: center;
          margin: 15px auto;
          max-width: 320px; }
        #keyVisual .inner #copyArea .formArea dt {
          padding: 0 20px;
          font-weight: bold;
          width: 150px; }
        #keyVisual .inner #copyArea .formArea dd {
          width: calc(100% - 150px); }
          #keyVisual .inner #copyArea .formArea dd select {
            width: 100%; }
            #keyVisual .inner #copyArea .formArea dd select option {
              text-align: center; }
        #keyVisual .inner #copyArea .formArea .btn:before {
          background: #c9142a;
          border: #c9142a; }
        #keyVisual .inner #copyArea .formArea input[type="submit"] {
          padding: 5px 50px;
          font-size: 24px;
          color: #ffffff;
          letter-spacing: 10px;
          text-indent: 10px; }

.pickupGirl {
  padding: 4vh 0;
  position: relative; }

.recentGirl {
  padding: 4vh 0 4vh;
  background-repeat: repeat;
  background-size: 6px 6px;
  background-image: url(../images/bgstr2.png);
  background-color: #ffffff; }

#overView {
  padding: 8vh 0; }
  #overView header {
    color: #c9142a; }
  #overView .contInner {
    display: -webkit-box;
    display: -moz-box;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-start; }
    #overView .contInner p {
      margin: 20px 0 20px;
      width: 100%; }
    #overView .contInner .btn {
      margin: 0; }

#catNav {
  background: #c9142a;
  padding: 4vh 0; }
  #catNav header {
    color: #ffffff;
    margin-bottom: 20px; }
  #catNav ul {
    display: -webkit-box;
    display: -moz-box;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
    justify-content: space-between;
    max-width: 1600px;
    width: calc(100% - 8vh);
    margin: 0 auto; }
  #catNav li {
    width: calc(33.333% - 10px); }
    #catNav li a {
      display: block;
      position: relative; }
      #catNav li a:after {
        content: "";
        display: block;
        background: #000000;
        width: 100%;
        height: 100%;
        position: absolute;
        top: 0;
        left: 0;
        z-index: 1;
        opacity: 0; }
      #catNav li a:hover:after {
        opacity: .5; }
    #catNav li h3 {
      position: absolute;
      background: #ffffff;
      top: 10px;
      left: 0;
      padding: 3px 10px;
      font-size: 18px;
      font-weight: bold;
      z-index: 2; }
    #catNav li .btn {
      position: absolute;
      bottom: -20px;
      width: 100%;
      text-align: center;
      padding: 10px 0;
      z-index: 2; }
      #catNav li .btn:before {
        max-width: 200px;
        background: #ffffff; }
    #catNav li a:hover .btn:before {
      background: #ffffff; }
    #catNav li img {
      width: 100%;
      height: auto; }

#character {
  padding: 4vh 0; }
  #character .inner {
    display: -webkit-box;
    display: -moz-box;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex; }
    #character .inner section {
      width: 50%; }
      #character .inner section header {
        display: -webkit-box;
        display: -moz-box;
        display: -ms-flexbox;
        display: -webkit-flex;
        display: flex;
        justify-content: flex-start;
        align-items: center;
        height: 150px; }
        #character .inner section header div {
          max-width: 100px;
          margin: 0 10px 0 0; }
          #character .inner section header div img {
            width: 100%; }
      #character .inner section p {
        padding: 0 8vh 0 0; }
      #character .inner section .btn {
        margin-top: 20px; }

#advantage {
  background: #eeeeee;
  padding: 4vh 0; }
  #advantage header {
    margin-bottom: 20px; }
  #advantage ul {
    display: -webkit-box;
    display: -moz-box;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
    justify-content: space-between;
    max-width: 1600px;
    width: calc(100% - 8vh);
    margin: 0 auto 4vh; }
    #advantage ul li {
      width: calc(33.333% - 20px);
      display: -webkit-box;
      display: -moz-box;
      display: -ms-flexbox;
      display: -webkit-flex;
      display: flex;
      justify-content: center;
      flex-wrap: wrap;
      background: #ffffff;
      padding: 4vh; }
      #advantage ul li .svgWrap {
        max-width: 8vh; }
        #advantage ul li .svgWrap path {
          fill: #c9142a; }
      #advantage ul li h3 {
        font-size: 18px;
        font-weight: bold;
        margin: 15px 0;
        color: #c9142a;
        width: 100%; }
      #advantage ul li p {
        text-align: left; }
        #advantage ul li p br {
          display: none; }
        #advantage ul li p small {
          font-size: 12px;
          display: block; }
  #advantage .contactUs {
    padding: 0; }

#option {
  position: relative;
  overflow: hidden; }
  #option:before {
    content: "";
    display: block;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.5);
    position: absolute;
    bottom: 0;
    left: 0;
    z-index: 1; }
  #option header {
    position: absolute;
    z-index: 2;
    width: 100%;
    height: 100%;
    display: -webkit-box;
    display: -moz-box;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
    justify-content: center;
    align-items: center;
    align-content: center;
    flex-wrap: wrap;
    top: 0;
    left: 0; }
    #option header h3, #option header h4 {
      color: #ffffff;
      width: 100%; }
    #option header .btn {
      margin-top: 20px; }
      #option header .btn a {
        color: #ffffff; }
      #option header .btn:before {
        border-color: #ffffff; }
      #option header .btn:hover:before {
        border-color: #c9142a; }
  #option .simply-scroll-container {
    position: relative;
    z-index: 0;
    padding: 0; }
    #option .simply-scroll-container .simply-scroll-clip {
      position: relative;
      overflow: hidden;
      height: 270px; }
      #option .simply-scroll-container .simply-scroll-clip .simply-scroll-list {
        overflow: hidden;
        margin: 0;
        padding: 0;
        max-width: inherit; }
        #option .simply-scroll-container .simply-scroll-clip .simply-scroll-list li {
          float: left;
          padding: 0;
          margin: 0;
          width: 400px;
          height: 270px; }
          #option .simply-scroll-container .simply-scroll-clip .simply-scroll-list li img {
            max-width: 100%; }

#voices {
  position: relative;
  max-width: 1600px;
  width: calc(100% - 8vh);
  padding: 4vh 0; }
  #voices:before {
    content: "";
    display: block;
    width: 100%;
    height: 0;
    padding-top: 45%;
    background-image: url(../images/voiceBg.jpg);
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
    /* max-width: 1600px; */ }
  #voices .circle {
    position: absolute;
    z-index: 1;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    display: -webkit-box;
    display: -moz-box;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    text-align: center; }
    #voices .circle span {
      display: block;
      margin: auto;
      position: relative;
      padding: 4vh; }
      #voices .circle span:after {
        content: "";
        display: block;
        width: 100%;
        height: 0;
        padding-top: 100%;
        position: absolute;
        background: rgba(255, 255, 255, 0.8);
        z-index: 1;
        top: 50%;
        left: 50%;
        border-radius: 50%;
        box-shadow: 0 0 20px 0 rgba(0, 0, 0, 0.5);
        -moz-box-shadow: 0 0 20px 0 rgba(0, 0, 0, 0.5);
        -webkit-box-shadow: 0 0 20px 0 rgba(0, 0, 0, 0.5);
        -ms-box-shadow: 0 0 20px 0 rgba(0, 0, 0, 0.5);
        -o-box-shadow: 0 0 20px 0 rgba(0, 0, 0, 0.5);
        transform: translate(-50%, -50%);
        -moz-transform: translate(-50%, -50%);
        -webkit-transform: translate(-50%, -50%);
        -ms-transform: translate(-50%, -50%);
        -o-transform: translate(-50%, -50%); }
      #voices .circle span h4 {
        color: #c9142a;
        width: 100%;
        position: relative;
        z-index: 2;
        margin-top: 50px; }
      #voices .circle span h3 {
        width: 100%;
        position: relative;
        z-index: 2;
        font-size: 20px; }
      #voices .circle span .btn {
        width: 100%;
        max-width: 200px;
        margin-top: 20px; }
        #voices .circle span .btn:before {
          background: #ffffff; }
        #voices .circle span .btn:hover:before {
          background: #c9142a; }

.bannerArea {
  padding: 0 0 60px; }
  .bannerArea .inner {
    display: -webkit-box;
    display: -moz-box;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
    justify-content: space-between; }
    .bannerArea .inner section {
      width: calc(50% - 2vh); }
      .bannerArea .inner section.blogList ul {
        margin-bottom: 20px; }
      .bannerArea .inner section.blogList li {
        width: 100%; }
        .bannerArea .inner section.blogList li a {
          display: -webkit-box;
          display: -moz-box;
          display: -ms-flexbox;
          display: -webkit-flex;
          display: flex;
          padding: 10px 0;
          border-bottom: 1px dotted #cccccc; }
          .bannerArea .inner section.blogList li a:hover {
            background: #f8e5e7; }
          .bannerArea .inner section.blogList li a time {
            width: 120px; }
      .bannerArea .inner section.banner {
        max-width: 520px; }
        .bannerArea .inner section.banner nav ul li {
          margin-bottom: 2px; }
          .bannerArea .inner section.banner nav ul li a img {
            -webkit-transition: all 0.2s linear;
            -moz-transition: all 0.2s linear;
            -o-transition: all 0.2s linear;
            transition: all 0.2s linear;
            width: 100%; }
          .bannerArea .inner section.banner nav ul li a:hover img {
            opacity: .5; }

/*=============================================================================================================================

	Media Queries

=============================================================================================================================*/
@media screen and (max-width: 1024px) {
  #keyVisual {
    background: none; }
    #keyVisual .inner {
      padding: 0; }
      #keyVisual .inner #copyArea {
        width: 100%;
        padding: 0; }
        #keyVisual .inner #copyArea .svgWrap {
          max-width: inherit;
          display: -webkit-box;
          display: -moz-box;
          display: -ms-flexbox;
          display: -webkit-flex;
          display: flex;
          background-size: cover;
          background-repeat: no-repeat;
          background-position: center;
          background-image: url(../images/mainVis.jpg);
          text-align: center;
          padding: 10vh 0;
          margin: 0;
          width: 100%; }
          #keyVisual .inner #copyArea .svgWrap:after {
            content: none; }
          #keyVisual .inner #copyArea .svgWrap svg {
            max-width: 300px;
            margin: 0 auto;
            width: 90%;
            position: static; }
          #keyVisual .inner #copyArea .svgWrap path {
            fill: #ffffff; }
        #keyVisual .inner #copyArea .formArea {
          padding: 20px;
          text-align: center;
          background-repeat: repeat;
          background-size: 6px 6px;
          background-image: url(../images/bgstr2.png); }
          #keyVisual .inner #copyArea .formArea dl {
            display: -webkit-box;
            display: -moz-box;
            display: -ms-flexbox;
            display: -webkit-flex;
            display: flex;
            justify-content: flex-start;
            align-items: center;
            margin: 10px auto;
            max-width: 320px; }
            #keyVisual .inner #copyArea .formArea dl dt {
              padding: 0;
              font-weight: bold;
              width: 40%; }
            #keyVisual .inner #copyArea .formArea dl dd {
              width: 60%; }
              #keyVisual .inner #copyArea .formArea dl dd select {
                width: 100%; }
                #keyVisual .inner #copyArea .formArea dl dd select option {
                  text-align: center; }
          #keyVisual .inner #copyArea .formArea .btn:before {
            background: #c9142a;
            border: #c9142a; }
          #keyVisual .inner #copyArea .formArea input[type="submit"] {
            padding: 5px 50px;
            color: #ffffff;
            letter-spacing: 10px;
            text-indent: 10px;
            font-size: 16px; }

  .pickupGirl {
    padding: 0; }

  .recentGirl {
    padding: 0; }

  #overView {
    padding: 20px 0; }
    #overView .inner {
      text-align: center; }
      #overView .inner header {
        color: #c9142a;
        padding-bottom: 10px;
        text-align: left; }
      #overView .inner .contInner {
        justify-content: center; }
        #overView .inner .contInner p {
          text-align: left;
          width: auto; }

  #catNav {
    padding: 0 0 4vh; }
    #catNav ul {
      width: calc(100% - 20px); }
      #catNav ul li h3 {
        position: static;
        text-align: center; }

  #character {
    padding: 0; }
    #character .inner {
      flex-wrap: wrap;
      justify-content: center; }
      #character .inner section {
        width: 100%; }
        #character .inner section:not(:last-child) {
          margin-bottom: 4vh;
          padding-bottom: 4vh;
          border-bottom: 1px solid #f0f0f0; }
        #character .inner section header {
          margin-bottom: 20px;
          justify-content: center;
          height: auto; }
          #character .inner section header div {
            margin: 0 auto 10px;
            width: 100%;
            max-width: inherit;
            text-align: center; }
            #character .inner section header div img {
              max-width: 150px; }
          #character .inner section header h3 {
            text-align: left;
            width: auto; }
        #character .inner section .contInner {
          display: -webkit-box;
          display: -moz-box;
          display: -ms-flexbox;
          display: -webkit-flex;
          display: flex;
          flex-wrap: wrap;
          justify-content: center;
          max-width: 500px;
          margin: 0 auto; }
          #character .inner section .contInner p {
            padding: 0;
            text-align: left;
            width: 100%; }
          #character .inner section .contInner .btn {
            margin: 10px 0 0; }

  #advantage {
    padding: 20px 0; }
    #advantage header {
      margin-bottom: 20px; }
    #advantage ul {
      flex-wrap: wrap;
      width: calc(100% - 4vh);
      max-width: 600px;
      margin: 0 auto; }
      #advantage ul li {
        width: 100%;
        background: #ffffff;
        padding: 20px 20px;
        margin: 0 auto 10px; }
        #advantage ul li p {
          max-width: 280px; }
    #advantage .contactUs {
      padding: 0 20px; }

  #option {
    padding: 20px; }
    #option:before {
      content: "";
      display: block;
      width: calc(100% - 40px);
      height: calc(100% - 40px);
      background: rgba(0, 0, 0, 0.5);
      position: absolute;
      bottom: 20px;
      left: 20px;
      z-index: 1; }
    #option .simply-scroll-container .simply-scroll-clip {
      height: 203px; }
      #option .simply-scroll-container .simply-scroll-clip .simply-scroll-list li {
        width: 300px;
        height: 203px; }

  #voices {
    width: 100%;
    padding: 0 20px 20px; }
    #voices .circle span:after {
      content: none; }

  .bannerArea {
    padding: 20px 0;
    background: #f0f0f0; } }
@media screen and (max-width: 767px) {
  #catNav {
    padding: 0; }
    #catNav header {
      color: #ffffff;
      margin-bottom: 0;
      text-align: center; }
    #catNav ul {
      width: calc(100% - 20px);
      flex-wrap: wrap;
      justify-content: center; }
      #catNav ul li {
        width: 100%;
        max-width: 500px;
        margin: 0 0 8vh; }

  #voices {
    padding: 0 0 20px;
    width: 100%; }
    #voices:before {
      padding-top: 60vw; }
    #voices .circle {
      position: static;
      width: 100%;
      height: 100%; }
      #voices .circle span {
        padding: 0;
        margin-top: -20px; }
        #voices .circle span:after {
          content: none; }
        #voices .circle span h4 {
          margin-top: 0; }
        #voices .circle span .btn {
          margin-top: 5px; }

  #option header h3 br, #option header h4 br {
    display: block; }
  #option .simply-scroll-container .simply-scroll-clip {
    height: 203px; }
    #option .simply-scroll-container .simply-scroll-clip .simply-scroll-list li {
      width: 300px;
      height: 203px; }

  .bannerArea {
    padding: 20px 0; }
    .bannerArea .inner {
      flex-wrap: wrap;
      background: #f0f0f0; }
      .bannerArea .inner section {
        width: 100%; }
        .bannerArea .inner section.blogList {
          margin-bottom: 20px;
          text-align: center; }
          .bannerArea .inner section.blogList ul {
            margin-bottom: 20px; }
            .bannerArea .inner section.blogList ul li {
              width: 100%; }
              .bannerArea .inner section.blogList ul li a {
                display: -webkit-box;
                display: -moz-box;
                display: -ms-flexbox;
                display: -webkit-flex;
                display: flex;
                padding: 10px 0;
                border-bottom: 1px dotted #cccccc; }
                .bannerArea .inner section.blogList ul li a:hover {
                  background: #f8e5e7; }
                .bannerArea .inner section.blogList ul li a time {
                  width: 100px; } }

/*# sourceMappingURL=index.css.map */
