@charset "utf-8";

/* =========================================
   共通・スマホビュー (アコーディオン)
========================================= */
.tab-accordion {
  border-top: 1px solid #fff;
}

.ta-item {
  border-bottom: 1px solid #fff; 
}
.ta-title{
  font-size:1.6rem;
}
/* スマホ用: トリガー（ボタン部分） */
.ta-trigger {
  width: 100%;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 15px 20px;
  background-color: #6a92c3; 
  color: #fff;
  border: none;
  cursor: pointer;
  text-align: left;
  font-weight: bold;
  font-size: 16px;
  transition: background-color 0.2s;
}

/* ★変更: スマホ用: アクティブ時のトリガー背景色 */
.ta-item.is-active .ta-trigger {
  background-color: #3f76d7; 
}

/* スマホ用: 右側のボタンUI */
.ta-status-btn {
  background-color: #355d95; 
  color: #fff;
  padding: 6px 16px;
  border-radius: 20px;
  font-size: 12px;
  font-weight: normal;
  pointer-events: none; 
}
.ta-status-btn::before {
  content: "くわしくはこちら";
}

/* スマホ用: アクティブ時のボタンUI */
.ta-item.is-active .ta-status-btn {
  background-color: #292929;
}
.ta-item.is-active .ta-status-btn::before {
  content: "閉じる";
}

/* コンテンツエリア (開閉アニメーション) */
.ta-content {
  display: grid;
  grid-template-rows: 0fr; 
  transition: grid-template-rows 0.3s ease-out; 
  background-color: #fff;
}
.ta-item.is-active .ta-content {
  grid-template-rows: 1fr; 
}

.ta-content-inner {
  overflow: hidden;
}
.ta-content-body {
  padding: 20px;
}

.ta-close-bottom {
  text-align: right;
  margin-top: 20px;
}
.ta-close-bottom button {
  background: none;
  border: none;
  font-size: 14px;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: #333;
}
.ta-close-icon {
  background: #666;
  color: #fff;
  display: inline-block;
  width: 20px;
  height: 20px;
  text-align: center;
  line-height: 20px;
  font-weight: bold;
}

/* =========================================
   PCビュー (タブ切り替え) 768px以上
========================================= */
@media (min-width: 768px) {
  .tab-accordion {
    display: grid;
    grid-template-columns: repeat(4, 1fr); 
    border-top: none;
  }

  .ta-item {
    display: contents; 
  }

  /* PC用: タブ部分 */
  .ta-trigger {
    grid-row: 1; 
    justify-content: center;
    background-color: #c0d3e9; 
    color:#000;
    padding: 20px 10px;
    border-bottom: 3px solid #3f76d7; 
    box-shadow: inset 0 -15px 15px -15px rgba(0, 0, 0, 0.4); 
    position: relative;
  }
/* 疑似要素で縦の白線を引く（下線の手前で止まる） */
  .ta-trigger::after {
    content: "";
    position: absolute;
    top: 0;
    bottom: 0; 
    right: 0;
    width: 1px;
    background-color: #fff;
  }
/* 一番右のタブ（その他）には右側の線を引かない */
  .ta-item:last-child .ta-trigger::after {
    display: none;
  }
/* PC用: アクティブ時のタブ */
  .ta-item.is-active .ta-trigger {
    background-color: #3f76d7; 
    color: #fff;
    box-shadow: none; 
    border-bottom: 3px solid #3f76d7; 
  }
  .ta-status-btn {
    display: none;
  }

  .ta-content {
    grid-row: 2; 
    grid-column: 1 / -1; 
    display: none; 
    border-top: none; 
  }

  .ta-item.is-active .ta-content {
    display: block; 
  }

  .ta-close-bottom {
    display: none;
  }
}

/* =========================================
   次のタブへのリンクボタン
========================================= */
.next-step-area {
  text-align: right;
  margin-top: 40px;
  margin-bottom: 20px;
}

.btn-next-tab {
  display: inline-flex;
  align-items: center;
  color: #004ac9;
  font-weight: bold;
  font-size: 16px;
  background: none;
  border: none;
  cursor: pointer;
  padding: 5px 10px;
  transition: opacity 0.3s;
}

.btn-next-tab:hover {
  opacity: 0.7;
  text-decoration: underline;
}

.btn-next-tab::before {
  content: "";
  display: inline-block;
  width: 8px;
  height: 8px;
  border-top: 2px solid #004ac9;
  border-right: 2px solid #004ac9;
  transform: rotate(45deg);
  margin-right: 10px;
}