@charset "UTF-8";
@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@100..900&family=Noto+Serif+Display:ital,wght@0,100..900;1,100..900&display=swap');
@import url("https://use.typekit.net/txm6kjs.css");

div#faq_block { margin:auto; }

div#faq_block div#faq_inner { width:74%; max-width:800px; margin:150px auto; padding:80px 80px; box-sizing: border-box; background-color:#fefefe; border:solid #231815 2px; border-radius: 20px; }
div#faq_block div#faq_inner > h3 { font-size:32px; margin:auto; margin-bottom:15px; text-align:center; letter-spacing: 0.1em; }

div#faq_block div#back_to_top > a { font-size: 22px; color:#231815; font-weight: bold; background-color:#c8fa00; display: block; text-align:center; width:80%; max-width:300px; line-height: 50px; border-radius: 30px; border: #231815 solid 2px; margin:auto; margin-top:60px; margin-bottom:40px; box-shadow: 3px 5px #231815; }
div#faq_block div#back_to_top > a:hover { background-color:#98ca00; position:relative; top:3px; box-shadow: 2px 2px #231815; }

@media (max-width: 800px) {
  div#faq_block div#faq_inner { width:84%; box-sizing: border-box; margin:100px auto; padding:30px 5%; }
  div#faq_block div#faq_inner > h3 { font-size:21px; letter-spacing: 0; margin-bottom:20px; }
  div#faq_block div#faq_inner > h4 { font-size:16px; margin-bottom:30px; }
  div#faq_block div#back_to_top > a { font-size:16px; margin-top:40px; line-height: 40px; }
}

div#faq_button { display: flex; justify-content: center; gap:3%; margin-bottom:40px; }
div#faq_button > a { width:26%; }
div#faq_button > a > img { width:100%; }
@media (max-width: 800px) {
  div#faq_button > a { width:31%; }
}

div#faq_product { margin:50px auto 60px; }
div#faq_product .faq_question:hover { cursor: pointer; color:#ff9ea9; }
div#faq_purchase { margin:80px auto; }
div#faq_purchase .faq_question:hover { cursor: pointer; color:#43b8ff; }
div#faq_member { margin:80px auto; }
div#faq_member .faq_question:hover { cursor: pointer; color:#ffcc00; }
@media (max-width: 800px) {
  div#faq_product { margin:40px auto; }
  div#faq_purchase { margin:40px auto; }
  div#faq_member { margin:40px auto; }
}

div.faq_title { margin-bottom:20px; }
div.faq_title > p { font-size:21px; font-weight: bold; }
div.faq_content { border-top:solid 2px #231815; padding:25px 20px; }
div.faq_content:last-child{ border-bottom:solid 2px #231815; }
div.faq_content .toggle { display: none; }
div.faq_content .faq_question, div.faq_content .faq_answer { -webkit-backface-visibility: hidden; backface-visibility: hidden; transform: translateZ(0); transition: all 0.5s ease-in-out; }
div.faq_content .faq_question { font-size:16px; letter-spacing: 0.03em; font-weight: bold; display: block; position:relative; }
div.faq_content .faq_question::before { content:""; width:1em; height:2px; background-color:#231815; top:50%; position:absolute; right:0; transform: rotateZ(90deg); }
div.faq_content .faq_question::after { content:""; width:1em; height:2px; background-color:#231815; top:50%; position:absolute; right:0; transition: all 0.5s ease-in-out; }
div.faq_content .faq_answer { font-size:15px; height: 0; line-height: 1.6; overflow: hidden; }
div.faq_content .faq_answer > p { margin-top:10px; margin-bottom:10px; }
div.faq_content .faq_answer > p.faqInfo { font-size:13px; }
div.faq_content .faq_answer > a.faqLink { font-size:15px; color:#231815; letter-spacing: 0; font-weight: 600; background-color:#fefefe; display: block; text-align:center; width:60%; max-width:150px; height:36px; line-height:36px; border-radius: 22px; border: #231815 solid 2px; margin-top:20px; margin-bottom:20px; box-shadow: 3px 5px #231815; }
div.faq_content .faq_answer > a.faqLink:hover { background-color:#ccc; position:relative; top:3px; box-shadow: 2px 2px #231815; }
div.faq_content .toggle:checked + .faq_question + .faq_answer {	height: auto; padding:20px 0 1px; transition: all 0.5s ease-in-out; }
div.faq_content .toggle:checked + .faq_question::before { opacity: 0; }
div.faq_content .toggle:checked + .faq_question::after { transform: rotateZ(360deg); }
@media (max-width: 800px) {
  div.faq_title > p { font-size:16px; font-weight: bold; }
  div.faq_content { padding:20px 10px; }
  div.faq_content .faq_question { font-size:13px; line-height: 1.5; padding-right:1.4em; }
  div.faq_content .faq_answer { font-size:12px; }
  div.faq_content .faq_answer > p.faqInfo { font-size:10px; }
}