/* PCはpc画像、タブレットはtab画像、スマホはsp画像だけ表示 */
.pc {
    display: block;
}

.tab {
    display: none;
}

.sp {
    display: none;
}

@media (max-width: 1023px) {
    .pc {
        display: none;
    }

    .tab {
        display: block;
    }

    .sp {
        display: none;
    }
}

@media (max-width: 767px) {
    .pc {
        display: none;
    }

    .tab {
        display: none;
    }

    .sp {
        display: block;
    }
}

.mb10 {
    margin-bottom: 10px;
}

.mb20 {
    margin-bottom: 20px;
}

.mb30 {
    margin-bottom: 30px;
}

.mb40 {
    margin-bottom: 40px;
}

.mb50 {
    margin-bottom: 50px;
}

.mb60 {
    margin-bottom: 60px;
}

.mb70 {
    margin-bottom: 70px;
}

.mb80 {
    margin-bottom: 80px;
}

.mb90 {
    margin-bottom: 90px;
}

.mb100 {
    margin-bottom: 100px;
}

.pb10 {
    padding-bottom: 10px;
}

.pb20 {
    padding-bottom: 20px;
}

.pb30 {
    padding-bottom: 30px;
}

.pb40 {
    padding-bottom: 40px;
}

.pb50 {
    padding-bottom: 50px;
}

.pb60 {
    padding-bottom: 60px;
}

.pb70 {
    padding-bottom: 70px;
}

.pb80 {
    padding-bottom: 80px;
}

.pb90 {
    padding-bottom: 90px;
}

.pb100 {
    padding-bottom: 100px;
}



/*  モーダルウィンドウ
------------------------------------------------------------------*/

/*infoエリアをはじめは非表示*/
#info {
    display: none;
}

.modal-open {
    display: none;
}

.modal img {
    width: 100%;
}

/*モーダルの横幅を変更したい場合*/
.modaal-container {
    max-width: 600px;
}

/*モーダルのボタンの色を変更したい場合*/
.modaal-close:after,
.modaal-close:before {
    background: #ccc;
}

.modaal-close:focus:after,
.modaal-close:focus:before,
.modaal-close:hover:after,
.modaal-close:hover:before {
    background: #666;
}

.modal_ent {
    margin-top: 10px;
    width: 100%;
    color: #fff;
    background-color: #02C755;
    padding: 10px 30px;
    border-radius: 30px;
    font-size: 1.5rem;
    font-weight: 700;
    display: inline-block;
    text-align: center;
}


/*  youtube
------------------------------------------------------------------*/

.sns {
    margin-top: 60px;
}

.video-container {
    position: relative;
    padding-top: 56.25%;
    /* 16:9 アスペクト比 */
    height: 0;
    margin-top: 50px;
}

.video-container iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

.youtube_sns p {
    margin-top: 30px;
    font-size: 1.4rem;
    color: rgb(69, 162, 255);
    text-align: center;
}

.tiktok_sns p {
    margin-top: 60px;
    font-size: 1.4rem;
    color: rgba(255, 125, 175, 1);
    text-align: center;
}

.inst_sns p {
    margin-top: 30px;
    margin-bottom: 20px;
    font-size: 1.4rem;
    color: rgb(69, 162, 255);
    text-align: center;
}

.inst_sns {
    width: 100%;
    overflow: hidden;
    /* 万が一はみ出てもスクロールバーを出さない */
    text-align: center;
    /* 中身を中央寄せ */
}

/* Instagram埋め込み自体の調整 */
.instagram-media {
    /* 重要: !importantを使って元のスタイル（インラインスタイル）を上書きします */
    max-width: 100% !important;
    /* 親要素の幅を超えないようにする */
    min-width: auto !important;
    /* 元々の最小幅(326px)制限を解除する */
    margin: 0 auto !important;
    /* 強制的に中央配置にする */
    width: 100% !important;
    /* 幅を親に合わせる */
}

/*  fadeupアニメーション
------------------------------------------------------------------*/

/* --- 初期状態（画面外にあるとき） --- */
.fadeup {
    opacity: 0;
    /* 透明にする */
    transform: translateY(30px);
    /* 30px下にずらしておく */
    transition: opacity 1s, transform 1s;
    /* 1秒かけて変化させる */
}

/* --- アニメーション発火時（JSで付与されるクラス） --- */
.fadeup.is-visible {
    opacity: 1;
    /* 不透明にする */
    transform: translateY(0);
    /* 元の位置に戻す */
}

/*  fadeinアニメーション
------------------------------------------------------------------*/

/* --- その場でフェードイン --- */
.fadein {
    opacity: 0;
    transition: opacity 2s;
    /* ふわっとする時間 */
}

/* 表示された時のスタイル */
.fadein.is-visible {
    opacity: 1;
}

/* --- 左からスライド（左 → 元の位置） --- */
.fadeleft {
    opacity: 0;
    transform: translateX(-30px);
    /* 左に30pxずらしておく */
    transition: opacity 1s, transform 1s;
}

.fadeleft.is-visible {
    opacity: 1;
    transform: translateX(0);
}

/* --- 右からスライド（右 → 元の位置） --- */
.faderight {
    opacity: 0;
    transform: translateX(30px);
    /* 右に30pxずらしておく */
    transition: opacity 1s, transform 1s;
}

.faderight.is-visible {
    opacity: 1;
    transform: translateX(0);
}

/* 遅延用のクラス */
.delay-1 { transition-delay: 0.1s; }
.delay-2 { transition-delay: 0.2s; }
.delay-3 { transition-delay: 0.3s; }
.delay-4 { transition-delay: 0.4s; }
.delay-5 { transition-delay: 1s; }
.delay-6 { transition-delay: 1.2s; }
.delay-7 { transition-delay: 1.4s; }
.delay-8 { transition-delay: 1.6s; }
.delay-9 { transition-delay: 1.8s; }
.delay-10 { transition-delay: 2s; }