@charset "UTF-8";
/*----------------------------------------------------
　よくある質問 カテゴリ一覧（/faq/{category}/ taxonomy.php）開閉式リスト
　詳細ページ（/faq/{category}/{id}/）は所属カテゴリ一覧へ301するため、回答は一覧上で
　details/summary により開閉表示する
　閉じている時は従来の一覧（.list li a）、開いた時は従来の詳細（.title）の見た目に合わせる
----------------------------------------------------*/
.faq #content .faq_wrap2 .con .list li .acc-item {
  margin: 15px 0;
  scroll-margin-top: 180px;
}
@media screen and (max-width: 1150px) {
  .faq #content .faq_wrap2 .con .list li .acc-item {
    scroll-margin-top: 120px;
  }
}
@media screen and (max-width: 750px) {
  .faq #content .faq_wrap2 .con .list li .acc-item {
    scroll-margin-top: 100px;
  }
}
@media screen and (max-width: 480px) {
  .faq #content .faq_wrap2 .con .list li .acc-item {
    scroll-margin-top: 90px;
  }
}
.faq #content .faq_wrap2 .con .list li .acc-head {
  display: block;
  position: relative;
  background-color: #e2f7f7;
  color: #333;
  padding: 30px 20px;
  font-size: 16px;
  cursor: pointer;
  list-style: none;
  -webkit-transition: background-color 0.3s ease-in-out;
  -moz-transition: background-color 0.3s ease-in-out;
  -ms-transition: background-color 0.3s ease-in-out;
  -o-transition: background-color 0.3s ease-in-out;
  transition: background-color 0.3s ease-in-out;
}
.faq #content .faq_wrap2 .con .list li .acc-head::-webkit-details-marker {
  display: none;
}
.faq #content .faq_wrap2 .con .list li .acc-head:hover {
  background-color: #b6e2e1;
}
.faq #content .faq_wrap2 .con .list li .acc-head:focus-visible {
  outline: 2px solid #67cfcf;
  outline-offset: -2px;
}
@media screen and (max-width: 768px) {
  .faq #content .faq_wrap2 .con .list li .acc-head {
    font-size: 14px;
    padding: 20px 50px 20px 20px;
  }
}
.faq #content .faq_wrap2 .con .list li .acc-head:before, .faq #content .faq_wrap2 .con .list li .acc-head:after {
  content: "";
  position: absolute;
  top: 50%;
  right: 15px;
  width: 15px;
  height: 3px;
  background-color: #67cfcf;
  -webkit-transition: 0.3s ease-in-out;
  -moz-transition: 0.3s ease-in-out;
  -ms-transition: 0.3s ease-in-out;
  -o-transition: 0.3s ease-in-out;
  transition: 0.3s ease-in-out;
}
.faq #content .faq_wrap2 .con .list li .acc-head:after {
  -webkit-transform: translate(0%, -200%) rotate(45deg);
  -moz-transform: translate(0%, -200%) rotate(45deg);
  -ms-transform: translate(0%, -200%) rotate(45deg);
  -o-transform: translate(0%, -200%) rotate(45deg);
  transform: translate(0%, -200%) rotate(45deg);
}
.faq #content .faq_wrap2 .con .list li .acc-head:before {
  -webkit-transform: translate(0%, 100%) rotate(135deg);
  -moz-transform: translate(0%, 100%) rotate(135deg);
  -ms-transform: translate(0%, 100%) rotate(135deg);
  -o-transform: translate(0%, 100%) rotate(135deg);
  transform: translate(0%, 100%) rotate(135deg);
}
.faq #content .faq_wrap2 .con .list li .acc-head .tx {
  position: relative;
  padding: 0 20px 0 50px;
  line-height: 180%;
}
@media screen and (max-width: 768px) {
  .faq #content .faq_wrap2 .con .list li .acc-head .tx {
    padding: 0 0 0 30px;
  }
}
.faq #content .faq_wrap2 .con .list li .acc-head .tx:before {
  font-family: "Roboto", "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, Osaka, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
  font-size: 40px;
  font-weight: 900;
  content: "Q";
  position: absolute;
  top: 50%;
  left: 0px;
  color: #67cfcf;
  -webkit-transform: translate(0%, -50%);
  -moz-transform: translate(0%, -50%);
  -ms-transform: translate(0%, -50%);
  -o-transform: translate(0%, -50%);
  transform: translate(0%, -50%);
}
@media screen and (max-width: 768px) {
  .faq #content .faq_wrap2 .con .list li .acc-head .tx:before {
    font-size: 24px;
  }
}
.faq #content .faq_wrap2 .con .list li .acc-item[open] > .acc-head:after {
  -webkit-transform: translate(0%, -50%) rotate(-45deg);
  -moz-transform: translate(0%, -50%) rotate(-45deg);
  -ms-transform: translate(0%, -50%) rotate(-45deg);
  -o-transform: translate(0%, -50%) rotate(-45deg);
  transform: translate(0%, -50%) rotate(-45deg);
}
.faq #content .faq_wrap2 .con .list li .acc-item[open] > .acc-head:before {
  -webkit-transform: translate(-55%, -50%) rotate(45deg);
  -moz-transform: translate(-55%, -50%) rotate(45deg);
  -ms-transform: translate(-55%, -50%) rotate(45deg);
  -o-transform: translate(-55%, -50%) rotate(45deg);
  transform: translate(-55%, -50%) rotate(45deg);
}
.faq #content .faq_wrap2 .con .list li .acc-item {
  interpolate-size: allow-keywords;
}
.faq #content .faq_wrap2 .con .list li .acc-item::details-content {
  block-size: 0;
  overflow: hidden;
  transition: block-size 0.35s ease, content-visibility 0.35s allow-discrete;
}
.faq #content .faq_wrap2 .con .list li .acc-item[open]::details-content {
  block-size: auto;
}
.faq #content .faq_wrap2 .con .list li .acc-inner {
  padding: 20px 20px 10px 70px;
  font-size: 16px;
  line-height: 180%;
}
@media screen and (max-width: 768px) {
  .faq #content .faq_wrap2 .con .list li .acc-inner {
    padding: 15px 10px 5px;
    font-size: 14px;
  }
}
.faq #content .faq_wrap2 .con .list li .acc-inner .imgBox {
  margin: 0 0 20px;
}
.faq #content .faq_wrap2 .con .list li .acc-inner .imgBox img {
  max-width: 100%;
  height: auto;
}
.faq #content .faq_wrap2 .con .list li .acc-inner .contentBox img {
  max-width: 100%;
  height: auto;
}
.faq #content .faq_wrap2 .con .list li .acc-inner .contentBox table {
  box-sizing: border-box;
  width: 100%;
  margin: 10px 0;
}
.faq #content .faq_wrap2 .con .list li .acc-inner .contentBox table th, .faq #content .faq_wrap2 .con .list li .acc-inner .contentBox table td {
  border: 1px solid #B8B8B8;
  padding: 10px;
  box-sizing: border-box;
  font-size: 90%;
}
.faq #content .faq_wrap2 .con .list li .acc-inner .contentBox table th {
  background-color: #EDEDED;
}
.faq #content .faq_wrap2 .con .list li .acc-inner .contentBox ul, .faq #content .faq_wrap2 .con .list li .acc-inner .contentBox ol {
  padding: 0 0 0 1.5em;
}
.faq #content .faq_wrap2 .con .list li .acc-inner .contentBox ul li, .faq #content .faq_wrap2 .con .list li .acc-inner .contentBox ol li {
  list-style: inherit;
  position: static;
}
.faq #content .faq_wrap2 .con .list li .acc-inner a {
  display: inline;
  background-color: transparent;
  color: #62bada;
  text-decoration: underline;
  padding: 0;
  margin: 0;
  font-size: inherit;
  word-break: break-all;
}
.faq #content .faq_wrap2 .con .list li .acc-inner a:before, .faq #content .faq_wrap2 .con .list li .acc-inner a:after {
  content: none;
  display: none;
}
.faq #content .faq_wrap2 .con .list li .acc-inner a:hover {
  background-color: transparent;
}
@media (prefers-reduced-motion: reduce) {
  .faq #content .faq_wrap2 .con .list li .acc-item::details-content,
  .faq #content .faq_wrap2 .con .list li .acc-head:before,
  .faq #content .faq_wrap2 .con .list li .acc-head:after {
    transition: none;
  }
}
