.hover-opacity {
    cursor: pointer;
}

/*ホバーしたときに色を暗くする設定*/
.l_ab.hover-opacity:hover {
    background-color: #e2fffc;
}
.l_cde.hover-opacity:hover {
    background-color: #fff9dc;
}

.accordion-content {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.4s ease;
}
.accordion-content.open {
    max-height: 600px; /* 必要に応じて調整。中身が多いならもっと大きく */
}

/*フォント*/
@font-face {
    font-family: 'rounded-l-mplus-1p-bold';
    src: url('fonts/rounded-l-mplus-1p-bold.ttf') format('truetype');
}

@font-face {
    font-family: 'rounded-l-mplus-1p-black';
    src: url('fonts/rounded-l-mplus-1p-black.ttf') format('truetype');
}

@font-face {
    font-family: 'rounded-l-mplus-1p-heavy';
    src: url('fonts/rounded-l-mplus-1p-heavy.ttf') format('truetype');
}

.font-ml-bold {
    font-family: 'rounded-l-mplus-1p-bold', sans-serif;
}

p.font-ml-bold {
    font-size: 20px;
}
h5.font-ml-bold {
    font-size: 22px;
}

.font-ml-black {
    font-family: 'rounded-l-mplus-1p-black', sans-serif;
}

.font-ml-heavy {
    font-family: 'rounded-l-mplus-1p-heavy', sans-serif;
}

.navbar-nav{
    --bs-nav-link-hover-color: var(--bs-navbar-color);
}

h6 {
    font-size: 18px;
}

.card-body.row {
    justify-content: center;
    align-items: center;
    flex-wrap: nowrap;
    flex-direction: row;
    width: auto;
    height: 70px;
    padding-top: 1.3em;
}
.card-body.row p,
.card-body.row h5 {
    margin: 0;
}
.card.row {
    flex-wrap: nowrap;
    flex-direction: row;
    width: auto;
    padding-left: 30%;
}

.row p,
.row h5,
.row h6{
    width: auto;
}

.accordion-menu {
    border-radius: 40px;
    color: #fff;
    margin: auto 0;
    padding: 3px 9px;
}

.ab {
    background-color: #4DB6AC;
}
.cde {
    background-color: #FFD700;
}

.kokugo {
    background-color: #FF777D;
    border-radius: 5px;
}
.sansu {
    background-color: #6BAEEB;
    border-radius: 5px;
}
.zuko {
    background-color: #3AC0BB;
    border-radius: 5px;
}
.syakai {
    background-color: #9478AC;
    border-radius: 5px;
}

.ongaku {
    background-color: #F8C128;
    border-radius: 5px;
}
.rika {
    background-color: #38C67F;
    border-radius: 5px;
}
.katei {
    background-color: #FF9474;
    border-radius: 5px;
}
button {
    background-color: white;
    border-radius: 40px;
    padding: 18px;
    color: #747474;
    font-size: 20px;
    width: 90%;
    margin-bottom: 20px;
}
button.l_ab {
    border: 3px solid #4DB6AC;
}
button.l_cde {
    border: 3px solid #FFD700;
}

/* すべての .program ボタンのスタイル調整 */
button.program {
    /* 擬似要素のための相対位置指定 */
    position: relative; 
    /* 矢印分のスペースを確保するために左側のパディングを増やす */
    padding-left: 45px; 
    /* テキストが中央に来るように調整 */
    text-align: center; 
}

/* 擬似要素 (初期状態: 右向き矢印の本体 - すべての.programに適用) */
button.program::before {
    content: "";
    position: absolute;
    left: 50px; 
    top: 50%;
    width: 17px; 
    height: 3px;
    background-color: #747474; 
    transform: translateY(-50%);
    transition: transform 0.4s ease, background-color 0.4s ease, width 0.4s ease;
    border-radius: 3px;
}

/* 擬似要素 (初期状態: 右向き矢印の先端の山型 - すべての.programに適用) */
button.program::after {
    content: "";
    position: absolute;
    left: 55px; /* beforeの終点と重なる位置 */
    top: 51%;
    /* 矢印の山型（くの字）を描画するためのスタイル */
    width: 13px;
    height: 13px;
    border-top: 3px solid #747474;
    border-right: 3px solid #747474;
    background-color: transparent;
    transform: translateY(-50%) rotate(45deg); /* ひし形を45度回転させて山型にする */
    transition: transform 0.4s ease, border-color 0.4s ease, left 0.4s ease;
    border-radius: 3px;
}

/* --- アコーディオンが開いた状態 (プラスマーク: +) --- */

/* beforeを横棒にする */
button.program.accordion-card.is-open::before {
    width: 17px; /* 横棒の長さを維持 */
    background-color: #747474;
    transform: translateY(-50%) rotate(90deg); /* 回転なし */
}

/* afterを縦棒にする */
button.program.accordion-card.is-open::after {
    /* afterのスタイルをリセットし、プラスマークの縦棒として再利用 */
    content: "";
    left: 56.5px; /* beforeの中央に位置するように調整 */
    top: 49%;
    width: 3px;
    height: 17px;
    border: none; /* 山型から縦棒に */
    background-color: #747474;
    transform: translateY(-50%) rotate(90deg); 
}

@media (max-width: 1200px) {
    .row-cols-md-3>* {
        width: 50%;
    }
    button {
        width: 100%;
        padding: 10px;
        margin: 10px auto;
    }
    button.program::before {
        left: 20px;
        height: 2px;
    }
    button.program::after {
        left: 25px;
        width: 12px;
        height: 12px;
    }
    button.program.accordion-card.is-open::after {
        left: 26.5px;
        top: 50%;
    }
    .card.row {
        padding-left: 15%;
    }
}