@charset "utf=8";

/*-----------------------------------------------------------
バナー
-----------------------------------------------------------*/

.soundBannerWr {
    padding: 9rem 0 0;
}

.soundBannerContents {
    max-width: 90rem;
    width: 100%;
    margin: 0 auto;
    background-image: url(../../../../uploads/sound-healing_banner_bg.jpg);
    background-size: cover;
    background-position: center;
    box-shadow: 0 0.2rem 0.6rem rgb(0 0 0 / 25%);
    border-radius: 2rem;
    padding: 7rem 1.5rem;
    overflow: hidden;
}

.soundBannerTextBox {
    font-weight: 500;
    letter-spacing: 0.05em;
    text-align: center;
    line-height: 2em;
    color: #FCF6EF;
}

.soundBannerBtn {
    max-width: 40.5rem;
    width: 100%;
    margin: 5rem auto 0;
}

.soundBannerBtn>a {
    width: 100%;
    height: 6rem;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: #FCF6EF;
    border-radius: 3rem;
    color: #047387;
    font-size: 2rem;
    font-weight: 600;
    letter-spacing: 0.05em;
    border: 1px solid #FCF6EF;
}

.soundBannerBtn>a:hover {
    background-color: #047387;
    color: #FCF6EF;
}

.soundBannerBox {
    max-width: 75rem;
    width: 100%;
    margin: 0 auto;
    position: relative;
    z-index: 3;
}

.soundBannerDeco01 {
    max-width: 13.1rem;
    width: 100%;
    position: absolute;
    bottom: 8%;
    right: 2%;
}

/*-----------------------------------------------------------
体験者様の声
-----------------------------------------------------------*/

.soundVoice {
    padding: 13rem 0 17rem;
}

.soundVoiceContents {
    max-width: 132rem;
    width: 100%;
    margin: 0 auto;
}

.soundVoiceItemWr {
    width: 100%;
    margin-top: 3.9rem;
    display: grid;
    gap: 4rem;
    grid-template-columns: repeat(2, 1fr);
}

.soundVoiceItemIcon {
    max-width: 11rem;
    width: 100%;
}

.soundVoiceItemTitSet {
    flex: 1;
    color: var(--primary);
    font-weight: 600;
    letter-spacing: 0.05em;
}

.soundVoiceItemTitBox {
    display: flex;
    align-items: center;
    gap: 2rem;
}

.soundVoiceItemName {
    font-size: 1.8rem;
}

.soundVoiceItemTit {
    font-size: 2.5rem;
}

.soundVoiceItemBox {
    border: 1px solid var(--primary);
    padding: 3rem;
    max-width: 100%;
    width: 100%;
    margin: 0 auto;
}

/* テキストが入るボックス */
.soundVoiceItemTextBox {
    position: relative;
    overflow: hidden;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 7; /* ここで表示したい行数を指定 */
    line-height: 1.6em;
    max-height: 11.2em; /* line-height × 行数 (1.6 * 7) */
    transition: max-height 0.3s ease; /* 開く時のアニメーション */
    margin-top: 2rem;
}

/* 全表示された時のクラス */
.is-expanded {
    -webkit-line-clamp: initial;
    max-height: none; /* 高さを無制限に */
}

/* ボタン（初期状態は隠しておく） */
.soundVoiceItemTextBtn {
    display: none;
    cursor: pointer;
    color: #FCF6EF;
    margin-top: 5px;
    background-color: var(--primary);
    text-align: center;
    border-radius: 1.4rem;
    max-width: 13rem;
    padding: 0.4rem 0.3rem;
    font-size: 1.4rem;
    margin: 2rem 0 0 auto;
}

.soundVoiceItemTextBtn:hover {
    background-color: #C2C6C7;
}

/* 7番目以降の要素を初期状態で非表示 */
.soundVoiceItemBox:nth-child(n+7) {
    display: none;
}

/* 全て表示した後のボタン用スタイル（任意） */
.soundVoiceItemAllBtn.is-active {
    background-color: #ccc; /* グレーにする */
    cursor: default;        /* カーソルを矢印に戻す */
    pointer-events: none;   /* クリックを無効化 */
}

/* ボタンのデザイン（任意） */
.soundVoiceItemAllBtn {
    margin: 6rem auto 0;
    cursor: pointer;
    max-width: 30rem;
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    height: 6rem;
    position: relative;
    border-radius: 3rem;
    transition: all .5s;
    font-size: 2rem;
    font-weight: 600;
    letter-spacing: 0.05em;
    background-color: #047387;
    color: #FCF6EF;
}

.soundVoiceItemAllBtn:hover {
    background-color: #ccc;
}

/* 全て表示された後にボタンを隠す用 */
.is-hidden {
    display: none;
}


/* ★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★ */
/* ★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★ */

@media screen and (width <= 1920px) {



}

/* ☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆ */
/* ☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆ */

/* ★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★ */
/* ★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★ */

@media screen and (width <= 1550px) {



}

/* ☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆ */
/* ☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆ */

/* ★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★ */
/* ★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★ */

@media screen and (width <= 1024px) {
    
.soundVoiceItemIcon {
    max-width: 9rem;
}

.soundVoiceItemName {
    font-size: 1.6rem;
}

.soundVoiceItemTit {
    font-size: 1.8rem;
}

}

/* ☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆ */
/* ☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆ */

/* ★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★ */
/* ★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★ */

@media screen and (width <= 768px) {

.soundVoiceItemWr {
    margin-top: 3.9rem;
    gap: 4rem;
    grid-template-columns: repeat(1, 1fr);
}

.soundVoiceItemBox {
    max-width: 64rem;
    padding: 2rem;
}

.soundVoiceItemAllBtn {
    margin: 4rem auto 0;
    max-width: 27rem;
    height: 5rem;
    font-size: 1.8rem;
}

.soundVoice {
    padding: 8rem 0 9rem;
}

.soundBannerBox {
    max-width: 67rem;
}

.soundBannerWr {
    padding: 6rem 0 0;
}
    
}

/* ☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆ */
/* ☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆ */

/* ★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★ */
/* ★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★ */

@media screen and (width <= 576px) {

.soundBannerContents {
    padding: 3.5rem 1.5rem;
}

.soundBannerBtn {
    max-width: 30.5rem;
    width: 100%;
    margin: 2.5rem auto 0;
}

.soundBannerBtn>a {
    height: 5rem;
    font-size: 1.6rem;
}

.soundBannerBox {
    max-width: 38rem;
}

.soundBannerDeco01 {
    max-width: 6.1rem;
}

.soundBannerTextBox {
    text-align: left;
}
    
}

/* ☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆ */
/* ☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆ */

/* ★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★ */
/* ★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★ */

@media screen and (width <= 414px) {

.soundVoiceItemTitBox {
    gap: 2rem;
    flex-direction: column;
}

.soundVoiceItemTitSet {
    flex: 1;
    width: 100%;
}

.soundBannerDeco01 {
    display: none;
}

}

/* ☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆ */
/* ☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆ */