﻿/********************
board_basic_faq_type01
*********************/
.board_basic_faq_type01 {margin-top: 6rem; border-top: 2px solid #222;}
.board_basic_faq_type01 > ul {}
.board_basic_faq_type01 > ul > li.data_none {text-align:center; border-top:1px solid #fff; line-height: 9rem; font-size: 1.8rem; letter-spacing: -0.06rem;}
.board_basic_faq_type01 > ul > li.on .board_basic_faq_q h3 {color:#32a6ff;}
.board_basic_faq_q {display: flex; align-items: center; min-height: 9.6rem; border-bottom: 1px solid #ddd; padding: 2.2rem 3rem 2.2rem 0;}
.board_basic_faq_q::before {content: 'Q'; width: 5rem; height: 5rem; border-radius: 50%; display: flex; align-items: center; justify-content: center; flex-shrink: 0; font-size: 2.3rem; color: #888; font-weight: 500; border: 1px solid #ddd; margin: 0 3rem;}
.board_basic_faq_q .title {font-size: 2.2rem; letter-spacing: -0.06rem; line-height: 3rem; margin-right: 1rem;}
.board_basic_faq_q.on .title {color: #00438f;}
.board_basic_faq_q .custom-arrow-down {margin-left: auto; flex-shrink: 0;}
.board_basic_faq_q .custom-arrow-down.on::before, .board_basic_faq_q .custom-arrow-down.on::after {background-color: #222;}
.board_basic_faq_q .category {color: #00438f; letter-spacing: -0.06rem; font-size: 1.8rem; font-weight: 500; margin-right: 2.8rem; flex-shrink: 0;}
.board_basic_faq_q > strong {float:left; width:130px; color:#0093e7; font-weight:500; margin-top:3px;}
.board_basic_faq_q > h3 {float:left; position:relative; width:calc(100% - 30px);  color:#444; padding-left:50px; box-sizing:border-box; font-weight:500;}
.board_basic_faq_q > h3::before {position:absolute; content:'Q'; font-family: 'Raleway', sans-serif; font-weight:600; top:-1px; left:0; font-size:22px;}

.board_basic_faq_a {background-color: #f9f9f9; display: flex; padding: 2.2rem 8rem 2.2rem 0;}
.board_basic_faq_a::before {content: 'A'; width: 5rem; height: 5rem; background-color: #00438f; border-radius: 50%; display: flex; align-items: center; justify-content: center; flex-shrink: 0; font-size: 2.3rem; color: #fff; font-weight: 500; margin: 0 3rem;}
.board_basic_faq_a .content {line-height: 3.2rem; font-size: 1.8rem; padding: 1rem 0; letter-spacing: -0.06rem;}
.board_basic_faq_a .content img {display: block; max-width: 100%; margin-top: 1rem; margin-bottom: 1rem;}

.plus-minus-toggle {
  cursor: pointer;
  height: 16px;
  position: relative;
  width: 16px;
  float:right;
  margin-top:8px;
  }
.plus-minus-toggle:before,
.plus-minus-toggle:after{
    background: #111;
    content: '';
    height: 2px;
    left: 0;
    position: absolute;
    top: 0;
    width: 16px;
    transition: transform 500ms ease;
  }

.plus-minus-toggle:after {
      transform: rotate(90deg);
    }
.plus-minus-toggle:before {
      transform: rotate(180deg);
    }

.plus-minus-toggle.collapsed:after,.plus-minus-toggle.collapsed:before {
     transform: rotate(0deg);
	 background:#32a6ff;
  }
/********************
//board_basic_faq_type01
*********************/











@media screen and (max-width: 768px){

/********************
board_basic_faq_type01
*********************/
/* .board_basic_faq_type01 {padding:8vw 0;}
.board_basic_faq_q {padding:5vw;}
.board_basic_faq_q > h3 {width:calc(100% - 6vw); padding-left:10vw;}
.board_basic_faq_q > h3::before {font-size:4.4vw;}
.board_basic_faq_a {padding:5vw 8vw;}
.board_basic_faq_a > p {padding-left:9vw;}
.board_basic_faq_a::before {top:5vw; left:8vw; width:6vw; height:6vw; line-height:6vw; font-size:4vw;}

.plus-minus-toggle {position:absolute; top:60%; transform:translateY(-50%); right:5vw; width:3.2vw; height:3.2vw; margin-top:0;}
.plus-minus-toggle:before, .plus-minus-toggle:after {width:3.2vw;}

.board_basic_faq_type01 > ul > li.data_none {padding-top:9vw;} */

.tab-style3.faq {display: none;}
.board_basic_faq_q {flex-wrap: wrap; position: relative;}
.board_basic_faq_q .title {width: 100%; padding-left: 11rem; margin-right: 3rem;}
.board_basic_faq_q .custom-arrow-down {position: absolute; top: 50%; right: 2rem; transform: translateY(-50%);}

/********************
//board_basic_faq_type01
*********************/
}

@media screen and (max-width: 480px){
	.board_basic_faq_q::before, .board_basic_faq_a::before {width: 4rem; height: 4rem; font-size: 2rem; margin: 0 1rem;}
	.board_basic_faq_q .title {font-size: 2rem; padding-left: 6rem;}
	.board_basic_faq_a {padding-right: 3rem;}
	.board_basic_faq_a .content {line-height: 3rem;}
}