body {
  background: #000; }

@media only screen and (min-width: 768px) {
  .sponly {
    display: none; } }

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

.top {
  min-height: 100vh;
  position: relative; }
  @media only screen and (max-width: 767px) {
    .top {
      background: url("../img/bg_sp.png") no-repeat center top/cover; } }
  @media only screen and (max-width: 767px) {
    .top__content {
      margin: 0 0 50px; } }
  @media only screen and (min-width: 768px) {
    .top__content {
      position: relative;
      margin: 0 auto; } }
  .top__bg {
    margin-right: 70px; }
    @media only screen and (max-width: 767px) {
      .top__bg {
        display: none; } }
    .top__bg-left {
      position: absolute;
      top: -2%;
      left: 0;
      z-index: -1; }
    .top__bg-right {
      position: absolute;
      top: -1.5%;
      right: -60px;
      z-index: -1; }
  .top__hero {
    width: 100%; }
    @media only screen and (max-width: 767px) {
      .top__hero {
        margin: 50px auto; } }
    @media only screen and (min-width: 768px) {
      .top__hero {
        margin: 100px auto 0;
        max-width: 1000px; } }
  .top__inquiry {
    text-align: center;
    font-size: 0.9rem;
    color: #000; }
    @media only screen and (max-width: 767px) {
      .top__inquiry {
        margin: 0 0 30px; } }
    @media only screen and (min-width: 768px) {
      .top__inquiry {
        position: absolute;
        bottom: 60px;
        right: 0;
        left: 0;
        margin: auto; } }
    .top__inquiry img {
      width: auto;
      filter: drop-shadow(0 0 1px rgba(0, 0, 0, 0.9)); }
  .top__logo {
    margin: auto;
    text-align: center; }
    @media only screen and (min-width: 768px) {
      .top__logo {
        position: absolute;
        bottom: 20px;
        left: 50%;
        transform: translateX(-50%); } }
    .top__logo-inner {
      display: flex; }
      @media only screen and (max-width: 767px) {
        .top__logo-inner {
          flex-direction: column; } }
      @media only screen and (min-width: 768px) {
        .top__logo-inner {
          align-items: center;
          width: 775px; } }
    .top__logo-text {
      color: #000;
      letter-spacing: 0.1em; }
      @media only screen and (max-width: 767px) {
        .top__logo-text {
          margin: 0; } }
      @media only screen and (min-width: 768px) {
        .top__logo-text {
          margin-right: 20px;
          position: relative;
          top: 5px; } }
      .top__logo-text a:hover {
        text-decoration: underline; }
      .top__logo-text img {
        width: auto; }
    @media only screen and (max-width: 767px) {
      .top__logo-img {
        margin: 0 10px; } }
    @media only screen and (min-width: 768px) {
      .top__logo-img img {
        width: auto; } }