@charset "UTF-8";
@import url('https://fonts.googleapis.com/css2?family=Noto+Serif+JP:wght@500;700&display=swap');
/* ===================================
	File Name   : plan.css
	Description : Dedicated Campaign CSS
	Editor      : Bface Otake
	Last Editor : Bface Otake
	
	Update Description :
  [2025/10/21] 新規作成

====================================== */

/*========== Style Contents ==========

	1. Individual Redefinition
  2. Share Elements
  3. Section [officialbuyer_intro] Setting
  4. Section [officialbuyer_about] Setting
  5. Section [officialbuyer_works] Setting
  6. Section [officialbuyer_privileges] Setting
  7. Section [officialbuyer_buyer] Setting
  8. Section [officialbuyer_schedule] Setting
  9. Section [officialbuyer_online] Setting
  10. Section [officialbuyer_contact] Setting
  11. Section [officialbuyer_download] Setting
	
====================================== */



/*===== ■1. Individual Redefinition =====*/
@media (max-width: 768px) {
	h1 {
		span {
			padding: 1.5rem;
		}
	}
}

/*===== ■2. Share Elements =====*/


/*===== ■3. plan LP =====*/
#plan {
  padding: 0 2rem 5rem;
  #plan_intro {
    p {
      text-align: center;
      &:first-of-type {
        margin-bottom: 2rem;
        font-weight: bold;
        font-size: 2rem;
      }
      &:nth-of-type(2) {
        margin-bottom: 2rem;
        line-height: 1.8;
      }
      &:last-of-type {
        margin-bottom: 3rem;
        line-height: 1.8;   
      }
    }
    table {
      width: 100%;
      max-width: 102.4rem;
      margin: 0 auto;
      border-collapse: separate;
      border-spacing: 1px;
      th {
        padding: 2rem;
        background: #333;
        color: #fff;
        font-size: 1.8rem;
        text-align: center;
        vertical-align: middle;
        word-break: break-all;
      }
      td {
        padding: 2rem;
        background: rgba(0, 0, 0, .05);
        font-size: 1.8rem;
        vertical-align: middle;
        word-break: break-all;
      }
    }
  }
  #plan_program {
    div {
      display: flex;
      justify-content: center;
      margin: 0 auto 3rem;
      max-width: 102.4rem;
      ul {
        max-width: 80%;
        border-left: 1px solid #ccc;
        flex: 1;
        li {
          display: flex;
          align-items: center;
          min-height: 9rem;
          padding: 1.5rem 2rem;
          font-size: 2rem;
          line-height: 1.2;
          border-bottom: 1px solid #ccc;
          &:first-child {
            border-top: 1px solid #ccc;
          }
        }
      }
      p {
        display: flex;
        align-items: center;
        justify-content: center;
        padding: 1.5rem 2rem;
        line-height: 1.2;
        font-size: 2rem;
        white-space: nowrap;
        border: 1px solid #ccc;
      }
    }
  }
  aside {
    display: flex;
    justify-content: center;
    gap: 3rem;
    max-width: 102.4rem;
    margin: 0 auto 4rem;
    padding: 0 2rem;
  }
}

@media (max-width: 768px) {
	#plan {
		margin: 0 1rem 4rem;
    padding: 0;
		#plan_intro {
      > p {
        text-align: left;
        margin-bottom: 1.5rem;
        &:first-of-type {
          font-size: 1.5rem;
        }
        &:nth-of-type(2) {
          margin-bottom: 1rem;
					line-height: 1.6;
        }
        &:last-of-type {
					line-height: 1.6;
        }
      }
			table {
				th {
					padding: 1.5rem;
					font-size: 1.5rem;
					white-space: nowrap;
				}
				td {
					padding: 1.5rem;
					font-size: 1.6rem;
				}
			}
		}
		#plan_program {
      overflow-x: auto;
      div {
        justify-content: flex-start;
        margin: 0 auto 1rem;
        min-width: 780px;
        ul {
          li {
            min-height: auto;
            padding: 1.5rem 1rem;
            text-align: left;
            font-size: 1.5rem;
          }
        }
        p {
          font-size: 1.5rem;
        }
      }
		}
		aside {
			gap: 1rem;
			margin: 0 auto 3rem;
			padding: 0 1rem;
		}
		aside + a { margin: 0 3rem;}
	}
}