@charset "UTF-8";


/* 2025.08.22 アコーディオンメニュー用
----------------------------------*/

.accordion-001 {
    max-width: 600px;
    background-color: #ffffff;
}

.accordion-001:not([open]) {
    margin-bottom: 7px;
}/*閉じてる時だけ下に余白をつける*/

.accordion-001 summary {
    display: flex;  /*タイトルとアイコンを横並びにする為*/
    justify-content: space-between; /*右端と左端に要素を配置*/
    align-items: center;  /*縦方向の中央揃え*/
    position: relative; /*後でアイコンを::afterで配置する為*/
    padding: 6px 10px;  /*0.55em 0.8em;*/
    border-radius: 3px; /*角丸*/
    background-color: #cce497;
    color: #333;
    /*font-weight: 600;*/
    cursor: pointer;
}

.accordion-001 summary::-webkit-details-marker {
    display: none;
}/*デフォルトの三角アイコンを消してオリジナルアイコンに置き換える為*/

.accordion-001 summary::after {
    transform: translateY(-25%) rotate(45deg);
    width: 7px;
    height: 7px;
    margin-left: 10px;
    border-bottom: 3px solid #fff;
    border-right: 3px solid #fff;
    content: '';
    transition: transform .3s;
}/*下向き矢印を作成*/

.accordion-001[open] summary::after {
    transform: rotate(225deg);
}/*開いたとき矢印を上に回転させる*/

.accordion-001 p {
    transform: translateY(-10px);
    opacity: 0;
    margin: 0;
    padding: 5px 10px 15px 10px;  /*1em 2em 2em 2em;*/
    color: #333333;
    transition: transform .5s, opacity .5s; /*ふわっと表示される*/
}/*中身のテキスト。最初は少し上にずらして透明に→非表示っぽくする*/

.accordion-001[open] p {
    transform: none;
    opacity: 1;
}/*開いたとき元の位置に戻して不透明にする*/

.accordion-001::after {
  content: "";
  display: block;
  clear: both;
}/*次の<details>の回り込み解除*/


/* 2025.08.25 コラム用
----------------------------------*/
.p-notice-box {
  background-color: #E9F3D2;
  border-left: 4px solid #cce497;
  padding: 15px;
  margin: 6px 10px;
  line-height: 1.6;
  border-radius: 6px;
}