/* デザイン色設定 */
  body {
      font-family: 'Arial', sans-serif;
  }

  html {
      scroll-behavior: smooth;
  }


  .navbar {
      background-color: #343a40;
  }

  .navbar-brand,
  .navbar-nav .nav-link {
      color: #ffffff;
  }

  .jumbotron {
      background-image: url('https://via.placeholder.com/1920x600');
      background-size: cover;
      background-position: center;
      color: white;
      text-shadow: 2px 2px 5px rgba(0, 0, 0, 0.7);
  }

  .jumbotron h1 {
      font-size: 2.8rem;
  }

  .jumbotron p {
      font-size: 1.5rem;
  }

  .btn-primary {
      background-color: #007bff;
      border-color: #007bff;
  }

  section {
      padding: 60px 0;
  }

  h2 {
      color: #343a40;
  }

  h4 {
      font-size: 1.3rem;
  }

  .bg-light {
      background-color: #f8f9fa !important;
  }

  footer {
      background-color: #343a40;
      color: white;
  }


  .dashed-note {
      background-color: #fff;
      /* 背景色 */
      background-image: linear-gradient(90deg, transparent 0%, transparent 50%, #fff 50%, #fff 100%),
          /* 点線1の色 */
          linear-gradient(180deg, #999 1px, transparent 1px);
      /* 点線2の色と太さ */
      background-size: 8px 100%,
          /* 点線1のサイズ */
          100% 2.5em;
      /* 点線2のサイズ */
      line-height: 2.5em;
      /* 文字の高さ */
      padding-bottom: 1px;
      /* 最終行の下にも罫線を引く */
      width: 80%;
      margin-left: auto;
      margin-right: auto;
  }


  .success-message {
      display: flex;
      justify-content: center;
      align-items: center;
      height: 100vh;
      /* ビューポートの高さを全体にする */
      flex-direction: column;
      text-align: center;
  }

  .success-message p {
      font-size: 1.5rem;
      margin-bottom: 20px;
  }

  .success-message a {
      font-size: 1.2rem;
      color: #007bff;
      text-decoration: none;
      padding: 10px 20px;
      background-color: #f8f9fa;
      border-radius: 5px;
      transition: background-color 0.3s ease;
  }

  .success-message a:hover {
      background-color: #e9ecef;
  }

  .w-80 {
      width: 75% !important;
      margin-left: auto !important;
      margin-right: auto !important;
  }

  /* パソコンで見たときは"pc"のclassがついた画像が表示される */
  .pc {
      display: block !important;
  }

  .sp {
      display: none !important;
  }

  /* スマートフォンで見たときは"sp"のclassがついた画像が表示される */
  @media only screen and (max-width: 750px) {
      .pc {
          display: none !important;
      }

      .sp {
          display: block !important;
      }
  }

  /* スマホやタブレット対応 */
  @media (max-width: 768px) {
      .jumbotron {
          height: 400px;
          /* スマホでは高さを400pxに調整 */
          background-size: cover;
          /* 横幅いっぱいで縦幅に対応 */
      }

      .jumbotron h1 {
          font-size: 2rem;
          /* タイトルのフォントサイズを縮小 */
      }

      .jumbotron p {
          font-size: 1.2rem;
          /* サブテキストのフォントサイズを調整 */
      }

      .dashed-note {
          width: 100%;
      }

      h2 {
          font-size: 1.5rem !important
      }

      .w-80 {
          width: 100% !important;

      }
  }

  /* 中くらいのデバイス対応（例: タブレット） */
  @media (min-width: 769px) and (max-width: 992px) {
      .jumbotron {
          height: 450px;
          /* タブレットでは高さを450pxに設定 */
          background-size: cover;
          /* 横幅いっぱいで縦幅に対応 */
      }
  }