/******************************* 

メインビジュアル サブページ共通

*********************************/
#header.main-header {
  background-color: transparent;
  padding: 0px 64px;
  position: fixed;
  width: 100%;
  z-index: 3;
}

#header.main-header.scrolled {
  background-color: var(--white);
}

.main-visual {
  position: relative;
  margin-bottom: var(--space-xxl);
}

.main-visual-content {
  position: absolute;
  top: 50%;
  left: 30%;
  transform: translate(-50%, -50%);
  z-index: 2;
}

@media (max-width: 767px) {
  #header.main-header {
    background-color: transparent;
    padding: 0px 15px;
    position: fixed;
    width: 100%;
    z-index: 3;
  }

  .main-visual-content {
    position: absolute;
    top: 65%;
    left: 47%;
    transform: translate(-50%, -50%);
    z-index: 2;
    width: 81%;
  }
}

/******************************* 

代表挨拶

*********************************/
#representative {
  margin-bottom: var(--space-xxxl);
}

#representative .box .item {
  display: flex;
  gap: 60px;
  margin-bottom: 40px;
}

#representative .box .item .img {
  width: calc(30% - 18px);
}
#representative .box .item .img p{
  margin:4px 0 0 0;
  font-size: var(--font-size-xxs);
}
#representative .box .item .text {
  width: calc(70% - 42px);
}
#representative .box .item .text p {
  margin-bottom: 24px;
  font-size: var(--font-size-xs);
}
#representative .box .item .text p:nth-child(2) {
  text-align: right;
  font-weight: var(--font-weight-bold);
  margin-bottom: 0;
}

@media (max-width: 767px) {
  #representative .box .item {
    flex-direction: column;
    gap: 30px;
  }

  #representative .box .item .img {
    width: 74%;
    margin: 0 auto;
  }

  #representative .box .item .img p{
    margin:20px 0 0 0;
  }

  #representative .box .item .text {
    width: 100%;
  }

  #representative .box .item .text p:nth-child(2) {
    margin-bottom: 16px;
    text-align: right;
  }
}

/******************************* 

保険会社の専門職とは

*********************************/
#profession {
  margin-bottom: var(--space-xxxl);
}

#profession .box {
  display: flex;
}

#profession .box .item {
  display: flex;
  flex-direction: column;
  border: 1px solid var(--gray5);
  padding: 40px 30px;
  width: 25%;
}

#profession .box .item h3 {
  min-height: 3em;
  display: flex;
  line-height: normal;
  margin-bottom: 16px;
  font-size: var(--font-size-lg);
}

#profession .box .item:not(:last-child) {
  border-right: none;
}
.number {
  margin-bottom: 16px;
}
@media (max-width: 767px) {
  #profession .box {
    flex-direction: column;
  }
  #profession .box .item {
    width: 100%;
  }
  #profession .box .item:not(:last-child) {
    border-right: 1px solid var(--gray5);
    width: 100%;
  }
  #profession .box .item:not(:first-child) {
    border-top: none;
    width: 100%;
  }
  #profession .box .item h3 {
    min-height: 0;
  }
}

/******************************* 

特徴・強み

*********************************/
#features .box {
  display: flex;
  margin-bottom: var(--space-xxxl);
}

#features .box .item {
  display: flex;
  flex-direction: column;
  border: 1px solid var(--gray5);
  padding: 40px 30px;
  width: 100%;
}

#features .box .item .number {
  margin-bottom: 16px;
}

#features .box .item .title {
  margin-bottom: 24px;
}

#features .box .item:not(:nth-child(3)) {
  border-right: none;
}

@media (max-width: 767px) {
  #features .box {
    flex-direction: column;
  }
  #features .box .item {
    padding: 30px;
  }
  #features .box .item:not(:nth-child(3)) {
    border-right: 1px solid var(--gray5);
  }

  #features .box .item:not(:first-child) {
    border-top: none;
  }
  #features .box .item .title {
    line-height: var(--line-height-default);
  }
  #features .diagram {
    margin-bottom: 150px;
  }
}

/******************************* 

会社概要

*********************************/
#company {
  margin-bottom: var(--space-xxxl);
}

.company-table {
  background: #ffffff;
}

.table-row {
  display: flex;
  border-bottom: 1px solid var(--bk);
  padding: 24px 0;
}

.table-row:last-child {
  border-bottom: 1px solid var(--bk);
}

.table-label {
  width: 30%;
  font-weight: 600;
  color: var(--bk);
}

.table-value {
  width: 70%;
  color: var(--bk);
}

@media (max-width: 767px) {
  .table-row {
    flex-direction: column;
  }

  .table-row:first-child {
    padding-top: 0;
  }

  .table-value {
    width: 100%;
  }

  .table-label {
    width: 100%;
  }
}
/*******************************

サービス紹介

*********************************/
#service-list {
  margin-bottom: var(--space-xxl);
  padding: 60px 0;
}

#service-list .service-buttons {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  align-items: center;
  gap: 0;
}

#service-list .service-button {
  display: flex;
  align-items: center;
  gap: 30px;
  padding: 15px 40px;
  color: var(--bk);
  font-weight: 500;
  position: relative;
  cursor: pointer;
  transition: all 0.3s ease;
}

#service-list .service-button::before {
  content: "";
  position: absolute;
  left: -1px;
  top: 50%;
  transform: translateY(-50%);
  width: 1px;
  height: 20px;
  background: var(--gray5);
}

#service-list .service-button:last-child::after {
  content: "";
  position: absolute;
  right: -1px;
  top: 50%;
  transform: translateY(-50%);
  width: 1px;
  height: 20px;
  background: var(--gray5);
}

#service-list .service-button:hover {
  background: #f5f5f5;
}

#service-list .dropdown-icon {
  width: 20px;
  height: 20px;
  background: var(--gray5);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 10px;
  color: var(--white);
  position: relative;
}

#service-list .dropdown-icon::before {
  content: "";
  position: absolute;
  width: 8px;
  height: 8px;
  border-left: 2px solid var(--white);
  border-bottom: 2px solid var(--white);
  transform: rotate(-45deg);
  top: 4px;
}

@media (max-width: 767px) {
  #service-list {
    margin-bottom: var(--space-xxl);
    padding: 0px;
  }

  #service-list .service-buttons {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    gap: 0;
    padding: 0px 20px;
    font-size: 14px;
  }

  #service-list .service-button {
    width: 100%;
    padding: 15px 20px;
  }

  /* 両端の縦線を各ボタンに表示 */
  #service-list .service-button::before {
    content: "";
    position: absolute;
    left: -1px;
    top: 50%;
    transform: translateY(-50%);
    width: 1px;
    height: 20px;
    background: var(--gray5);
  }

  #service-list .service-button::after {
    content: "";
    position: absolute;
    right: -1px;
    top: 50%;
    transform: translateY(-50%);
    width: 1px;
    height: 20px;
    background: var(--gray5);
  }

  /* 念のため最終要素にも適用（上書き保証） */
  #service-list .service-button:last-child::after {
    content: "";
    position: absolute;
    right: -1px;
    top: 50%;
    transform: translateY(-50%);
    width: 1px;
    height: 20px;
    background: var(--gray5);
  }

  #service-list .service-button {
    padding: 15px 15px;
    gap: 15px;
  }
}

/******************************* 

求職者の方へ

*********************************/
#seekers {
  margin-bottom: var(--space-xxxl);
}

#seekers .decorative-title {
  text-align: center;
  font-size: var(--font-size-xl);
  margin-bottom: 24px;
  font-family: var(--font-figtree);
}

#seekers .flow-title {
  text-align: center;
  font-size: 28px;
  font-weight: 600;
  color: var(--bk);
  margin-bottom: 50px;
}

#seekers .flow-steps {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 40px;
  margin-bottom: 40px;
  padding: 0px 60px;
}

#seekers .flow-step {
  display: flex;
  align-items: center;
  border: 1px solid var(--gray5_7D7D7D, #7d7d7d);
  background: var(
    --gradient,
    linear-gradient(117deg, #f4f4f4 15.02%, #f5f5f5 47.53%, #ddd 85.07%)
  );
  padding: 30px 20px 30px 40px;
  width: 100%;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
  position: relative;
}

#seekers .flow-step:not(:last-child)::after {
  content: "";
  position: absolute;
  bottom: -15px;
  left: 50%;
  transform: translateX(-50%);
  width: 0;
  height: 0;
  border-left: 15px solid transparent;
  border-right: 15px solid transparent;
  border-top: 15px solid var(--gray5);
}

#seekers .step-label-wrapper {
  display: flex;
  align-items: center;
  gap: 30px;
  min-width: 80px;
}

#seekers .step-label-wrapper > :first-child {
  display: flex;
  flex-direction: column;
  align-items: center;
}

#seekers .step-label {
  font-size: 12px;
  color: var(--bk);
}

#seekers .step-num {
  font-size: 32px;
  font-weight: bold;
  color: var(--bk);
}

#seekers .step-divider {
  width: 1px;
  height: 60px;
  background: var(--gray5);
  margin: 0 20px;
}

#seekers .step-icon {
  width: 60px;
  height: 60px;
  display: flex;
  justify-content: center;
  margin: 0px 40px;
}

#seekers .step-content {
  flex: 1;
}

#seekers .step-title {
  font-size: 18px;
  font-weight: 600;
  color: var(--bk);
  margin-bottom: 10px;
}

#seekers .step-description {
  font-size: 14px;
  color: var(--bk);
}

#seekers .btn-wrapper {
  display: flex;
  justify-content: center;
  gap: 50px;
}

@media (max-width: 1200px) {
  #seekers .flow-steps {
    padding: 0px;
  }
}

@media (max-width: 767px) {
  #seekers .flow-step {
    flex-direction: column;
    padding: 30px 16px;
  }

  #seekers .flow-steps {
    padding: 0px;
  }

  #seekers .btn-wrapper {
    flex-direction: column;
    gap: 20px;
  }
}
/******************************* 

企業の方へ

*********************************/
#employers {
  margin-bottom: var(--space-xxxl);
  background: #ffffff;
}

#employers .decorative-title {
  text-align: center;
  font-size: var(--font-size-xl);
  margin-bottom: 24px;
  font-family: var(--font-figtree);
}

#employers .flow-title {
  text-align: center;
  font-size: 28px;
  font-weight: 600;
  color: #333;
  margin-bottom: 50px;
}

#employers .flow-steps {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 40px;
  margin-bottom: 40px;
  padding: 0px 60px;
}

#employers .flow-step {
  display: flex;
  align-items: center;
  border: 1px solid var(--gray5_7D7D7D, #7d7d7d);
  background: var(
    --gradient,
    linear-gradient(117deg, #f4f4f4 15.02%, #f5f5f5 47.53%, #ddd 85.07%)
  );
  padding: 30px 20px 30px 40px;
  width: 100%;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
  position: relative;
}

#employers .flow-step:not(:last-child)::after {
  content: "";
  position: absolute;
  bottom: -15px;
  left: 50%;
  transform: translateX(-50%);
  width: 0;
  height: 0;
  border-left: 15px solid transparent;
  border-right: 15px solid transparent;
  border-top: 15px solid var(--gray5);
}

#employers .step-label-wrapper {
  display: flex;
  align-items: center;
  gap: 30px;
  min-width: 80px;
}

#employers .step-label {
  font-size: 12px;
  color: var(--bk);
}

#employers .step-num {
  font-size: 32px;
  font-weight: bold;
  color: var(--bk);
}

#employers .step-divider {
  width: 1px;
  height: 60px;
  background: var(--gray5);
  margin: 0 20px;
}

#employers .step-icon {
  width: 60px;
  height: 60px;
  display: flex;
  justify-content: center;
  margin: 0px 40px;
}

#employers .step-content {
  flex: 1;
}

#employers .step-title {
  font-size: 18px;
  font-weight: 600;
  color: var(--bk);
  margin-bottom: 10px;
}

#employers .step-description {
  font-size: 14px;
  color: var(--bk);
}

#employers .btn-wrapper {
  display: flex;
  justify-content: center;
  gap: 50px;
}

@media (max-width: 1200px) {
  #employers .flow-steps {
    padding: 0px;
  }
}

@media (max-width: 767px) {
  #employers .flow-step {
    flex-direction: column;
    padding: 30px 16px;
  }

  #employers .flow-steps {
    padding: 0px;
  }

  #employerss .btn-wrapper {
    flex-direction: column;
    gap: 20px;
  }

  #employers {
    padding: 0px 0px 0px 0px;
  }
}

/******************************* 

アクチュアリー候補生向けサービス

*********************************/

#actuaries {
  margin-bottom: var(--space-xxxl);
  background: var(--white);
}

#actuaries h3 {
  margin-bottom: 24px;
}

#actuaries .wrapper .box {
  display: flex;
  justify-content: center;
  gap: 60px;
  padding: 60px;
}

#actuaries .wrapper .box .img-item {
  width: calc(40% - 24px);
}

#actuaries .wrapper .box .text-item {
  width: 100%;
}

#actuaries .btn-wrapper {
  display: flex;
  /* justify-content: center; */
  gap: 50px;
  padding-left: 60px;
}

@media (max-width: 767px) {
  #actuaries h3 {
    font-size: 18px;
  }

  #actuaries .wrapper .box .img-item {
    width: 100%;
  }

  #actuaries .wrapper .box .text-item {
    width: 100%;
  }

  #actuaries .wrapper .box {
    flex-direction: column;
    padding: 0px 0px 60px 0px;
    gap: 30px;
  }

  #actuaries {
    margin-bottom: var(--space-xxxl);
    background: var(--white);
    margin-bottom: var(--space-xxl);
  }
}

/******************************* 

キャリア相談

*********************************/
#career {
  margin-bottom: var(--space-xxxl);
  background: var(--white);
}

#career h3 {
  margin-bottom: 24px;
}

#career .wrapper .box {
  display: flex;
  justify-content: center;
  gap: 60px;
  padding: 60px;
}

#career .wrapper .box .img-item {
  width: calc(40% - 24px);
}

#career .wrapper .box .text-item {
  width: 100%;
}

#career .btn-wrapper {
  display: flex;
  gap: 50px;
  padding-left: 60px;
}

@media (max-width: 767px) {
  #career h3 {
    font-size: 18px;
  }

  #career .wrapper .box .img-item {
    width: 100%;
  }

  #career .wrapper .box .text-item {
    width: 100%;
  }

  #career .wrapper .box {
    flex-direction: column;
    padding: 0px 0px 60px 0px;
    gap: 30px;
  }

  #career {
    padding: 0px;
  }
}
/******************************************************************************* *****************  

キャリア相談
*******************************
*********************************/
/******************************* 

キャリア相談について

*********************************/
.introduction-text {
  color: var(--bk);
  font-family: var(--font-shippori);
  font-size: var(--font-size-md);
  font-weight: var(--font-weight-medium);
  text-align: center;
  margin-bottom: var(--space-xxl);
}

#consultation {
  margin-bottom: var(--space-xxl);
}

#consultation .item-title {
  margin-bottom: 60px;
}

#consultation .box .item {
  margin-bottom: 60px;
  padding-left: 60px;
}

#consultation .box .item h3 {
  border-bottom: 1px solid var(--bk);
  padding-bottom: 16px;
  margin-bottom: 50px;
  font-family: var(--font-shippori);
}

#consultation .box .item .icon-item {
  display: flex;
  justify-content: center;
  gap: 70px;
}

#consultation .box .item .icon-item .img-item {
  display: flex;
  gap: 30px;
}

#consultation .box .item .icon-item .img-item .text-item-02 {
  display: flex;
  flex-direction: column;
}

@media (max-width: 768px) {
  #consultation .box .item {
    padding-left: 0px;
    margin-bottom: 30px;
  }

  #consultation .box .item h3 {
    margin-bottom: 25px;
  }

  #consultation .item-title {
    margin-bottom: 30px;
  }

  .introduction-text {
    padding: 0 16px;
    text-align: left;
  }
}

/******************************* 

キャリア相談についてよくあるご質問

*********************************/
#faq {
  margin-bottom: var(--space-xxl);
}

#faq .item-title {
  margin-bottom: 60px;
}

#faq .box {
  padding-left: 60px;
}

#faq .box .item {
  border-top: 1px solid var(--bk);
  padding: 20px 0;
}

#faq .box .item:last-child {
  border-bottom: 1px solid var(--bk);
}
#faq .box .item .q {
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-medium);
}
#faq .box .item .a {
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-medium);
  margin: 0 0 0 1.6rem;
}

@media (max-width: 768px) {
  #faq .box {
    padding-left: 0px;
  }
}
/*******************************

アクチュアリーとは

*********************************/
#actuaries-list {
  margin-bottom: var(--space-xxl);
  padding: 60px 0;
}

#actuaries-list .service-buttons {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: 0;
}

#actuaries-list .service-button {
  display: flex;
  align-items: center;
  gap: 30px;
  padding: 15px 60px;
  color: var(--bk);
  font-weight: 500;
  position: relative;
  cursor: pointer;
  transition: all 0.3s ease;
}

#actuaries-list .service-button::before {
  content: "";
  position: absolute;
  left: -1px;
  top: 50%;
  transform: translateY(-50%);
  width: 1px;
  height: 20px;
  background: var(--gray5);
}

#actuaries-list .service-button:last-child::after {
  content: "";
  position: absolute;
  right: -1px;
  top: 50%;
  transform: translateY(-50%);
  width: 1px;
  height: 20px;
  background: var(--gray5);
}

#actuaries-list .service-button:hover {
  background: #f5f5f5;
}

#actuaries-list .dropdown-icon {
  width: 20px;
  height: 20px;
  background: var(--gray5);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 10px;
  color: var(--white);
  position: relative;
}

#actuaries-list .dropdown-icon::before {
  content: "";
  position: absolute;
  width: 8px;
  height: 8px;
  border-left: 2px solid var(--white);
  border-bottom: 2px solid var(--white);
  transform: rotate(-45deg);
  top: 4px;
}

#role {
  margin-bottom: var(--space-xxxl);
}

#role .box .item h3 {
  border-bottom: 1px solid var(--bk);
  padding-bottom: 16px;
  margin-bottom: 30px;
}

#role .box .item.item-01 {
  margin-bottom: 60px;
  padding-left: 60px;
}

#role .box .item.item-01 .text-item {
  margin-bottom: 60px;
}

#role .box .item .img-item-01 {
  display: flex;
  gap: 30px;
}

/* Flex 子要素の最小幅制約を解除してはみ出し防止 */
#role .box .item .img-item-01 > * {
  min-width: 0;
}

#role .box .item .img-item-02 > * {
  min-width: 0;
}

#role .box .item.item-02 {
  margin-bottom: 60px;
  padding-left: 60px;
}

#role .box .item.item-02 .text-item {
  margin-bottom: 60px;
}

#role .box .item.item-02 .field-item {
  margin-bottom: 60px;
}

#role .box .item.item-02 .field {
  display: flex;
  border: 1px solid var(--gray5_7D7D7D, #7d7d7d);
  background: var(
    --gradient,
    linear-gradient(117deg, #f4f4f4 15.02%, #f5f5f5 47.53%, #ddd 85.07%)
  );
  padding: 32px;
  gap: 90px;
  margin-bottom: 20px;
  align-items: center;
}

#role .box .item.item-02 .field p:nth-child(1) {
  font-weight: bold;
  font-size: 20px;
  font-family: var(--font-figtree);
  width: calc(30% - 27px);
  position: relative;
}

#role .box .item.item-02 .field p:nth-child(1)::after {
  content: "";
  position: absolute;
  right: -45px;
  top: 0;
  bottom: 0;
  width: 1px;
  background: var(--bk);
}

#role .box .item.item-02 .field p:nth-child(2) {
  padding-left: 20px;
  font-size: var(--font-size-md);
  width: calc(70% - 63px);
}

#role .box .item .img-item-02 {
  display: flex;
  gap: 30px;
}

#role .box .item .text-role {
  font-size: var(--font-size-md);
  margin-bottom: 16px;
  font-weight: var(--font-weight-medium);
}

/* アクチュアリーの役割 */

#becoming {
  margin-bottom: var(--space-xxxl);
}

#becoming .box .item h3 {
  border-bottom: 1px solid var(--bk);
  padding-bottom: 16px;
  margin-bottom: 30px;
}

#becoming .box .item.item-01 {
  margin-bottom: 60px;
  padding-left: 60px;
}

#becoming .box .item.item-01 .text-item {
  margin-bottom: 60px;
}

#becoming .box .item .img-item-01 {
  display: flex;
  gap: 30px;
}

/* 試験フローチャート */
#becoming .test-box {
  display: flex;
  justify-content: center;
  margin-bottom: 50px;
}

#becoming .test-item-01 {
  width: 100%;
  background: var(--white);
  padding: 0;
}

/* 試験ヘッダー */
#becoming .test-header {
  background: var(--gray5);
  padding: 20px;
  text-align: center;
}

#becoming .test-header p {
  color: #fff;
  font-size: 26px;
  font-weight: var(--font-weight-semi-bold);
}

/* 試験内容ボックス */
#becoming .test-content {
  background: linear-gradient(to bottom, #f4f4f4 0%, #f5f5f5 46%, #dddddd 100%);
  padding: 40px;
  border: 1px solid #e0e0e0;
  margin-bottom: 32px;
}

/* 目的セクション */
#becoming .test-purpose {
  margin-bottom: 30px;
}

#becoming .purpose-text {
  margin-bottom: 10px;
}

#becoming .purpose-label {
  font-size: 20px;
  line-height: 1.6;
  color: #333;
  padding-bottom: 16px;
  text-align: center;
  border-bottom: 1px solid var(--bk);
}

#becoming .text-process {
  font-size: var(--font-size-md);
  margin-bottom: 16px;
  font-weight: var(--font-weight-medium);
}

/* 試験科目ボックス */
#becoming .test-subjects {
  display: flex;
  gap: 15px;
  flex-wrap: wrap;
  justify-content: space-between;
}

#becoming .associate-member {
  background: var(--gray5);
  text-align: center;
  width: 300px;
  font-size: 20px;
  color: var(--white);
  margin: 0 auto;
}

#becoming .subject-box {
  background: #f9f9f9;
  display: flex;
  border: 1px solid #e0e0e0;
  padding: 13px 34px;
  justify-content: space-between;
  text-align: center;
  font-size: 16px;
}

/* 矢印 */
#becoming .arrow-down {
  width: 0;
  height: 0;
  border-left: 34px solid transparent;
  border-right: 34px solid transparent;
  border-top: 42px solid var(--gray2);
  margin: 15px auto;
}

/* 条件テキスト */
#becoming .condition-text {
  text-align: center;
  color: var(--bk_333333, #333);
  font-family: Figtree;
  font-size: 18px;
}

/* 合格ボックス */
#becoming .pass-box {
  text-align: center;
  font-size: 24px;
  font-weight: bold;
  color: var(--bk);
  margin: 15px 0;
}

/* 会員ボックス */
#becoming .member-box {
  background: var(--gray5);
  padding: 20px;
  text-align: center;
  width: 300px;
  margin: 0 auto;
  margin-bottom: 20px;
}

#becoming .member-box p {
  color: #fff;
  font-size: 20px;
  font-weight: 600;
  margin: 0;
}

/* コース説明 */
#becoming .course-instruction {
  margin-bottom: 30px;
}

/* コースボックス */
#becoming .test-courses {
  display: flex;
  gap: 15px;
}

#becoming .course-box {
  background: var(--white);
  padding: 20px;
  flex: 1;
  text-align: center;
}

#becoming .course-title {
  font-weight: bold;
  font-size: 18px;
  margin-bottom: 10px;
}

#becoming .course-box p {
  font-size: 16px;
  color: var(--bk);
  margin: 0;
}

/* 研修セクション */
#becoming .training-section {
  margin: 15px 0;
}

#becoming .training-item {
  margin-bottom: 15px;
}

#becoming .training-item p {
  text-align: center;
}

#becoming .training-item p.training-text {
  font-size: 34px;
  font-weight: var(--font-weight-bold);
}

/* 注釈 */
#becoming .footnote {
  margin-top: 30px;
  padding-top: 20px;
  text-align: center;
}

/* 試験スケジュール表 */
#becoming .exam-schedule {
}

@media (max-width: 767px) {
  #becoming .exam-schedule {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    width: 100%;
    padding-bottom: 8px; /* スクロールバー分の余白 */
  }

  #becoming .schedule-table {
    min-width: 700px;
    width: max-content;
    border-collapse: separate;
    border-spacing: 0;
  }

  #becoming .schedule-table thead th {
    position: sticky;
    top: 0;
    background: #f5f5f5;
    z-index: 10;
    border-bottom: 2px solid #e0e0e0;
  }

  #becoming .training-item p.training-text {
    font-size: 20px;
  }

  #becoming .test-content {
    padding: 40px 16px;
  }
}

#becoming .schedule-title {
  font-weight: 600;
  color: #333;
  margin-bottom: 30px;
  text-align: left;
}

#becoming .schedule-table {
  width: 100%;
  border-collapse: collapse;
  margin-bottom: 40px;
}

#becoming .schedule-table th {
  background: var(--gray2);
  border: 1px solid var(--bk);
  padding: 15px;
  text-align: left;
  font-weight: 600;
  font-size: 16px;
  color: #333;
}

#becoming .schedule-table td {
  border: 1px solid var(--bk);
  padding: 15px;
  font-size: 16px;
  color: var(--bk);
}

#becoming .schedule-table tbody tr:nth-child(even) {
  background: #fafafa;
}

#becoming .schedule-table tbody tr:nth-child(odd) {
  background: #fff;
}

#becoming .schedule-table .time-col {
  text-align: center;
  vertical-align: middle;
  border-bottom: var(--white);
}

#becoming .schedule-table .empty-time {
  border-top: none !important;
}

/* 追加情報ボックス */
#becoming .additional-info-box {
  background: #f5f5f5;
  padding: 40px;
  text-align: center;
  border: 1px solid #e0e0e0;
}

#becoming .additional-info-box p {
  font-size: 16px;
  color: #666;
  margin: 0;
}

/* アクチュアリー業界のいま */

#today .box .item h3 {
  border-bottom: 1px solid var(--bk);
  padding-bottom: 16px;
  margin-bottom: 30px;
}

#today .box .item .title {
  font-size: var(--font-size-md);
  font-weight: var(--font-weight-medium);
  margin-bottom: 22px;
  font-family: var(--font-figtree);
}

#today {
  margin-bottom: var(--space-xxl);
}

#today .box .img-item {
  display: flex;
  gap: 60px;
  align-items: center;
  margin-bottom: 60px;
}

#today .box .img-item .img {
  width: calc(50% - 30px);
}

#today .box .img-item .text-item {
  width: calc(50% - 30px);
}

/* アクチュアリーの声スライダー */
#today .voice-wrapper {
  margin-top: 40px;
  position: relative;
}

#today .voice-cards {
  display: flex;
  overflow: hidden;
  justify-content: center;
  position: relative;
}

#today .voice-card {
  background: var(--white);
  padding: 0px 80px;
  width: calc(33.333% - 27px);
  padding: 0px 56px;
  width: calc(30.333% - 27px);
  height: 350px;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  flex-shrink: 0;
}

#today .voice-card .voice-icon {
  width: 100px;
  height: 100px;
  margin-bottom: 20px;
}

#today .voice-card .voice-icon img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

#today .voice-card .voice-title {
  font-size: 20px;
  font-weight: 600;
  color: var(--bk);
  margin-bottom: 15px;
  line-height: 1.4;
}

#today .voice-card .voice-text {
  text-align: left;
}

/* スライダーコントロール */
#today .voice-controls {
  position: absolute;
  top: 50%;
  left: 0;
  right: 0;
  display: flex;
  justify-content: space-between;
  align-items: center;
  pointer-events: none;
}

#today .voice-prev,
#today .voice-next {
  background: #fff;
  width: 60px;
  height: 0px;
  display: flex;
  justify-content: center;
  cursor: pointer;
  font-size: 60px;
  color: #333;
  transition: all 0.3s ease;
  pointer-events: auto;
}

#today .voice-prev {
  transform: rotate(-90deg);
}

#today .voice-next {
  transform: rotate(90deg);
}

@media (max-width: 767px) {
  #actuaries-list .service-buttons {
    flex-direction: column;
    padding: 0 20px;
  }

  #actuaries-list .service-button {
    width: 100%;
    padding: 15px 15px;
    gap: 15px;
  }

  #actuaries-list {
    padding: 0px;
  }

  #actuaries-list .service-button::before {
    content: "";
    position: absolute;
    left: -1px;
    top: 50%;
    transform: translateY(-50%);
    width: 1px;
    height: 20px;
    background: var(--gray5);
  }

  #actuaries-list .service-button::after {
    content: "";
    position: absolute;
    right: -1px;
    top: 50%;
    transform: translateY(-50%);
    width: 1px;
    height: 20px;
    background: var(--gray5);
  }

  #actuaries-list .service-button:last-child::after {
    content: "";
    position: absolute;
    right: -1px;
    top: 50%;
    transform: translateY(-50%);
    width: 1px;
    height: 20px;
    background: var(--gray5);
  }

  #role .box .item.item-01 {
    padding: 0 0px;
  }

  #role .box .item .img-item-01 {
    display: flex;
    gap: 30px;
    flex-direction: column;
  }

  #role .box .item.item-02 {
    padding: 0 0px;
  }

  #role .box .item.item-02 .field {
    flex-direction: column;
    gap: 45px;
    padding: 32px 16px;
  }

  #role .box .item.item-02 .field p:nth-child(1) {
    width: 100%;
    font-size: 18px;
  }

  #role .box .item.item-02 .field p:nth-child(1)::after {
    content: "";
    position: absolute;
    right: auto;
    top: auto;
    bottom: -16px;
    left: 0;
    width: 100%;
    height: 1px;
    background: var(--gray5);
  }

  #role .box .item.item-02 .field p:nth-child(2) {
    width: 100%;
    padding-left: 0;font-size: 16px;
  }

  #role .box .item .img-item-02 {
    flex-direction: column;
  }

  #becoming .box .item.item-01 {
    padding: 0 0px;
  }

  #becoming .test-courses {
    display: flex;
    flex-direction: column;
    gap: 15px;
  }

  #today .box .img-item {
    flex-direction: column;
    gap: 30px;
  }

  #today .box .item-01 {
    padding: 0 0px;
  }

  #today .box .item-02 {
    padding: 0 16px;
  }

  #today .box .img-item .img {
    width: 100%;
  }

  #today .box .img-item .text-item {
    width: 100%;
  }

  #today .voice-card {
    width: 100%;
  }

  #today .voice-card:not(:first-child) {
    display: none;
  }

  #today .voice-card {
    padding: 0px 70px;
  }

  #today .voice-prev,
  #today .voice-next {
    align-items: center;
  }
}

/******************************* 

お知らせ

*********************************/
#news {
  margin-bottom: var(--space-xxl);
}

#news .box-title {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 30px;
  width: calc(30% - 12px);
}

#news .wrapper {
  display: flex;
  flex-direction: column;
  gap: 40px;
}

#news .news-list {
  background: var(--white);
  border-radius: 8px;
  padding: 32px;
  box-shadow: 0 0 5px 0 rgba(0, 0, 0, 0.15);
  width: 100%;
}

#news .news-item {
  display: flex;
  align-items: center;
  padding: 36px 20px;
  border-bottom: 1px solid var(--bk);
  gap: 20px;
}

#news .news-item:hover {
  background-color: rgba(66, 66, 66, 0.03); /* ほんのりグレー */
}

#news .news-date {
  font-size: 14px;
  color: #666666;
  font-weight: 400;
  min-width: 80px;
  flex-shrink: 0;
}

#news .news-tag {
  background: var(--white);
  border: 1px solid #e0e0e0;
  border-radius: 4px;
  padding: 4px 8px;
  font-size: 12px;
  font-weight: 400;
  white-space: nowrap;
  flex-shrink: 0;
}

#news .news-text {
  font-size: 14px;
  font-weight: 400;
  flex: 1;
}

/* レスポンシブ対応 */
@media (max-width: 768px) {
  #news .news-item {
    flex-wrap: wrap;
    padding: 12px 16px;
    gap: 8px 12px;
  }

  #news .news-date {
    min-width: auto;
    order: 1;
  }

  #news .news-tag {
    order: 2;
  }

  #news .news-text {
    flex: 1 1 100%;
    order: 3;
  }
}

/* ページネーション */
.news-pagination {
  display: flex;
  justify-content: center;
  align-items: center;
  margin-top: 40px;
}

.news-pagination-wrapper {
  display: flex;
  align-items: center;
  gap: 12px;
}

.news-pagination .prev,
.news-pagination .next {
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: auto;
  height: 32px;
  padding: 0 16px;
  font-size: 14px;
  font-weight: 400;
  color: var(--bk, #333);
  text-decoration: none;
  border: 1px solid var(--gray5, #e0e0e0);
  border-radius: 4px;
  transition: all 0.3s ease;
}

.news-pagination .prev:hover:not(.disabled),
.news-pagination .next:hover:not(.disabled) {
  background-color: #f5f5f5;
  border-color: var(--bk, #333);
}

.news-pagination .prev.disabled,
.news-pagination .next.disabled {
  opacity: 0.5;
  cursor: not-allowed;
  pointer-events: none;
}

.news-pagination .page-numbers-container {
  display: flex;
  align-items: center;
  gap: 8px;
}

.news-pagination .page-numbers-container .page-numbers {
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 32px;
  height: 32px;
  padding: 0 12px;
  font-size: 14px;
  font-weight: 400;
  color: var(--bk, #333);
  text-decoration: none;
  border: 1px solid var(--gray5, #e0e0e0);
  border-radius: 4px;
  transition: all 0.3s ease;
}

.news-pagination
  .page-numbers-container
  .page-numbers:hover:not(.current):not(.dots) {
  background-color: #f5f5f5;
  border-color: var(--bk, #333);
}

.news-pagination .page-numbers-container .page-numbers.current {
  background-color: var(--bk, #333);
  color: var(--white, #fff);
  border-color: var(--bk, #333);
  font-weight: 600;
}

.news-pagination .page-numbers-container .page-numbers.dots {
  border: none;
  pointer-events: none;
  padding: 0 4px;
}

/* レスポンシブ対応 */
@media (max-width: 768px) {
  .news-pagination {
    margin-top: 24px;
  }

  .news-pagination-wrapper {
    gap: 8px;
  }

  .news-pagination .prev,
  .news-pagination .next {
    height: 28px;
    padding: 0 12px;
    font-size: 12px;
  }

  .news-pagination .page-numbers-container {
    gap: 4px;
  }

  .news-pagination .page-numbers-container .page-numbers {
    min-width: 28px;
    height: 28px;
    padding: 0 8px;
    font-size: 12px;
  }
}

/******************************* 

お知らせ詳細ページ（single.php）

*********************************/
.news-detail {
  margin-bottom: var(--space-xxl);
}

.news-detail .container {
  max-width: 1120px;
  margin: 0 auto;
}

.news-detail .wrapper {
  width: 100%;
}

.news-article {
  background: var(--white);
  border-radius: 8px;
  padding: 40px;
  box-shadow: 0 0 5px 0 rgba(0, 0, 0, 0.15);
}

.news-header {
  margin-bottom: 40px;
  padding-bottom: 24px;
  border-bottom: 1px solid var(--gray5, #e0e0e0);
}

.news-meta {
  display: flex;
  align-items: center;
  gap: 16px;
  margin-bottom: 16px;
  flex-wrap: wrap;
}

.news-header .news-date {
  font-size: 14px;
  color: #666666;
  font-weight: 400;
}

.news-header .news-tag {
  background: var(--white);
  border: 1px solid #e0e0e0;
  border-radius: 4px;
  padding: 4px 8px;
  font-size: 12px;
  font-weight: 400;
  white-space: nowrap;
}

.news-title {
  font-size: 28px;
  font-weight: 600;
  color: var(--bk, #333);
  line-height: 1.6;
  margin: 0;
  font-family: var(--font-shippori, "Shippori Mincho", serif);
}

.news-content {
  font-size: 16px;
  line-height: 1.8;
  color: var(--bk, #333);
  margin-bottom: 40px;
}

.news-content p {
  margin-bottom: 24px;
}

.news-content h2 {
  font-size: 24px;
  font-weight: 600;
  margin: 32px 0 16px;
  color: var(--bk, #333);
  font-family: var(--font-shippori, "Shippori Mincho", serif);
}

.news-content h3 {
  font-size: 20px;
  font-weight: 600;
  margin: 24px 0 12px;
  color: var(--bk, #333);
  font-family: var(--font-shippori, "Shippori Mincho", serif);
}

.news-content ul,
.news-content ol {
  margin: 16px 0 16px 24px;
  padding-left: 0;
}

.news-content li {
  margin-bottom: 8px;
}

.news-content img {
  max-width: 100%;
  height: auto;
  margin: 24px 0;
  border-radius: 4px;
}

.news-content a {
  color: var(--color--blue, #0066cc);
  text-decoration: underline;
}

.news-content a:hover {
  text-decoration: none;
}

.news-footer {
  padding-top: 24px;
  border-top: 1px solid var(--gray5, #e0e0e0);
}

.btn-back {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 14px;
  color: var(--bk, #333);
  text-decoration: none;
  padding: 8px 16px;
  border: 1px solid var(--gray5, #e0e0e0);
  border-radius: 4px;
  transition: all 0.3s ease;
}

.btn-back:hover {
  background-color: #f5f5f5;
  border-color: var(--bk, #333);
}

/* レスポンシブ対応 */
@media (max-width: 768px) {
  .news-article {
    padding: 24px 16px;
  }

  .news-header {
    margin-bottom: 24px;
    padding-bottom: 16px;
  }

  .news-meta {
    gap: 12px;
    margin-bottom: 12px;
  }

  .news-title {
    font-size: 22px;
    line-height: 1.5;
  }

  .news-content {
    font-size: 14px;
    line-height: 1.7;
    margin-bottom: 24px;
  }

  .news-content h2 {
    font-size: 20px;
    margin: 24px 0 12px;
  }

  .news-content h3 {
    font-size: 18px;
    margin: 20px 0 10px;
  }

  .news-content ul,
  .news-content ol {
    margin: 12px 0 12px 20px;
  }

  .news-content img {
    margin: 16px 0;
  }

  .news-footer {
    padding-top: 16px;
  }

  .btn-back {
    font-size: 12px;
    padding: 6px 12px;
  }
}

/******************************* 

メディア

*********************************/
#media .container .wrapper .box {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 60px 30px;
  margin-bottom: var(--space-xxl);
}

#media .container .wrapper .box .item {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

#media .container .wrapper .box .item .title {
  font-size: 24px;
  font-weight: var(--font-weight-medium);
}

#media .container .wrapper .box .item .date {
  color: var(--gray4);
  font-size: 12px;
}

@media (max-width: 1024px) {
  #media .container .wrapper .box {
    grid-template-columns: 1fr 1fr;
    gap: 40px 20px;
  }
}

@media (max-width: 767px) {
  #media .container .wrapper .box {
    grid-template-columns: 1fr;
    gap: 40px 0;
  }

  /* #media .container .wrapper .box .item .title {
    font-size: 16px;
  } */
}

/******************************* 

コラム

*********************************/
#column .container .wrapper .box {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 60px 30px;
  margin-bottom: var(--space-xxl);
}

#column .container .wrapper .box .item {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

/* コラム一覧サムネイル：16:9枠で上下中央寄せ、はみ出しはカット、不足分は白背景 */
#column .container .wrapper .box .item .img {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  background: #ffffff;
}

#column .container .wrapper .box .item .img img {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 100%;
  height: auto;
  transform: translate(-50%, -50%);
  display: block;
}

/* コラム一覧本文は2行で省略表示 */
#column .container .wrapper .box .item p {
  line-height: var(--line-height-default);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

#column .container .wrapper .box .item .title {
  font-size: 24px;
  font-weight: var(--font-weight-medium);
}

#column .container .wrapper .box .item .date {
  color: var(--gray4);
  font-size: 12px;
}

@media (max-width: 1024px) {
  #column .container .wrapper .box {
    grid-template-columns: 1fr 1fr;
    gap: 40px 20px;
  }
}

@media (max-width: 767px) {
  #column .container .wrapper .box {
    grid-template-columns: 1fr;
    gap: 40px 0;
  }

  /* #column .container .wrapper .box .item .title {
    font-size: 16px;
  } */
}

/******************************* 

お問い合わせ/よくあるご質問

*********************************/
#co-qa .wrapper .link-box {
  display: flex;
  gap: 30px;
}

#co-qa .wrapper .link-box .link-item {
  display: flex;
  gap: 30px;
}

#co-qa .wrapper .form-item {
  margin-bottom: var(--space-xxl);
}

#co-qa .wrapper .co-qa-text {
  text-align: center;
  margin-bottom: 20px;
}

#co-qa .wrapper .link-box a.link-item {
  padding: 24px 16px;
  font-size: 20px;
  display: flex;
  width: calc((100% - 60px) / 3);
  flex-direction: column;
  justify-content: space-between;
  gap: 12px; 
  background: linear-gradient(
    117deg,
    rgba(244, 244, 244, 0.8) 15.02%,
    rgba(245, 245, 245, 0.8) 47.53%,
    rgba(221, 221, 221, 0.8) 85.07%
  );
  text-decoration: none;
  color: inherit;
  transition: background 0.3s ease;
}

#co-qa .link-item h3 {
  min-height: 3em;
  display: flex;
  line-height: normal;
  margin-bottom: 8px;
  font-size: var(--font-size-sm);
}
#co-qa .wrapper .form-item p {
  font-size: var(--font-size-xs);
  line-height: var(--line-height-low);
}
#co-qa .wrapper .link-box a.link-item .btn {
  background-color: transparent;
  box-shadow: none;
  justify-content: flex-end;
  padding: 4px 1rem;
}

#co-qa .wrapper .link-box a.link-item:hover {
  background: linear-gradient(
    117deg,
    rgba(235, 235, 235, 0.95) 15.02%,
    rgba(240, 240, 240, 0.95) 47.53%,
    rgba(210, 210, 210, 0.95) 85.07%
  );
}

#co-qa .wrapper .link-box a.link-item:hover .btn-arrow {
  transform: translateX(4px);
}

#co-qa {
  margin-bottom: var(--space-xxl);
}

#co-qa .box .item {
  border-top: 1px solid var(--bk);
  padding: 20px 0;
}

#co-qa .box .item:last-child {
  border-bottom: 1px solid var(--bk);
}

@media (max-width: 767px) {
  #co-qa .wrapper .link-box {
    flex-direction: column;
  }

  #co-qa .wrapper .link-box a.link-item {
    padding: 16px 24px;
    width: 100%;
    gap:4px;
  }

  #co-qa .wrapper .co-qa-text {
    text-align: left;
  }
  #co-qa .link-item h3 {
    min-height: 0;
  }
  #co-qa .wrapper .link-box .btn {
    padding: 0 23px;
  }
  #co-qa .wrapper .link-box a.link-item .btn {
    padding: 4px 1rem 0 1rem;
  }
}

/******************************* 

お問い合わせ

*********************************/
.contact {
  margin-bottom: var(--space-xxl);
}

.contact .wrapper {
  max-width: 800px;
  margin: 0 auto;
}

.contact .wrapper.career {
  max-width: 1120px;
}

.contact-form {
  width: 100%;
}

.contact-form.career {
  padding-left: 60px;
}

.contact-form .form-item {
  margin-bottom: 30px;
}

.contact-form .form-label {
  display: block;
  font-size: var(--font-size-xs);
  color: var(--bk);
  margin-bottom: 10px;
}

.contact-form .form-label .required {
  color: var(--red);
}

.contact-form .form-input,
.contact-form .form-textarea {
  width: 100%;
  padding: 8px 16px;
  border: 1px solid var(--gray1);
  border-radius: 14px;
  font-size: var(--font-size-xs);
  font-family: var(--font-noto-serif-jp);
  color: var(--bk);
  background-color: var(--white);
  box-sizing: border-box;
}

.contact-form .form-input:focus,
.contact-form .form-textarea:focus {
  outline: none;
  border-color: var(--gray5);
}

.contact-form .form-textarea {
  resize: vertical;
  min-height: 120px;
}

.contact-form .form-submit-wrapper {
  text-align: center;
  margin-top: 40px;
}

.contact-form .form-submit-btn {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  padding: 12px 48px;
  color: var(--bk);
  border: none;
  font-size: var(--font-size-xs);
  font-family: var(--font-noto-serif-jp);
  cursor: pointer;
  transition: background-color 0.3s ease;
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.5);
  box-shadow: 0 2px 10px 0 rgba(0, 0, 0, 0.1);
}

.contact-form .form-submit-btn:hover {
  background-color: var(--gray2);
}

.contact-form .form-submit-btn .btn-arrow {
  width: 20px;
  height: 20px;
}

@media (max-width: 767px) {
  .contact-form .form-submit-btn {
    width: 180px;
    justify-content: center;
  }

  .contact-form.career {
    padding-left: 0px;
  }
}

/******************************* 

プライバシーポリシー

*********************************/
#privacy {
  margin-bottom: var(--space-xxl);
}

#privacy p {
}

.text-box ol {
  list-style: none;
  counter-reset: num;
  padding-left: 2.4em;
}

.text-box ol li {
  counter-increment: num;
}

.text-box ol li::marker {
  content: "（" counter(num) "）";
}

/******************************* 

メディア一覧ページ

*********************************/
.wrequest {
  width: 100%;
  padding: 0 0 40px 0;
  display: flex;
  justify-content: flex-end;
  align-items: center;
}

/******************************* 

CF7

*********************************/
.wpcf7 form.sent .wpcf7-response-output {
  border-color: #7d7d7d;
}

.wpcf7 form .wpcf7-response-output {
  margin: 2em 0em 1em;
  padding: 0.2em 1em;
  border: 2px solid #7d7d7d;
}

/******************************* 

Confirm Plus Contact Form 7

*********************************/

button.wpcf7cp-cfm-submit-btn {
  display: inline-block;
  padding: 14px 70px 14px 40px;
  border-radius: 10px;
  border: none;
  background-color: #ffffff;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.08);
  font-size: var(--font-size-xs);
  font-family: var(--font-noto-serif-jp);
  letter-spacing: 0.1em;
  cursor: pointer;
  background-image: url(/wp-content/uploads/icon-arrow-1.svg);
  background-repeat: no-repeat;
  background-position: right 20px center;
  background-size: 20px 20px;
  transition: background-color 0.3s ease, box-shadow 0.3s ease;
  transition: background-color 0.3s ease, box-shadow 0.3s ease, background-position 0.3s ease;
}

button.wpcf7cp-cfm-edit-btn {
  display: inline-block;
  padding: 14px 70px 14px 40px;
  border-radius: 10px;
  border: none;
  background-color: #ffffff;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.08);
  font-size: var(--font-size-xs);
  font-family: var(--font-noto-serif-jp);
  letter-spacing: 0.1em;
  cursor: pointer;
  background-image: url(/wp-content/uploads/icon-arrow-1.svg);
  background-repeat: no-repeat;
  background-position: right 20px center;
  background-size: 20px 20px;
  transition: background-color 0.3s ease, box-shadow 0.3s ease;
  transition: background-color 0.3s ease, box-shadow 0.3s ease, background-position 0.3s ease;
}

div#wpcf7cpcnf {
  position: absolute;
  z-index: 1000;
  background: linear-gradient(135deg, #fafafa 0%, #f1f1f1 100%);
  width: 100%;
  height: auto;
  top: 0;
  left: 0;
padding: 20px 30px;
}


div#wpcf7cpcnf th {
  text-align: left;
  font-size: var(--font-size-xxs);
  font-weight: bold;
  width: 40%;
  padding: 5px 10px 5px 0;
}
div#wpcf7cpcnf td {
  text-align: left;
  font-size: var(--font-size-xxs);
  width: 60%;
  padding: 5px 10px 5px 0;
}

@media (max-width: 767px) {
  div#wpcf7cpcnf th {
    width:100%;
  }
  div#wpcf7cpcnf td {
    width:100%;
  }
}