.un_support+.un_support{margin-top:clamp(64px,8.34vw,166px)}@media (max-width:767.98px){.un_support+.un_support{margin-top:22.78vw}.un_support_heading{white-space:nowrap}}.un_support_detailSect:nth-of-type(2){margin-top:clamp(21px,2.78vw,55px)}@media (max-width:767.98px){.un_support_detailSect:nth-of-type(2){margin-top:-2.77vw}}.un_support_detailSect:nth-of-type(n+3){margin-top:clamp(48px,6.25vw,125px)}@media (max-width:767.98px){.un_support_detailSect:nth-of-type(n+3){margin-top:16.67vw}}@media (min-width:768px){.un_support_detailSect>div{margin-top:clamp(21px,2.78vw,55px);padding-left:clamp(8px,1.12vw,22px);padding-right:clamp(8px,1.12vw,22px)}}@media (max-width:767.98px){.un_support_detailSect>div{margin-top:6.67vw;padding-left:2.78vw;padding-right:2.78vw}}.un_support_text{line-height:1.8;margin-top:clamp(21px,2.78vw,55px);padding-left:clamp(8px,1.12vw,22px);padding-right:clamp(8px,1.12vw,22px)}@media (max-width:767.98px){.un_support_text{margin-top:7.23vw;padding-left:2.78vw;padding-right:2.78vw}}.un_support_col2{display:flex;gap:clamp(10px,1.39vw,27px);justify-content:space-between;line-height:1.8}@media (max-width:767.98px){.un_support_col2{display:grid;gap:6.67vw}}.un_support_col2 a{height:-moz-min-content;height:min-content}@media (max-width:767.98px){.un_support_col2 a{width:100%}}.un_support_period{background-color:#faf9f7;border-top:1px solid #d8d8d7;color:#7f764f;display:flex;gap:clamp(8px,1.12vw,22px);justify-content:center;padding:clamp(7px,.98vw,19px)}@media (max-width:767.98px){.un_support_period{gap:2.78vw;padding:4.17vw 2.78vw 3.62vw}}.un_support_period i{position:relative;top:calc(clamp(1px, .14vw, 2px)*-1);width:clamp(8px,1.12vw,22px)}@media (max-width:767.98px){.un_support_period i{left:-1.11vw;top:-.55vw;width:5vw}}.un_support_caption{font-size:clamp(10px,.84vw,16px);margin-top:clamp(4px,.56vw,11px)}@media (max-width:767.98px){.un_support_caption{font-size:3.34vw;margin-top:6.67vw}}.un_faq .un_support_col2{align-items:center}@media (min-width:768px){.un_faq .un_support_col2{padding-left:clamp(8px,1.12vw,22px);padding-right:clamp(8px,1.12vw,22px)}}@media (max-width:767.98px){.un_faq .un_support_col2{justify-content:stretch;padding-left:2.78vw;padding-right:2.78vw}}
/* Support Page Collapsible Content */

/* NEW button trigger styles */
.un_support_col2 .support-collapsible-trigger { /* Specificity for button inside dd */
  /* Add some margin if needed */
  margin-top: clamp(5px, 0.69vw, 13px);
  /* Ensure button aligns well within flex/grid */
  align-self: flex-start; /* Align button to the start in flex container */
  /* Inherit button styles from el_button, add specifics */
  position: relative; /* Needed for ::after positioning */
  padding-right: calc(clamp(9px, 1.25vw, 25px) + 1em); /* Space for icon + gap */
  font-size: clamp(13px, 0.9vw, 16px); /* 明示的にフォントサイズを指定 */
}

.support-collapsible-trigger::after {
  content: '';
  position: absolute; /* Position relative to the button */
  right: 1em; /* Position icon to the right */
  top: 50%;
  transform: translateY(-50%) rotate(90deg); /* Rotate 90 degrees to point downwards */
  display: inline-block;
  width: clamp(9px, 1.25vw, 25px);
  height: clamp(9px, 1.25vw, 25px);
  background-color: rgb(166, 156, 110);
  -webkit-mask: url(../images/common/icon_arrow_right.svg) no-repeat center / contain;
  mask: url(../images/common/icon_arrow_right.svg) no-repeat center / contain;
  transition: transform 0.3s ease, -webkit-mask 0.3s ease, mask 0.3s ease; /* Smooth transition for icon change */
}

.support-collapsible-trigger.is-open::after {
  -webkit-mask: url(../images/common/icon_arrow_right.svg) no-repeat center / contain;
  mask: url(../images/common/icon_arrow_right.svg) no-repeat center / contain;
  transform: translateY(-50%) rotate(-90deg); /* 左に90度回転 */
}


.support-collapsible-content {
  max-height: 0; /* 初期状態では非表示 */
  overflow: hidden; /* 内容を隠す */
  transition: max-height 0.5s ease-out, padding 0.5s ease-out, margin-top 0.5s ease-out; /* 開閉アニメーション */
  padding: 0 clamp(8px, 1.12vw, 22px); /* 左右のパディング */
  grid-column: 1 / -1; /* グリッドレイアウトで全幅に */
  margin: 0 auto; /* 中央揃え */
  width: fit-content; /* 内容に合わせた幅 */
  /* Adjust margin-top to position below the dd */
  margin-top: 0;
}

.support-collapsible-content.is-open {
  max-height: 2000px; /* 十分な高さを確保して表示 */
  padding: clamp(10px, 1.39vw, 27px) clamp(8px, 1.12vw, 22px); /* 開いたときの上下パディング */
  margin-top: clamp(10px, 1.39vw, 27px); /* Add space between button and content when open */
}

.support-step {
  margin-bottom: clamp(15px, 2.08vw, 40px); /* 各ステップ間のマージン */
  text-align: center; /* テキストを中央揃え */
}
.support-step:last-child {
  margin-bottom: 0;
}

.support-step p {
  margin-bottom: clamp(5px, 0.69vw, 13px); /* テキストと画像の間のマージン */
  line-height: 1.6;
  text-align: center; /* 段落内のすべての要素を中央揃え */
}

/* pictureタグを中央揃えにする */
.support-step picture {
  display: block;
  margin: 0 auto;
  text-align: center;
}

.support-step-image {
  max-width: 100%; /* 画像がコンテナを超えないように */
  height: auto; /* アスペクト比を維持 */
  display: block; /* 中央揃えのため */
  margin: 0 auto; /* 中央揃え */
  border: 1px solid #eee; /* 画像の境界線を薄く表示 */
}

/* SP Styles */
@media (max-width: 767.98px) {
  .un_support_col2 .support-collapsible-trigger { /* Specificity for button inside dd */
     width: 100%; /* Make button full width on SP */
     margin-top: 2.78vw;
     padding-right: calc(5vw + 1em); /* Adjust icon spacing for SP */
     font-size: 3.34vw; /* モバイル時のフォントサイズを統一 */
  }
   .support-collapsible-trigger::after {
     width: 5vw;
     height: 5vw;
   }
  .support-collapsible-content {
    padding: 0 2.78vw;
  }
  .support-collapsible-content.is-open {
    padding: 4.17vw 2.78vw;
     margin-top: 4.17vw;
  }
  .support-step {
    margin-bottom: 5.56vw;
  }
   .support-step p {
    margin-bottom: 2.78vw;
  }
}
