@charset "UTF-8";

p {
    font-family: "Zen Old Mincho";
    font-size: 2rem;
    color: #3D3D3D;
    text-align: center;
    font-style: normal;
    font-weight: 400;
    line-height: 3;
    letter-spacing: 4px;
}
img {
    max-width: 100%;
    height: auto;
}
h2 {
    color: #3D3D3D;
    text-shadow: 0px 4px 4px rgba(91, 101, 86, 0.15);
    text-align: center;
    font-family: "Zen Old Mincho";
    font-size: 30px;
    font-style: normal;
    font-weight: 900;
    line-height: normal;
    letter-spacing: 6px;
}
h3 {
    color: #3D3D3D;
    text-shadow: 0px 4px 4px rgba(91, 101, 86, 0.15);
    font-family: "Zen Old Mincho";
    font-size: 2.5rem;
    font-style: normal;
    font-weight: 700;
    line-height: normal;
    letter-spacing: 6px;
    text-align: left;
}


/* TB→SP___共通設定___↓↓ */
@media screen and (max-width: 768px){
    p {
        font-size: 1.4rem;
        line-height: 2;
        letter-spacing: 0px;
    }
    img {
        max-width: 100%;
        height: auto;
    }
    h2 {
        font-size: 1.8rem;
        letter-spacing: 3px;
    }
    h3 {
        font-size: 1.6rem;
        letter-spacing: 0px;
    }  
}
/* SP___共通設定___↑↑ */


/* main ↓↓ */
.yoga_event_inside_box {
    display: flex;
    padding: 70px 8% 0px 8%;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 300px;
    align-self: stretch;
}
.yoga_event_img1 {
    opacity: 0;               /* 初期状態では見えない */
    transform: translateY(100px); /* 初期位置を下に100pxずらす */
    transition: opacity 1s ease, transform 1s ease; /* アニメーションの時間を指定 */
}
.yoga_event_img1.visible {
    opacity: 1;               /* アニメーション後に見えるようにする */
    transform: translateY(0);  /* 元の位置に戻す */
}
.section {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    align-self: stretch;
    background: #ECEDF1;
}
.yoga_title_box {
    display: flex;
    padding: 70px 0%;
    justify-content: center;
    align-items: center;
    align-self: stretch;

    opacity: 0;               /* 初期状態では見えない */
    transform: translateY(100px); /* 初期位置を下に100pxずらす */
    transition: opacity 1s ease, transform 1s ease; /* アニメーションの時間を指定 */
}
.yoga_title_box.visible {
    opacity: 1;               /* アニメーション後に見えるようにする */
    transform: translateY(0);  /* 元の位置に戻す */
}
.yoga_box1 {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 50px;
    align-self: stretch;
}
.line_img {
    width: 85%;

    opacity: 0;               /* 初期状態では見えない */
    transform: translateY(100px); /* 初期位置を下に100pxずらす */
    transition: opacity 1s ease, transform 0.3s ease; /* アニメーションの時間を指定 */

    /* アニメーションが必要な場合でも動きすぎないように設定 */
    transition: opacity 0.3s ease-in-out, transform 0.3s ease-in-out; /* 必要なら調整 */
    transform: translateZ(0); /* レイヤーを作成し、揺れを防ぐ */
    will-change: opacity, transform; /* レンダリングを最適化 */

    backface-visibility: hidden; /* バックフェイスを非表示 */
    perspective: 1000px; /* 3D空間の基準を追加 */
    transform-style: preserve-3d; /* 3D描画を維持 */
    contain: layout paint; /* コンテナ要素として扱う */
}
.line_img.visible {
    opacity: 1;               /* アニメーション後に見えるようにする */
    transform: translateY(0);  /* 元の位置に戻す */
}
.enterprise_txt_box1 {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 30px;

    opacity: 0;               /* 初期状態では見えない */
    transform: translateY(100px); /* 初期位置を下に100pxずらす */
    transition: opacity 1s ease, transform 1s ease; /* アニメーションの時間を指定 */
}
.enterprise_txt_box1.visible {
    opacity: 1;               /* アニメーション後に見えるようにする */
    transform: translateY(0);  /* 元の位置に戻す */
}
.p_txt_left {
    text-align: left;
    width: 100%;

    opacity: 0;               /* 初期状態では見えない */
    transform: translateY(100px); /* 初期位置を下に100pxずらす */
    transition: opacity 1s ease, transform 1s ease; /* アニメーションの時間を指定 */
}
.p_txt_left.visible {
    opacity: 1;               /* アニメーション後に見えるようにする */
    transform: translateY(0);  /* 元の位置に戻す */
}
.p_txt_left_sns_box {
    display: flex;
    width: 100%;
    justify-content: center;
    gap: 10%;

    opacity: 0;               /* 初期状態では見えない */
    transform: translateY(100px); /* 初期位置を下に100pxずらす */
    transition: opacity 1s ease, transform 1s ease; /* アニメーションの時間を指定 */
}
.p_txt_left_sns_box.visible {
    opacity: 1;               /* アニメーション後に見えるようにする */
    transform: translateY(0);  /* 元の位置に戻す */
}
.p_txt_left_sns{
    text-align: left;
    font-weight: 900;

    position: relative;
    transition: color 0.3s ease; /* ホバー時に文字の色を変える */
    transition: transform 0.3s ease;  /* 変化の速度やタイミングを設定 */
}
.p_txt_left_sns:hover {
    transform: scale(1.2);  /* マウスオーバー時に1.2倍に拡大 */
}
.p_txt_left_sns::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%; /* 線が伸びる最大幅 */
    height: 2px; /* 線の太さ */
    background-color: #333; /* 線の色 */
    transform: scaleX(0); /* 最初は線を隠す */
    transform-origin: left; /* 左から伸ばす */
    transition: transform 0.3s ease; /* 線の伸び方 */
}
/* ホバー時に線を左から右に伸ばす */
.p_txt_left_sns:hover::after {
    transform: scaleX(1); /* 線を100%の長さにする */
}
/* ホバー時に文字の色を変える */
.p_txt_left_sns:hover {
    color: #7E7F7E; /* ホバー時にテキストの色を変更 */
}
.enterpriseyoga_box2 {
    display: flex;
    padding: 100px 50px;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 100px;
    align-self: stretch;
}
.recommendation_about_title_box {
    display: flex;
    padding: 20px;
    justify-content: center;
    align-items: center;
    border: 1px solid #000;

    opacity: 0;               /* 初期状態では見えない */
    transform: translateY(100px); /* 初期位置を下に100pxずらす */
    transition: opacity 1s ease, transform 1s ease; /* アニメーションの時間を指定 */
}
.recommendation_about_title_box.visible {
    opacity: 1;               /* アニメーション後に見えるようにする */
    transform: translateY(0);  /* 元の位置に戻す */
}
.recommendation_about_list_box {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 30px;
    align-self: stretch;
    flex-wrap: wrap;

    opacity: 0;               /* 初期状態では見えない */
    transform: translateY(100px); /* 初期位置を下に100pxずらす */
    transition: opacity 1s ease, transform 1s ease; /* アニメーションの時間を指定 */
}
.recommendation_about_list_box.visible {
    opacity: 1;               /* アニメーション後に見えるようにする */
    transform: translateY(0);  /* 元の位置に戻す */
}
.recommendation_about_txt_box_1 {
    display: flex;
    padding: 50px;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 15px;
    flex: 1 0 0;
    border-radius: 15px;
    background: #FFF;
}
.list_box_a {
    display: flex;
    justify-content: center;
    align-items: flex-start;
    gap: 50px;
}
.list_box_a_title_txt {
    font-size: 2.5rem;
    letter-spacing: 5px;
    font-weight: 700;
    text-shadow: 0px 4px 4px rgba(91, 101, 86, 0.15);
}
.li_txt_nowrap {
    color: #000;
    font-family: "Zen Old Mincho";
    font-size: 2rem;
    font-style: normal;
    font-weight: 400;
    letter-spacing: 4px;
    text-align: left;
    list-style-type: disc;
    white-space: nowrap;
}
.li_txt {
    color: #000;
    font-family: "Zen Old Mincho";
    font-size: 2rem;
    font-style: normal;
    font-weight: 400;
    letter-spacing: 4px;
    text-align: left;
    list-style-type: disc;
}
.li_txt_nowrap:not(:first-child) {
    margin-top: 30px;
}
.li_txt:not(:first-child) {
    margin-top: 30px;
}
.txt_left {
    color: #000;
    font-family: "Zen Old Mincho";
    font-size: 2rem;
    font-style: normal;
    font-weight: 400;
    line-height: 3;
    letter-spacing: 4px;
    text-align: left;
}
.yoga_event_img2 {
    opacity: 0;               /* 初期状態では見えない */
    transform: translateY(100px); /* 初期位置を下に100pxずらす */
    transition: opacity 1s ease, transform 1s ease; /* アニメーションの時間を指定 */
}
.yoga_event_img2.visible {
    opacity: 1;               /* アニメーション後に見えるようにする */
    transform: translateY(0);  /* 元の位置に戻す */
}
.yoga_box2 {
    display: flex;
    padding: 100px 4%;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 100px;
    align-self: stretch;
}
.yoga_event_img3 {
    opacity: 0;               /* 初期状態では見えない */
    transform: translateY(100px); /* 初期位置を下に100pxずらす */
    transition: opacity 1s ease, transform 1s ease; /* アニメーションの時間を指定 */
}
.yoga_event_img3.visible {
    opacity: 1;               /* アニメーション後に見えるようにする */
    transform: translateY(0);  /* 元の位置に戻す */
}
.yoga_event_img4 {
    opacity: 0;               /* 初期状態では見えない */
    transform: translateY(100px); /* 初期位置を下に100pxずらす */
    transition: opacity 1s ease, transform 1s ease; /* アニメーションの時間を指定 */
}
.yoga_event_img4.visible {
    opacity: 1;               /* アニメーション後に見えるようにする */
    transform: translateY(0);  /* 元の位置に戻す */
}
.yoga_event_img5 {
    opacity: 0;               /* 初期状態では見えない */
    transform: translateY(100px); /* 初期位置を下に100pxずらす */
    transition: opacity 1s ease, transform 1s ease; /* アニメーションの時間を指定 */
}
.yoga_event_img5.visible {
    opacity: 1;               /* アニメーション後に見えるようにする */
    transform: translateY(0);  /* 元の位置に戻す */
}
.yoga_event_img6 {
    opacity: 0;               /* 初期状態では見えない */
    transform: translateY(100px); /* 初期位置を下に100pxずらす */
    transition: opacity 1s ease, transform 1s ease; /* アニメーションの時間を指定 */
}
.yoga_event_img6.visible {
    opacity: 1;               /* アニメーション後に見えるようにする */
    transform: translateY(0);  /* 元の位置に戻す */
}
.yoga_event_img7 {
    opacity: 0;               /* 初期状態では見えない */
    transform: translateY(100px); /* 初期位置を下に100pxずらす */
    transition: opacity 1s ease, transform 1s ease; /* アニメーションの時間を指定 */
}
.yoga_event_img7.visible {
    opacity: 1;               /* アニメーション後に見えるようにする */
    transform: translateY(0);  /* 元の位置に戻す */
}
.yoga_event_img8 {
    opacity: 0;               /* 初期状態では見えない */
    transform: translateY(100px); /* 初期位置を下に100pxずらす */
    transition: opacity 1s ease, transform 1s ease; /* アニメーションの時間を指定 */
}
.yoga_event_img8.visible {
    opacity: 1;               /* アニメーション後に見えるようにする */
    transform: translateY(0);  /* 元の位置に戻す */
}

/* TB→SP */
@media screen and (max-width: 768px){
    .yoga_event_inside_box {
        padding: 60px 2% 0px 2%;
        gap: 200px;
    }
    .yoga_title_box {
        padding: 25px 0%;
    }
    .yoga_box1 {
        padding: 0px 15px;
        gap: 30px;
    }
    .line_img {
        width: 100%;
    }
    .enterprise_txt_box1 {
        display: flex;
        padding: 0px 4%;
        flex-direction: column;
        justify-content: center;
        align-items: flex-start;
        gap: 20px;
    }
    .p_txt_left {
        text-align: left;
        letter-spacing: 1px;
    }
    .p_txt_left_sns_box {
        display: flex;
        width: 100%;
        justify-content: center;
        gap: 10%;
    }
    .p_txt_left_sns{
        text-align: left;
        font-weight: 900;
    
        position: relative;
        transition: color 0.3s ease; /* ホバー時に文字の色を変える */
    }
    .p_txt_left_sns::after {
        content: '';
        position: absolute;
        bottom: 0;
        left: 0;
        width: 100%; /* 線が伸びる最大幅 */
        height: 2px; /* 線の太さ */
        background-color: #333; /* 線の色 */
        transform: scaleX(0); /* 最初は線を隠す */
        transform-origin: left; /* 左から伸ばす */
        transition: transform 0.3s ease; /* 線の伸び方 */
    }
    /* ホバー時に線を左から右に伸ばす */
    .p_txt_left_sns:hover::after {
        transform: scaleX(1); /* 線を100%の長さにする */
    }
    /* ホバー時に文字の色を変える */
    .p_txt_left_sns:hover {
        color: #7E7F7E; /* ホバー時にテキストの色を変更 */
    }
    
    .enterpriseyoga_box2 {
        padding: 30px 4%;
        gap: 30px;
    }
    .recommendation_about_list_box {
        flex-direction: column;
        gap: 30px;
    }
    .recommendation_about_txt_box_1 {
        padding: 30px;
        gap: 15px;
        align-self: stretch;
    }
    .list_box_a {
        display: flex;
        /* flex-direction: column; */
        align-items: center;
        gap: 100px;
    }
    .list_box_a_title_txt {
        font-size: 1.8rem;
        letter-spacing: 0px;
    }
    .li_txt_nowrap {
        font-size: 1.4rem;
        line-height: 2;
        letter-spacing: 0px;
    }
    .li_txt {
        font-size: 1.4rem;
        line-height: 2;
        letter-spacing: 1px;
    }
    .li_txt:not(:first-child) {
        margin-top: 0px;
    }
    .li_txt_nowrap:not(:first-child) {
        margin-top: 0px;
    }
    .txt_left {
        font-size: 1.4rem;
        letter-spacing: 0px;
        line-height: 2.5;
    }
    .br-pc {
        display: none;
    }
    .yoga_box2 {
        padding: 30px 4%;
        gap: 30px;
        
    }
}

@media screen and (max-width: 425px){
    .yoga_event_inside_box {
        padding: 60px 2% 0px 2%;
        gap: 100px;
    } 
    .p_txt_left {
        letter-spacing: 0px;
    }
    .recommendation_about_txt_box_1 {
        padding: 30px;
        gap: 15px;
        align-self: stretch;
    }
    .list_box_a {
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 0px;
    }
    
    .li_txt {
        letter-spacing: 0px;
    }
    .txt_left {
        letter-spacing: 0px;
    }
    
}
/* main ↑↑ */