@charset "UTF-8";
/* ===================================================================
CSS information
 file name  :shared.css
 style info :共通のスタイル
=================================================================== */
/* ==========================================================
  BASE
========================================================== */
body {
  font-family: "NewRodinPro-DB", "ヒラギノ角ゴ Pro W3";
  -moz-text-size-adjust: 100%;
  -ms-text-size-adjust: 100%;
  text-size-adjust: 100%;
  -webkit-text-size-adjust: 100%;
  background-color: #000;
  line-height: 1.8; }
  body:focus {
    outline: none; }
  @media screen and (min-width: 751px) {
    body {
      font-size: 15px;
      min-width: 960px; } }
  @media screen and (max-width: 750px) {
    body {
      font-size: 4vw; } }

div, h1, h2, h3, h4, h5, h6, ul, li, section, p, a {
  -webkit-box-sizing: border-box;
  box-sizing: border-box; }

a img {
  -webkit-transition: all 0.3s;
  -o-transition: all 0.3s;
  transition: all 0.3s; }

a:hover img {
  -webkit-filter: brightness(110%);
  filter: brightness(110%);
  -webkit-transition: all 0.3s;
  -o-transition: all 0.3s;
  transition: all 0.3s; }

a:hover img.hoverNone {
  -webkit-filter: brightness(100%);
  filter: brightness(100%); }

.frame_boder {
  border: 2px solid #ffd200;
  border-radius: 10px; }

.new {
  position: relative; }
  .new:after {
    content: "";
    background: url(../img_new/shared/icn_new.png) no-repeat 0 0;
    position: absolute; }
    @media screen and (min-width: 751px) {
      .new:after {
        width: 75px;
        height: 41px;
        top: -14px;
        right: 4px; } }
    @media screen and (max-width: 750px) {
      .new:after {
        background-size: 100%;
        padding-bottom: 8%;
        width: 16%;
        height: auto;
        top: -2%;
        right: 2%; } }

#wrap {
  width: 100%;
  height: 100%;
  position: relative; }
  @media screen and (min-width: 751px) {
    #wrap {
      min-width: 960px; } }
  @media screen and (max-width: 750px) {
    #wrap {
      overflow-x: hidden; } }

/* ==========================================================
    MODULE
  ========================================================== */
@media screen and (min-width: 751px) {
  .pcNone {
    display: none; } }

@media screen and (max-width: 750px) {
  .spNone {
    display: none; }
  img {
    width: 100%; } }

/* ==========================================================
    HEADER
  ========================================================== */
header {
  width: 100%;
  background: #000; }
  @media screen and (min-width: 751px) {
    header {
      min-width: 960px;
      height: 44px; } }
  @media screen and (min-width: 751px) {
    header .inner {
      width: 960px;
      margin: 0 auto; } }
  @media screen and (max-width: 750px) {
    header .inner {
      padding: 3% 2.8% 3.4%; } }
  @media screen and (min-width: 751px) {
    header .inner p {
      width: 190px;
      padding-top: 2px; } }
  @media screen and (max-width: 750px) {
    header .inner p {
      width: 40%; } }
  @media screen and (max-width: 750px) {
    header .inner p a {
      display: block;
      display: -webkit-box;
      display: -ms-flexbox;
      display: flex;
      -webkit-box-align: center;
      -ms-flex-align: center;
      align-items: center; } }

#titleArea {
  width: 100%;
  background: url(../img_new/shared/title_bg.gif) repeat-x 0 0; }
  @media screen and (min-width: 751px) {
    #titleArea {
      min-width: 960px;
      height: 81px; } }
  @media screen and (max-width: 750px) {
    #titleArea {
      padding: 1.2% 3% 2%; } }
  @media screen and (min-width: 751px) {
    #titleArea .inner {
      width: 960px;
      margin: 0 auto; } }
  #titleArea .inner h1 {
    float: left; }
    @media screen and (min-width: 751px) {
      #titleArea .inner h1 {
        margin-right: 100px;
        padding-top: 12px; } }
    @media screen and (max-width: 750px) {
      #titleArea .inner h1 {
        width: 28%; } }
  @media screen and (min-width: 751px) {
    #titleArea .inner h2 {
      float: left;
      padding-top: 22px; } }
  @media screen and (max-width: 750px) {
    #titleArea .inner h2 {
      float: right;
      width: 72%;
      margin-top: -1.4%; } }

/* ==========================================================
    FOOTER
  ========================================================== */
#bnrArea {
  width: 100%;
  background-image: url(../img_new/shared/bg_footer.gif), url(../img_new/shared/bg_footer_repeat.png);
  background-repeat: repeat-x,repeat;
  background-position: 0 top,0 0; }
  @media screen and (min-width: 751px) {
    #bnrArea {
      padding: 20px 0 15px; } }
  @media screen and (max-width: 750px) {
    #bnrArea {
      padding: 2% 0 1.5%; } }
  #bnrArea ul {
    margin: 0 auto; }
    @media screen and (min-width: 751px) {
      #bnrArea ul {
        width: 780px; } }
    @media screen and (max-width: 750px) {
      #bnrArea ul {
        width: 96%; } }
    #bnrArea ul li {
      float: left; }
      @media screen and (min-width: 751px) {
        #bnrArea ul li {
          margin-right: 5px;
          margin-bottom: 5px; } }
      @media screen and (max-width: 750px) {
        #bnrArea ul li {
          width: 32.6%;
          margin-right: 1%;
          margin-bottom: 1%; } }
      @media screen and (min-width: 751px) {
        #bnrArea ul li:nth-child(8) {
          margin-right: 0px; } }
      @media screen and (max-width: 750px) {
        #bnrArea ul li:nth-child(3), #bnrArea ul li:nth-child(5), #bnrArea ul li:nth-child(8) {
          margin-right: 0%; } }
    #bnrArea ul div {
      float: left; }
      @media screen and (min-width: 751px) {
        #bnrArea ul div {
          margin-right: 0px; } }
      @media screen and (max-width: 750px) {
        #bnrArea ul div {
          width: 66.2%;
          margin-right: 1%; } }
      #bnrArea ul div li {
        margin-right: 0; }
        @media screen and (min-width: 751px) {
          #bnrArea ul div li {
            float: none; }
            #bnrArea ul div li:nth-child(1) {
              margin-bottom: 2px; } }
        @media screen and (max-width: 750px) {
          #bnrArea ul div li {
            width: 49.2%; }
            #bnrArea ul div li:nth-child(1) {
              margin-right: 1.6%; } }

footer {
  color: #fff;
  width: 100%;
  background: #000; }
  @media screen and (min-width: 751px) {
    footer {
      min-width: 960px;
      padding: 10px 0px; } }
  @media screen and (max-width: 750px) {
    footer {
      padding: 2% 0%; } }
  footer a {
    color: #fff;
    text-decoration: none; }
  footer .inner {
    margin: 0 auto; }
    @media screen and (min-width: 751px) {
      footer .inner {
        width: 960px; } }
    @media screen and (max-width: 750px) {
      footer .inner {
        width: 96%; } }
    @media screen and (min-width: 751px) {
      footer .inner .linkArea {
        margin-bottom: 10px; } }
    @media screen and (max-width: 750px) {
      footer .inner .linkArea {
        margin-bottom: 2%; } }
    footer .inner .linkArea li {
      font-family: "FOT-ロダンNTLG Pro B", "ヒラギノ角ゴ Pro W3";
      position: relative; }
      @media screen and (min-width: 751px) {
        footer .inner .linkArea li {
          font-size: 14px;
          padding-left: 8px; } }
      @media screen and (max-width: 750px) {
        footer .inner .linkArea li {
          font-size: 3vw;
          padding-left: 1.6%; } }
      footer .inner .linkArea li:before {
        content: "";
        position: absolute;
        width: 0;
        height: 0;
        border-style: solid;
        border-width: 5px 0 5px 5px;
        border-color: transparent transparent transparent #fff; }
        @media screen and (min-width: 751px) {
          footer .inner .linkArea li:before {
            top: 8px;
            left: 0px; } }
        @media screen and (max-width: 750px) {
          footer .inner .linkArea li:before {
            top: 42%;
            left: 0; } }
    @media screen and (min-width: 751px) {
      footer .inner .anoArea {
        font-size: 11px; } }
    @media screen and (max-width: 750px) {
      footer .inner .anoArea {
        font-size: 2vw; } }
    footer .inner .anoArea li {
      padding-left: 1em;
      text-indent: -1em; }
    footer .inner .copyright {
      text-align: right; }
      @media screen and (min-width: 751px) {
        footer .inner .copyright small {
          font-size: 12px; } }
      @media screen and (max-width: 750px) {
        footer .inner .copyright small {
          font-size: 2vw;
          display: block; } }