/*
    faq.css
*/
/*
    For reset.
*/

	*{
        -webkit-box-sizing: border-box;
		-moz-box-sizing: border-box;
		-o-box-sizing: border-box;
		-ms-box-sizing: border-box;
		box-sizing: border-box;
	}

	button, input, select, textarea {
		font-family : inherit;
		font-size   : 100%;
	}

/************************************** For PC. **************************************/
	div.FAQ_WP{
		width:100%;
        border-bottom:1px solid #434343;
        margin-bottom:10px;
        line-height:1.8em;
	}

	div.FAQ_WP_TH{
		width:100%;
        border-bottom:1px solid #434343;
        margin-bottom:10px;
        line-height:1.8em;
        overflow-x: scroll;
	}

	div.FAQ_SCR_TH{
		width:1450px;
	}
  /* ---------------------------------
      For Top Section 
    --------------------------------- */
	div.FAQ_MAIN{
		width:100%;
		height:500px;
		background:url(../imgs/faq_top_bg.jpg) no-repeat;
		background-size: cover;
		background-position: 50% 50%;
		position:relative;
	}

	div.FAQ_MAIN_BOX{
		width:320px;
		height:300px;
		padding:40px;
        background:#000;
        color:#fff;
		position:absolute;
        left:5%;
        top:100px;
	}

	div.FAQ_MAIN_BOX h2:lang(en){
		font-size:220%;
        font-weight:bold;
        margin-bottom:20px;
        text-align:center;
        line-height:1.4em;
	}

	div.FAQ_MAIN_BOX h2:lang(th){
		font-size:180%;
        font-weight:bold;
        margin-bottom:20px;
        text-align:center;
        line-height:1.4em;
	}

	div.FAQ_MAIN_BOX p{
		font-size:90%;
		margin:0;
		padding:0;
        line-height:1.5em;
	}

	div.FAQ_BOX01{
		/*width:86%;*/
		width:80%;
        max-width: 1000px;
        margin:0 auto;
        padding:50px 0 50px 0;
	}

	div.FAQ_BOX01 h3{
		font-size:110%;
        font-weight:bold;
        margin-bottom:20px;
        cursor:pointer;
	}

	div.FAQ_BOX01 p{
		margin:0;
		padding:0;
	}

	div.FAQ_BOX01 dl{
		width:100%;
	  font-size:0.9em;
      margin-bottom:50px;
	}

	div.FAQ_BOX01 dl dt{
		position: relative;
		cursor:pointer;
		padding:16px 0;
	  display: -webkit-box;  /*Android*/
	  display: -moz-box;     /*Firefox*/
	  display: -ms-flexbox;  /*IE*/
	  display: -webkit-flex; /*PC-Safari,iOS*/
	  display: flex;
	  border-bottom:1px solid #ccc;
	}

	div.FAQ_BOX01 dl div.msg{
		padding:16px 0;
	}

	div.FAQ_BOX01 dl span{
		border-radius:6px;
		color:#fff;
		background:#434343;
		padding:8px 14px;
		margin-right:20px;
	  vertical-align:top;
	  height:auto;
	}

	div.FAQ_BOX01 dl dt::after {
	  position: absolute;
	  top: 20px;
	  right: 20px;
	  content: url(../imgs/chevron-right.svg);
    vertical-align: middle;
	}

	div.FAQ_BOX01 dl dt.open::after {
	  position: absolute;
	  top: 20px;
	  right: 20px;
	  content: url(../imgs/chevron-down.svg);
    vertical-align: middle;
	}


	div.FAQ_BOX01 dl dt.open{
	  border:0;
	}

	div.FAQ_BOX01 dl dd{
		padding:16px 0 16px 70px;
	  display: -webkit-box;  /*Android*/
	  display: -moz-box;     /*Firefox*/
	  display: -ms-flexbox;  /*IE*/
	  display: -webkit-flex; /*PC-Safari,iOS*/
	  display: flex;
	  border-bottom:1px solid #ccc;
	}

	div.FAQ_BOX01 dl dd a{
		color: #434343;
        text-decoration:underline;
  }

	div.FAQ_BOX01 dl dd a:hover{
		color: #71C5E8;
  }

	div.FAQ_BOX01 dl dt p:last-child{
		margin-right:40px;
  }

	div.FAQ_BOX01 dl dd p img{
		width:100%;
        height:auto;
  }


	div.FAQ_POPBG{
      display: flex;
      width: 100vw;
      height: 100vh;
      position: fixed;
      top: 0;
      left: 0;
      z-index: 1000000;
      background:rgba(0, 0, 0, 0.4);
      justify-content: center;
      align-items: center;
    }

	div.FAQ_POP_BOX01{
		height:90%;
        width:auto;
        overflow-y:scroll;
	}

	div.FAQ_POP_BOX01 img{
		width:100%;
        height:auto;
        cursor:pointer;
	}

	div.FAQ_POP_BOX02{
		width:80%;
        height:auto;
	}

	div.FAQ_POP_BOX02 img{
		width:100%;
        height:auto;
        cursor:pointer;
	}


/************************************** For SP. **************************************/
@media screen and (max-width:767px){
	div.FAQ_WP{
        border-bottom:0;
        line-height:2.0em;
	}

	div.FAQ_WP_TH{
		width:100%;
        margin-bottom:10px;
        border-bottom:0;
        line-height:2.0em;
        overflow-x: hidden;
	}

	div.FAQ_SCR_TH{
		width:100%;
	}

	div.FAQ_MAIN{
		height:400px;
		background-size: 160% auto;
		background-position: 80% 44%;
	}

	div.FAQ_MAIN_BOX{
		width:100%;
		padding:20px;
		height:160px;
        position:absolute;
        top:0;
       left: 0;
		background: rgba(0,0,0,0.4);
	}

	div.FAQ_MAIN_BOX h2{
		font-size:160%;
		font-weight:bold;
		-webkit-text-stroke: 0;
		margin-bottom:20px;
        text-align:left;
	}

	div.FAQ_BOX01{
		width:90%;
        padding:30px 0;
	}

	div.FAQ_BOX01 h3{
        margin-bottom:10px;
	}

	div.FAQ_BOX01 dl dt::after {
	  right: 2px;
	}

	div.FAQ_BOX01 dl dt.open::after {
	  right: 2px;
	}

	div.FAQ_BOX01 dl dt p:last-child{
		margin-right:20px;
  }

	div.FAQ_BOX01 dl dd{
		padding-left:40px;
	}

	div.FAQ_POP_BOX01{
		width:96%;
        height:auto;
	}

	div.FAQ_POP_BOX02{
		width:96%;
	}

}