@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_top/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: 50px; } }
  @media screen and (min-width: 751px) {
    header .inner {
      width: 960px;
      margin: 0 auto; } }
  @media screen and (max-width: 750px) {
    header .inner {
      padding: 1vw 2.8% 2vw; } }
  header .inner p {
    float: left; }
    @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%;
        padding-top: 3vw; } }
    @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; } }
  header .inner #head_langBox {
    font-family: 'Roboto', sans-serif;
    float: right;
    position: relative;
    color: #bebebe;
    text-align: right; }
    @media screen and (min-width: 751px) {
      header .inner #head_langBox {
        padding-top: 6px;
        margin-left: 10px;
        font-size: 13px; } }
    @media screen and (max-width: 750px) {
      header .inner #head_langBox {
        font-size: 3.4vw; } }
  header .inner #head_langBox #head_langBox_langBtn {
    border-radius: 5px;
    border: 2px solid #bdbdbd; }
    @media screen and (min-width: 751px) {
      header .inner #head_langBox #head_langBox_langBtn {
        width: 124px;
        display: block;
        cursor: pointer;
        padding: 5px 0.8em; } }
    @media screen and (max-width: 750px) {
      header .inner #head_langBox #head_langBox_langBtn {
        width: auto;
        padding: 0.3em 1em;
        margin-top: 0.2em; }
        header .inner #head_langBox #head_langBox_langBtn img {
          width: 100%; } }
  header .inner #head_langBox ul {
    display: none;
    position: absolute;
    right: 0;
    background: #000;
    z-index: 9999; }
    @media screen and (min-width: 751px) {
      header .inner #head_langBox ul {
        top: 50px;
        z-index: 9999;
        width: 11em; } }
    @media screen and (max-width: 750px) {
      header .inner #head_langBox ul {
        top: 118%;
        width: 10em; } }
  header .inner #head_langBox ul li a {
    display: block;
    color: #bebebe;
    background: #000;
    text-decoration: none; }
    @media screen and (min-width: 751px) {
      header .inner #head_langBox ul li a {
        height: 62px;
        line-height: 62px;
        padding: 0px 20px; } }
    @media screen and (max-width: 750px) {
      header .inner #head_langBox ul li a {
        padding: 6% 10%; } }
  header .inner #head_langBox ul li a:hover {
    background-color: #4b4e56;
    color: #FFFFFF; }
  header .inner .head_langBox_langBtn-txt {
    display: inline; }
  header .inner .head_langBox_langBtn-icon {
    padding-left: 0.8em;
    display: inline-block; }
    @media screen and (min-width: 751px) {
      header .inner .head_langBox_langBtn-icon {
        width: 18px; } }
    @media screen and (max-width: 750px) {
      header .inner .head_langBox_langBtn-icon {
        width: 32px; } }
  header .inner .head_langBox_langBtn-icon img {
    vertical-align: middle; }

#titleArea {
  width: 100%;
  background: url(../img_top/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
  ========================================================== */
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%; } }
    footer .inner .copyright {
      text-align: center; }
      @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; } }