@charset "UTF-8";

/* --------------------------------------------------------------------------
  Anchor
-------------------------------------------------------------------------- */

@media all and (min-width: 768px), print {
  #intro{
    padding-top: calc(96 / var(--font-size) * 1rem);
    margin-top: calc(-96 / var(--font-size) * 1rem);
  }
}
@media all and (max-width: 767px) {
  #intro{
    padding-top: calc(56 / var(--font-size) * 1rem);
    margin-top: calc(-56 / var(--font-size) * 1rem);
  }
}

/* --------------------------------------------------------------------------
  INTRO
-------------------------------------------------------------------------- */

@media all and (min-width: 768px), print {
  .faq-container{

  }
  .faq-box{
    margin-top: calc(17 / var(--font-size) * 1rem);
    border-radius: calc(20 / var(--font-size) * 1rem);
    background: var(--primary-color-100);
  }
  .faq-box:first-child{
    margin-top: 0;
  }
  .faq-box__trigger-button{
    display: flex;
    justify-content: flex-start;
    align-content: flex-start;
    padding-block: calc(25 / var(--font-size) * 1rem);
    padding-inline: calc(33 / var(--font-size) * 1rem);
  }
  .js-accordion-trigger.faq-box__trigger-button{
    cursor: pointer;
  }
  .faq-box__trigger-button__label{
    display: flex;
    justify-content: flex-start;
    align-content: flex-start;
    flex-grow: 1;
    line-height: calc(30 / 20 * 1);
    font-size: calc(20 / var(--font-size) * 1rem);
    font-weight: bold;
    color: var(--primary-color-500);
  }
  .faq-box__trigger-button__label > em{
    flex-shrink: 0;
    margin-right: .25em;
  }
  .faq-box__trigger-button__label > span{
    flex-grow: 1;
  }
  .js-accordion .faq-box__trigger-button__icon{
    display: block;
    width: calc(24 / var(--font-size)* 1rem);
    height: calc(28 / var(--font-size)* 1rem);
    position: relative;
    margin-left: calc(20 / var(--font-size)* 1rem);
  }
  .js-accordion .faq-box__trigger-button__icon:before,
  .js-accordion .faq-box__trigger-button__icon:after{
    content: "";
    background-color: var(--primary-color-500);
    display: block;
    width: calc(24 / var(--font-size) * 1rem);
    height: calc(2 / var(--font-size) * 1rem);
    position: absolute;
    top: 0;
    bottom: 0;
    right: calc(0 / var(--font-size) * 1rem);
    margin: auto 0;
    transition: 0.3s ease;
  }
  .js-accordion .faq-box__trigger-button__icon:after{
    transform: rotate(90deg);
  }
  .js-accordion.is-accordion-active .faq-box__trigger-button__icon:before{
    transform: rotate(45deg);
  }
  .js-accordion.is-accordion-active .faq-box__trigger-button__icon:after{
    transform: rotate(135deg);
  }
  .js-accordion-container.faq-box__target{
    height: 0;
  }
  .faq-box__target__in{
    display: flex;
    justify-content: flex-start;
    align-content: flex-start;
    padding-inline: calc(33 / var(--font-size) * 1rem);
  }
  .faq-box__target__in:last-child{
    padding-block: 0 calc(25 / var(--font-size) * 1rem);
  }
  .faq-box__target__in .faq-box__target__in{
    padding-inline: 0;
    padding-block: 0;
  }
  .faq-box__target__label{
    flex-shrink: 0;
    width: 1.25em;
  }
  .faq-box__target__content{
    flex-grow: 1;
  }

  .--faq02 .c-header-lv3__in::before {
    background-color: #60A800;
  }
  .--faq02 .faq-box {
    background-color: var(--secondary-color-100);
  }
  .--faq02 .faq-box__trigger-button__label {
    color: #60A800;
  }
}

@media all and (max-width: 767px) {
  .faq-container{

  }
  .faq-box{
    margin-top: calc(17 / var(--font-size) * 1rem);
    border-radius: calc(20 / var(--font-size) * 1rem);
    background: var(--primary-color-100);
  }
  .faq-box:first-child{
    margin-top: 0;
  }
  .faq-box__trigger-button{
    display: flex;
    justify-content: flex-start;
    align-content: flex-start;
    padding-block: calc(20 / var(--font-size) * 1rem);
    padding-inline: calc(18 / var(--font-size) * 1rem);
  }
  .js-accordion-trigger.faq-box__trigger-button{
    cursor: pointer;
  }
  .faq-box__trigger-button__label{
    display: flex;
    justify-content: flex-start;
    align-content: flex-start;
    flex-grow: 1;
    line-height: calc(27 / 18 * 1);
    font-size: calc(18 / var(--font-size) * 1rem);
    font-weight: bold;
    color: var(--primary-color-500);
  }
  .faq-box__trigger-button__label > em{
    flex-shrink: 0;
    margin-right: .25em;
  }
  .faq-box__trigger-button__label > span{
    flex-grow: 1;
  }
  .js-accordion .faq-box__trigger-button__icon{
    display: block;
    width: calc(24 / var(--font-size)* 1rem);
    height: calc(28 / var(--font-size)* 1rem);
    position: relative;
    margin-left: calc(20 / var(--font-size)* 1rem);
  }
  .js-accordion .faq-box__trigger-button__icon:before,
  .js-accordion .faq-box__trigger-button__icon:after{
    content: "";
    background-color: var(--primary-color-500);
    display: block;
    width: calc(24 / var(--font-size) * 1rem);
    height: calc(2 / var(--font-size) * 1rem);
    position: absolute;
    top: 0;
    bottom: 0;
    right: calc(0 / var(--font-size) * 1rem);
    margin: auto 0;
    transition: 0.3s ease;
  }
  .js-accordion .faq-box__trigger-button__icon:after{
    transform: rotate(90deg);
  }
  .js-accordion.is-accordion-active .faq-box__trigger-button__icon:before{
    transform: rotate(45deg);
  }
  .js-accordion.is-accordion-active .faq-box__trigger-button__icon:after{
    transform: rotate(135deg);
  }
  .js-accordion-container.faq-box__target{
    height: 0;
  }
  .faq-box__target__in{
    display: flex;
    justify-content: flex-start;
    align-content: flex-start;
    padding-inline: calc(33 / var(--font-size) * 1rem);
  }
  .faq-box__target__in:last-child{
    padding-block: 0 calc(25 / var(--font-size) * 1rem);
  }
  .faq-box__target__in .faq-box__target__in{
    padding-inline: 0;
    padding-block: 0;
  }
  .faq-box__target__label{
    flex-shrink: 0;
    width: 1.25em;
  }
  .faq-box__target__content{
    flex-grow: 1;
  }

  .--faq02 .c-header-lv3__in::before {
    background-color: #60A800;
  }
  .--faq02 .faq-box {
    background-color: var(--secondary-color-100);
  }
  .--faq02 .faq-box__trigger-button__label {
    color: #60A800;
  }
}