html, body {
    overflow-x: hidden;
  }

  .header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 10px 20px;
    background: #222;
    color: white;
  }

  .header-left {
    display: flex;
    align-items: center;
  }

  .header-right {
    display: flex;
    align-items: center;
    gap: 20px; /* アイコンとリンクの間に余白 */
  }

  .header-link a{
    cursor: pointer;
    font-size: 16px;
    color: #ffffff;
    text-decoration: none;
  }

  /* ヘッダーロゴ画像 */
  .logo-img {
    height: 60px;
    width: auto;
  }

  body {
    font-family: sans-serif;
    line-height: 1.8;
    background-color: rgb(195, 195, 195);
    margin: 0;
    color: #333;
    /* padding: 40px;
    max-width: 800px;
    margin: auto; */
  }

  h1 {
    color: #373737;
    font-size: 40px;
    text-align: center;
  }

  h2 {
    color: #373737;
    background-color: rgb(255, 232, 99);
    text-align: center;
    padding: 0.5rem;
  }

  h3 {
    color: #373737;
    background-color: rgb(255, 222, 34);
  }

  h4 {
    font-size: 1.2rem;
    color: #373737;
    margin: 0 auto;
    text-align: center;
  }

  ul {
    width: 95%;
    /* margin-left: 1.5em; */
  }

  li {
    margin-bottom: 0.5em;
  }

  table {
    width: 90%;
    padding: 1rem; 
    margin: 1rem auto; 
    background-color: #fff; 
    border-collapse: separate; 
    border-spacing: 4px 12px; /* 行同士の間にスペース */
  }

  th {
    text-align: left; 
    background-color: #000; 
    color: #000000; 
    padding: 14px 20px; 
    font-weight: bold;
  }

  td {
    background-color: #f5f5f5; 
    color: #000000; 
    padding: 16px 40px 16px 32px;
  }

  .topImg {
    text-align: center;
    width: 100%;
    height: auto;
  }

  .contentsBox{
    background-color: #fff;
    width: 60%;
    padding: 40px;
    margin: 0rem auto;
  }

  .contentsBoxInner{
    width: 95%;
    /* padding: 40px; */
    margin: 0rem auto;
  }

  .mainImg {
    text-align: center;
    width: 100%;
    height: 100%;
  }

  .notInServiceImg {
    text-align: center;
    width: 100%;
    height: 100%;
  }

  .littleText {
    font-size: 0.8rem;
  }

  section {
    margin-bottom: 2rem;
  }

  .discIndentTxt {
    font-size: 1.8rem;
    font-weight: bold;
    line-height: 1;
    text-align: center;
    margin-top: 3rem;
  }

  .discIndentTxt span{
    background: linear-gradient(transparent 40%, #ffc3d9 80%);
    padding: 0 1em;
}

  .discContentsBox {
    display: flex;
    flex-wrap: wrap;
    width: 100%;
    margin-top: 4rem;
    align-items: center; 
    justify-content: center; /* ← space-around → center に変更 */
    column-gap: 30px;
  }

  .discContentsItems {
    width: 350px;
    height: 100%;
    margin-bottom: 30px;
    /* text-align: center; */
  }

  .formButtonWrapper {
    text-align: center;
    margin-bottom: 4rem;
  }
  
  .btn-link {
    display: inline-block;
    width: 270px;            /* ← 見た目調整 */
    height: 145px;
  }
  
  .formButton {
    display: inline-block; /* ← ブロックにしない方が安心 */
    width: 100%;            /* ← 見た目調整 */
    margin-bottom: 4rem;
  }

  .link-container {
    max-width: 960px;
    margin: 0 auto;
    display: flex;
    justify-content: center;
    gap: 24px;
  }

  .info-links {
    max-width: 400px;
    margin: 20px auto;
    padding: 0 16px;
  }

  .info-link-box {
    display: block;
    background-color: #ffcf21;
    padding: 12px 16px;
    margin-bottom: 15px;
    border-radius: 10px;
    box-shadow: 2px 2px 4px rgba(0, 0, 0, 0.1);
    color: #232323;
    font-weight: 600;
    text-decoration: none;
    text-align: center;
    transition: background-color 0.2s ease;
  }

  .info-link-box:hover {
    background-color: #fde397;
  }
  
  .icon {
    width: 200px;
    height: 200px;
    transition: opacity 0.3s ease;
  }
  
  .icon:hover {
    opacity: 0.7;
  }
  
  .form-links {
    max-width: 400px;
    margin: 20px auto;
    padding: 0 16px;
  }

  .form-link-box {
    height: 60px;
    line-height: 60px;
    display: block;
    background-color: #fe652d;
    padding: 12px 16px;
    margin-bottom: 15px;
    border-radius: 10px;
    box-shadow: 2px 2px 4px rgba(0, 0, 0, 0.1);
    color: #ffffff;
    font-weight: 600;
    text-decoration: none;
    text-align: center;
    transition: background-color 0.2s ease;
  }

  .form-link-box:hover {
    background-color: #fdc097;
  }

  /* フッター */
  .footer {
    background-color: #252525;
    color: white;
    padding: 16px 0;
    font-size: 14px;
    text-align: center;
    width: 100%;
    box-sizing: border-box;  /* 追加 */
  }

  .footer-text {
    max-width: 960px;
    margin: 0 auto;
    gap: 12px;
    padding: 0 16px; /* スマホ時にも左右に余白を持たせる */
    box-sizing: border-box;
  }

  .footer a {
    color: inherit;
    text-decoration: none;
  }

  .footer a:hover {
    text-decoration: underline;
  }

  .footer-credit a {
    color: inherit; /* リンク色を白のままに */
    text-decoration: none;
    margin: 0 8px; /* 左右に余白を追加 */
  }

/* レスポンシブ対応 */
@media (max-width: 768px){
  h1 {
    font-size: 30px;
  }

  ul {
    width: 85%;
    /* margin-left: 1.5em; */
  }

  li {
    margin-bottom: 0.5em;
  }

  table {
    width: 100%;
    padding: 0rem; 
    margin: 1rem auto; 
    background-color: #fff; 
    border-collapse: separate; 
    border-spacing: 4px 12px; /* 行同士の間にスペース */
  }

  th {
    text-align: left; 
    background-color: #000; 
    color: #000000; 
    padding: 0px 0px; 
    font-weight: bold;
  }

  td {
    background-color: #f5f5f5; 
    color: #000000; 
    padding: 8px 8px 4px 4px;
  }
  
  .selfpr-section h2{
    font-size: 1.4rem;
  }

  .logo-img {
    height: 30px;
    width: auto;
  }

  .header-link a{
    font-size: 12px;
  }

  .discIndentTxt {
    font-size: 1.4rem;
    font-weight: bold;
    line-height: 1;
    text-align: center;
    margin-top: 3rem;
  }

  .contentsBox{
    width: 90%;
    padding: 20px;
    /* margin: 0rem auto; */
  }

  .contentsBoxInner{
    width: 90%;
    padding: 20px;
    margin: 0rem auto;
  }

  .discContentsBox {
    width: 80%;
  }
        
  .officialBizPartner-item {
    display: flex;
    align-items: center;
    padding: 12px 8px;
    margin-bottom: 10px;
    cursor: pointer;
    border-color: #555;
    border-width: 10px;
    border-radius: 10px;
    box-shadow: 2px 2px 4px;
    background-color: #f0f0f0;
    transition: background-color 0.2s ease;
    transition: transform 0.3s ease; 
  }

  .officialBizPartner-item:hover {
    background-color: #ffff6e;
    transform: none; /* ← 上書きしないとscaleが残る */
    height: 150px; /* ホバー時の高さ */
  }
}