@charset "UTF-8";


/*ボックス全体*/
.accbox {
    margin: 4rem auto 18rem;
    padding: 0;
	width: 96%;
    max-width: 1280px;/*最大幅*/
    font-size: max(1.8rem,14px);
   
}

/*ラベル*/
.accbox label {
    display: block;
    margin: .5rem 0;
    padding : 2rem 5rem 2rem 6rem;
    font-weight: 500;
    background: #dbccbb;
    cursor :pointer;
    transition: all 0.5s;
	position: relative;
    border-radius: 2rem;
    color: #482a08;
}

/*アイコンを表示*/
.accbox label:after {
    content: '\f078';
    font-family: 'Font Awesome 6 Free';
font-weight: 900;
	position: absolute;
	right: 2.5rem;
	top:50%;
    font-size: 2rem;
    margin-top: -2rem;
   
	color: #482a08;
	
}


.accbox label:before {
    content: 'Q.';
   
	font-size: max(2.4rem, 18px);
	font-weight: normal;
	color:#482a08;
	position: absolute;
	top: 50%;
  left: 2rem;
  transform: translate(0, -51%);
	
}

/*ラベルホバー時*/
.accbox label:hover {
    background :#f4eee7;
}

/*チェックは隠す*/
.accbox input {
    display: none;
}

/*中身を非表示にしておく*/
.accbox .accshow {
    height: 0;
    padding: 0 0 0 6rem;
    overflow: hidden;
    opacity: 0;
    transition: 0.5s;
}

/*クリックで中身表示*/
.cssacc:checked + label + .accshow {
    height: auto;
    padding: 2rem 2rem 2rem 6rem;
    background: #fff;
    opacity: 1;
	position: relative;
    width: 100%;
    margin: 0 auto 1rem;
    border-radius: 2rem;
    border: 1px solid #dbccbb;
    z-index: -1;
}

.cssacc:checked + label + .accshow {
    z-index: 1; /* または z-index: auto; に変更 */
}


.cssacc:checked + label + .accshow:before {
    content: 'A.';
	position: absolute;
	font-size: 2.4rem;
	left: 2.6rem;
	color: #950707;
    top: 1.4rem;
    font-weight: 600;
	
}
.accbox .accshow p {
    margin: 15px 10px}

/*アイコンを入れ替える*/

/*アイコンを入れ替える*/
.cssacc:checked + label:before {
    content: 'Q.';
}	

.cssacc:checked + label:after {
    content: '\f106';
}
.accshow a {
    pointer-events: auto;
    text-decoration: underline; /* リンクとわかるようにする */
    color:#E57373; /* リンクカラー */
  }