@charset "utf-8";
/*
Theme Name:isc
Theme URI:
Description:アイビスサポートクラブのテンプレートです。
Version:
Author:
Author URI:
*/
/*@import "reset.css";
@import "common.css";
@import "style_01.css";*/
.faq-index {
    max-width: 1025px;
    margin: 0 auto;
    padding: 0 0px 80px 0px;
}
.page .search_block p{
  color: #6b8492;
  font-size: 16px;
  margin: 0 0 10px;
}
.page .search_block{
  position: relative;
  margin: 0 0 50px;
}
.page .search_block span.search_btn{
  display: block;
  background-color: #a8b7bf;
  position: absolute;
  width: 58px;
  height: 36px;
  bottom: 0;
  right: 0;
}
.page .search_block span.search_btn::before{
  content: '';
  width: 21px;
  height: 21px;
  background-image: url(../images/faq/icon_search.png);
  background-size: cover;
  position: absolute;
  top: 50%;
  right: 19px;
  transform: translateY(-50%);
  pointer-events: none;
}
.page .search_block input[type="submit"]{
  background-color: #a8b7bf;
  display: block;
  width: 100%;
  height: 100%;
  border: none;
}
.page .search_block input[type="text"]{
  display: block;
  width: calc(100% - 25px);
  border: solid 1px #a8b7bf;
  padding: 10px 12px;
  box-shadow: none;
}
.search_word_block {
    text-align: center;
    font-size: 20px;
    margin: 0 0 2em;
}
.page .flex{
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
}
.page .flex .side_content{
  width: 210px;
}
.page .flex .main_content{
  width: 760px;
}
.page .flex .main_content dl{
  margin: 0 0 20px;
}
.page .flex .main_content dl:last-of-type{
  margin: 0;
}
.page .flex .main_content dt{
  position: relative;
  background-color: #d9eefd;
  padding: 30px 60px 25px 73px;
  line-height: 1.5;
  font-size: 16px;
  font-weight: 500;
}
.page .flex .main_content dt::before{
  position: absolute;
  top: 24px;
  left: 30px;
  content: '';
  width: 32px;
  height: 32px;
  background-image: url(../images/faq/icon_q.png);
  background-size: cover;
}
.page .flex .main_content dt::after{
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  right: 30px;
  content: '';
  width: 16px;
  height: 9px;
  background-image: url(../images/faq/icon_arrow.png);
  background-size: cover;
  transition: .5s;
}
.page .flex .main_content dt.open::after{
  transform: rotate( -180deg );
}
.page .flex .main_content dd{
position: relative;
  display: none;
  position: relative;
  background-color: #edf1f2;
  padding: 30px 60px 75px 73px;
  font-size: 14px;
  font-weight: 400;
}
.page .flex .main_content dd span.answer{
	position:absolute;
	right: 30px;
	bottom: 10px;
	color: #3AA5F5;
	font-weight: bold;
}
.page .flex .main_content dd::before{
  position: absolute;
  top: 24px;
  left: 30px;
  content: '';
  width: 32px;
  height: 32px;
  background-image: url(../images/faq/icon_a.png);
  background-size: cover;
  transition: .5s;
}
/*.page h1{
  color: #333;
  font-size: 30px;
  font-weight: 500;
  text-align: center;
margin-bottom:36px;
}*/
.page h1 img{
  display: block;
  width: 160px;
  margin: 0 auto 10px;
}
.page .taxsonomy_block{
  margin: 0 0 45px;
}
.page .taxsonomy_block h2{
  margin: 0 0 15px;
  font-size: 20px;
  line-height: 26px;
}
.page .taxsonomy_block h2::before{
  content: '';
  display: inline-block;
  width: 5px;
  height: 30px;
  background-color: #3aa5f5;
  margin-right: 10px;
  vertical-align: middle;
  position: relative;
  top: -2px;
}
.page .taxsonomy_block ul{
  display: flex;
  flex-wrap: wrap;
}
.page .taxsonomy_block ul li{
  position: relative;
  width: calc(25% - 14px);
  width: -webkit-calc(25% - 14px);
  margin: 0 10px 14px 0;
  border: solid 1px #3aa5f5;
  transition: .8s;
}
.page .taxsonomy_block ul li:hover{
  background-color: #3aa5f5;
}
.page .taxsonomy_block ul li::before{
  content: '';
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 7px 7px 0 7px;
  border-color: #3aa4f5 transparent transparent transparent;
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  bottom: 6px;
}
.page .taxsonomy_block ul li:hover::before{
  border-color: #fff transparent transparent transparent;
}
.page .taxsonomy_block ul li:nth-of-type(4n){
  margin: 0 0 14px;
}
.page .taxsonomy_block ul li a{
  display: block;
  color: #333;
  text-decoration: none;
  text-align: center;
  font-size: 14px;
  line-height: 54px;
}
.page .taxsonomy_block ul li:hover a{
  color: #fff;
}
.page .side_content dl.taxsonomy_toggle{
  margin: 0 0 15px;
}
.page .side_content dl.taxsonomy_toggle dt{
  position: relative;
  display: block;
  background-color: #6b8492;
  padding: 14px 0 14px 45px;
  color: #fff;
  font-size: 17px;
  font-weight: 500;
}
.page .side_content dl.taxsonomy_toggle .toggle_content,
.page .side_content dl.taxsonomy_toggle .toggle_content_2{
display: none
}
.page .side_content dl.taxsonomy_toggle dt::before{
  content: '';
  width: 16px;
  height: 16px;
  background-image: url(../images/faq/icon_plus.png);
  background-size: cover;
  position: absolute;
  top: 50%;
  left: 15px;
  transform: translateY(-50%);
}
.page .side_content dl.taxsonomy_toggle dt.open{
  background-color: #3AA5F5;
}
.page .side_content dl.taxsonomy_toggle dt.open::before{
  background-image: url(../images/faq/icon_close.png);
}
.page .side_content dl.taxsonomy_toggle dd ul{
  margin: 0 0 45px;
}
.page .side_content dl.taxsonomy_toggle dd li a{
  position: relative;
  display: block;
  border-bottom: 1px solid #dddddd;
  padding: 15px 15px 15px 23px;
  color: #333;
  font-size: 15px;
  font-weight: 500;
  text-decoration: none;
  transition: .8s;
}
.page .side_content dl.taxsonomy_toggle dd li a::before{
  content: '';
  width: 8px;
  height: 14px;
  background-image: url(../images/faq/icon_arrow_r.png);
  background-size: cover;
  position: absolute;
  top: 50%;
  left: 5px;
  transform: translateY(-50%);
}
.page .side_content dl.taxsonomy_toggle dd li a:hover{
  opacity: .8
}
p.sp{
display:none;
}
@media (max-width: 767px){
	p.sp{
		display: block;
}
	.page .flex .side_content{
		width: 100%
}
	.page h1{
		/*font-size: 15px;*/
}
	.page .search_block{
		margin: 0 0 20px
}
	.page .side_content dl.taxsonomy_toggle dt{
		padding: 10px 0 7px 45px;
}
	.page .side_content dl.taxsonomy_toggle{
		margin: 0 0 8px;
}
	.page .side_content{
		margin: 0 0 20px
}
	.page .search_block input[type="text"]::placeholder{
		color: #fff;
}
	.page .search_block span.search_btn{
		bottom: 42px;
}
	.page .search_block p.sp{
		margin:5px 0 0; 
		font-size: 12px;
}
	.page .taxsonomy_block ul li{
		display: flex;
		align-items: center;
		width: -webkit-calc(50% - 10px);
		margin: 0 5px 10px 0;
		 padding: 10px 0 18px;
}
	.page .taxsonomy_block ul li a{
		display: block;
		width: 100%;
		line-height: 1.5;
		text-align: center;
	}
}
/* 20220304追記 */
/* tDCS */
.page .faq-tab {
  width: 100%;
  border-bottom: 2px solid #3aa4f5;
  margin-bottom: 40px;
}
.page .faq-tab ul {
  display: flex;
  align-items: flex-end;
  gap: 9px;
}
.page .faq-tab li {
  border: 2px solid #3aa4f5;
  border-radius: 8px 8px 0 0;
  color: #3aa4f5;
  background-color: #fff;
  padding: 0.5em 1.2em;
  font-size: 15px;
  margin-bottom: -2px;
}
.page .faq-tab li.active {
  background-color: #3aa4f5;
  color: #fff;
  pointer-events: none;
}
.page .faq-tab li a {
  text-decoration: none;
  color: inherit;
}

.page h1 img {
  width: 94px;
}
.page.faq-tds .tdcs-faq-wrap {
  width: 100%;
  border: 1px solid #3aa4f5;
  margin-bottom: 50px;
}
.page.faq-tds .faq-txt {
  padding: 2em 3em 2em 5.2em;
}
.page.faq-tds .faq-txt .que {
  border-bottom: 1px dotted #CCCCCC;
  padding-bottom: 1em;
  font-size: 17px;
}
.page.faq-tds .faq-txt .ans {
  padding: 1.5em 0 0;
  font-size: 14px;
}
.page.faq-tds .faq-txt p {
  position: relative;
  line-height: 1.7;
}
.page.faq-tds .faq-txt p::before {
  content: 'Q';
  font-size: 11px;
  line-height: 25px;
  width: 25px;
  height: 25px;
  border-radius: 50%;
  background-color: #3aa4f5;
  color: #fff;
  display: block;
  text-align: center;
  vertical-align: middle;
  margin: 0 5px 3px 0;
  position: absolute;
  left: -3em;
  top: 0;
}
.page.faq-tds .faq-txt .ans p::before {
  background-color: #78C8C8;
  content: 'A';
}

.page.faq-tds .talker {
  border-top: 1px solid #3aa4f5;
  color: #3aa4f5;
  background-color: #F0F9FF;
  text-align: right;
  padding: 1em 2em;
}
@media (max-width: 769px){
  .faq-index {
      width: 88%;
      padding: 30px 6% 40px 6%;
  }
}
@media screen and (max-width:800px) {
  .page .faq-tab {
    border: none;
  }
  .page .faq-tab ul {
    flex-direction: column;
    justify-content: center;
    align-items: center;
  }
  .page .faq-tab li.active {
    display: none;
  }
  .page .faq-tab li {
    display: block;
    min-width: 300px;
    width: 80%;
    text-align: center;
    border-radius: 50px;
    position: relative;
  }
  .page .faq-tab li::after {
    position: absolute;
    content: '▶';
    right: 1em;
  }
}