HEX
Server: Apache
System: Linux s325.xrea.com 6.8.0-88-generic #89-Ubuntu SMP PREEMPT_DYNAMIC Sat Oct 11 01:02:46 UTC 2025 x86_64
User: yunportfolio (12972)
PHP: 7.4.33
Disabled: NONE
Upload Files
File: /virtual/yunportfolio/public_html/yunportfolio.shop/wp-content/themes/cocoon-master/scss/_faq.scss
.faq-wrap{
  --cocoon-custom-question-color:#b7282e;
  --cocoon-custom-answer-color:#007bbb;
  --cocoon-custom-border-color: transparent;
  --cocoon-custom-background-color: transparent;
  --cocoon-custom-text-color: var(--cocoon-text-color);
  border-color: var(--cocoon-custom-border-color);
  background-color: var(--cocoon-custom-background-color);
  color: var(--cocoon-custom-text-color);
}

.faq-item{
  display: flex;
}

.faq-item-label{
  font-size: 24px;
  margin-right: 0.6em;
}
.is-style-square:not(.not-nested-style) .faq-item-label{
  color: #fff !important;
  background-color: var(--cocoon-custom-question-color);
  font-size: 20px;
  padding: 5px 8px;
  height: 100%;
}

.is-style-square:not(.not-nested-style) .faq-answer-label{
  background-color: var(--cocoon-custom-answer-color);
}

.faq-item-content{
  flex: 1 1 auto;
  width: calc(60%);
}

.faq-question{
  margin-bottom: 1.8em;
  align-items: center;
}
.faq-question-label{
  color: var(--cocoon-custom-question-color);
}
.faq-question-content{
  font-weight: 700;
  margin-right: 30px;
}

.faq .faq-answer{
  margin-left: 0;
}

.faq-answer-content {
  margin-top: 6px;
}

.faq-answer-label{
  color: var(--cocoon-custom-answer-color);
}

//スクエアラベル
.is-style-square{
  .faq-item-label{
    font-size: 20px;
    padding: 5px 8px;
    height: 100%;
  }
}


//アコーディオンスタイル
.is-style-accordion{
  padding: 0;
  background-color:transparent;

  &.has-border-color{
    .faq-question{
      border: none;
    }
  }

  &:not(.not-nested-style) {

    &.has-border-color{
      .faq-question{
        color: var(--cocoon-white-color);
      }
    }
  }

  >.faq{
    >.faq-question{
      padding: .5em;
      margin: 0;
      cursor: pointer;
      position: relative;
      background-color: #e8ecef;
      border-color: var(--cocoon-three-d-border-colors);
      // align-items: center;

      &::before{
        content: "+";
        position: absolute;
        right: 1em;
        opacity: 0.5;
      }

      &.active::before{
        content: "-";
      }
    }

    >.faq-answer{
      padding: 1em .5em;
      background-color: var(--cocoon-custom-background-color);
    }
  }
}

//ブロックネスト時のスタイル
.faq-wrap.is-style-square.not-nested-style > .faq > * > .faq-item-label{
  color: #fff;
}

.faq-wrap.is-style-square.not-nested-style > .faq > * > .faq-question-label{
  background-color: var(--cocoon-custom-question-color);
}

.faq-wrap.is-style-square.not-nested-style > .faq > * > .faq-answer-label{
  background-color: var(--cocoon-custom-answer-color);
}

.faq-wrap.is-style-accordion.has-border-color.not-nested-style > .faq > .faq-question {
  color: var(--cocoon-white-color);
  background-color: var(--cocoon-custom-border-color);
}