/* Fixed-page FAQ group. H2 is the question and the following paragraph is the answer. */
.wp-block-group.is-style-wp-outsource-faq-group{
  width:100%;
  max-width:var(--contents-narrow-width,780px);
  margin:0 auto;
  padding:40px 0 48px;
  box-sizing:border-box;
}

.wp-block-group.is-style-wp-outsource-faq-group :where(h2.wp-block-heading){
  position:relative;
  width:100%;
  max-width:100%;
  margin:0;
  padding:0;
  border-top:1px solid var(--lt-ln,#dfe3ea);
  border-bottom:0;
  color:var(--text,#0c1220);
  font-size:.875rem;
  font-weight:500;
  line-height:1.5;
  letter-spacing:0;
  scroll-margin-top:0;
}

.wp-block-group.is-style-wp-outsource-faq-group :where(h2.wp-block-heading) .wp-outsource-faq-toggle{
  appearance:none;
  position:relative;
  display:block;
  width:100%;
  margin:0;
  padding:18px 40px 18px 0;
  border:0;
  background:transparent;
  color:inherit;
  font:inherit;
  line-height:inherit;
  text-align:left;
  cursor:pointer;
}

.wp-block-group.is-style-wp-outsource-faq-group :where(h2.wp-block-heading) .wp-outsource-faq-toggle::before{
  display:none;
}

.wp-block-group.is-style-wp-outsource-faq-group :where(h2.wp-block-heading) .wp-outsource-faq-toggle::after{
  content:"+";
  position:absolute;
  top:50%;
  right:0;
  display:flex;
  align-items:center;
  justify-content:center;
  width:24px;
  height:24px;
  border:1px solid var(--lt-ln,#dfe3ea);
  border-radius:50%;
  background:transparent;
  color:var(--muted,#667085);
  font-size:.875rem;
  font-weight:400;
  line-height:1;
  transform:translateY(-50%);
  transition:background .2s ease,border-color .2s ease,color .2s ease,transform .3s ease;
}

.wp-block-group.is-style-wp-outsource-faq-group :where(h2.wp-block-heading) .wp-outsource-faq-toggle[aria-expanded="true"]::after{
  background:var(--blue,#2563eb);
  border-color:var(--blue,#2563eb);
  color:#fff;
  transform:translateY(-50%) rotate(45deg);
}

.wp-block-group.is-style-wp-outsource-faq-group :where(h2.wp-block-heading) .wp-outsource-faq-toggle:focus-visible{
  outline:2px solid var(--cyan,#06b6d4);
  outline-offset:4px;
}

.wp-block-group.is-style-wp-outsource-faq-group.is-faq-ready .wp-outsource-faq-answer{
  max-height:0;
  margin:0;
  padding:0;
  overflow:hidden;
  border-bottom:1px solid transparent;
  color:var(--muted,#667085);
  font-size:.875rem;
  line-height:1.75;
  opacity:0;
  transition:max-height .35s ease,opacity .2s ease,border-color .35s ease;
}

.wp-block-group.is-style-wp-outsource-faq-group.is-faq-ready .wp-outsource-faq-answer.is-open{
  max-height:var(--wp-outsource-faq-answer-height,1000px);
  padding-bottom:40px;
  border-bottom-color:var(--lt-ln,#dfe3ea);
  opacity:1;
}

/* Keep answers visible and editable in Gutenberg. */
.editor-styles-wrapper .wp-block-group.is-style-wp-outsource-faq-group{
  width:min(100% - 32px,var(--contents-width,var(--contents-standard-width,1120px)));
  position:relative;
  outline:2px solid rgba(6,182,212,.28);
  outline-offset:3px;
}

.editor-styles-wrapper .wp-block-group.is-style-wp-outsource-faq-group::before{
  content:"固定ページ：FAQグループ";
  position:absolute;
  top:6px;
  right:6px;
  z-index:10;
  padding:4px 8px;
  border-radius:999px;
  background:#0891b2;
  color:#fff;
  font-family:"DM Mono",monospace;
  font-size:10px;
  line-height:1.2;
  letter-spacing:.04em;
  pointer-events:none;
  box-shadow:0 2px 8px rgba(0,0,0,.16);
}

.editor-styles-wrapper .wp-block-group.is-style-wp-outsource-faq-group :where(h2.wp-block-heading){
  padding:20px 56px 20px 0;
}

.editor-styles-wrapper .wp-block-group.is-style-wp-outsource-faq-group :where(h2.wp-block-heading)::before,
.editor-styles-wrapper .wp-block-group.is-style-wp-outsource-faq-group :where(h2.wp-block-heading)::after{
  content:"";
  position:absolute;
  top:50%;
  right:8px;
  width:18px;
  height:2px;
  border-radius:999px;
  background:var(--cyan,#06b6d4);
  transform:translateY(-50%);
}

.editor-styles-wrapper .wp-block-group.is-style-wp-outsource-faq-group :where(h2.wp-block-heading)::after{
  transform:translateY(-50%) rotate(90deg);
}

.editor-styles-wrapper .wp-block-group.is-style-wp-outsource-faq-group :where(h2.wp-block-heading) + p{
  margin:0;
  padding:0 56px 22px 0;
  border-bottom:1px solid var(--lt-ln,#dfe3ea);
  color:var(--muted,#667085);
  font-size:.9375rem;
  line-height:1.9;
}

@media(min-width:681px){
  .wp-block-group.is-style-wp-outsource-faq-group{
    padding-top:40px;
    padding-bottom:48px;
  }
}
