@charset "UTF-8";
/* =====
 * LAYOUT :: ALL DEVICE
=================================================================== */
#Main .block-faq-01 .container::before {content: "";position: absolute;top: 0;left: 0;right: 0;bottom: 0;border-radius: 1em;background: transparent url(../img/common/bg_01.webp) repeat-y 0 0 / 100% auto;mix-blend-mode: hard-light;}
#Main .block-faq-01 .container {position: relative;margin: 4em auto;padding: 2em 0;border-radius: 1em;background: linear-gradient(45deg, rgba(231, 222, 220, 1) 0%, rgba(196, 214, 228, 1) 100%);}
#Main .block-faq-01 .faq_list {position: relative;z-index: 2;margin: 0 2em;}
#Main .block-faq-01 .faq_list .faq {background-color: #fff;padding: 1em;border-radius: 1em;}
#Main .block-faq-01 .faq_list .faq + .faq {margin-top: 3em;}
#Main .block-faq-01 .faq_list .faq .title {position: relative;margin: 0;padding: 0 0 1em 4.5em;border-bottom: 1px solid #ddd;font-weight: bold;}
#Main .block-faq-01 .faq_list .faq .title::before {content: "Q";position: absolute;bottom: 0;left: 0;font-size: 475%;line-height: 1;color: var(--asf-yellow);}
#Main .block-faq-01 .faq_list .faq .content {position: relative;margin: 0;padding: 1em 1em 0 4.5em;min-height: 3.4em;}
#Main .block-faq-01 .faq_list .faq .content::before {content: "A";position: absolute;top: 0;left: 0.05em;font-size: 475%;font-weight: bold;line-height: 1;color: rgb(0 0 0 / 10%);mix-blend-mode: multiply;}
/* =====
* LAYOUT :: PC
=================================================================== */
@media only screen and (min-width:769px) {
  #Main .block-faq-01 .term-list {margin: 2em 0;background-color: #fff;border-radius: 3em;box-shadow: 0 0 1em rgb(0 0 0 / 10%);overflow: hidden;display: flex;justify-content: space-around;align-items: center;width: 100%;}
  #Main .block-faq-01 .term-list > div {flex: 1;}
  #Main .block-faq-01 .term-list a {padding: 0.75em 0;color: #333;text-align: center;font-weight: 700;transition: background-color cubic-bezier(0.445, 0.05, 0.55, 0.95) 200ms, color cubic-bezier(0.445, 0.05, 0.55, 0.95) 200ms;}
  #Main .block-faq-01 .term-list .current a,
  #Main .block-faq-01 .term-list a:hover {background-color: #333;color: #fff;opacity: 1;}
}
@media only screen and (min-width:769px) and (max-width:1180px) {}
/* =====
* LAYOUT :: SP
=================================================================== */
@media only screen and (max-width:768px) {
  #Main .block-faq-01 .term-list {margin: 0 0 3em;display: flex;flex-wrap: wrap;justify-content: space-around;align-items: center;}
  #Main .block-faq-01 .term-list > div {width: 100%;}
  #Main .block-faq-01 .term-list a {background-color: rgb(0 0 0 / 5%);border-radius: 3em;margin: 0.5em;padding: 0.75em 0;color: #333;text-align: center;font-weight: 700;transition: background-color cubic-bezier(0.445, 0.05, 0.55, 0.95) 200ms, color cubic-bezier(0.445, 0.05, 0.55, 0.95) 200ms;}
  #Main .block-faq-01 .term-list a:hover {background-color: #333;color: #fff;opacity: 1;}
  #Main .block-faq-01 .faq_list {margin: 0 1em;}
  #Main .block-faq-01 .faq_list .faq  + .faq {margin-top: 1em;}
  #Main .block-faq-01 .faq_list .faq .title {padding-left: 1em;}
  #Main .block-faq-01 .faq_list .faq .title::before {bottom: inherit;top: 0;mix-blend-mode: multiply;opacity: 0.3;}
  #Main .block-faq-01 .faq_list .faq .content {padding-left: 1em;}
}
@media only screen and (max-width:768px) and (orientation: landscape) {}
@media only screen and (max-width: 640px) {}
@media only screen and (max-width: 370px) {}
@media only screen and (max-width: 480px) {}