/*  ★★★★★★   aq-shohaisen.php 用のCSS    ★★★★★★  */


.accordion-004 {
    max-width: 630px; /* 横幅を630pxに変更 */
    margin-bottom: 7px;
    border: 2px solid #d0d0d0;
    border-radius: 5px;
}

.accordion-004 summary {
    display: flex;
    justify-content: space-between;
    align-items: center;
    position: relative;
    padding: 1em 2em;
    color: #333333;
    font-weight: 600;
    cursor: pointer;
}


/* ★★★★★★summaryの最初の文字に適用するスタイル追加。★★★★★★ */
summary::before {
  content: url('https://oke-net.com/faq/images/Q.jpg'); /* 画像のパスを指定 */
  /* 画像とテキストの間にスペースを入れたい場合 */
  margin-right: 0.5em; 
  /* 必要に応じて、垂直方向の位置を調整 */
  vertical-align: middle; 
  
}

/* ★★★★★★summaryの最初の文字に適用するスタイル追加。おわり。★★★★★★ */


/* ★★★★★★<p>の文字にを<span class="brown-text">ブラウンにする。おわり。★★★★★★ */

.brown-text {
    color: brown; /* 色のキーワードで指定 */
    /* またはカラーコードで指定する場合: */
    /* color: #964B00; */
}
/* ★★★★★★<p>の文字にを<span class="brown-text">ブラウンにする。おわり。★★★★★★ */






.accordion-004 summary::-webkit-details-marker {
    display: none;
}

.accordion-004 summary::after {
    transform: translateY(-25%) rotate(45deg);
    width: 7px;
    height: 7px;
    margin-left: 10px;
    border-bottom: 3px solid #333333b3;
    border-right: 3px solid #333333b3;
    content: '';
    transition: transform .3s;
}

.accordion-004[open] summary::after {
    transform: rotate(225deg);
}

.accordion-004 p {
    transform: translateY(-10px);
    opacity: 0;
    margin: 0;
    padding: .3em 2em 1.5em;
    color: #333333;
    transition: transform .5s, opacity .5s;
}

.accordion-004[open] p {
    transform: none;
    opacity: 1;
}



/*  ★★★★★★  <<span class=".highlight ">Q</span>など 追加 。  ★★★★★★  */

.highlight  {
  font-weight: bold; /* 文字を太くする */
  color: red ;        /* 文字色を赤色に変える */
  font-size: 20px;
}

/*  ★★★★★★<p class="indent-paragraph">この段落は、CSSを使って頭文字が1文字分（1em）下がっています。</p>  ★★★★★★  */

.indent-paragraph {
    text-indent: 1em; /* 1文字分のスペース（全角スペース1つ分程度） */
  }

/*  ★★★★★★<p class="indent-paragraph">この段落は、CSSを使って頭文字が1文字分（1em）下がっています。</p> 終わり。 ★★★★★★  */