@charset "UTF-8";

.cp_breadcrumb {
	margin-bottom: 100px;
}
.sec01 .title-a,.sec02 .title-a {
    font-size: 24px;
    margin-bottom: 40px;
}
.faq-btn_wrap {
	margin-bottom:80px;
}
.faq-link-1,.faq-link-2 {
    font-size: 22px;
    text-align: center;
    width: 320px;
    height: 90px;
    border: solid 1px #202020;
    line-height: 88px;
}
.faq-link-1 {
	display: inline-block;
	margin-right: 70px;
	background:#e1f0e0;
}
.faq-link-2 {
	display: inline-block;
	background:#d2e7f9;
}
.sec01,.sec02 {
	margin-bottom: 120px;
}
.question, .answer {
    position: relative;
}
.title {
    position: relative;
    cursor: pointer;
    font-size: 20px;
    font-weight: bold;
    padding: 1.2em 2em 1.2em 4.6em;
    transition: all 0.01s;
    margin-bottom: 28px;
    border: solid 1px #202020;
    color: #fff;
    border-radius: 50px;
    letter-spacing: 0.1em;
}
.sec01 .title {
    background: #52b25b;
}
.sec02 .title {
    background: #77a3d0;
}
.answer::before {
    top: -12px;
}
.question::before {
    content: "Q.";
    color: #fff;
    font-size: 22px;
    font-weight: bold;
    position: absolute;
    top: 4px;
    left: -1.5em;
}
.answer::before {
    content: "A.";
    font-size: 22px;
    font-weight: bold;
    position: absolute;
    left: -1.5em;
    top: 1px;
}
.sec01 .answer::before {
    color: #52b25b;
}
.sec02 .answer::before {
    color: #77a3d0;
}
.answer_text {
	line-height: 1.8em;
	letter-spacing: 0.05em;
}

/*アコーディオン全体*/
.accordion-area{
    list-style: none;
    max-width: 960px;
    margin:0 auto;
}

/*アコーディオンで現れるエリア*/
.box {
    display: none;
    padding: 0px 50px 0 6em;
    margin-bottom: 50px;
}

/*アイコンの＋と×*/
.title::before,
.title::after{
    position: absolute;
    content:'';
    width: 25px;
    height: 2px;
    background-color: #fff;
}
.title::before{
    top:48%;
    right: 55px;
    transform: rotate(0deg);
    
}
.title::after{    
    top:48%;
    right: 55px;
    transform: rotate(90deg);

}
/*　closeというクラスがついたら形状変化　*/
.title.close::before{
	transform: rotate(45deg);
}

.title.close::after{
	transform: rotate(-45deg);
}


/**************************************************************************

 　　768px以下に適用されるCSS（スマートフォン）

**************************************************************************/

@media screen and (max-width: 768px) {
	
/* メインビジュアル
----------------------------------------------------------- */		
.cp_breadcrumb {
    margin-bottom: 10vw;
}
.sec01, .sec02 {
    margin-bottom: 14vw;
}
.accordion-area {
    max-width: 100%;
}
.faq-btn_wrap {
	margin-bottom:10vw;
	}
.faq-link-1,.faq-link-2 {
    font-size: 4.4vw;
    text-align: center;
    width: 44vw;
    height: 18vw;
    line-height: 1.5em;
}
.faq-link-1 {
    line-height: 17vw;
	margin-right: 5vw;
}
.faq-link-2 {
    padding-top:2.4vw;
}
.sec01 .title-a,.sec02 .title-a {
    font-size: 5vw;
    display: block;
    margin-bottom: 3vw;
}
.question::before, .answer::before {
    font-size: 6.5vw;
    top: 2vw;
    border-radius: 10vw;
    left: -10vw;
}

.answer::before {
    top: 0vw;
}

/*アコーディオンタイトル*/
.title {
    font-size: 4vw;
    padding: 1em 2.9em 1em 4.4em;
    line-height: 1.5em;
    margin-bottom: 3.75vw;
    color: #fff;
    border-radius: 30vw;
    letter-spacing: 0.05em;
}

/*アイコンの＋と×*/
.title::before, .title::after {
    position: absolute;
    content: '';
    width: 4.5vw;
    height: 0.5vw;
    background-color: #fff;
}
.title::before{
    top:48%;
    right: 6vw;
    transform: rotate(0deg);
    
}
.title::after{    
    top:48%;
    right: 6vw;
    transform: rotate(90deg);

}

/*アコーディオンで現れるエリア*/
.box {
    padding: 0 1em 0 5.2em;
    margin-bottom: 3.75vw;
    font-size: 3.5vw;
}
	
	
}