@charset "utf-8";
/* CSS Document */
.cate_list_wrap{
	height: 150px;
	background: linear-gradient(-90deg,#BA02D5 , #0623FD);
	position: relative;
}
.cate_list{
	position: absolute;
	bottom: 0;
	left: 0;
	right: 0;
	align-items: flex-end;
}
.cate_list li.active a{
	color: #fff;
	background: #d600fc;
	line-height: 4em;
}
.cate_list li a{
	width: 300px;
	background: #fff;
	line-height: 3em;
	border-radius: 10px 10px 0px 0px;
}
.tab_content{
	display: none;
}
.tab_content:first-of-type{
	display: block;
}


/* 電話でお問い合わせ
   ----------------------------------------------------------------- */
.tel_box{
	background: #f8f2fc;
	border-radius: 40px;
	max-width: 1000px;
	margin: 0 auto 50px;
}
.tel_box .tel_number{
max-width: 400px;
width: 100%;
margin: 0 auto;
padding: 50px 0px;
box-sizing: border-box;
}
.tel_txt_wrap{
	border-top: 1px solid #ccbcd8;
	padding: 3%;
}
.tel_txt1 span{
	padding: 5px 15px;
	border-radius: 30px;
	margin-right: 10px;
}



/* メールでお問い合わせ
   ----------------------------------------------------------------- */
.mail_contact{
		border: 40px solid #f8f2fc;
	box-sizing: border-box;
		padding: 10%;
}
.mail_contact .top_txt{
	border-bottom: 1px solid #e2e2e2;
	padding-bottom: 50px;
}
#form_box .box input::-webkit-input-placeholder,#form_box .box textarea::-webkit-input-placeholder{
	font-family: "游ゴシック Medium", "游ゴシック体", "Yu Gothic Medium", YuGothic,"ヒラギノ角ゴ ProN", "Hiragino Kaku Gothic ProN", "メイリオ", Meiryo, "ＭＳ Ｐゴシック", "MS PGothic",  sans-serif;
	font-size: 14px;
	opacity: 0.4;
}
#form_box .box input:-moz-placeholder,#form_box .box textarea:-moz-placeholder{
	font-family: "游ゴシック Medium", "游ゴシック体", "Yu Gothic Medium", YuGothic,"ヒラギノ角ゴ ProN", "Hiragino Kaku Gothic ProN", "メイリオ", Meiryo, "ＭＳ Ｐゴシック", "MS PGothic",  sans-serif;
	font-size: 14px;
	opacity: 0.4;
}
#form_box .box input::-moz-placeholder,#form_box .box textarea::-moz-placeholder{
	font-family: "游ゴシック Medium", "游ゴシック体", "Yu Gothic Medium", YuGothic,"ヒラギノ角ゴ ProN", "Hiragino Kaku Gothic ProN", "メイリオ", Meiryo, "ＭＳ Ｐゴシック", "MS PGothic",  sans-serif;
	font-size: 14px;
	opacity: 0.4;
}
#form_box .box input:-ms-input-placeholder,#form_box .box textarea:-ms-input-placeholder {
	font-family: "游ゴシック Medium", "游ゴシック体", "Yu Gothic Medium", YuGothic,"ヒラギノ角ゴ ProN", "Hiragino Kaku Gothic ProN", "メイリオ", Meiryo, "ＭＳ Ｐゴシック", "MS PGothic",  sans-serif;
	font-size: 14px;
	opacity: 0.4;
}
#form_box #form_bt div{
	display: inline-block;
	height: 50px;
	position: relative;
	-ms-transition: all 0.5s;
	-webkit-transition: all 0.5s;
}

#form_box .box p input,#form_box .box p textarea{
	background-color: #f8f2fc;
	border: none;
	transition: all 0.5s;
}
#form_box .box p input:hover,#form_box .box p textarea:hover{
	background-color: #e8deec;
}

#form_box .box_check a{
	border-bottom: 1px solid #7d13d7;
}
#submit input{
width: 300px;
height: 60px;
border-radius: 50px;
z-index: 1;
top: 0;
left: 0;
cursor: pointer;
border: none;
background: -moz-linear-gradient(45deg, #2C00FF,#4704FF); 
background: -webkit-linear-gradient(45deg, #2C00FF,#4704FF); 
background: linear-gradient(45deg, #2C00FF,#4704FF);
transition: all 0.5s;
}
#submit input:hover{
	 box-shadow: 0px 2px 32px 0px rgba(0, 0, 0, 0.3);
	opacity: 1;
}
#form_box #form_bt div::after{
	display: block;
	position: absolute;
	width: auto;
	letter-spacing: 3px;
	top: 30px;
	left: 50%;
	transform: translate(-50%,-50%);
	z-index: 2;
	color: #fff;
}
#form_box #form_bt #submit::after{
	content: "送信";
}


/*　ラジオボタン
   ----------------------------------------------------------------- */

@keyframes ripple {
  0% {
    box-shadow: 0px 0px 0px 1px rgba(0, 0, 0, 0);
  }
  50% {
    box-shadow: 0px 0px 0px 15px rgba(0, 0, 0, 0.1);
  }
  100% {
    box-shadow: 0px 0px 0px 15px rgba(0, 0, 0, 0);
  }
}
.md-radio input[type="radio"] {
  display: none;
}
.md-radio input[type="radio"]:checked + label:before {
  border-color: #F0F0F0;
  animation: ripple 0.2s linear forwards;
}
.md-radio input[type="radio"]:checked + label:after {
  transform: scale(1);
}
.md-radio label {
  display: inline-block;
  height: 20px;
  position: relative;
  padding: 0 30px;
  margin-bottom: 0;
  cursor: pointer;
  vertical-align: bottom;
}
.md-radio label:before, .md-radio label:after {
  position: absolute;
  content: '';
  border-radius: 50%;
  transition: all .3s ease;
  transition-property: transform, border-color;
}
.md-radio label:before {
  left: 0;
  top: 4px;
  width: 20px;
  height: 20px;
  border: 2px solid #F0F0F0;
}
.md-radio label:after {
  top: 11px;
  left: 7px;
  width: 10px;
  height: 10px;
  transform: scale(0);
  background: #5532e4;
}

/* よくある質問
   ----------------------------------------------------------------- */
.sub_cate_list li a{
    width: 200px;
    text-align: center;
    background: #5532e4;
    padding: 15px 0px;
    color: #fff;
    display: block;
    border-right: 2px solid #fff;
    font-size: 14px;
}
.sub_cate_list li:first-of-type a{
	border-radius: 10px 0px 0px 10px;
}
.sub_cate_list li:last-of-type a{
	border: none;
	border-radius: 0px 10px 10px 0px;
}
.sub_cate_list li a:hover{background: #3924b2;}
.faq_sub_box .title{padding-left: 30px;}
.faq_sub_box .title::before{
content: "";
width: 14px;
height: 4px;
border-radius: 10px;
background: #d600fc;
display: block;
position: relative;
left: -22px;
top: 17px;
}

.cate_box{
	border: 4px solid #f8f2fc;
	border-radius: 10px;
	margin-bottom: 5px;
}
.title_wrap{
	padding: 20px;
	width: 100%;
	box-sizing: border-box;
    cursor :pointer;
    transition: all 0.5s;
	position: relative;
	background: #f8f2fc;
}
.title_wrap .date{
	width: 200px;
}
/*アイコンを表示*/
.title_wrap::after {
	content: "";
	background-image: url("../img/plus_2.png");
	background-size: cover;
	width: 26px;
	height: 26px;
	position: absolute;
	right: 20px;
	top: 32px;
}
.txt_wrap{
	padding: 15px 20px;
}
.box_txt1{
	padding: 15px 0px;
}
.txt_wrap .box_txt1:last-of-type{
	border-bottom: none;
}

/*中身を非表示にしておく*/
.accbox .txt_wrap{
	display: none;
}

/*クリックで中身表示*/
.cssacc:checked + label + .accshow {
    height: auto;
    padding: 20px;
    opacity: 1;
}
/*アイコンを入れ替える*/
.title_wrap.active::after{
	content: "";
	background-image: url("../img/minus_2.png");
	background-size: cover;
	width: 26px;
	height: 26px;
	position: absolute;
	right: 20px;
	top: 32px;
}


.faq_wrap .box_title1{
	line-height: 50px;
}
/* ---------- タブレット ---------- */
@media screen and (max-width: 768px){
.cate_list li a{
	width: 200px;
}
.mail_contact{padding: 5%;}
.sub_cate_list li a {
    width: 168px;
    padding: 15px 0px;
    font-size: 12px;
}
}
/* ---------- スマートフォン ---------- */
@media screen and (max-width: 667px){

.cate_list_wrap{
	background: none;
	height: auto;
	margin-top: 30px;
	}
.cate_list{position: static;}
.cate_list li.active a{
	line-height: 2.5em;
}
.cate_list li a{
	border: 2px solid #d600fc;
	display: block;
	width: 80%;
	line-height: 2.5em;
	border-radius: 60px;
	box-sizing: border-box;
	margin: 10px auto 10px;
}
.tel_box .tel_number{
	width: 80%;
}
.tel_txt_wrap{padding: 5%;}
.tel_txt1 span{margin: 20px auto;}
	.sub_cate_list li{width: 100%;}
.sub_cate_list li a{
    width: 100%;
	display: block;
	margin-bottom: 5px;
    padding: 15px 0px;
    font-size: 14px;
	border-radius: 10px;
}
.sub_cate_list li:first-of-type a{
	border-radius: 10px;
}
.sub_cate_list li:last-of-type a{
	border: none;
	border-radius: 10px;
}
	.faq_wrap .box_title1{line-height: 25px;font-size: 16px;}
.mail_contact {
    padding: 0px;
}
.mail_contact {
    border: none;
    padding: 0px;
}
}