@charset "utf-8";
 /* YouTube埋め込み動画のレスポンシブ対応 */
        .youtube.short {
            position: relative;
            width: 100%;
            /* 16:9 のアスペクト比を維持 */
            padding-top: 56.25%; /* (9 / 16) * 100% */
            height: 0;
            overflow: hidden;
            background-color: #f0f0f0; /* デバッグ用に背景色を設定 */
        }

        .youtube.short iframe {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
        }

        /* Splideの矢印やドットの位置調整など、デフォルトスタイルを上書きしたい場合 */
        .splide__arrow {
            background: rgba(0, 0, 0, 0.5); /* 矢印の背景色 */
            color: #fff; /* 矢印のアイコン色 */
            border-radius: 50%; /* 円形にする */
            opacity: 0.7; /* 透明度 */
            transition: opacity 0.3s ease;
        }

        .splide__arrow:hover {
            opacity: 1; /* ホバーで透明度を上げる */
        }

        /* PC表示で矢印が中央に来るように調整（必要であれば） */
        @media (min-width: 768px) {
            .splide__arrow--prev {
                left: 1em; /* 左矢印の位置 */
            }
            .splide__arrow--next {
                right: 1em; /* 右矢印の位置 */
            }
        }

        /* スライド内のコンテンツのセンタリングなど（既存スタイルに合わせる） */
        .splide__slide .item {
            text-align: center; /* テキストや動画を中央に配置 */
            padding: 15px;
												background-color: #f2f7f4;
        }

        .splide__slide .item-title,
        .splide__slide .item-title {
            font-size: 1.1rem;
            margin-bottom: 10px;
        }

        .splide__slide .item-text,
        .splide__slide .item-text {
            font-size: 1rem;
            margin-bottom: 20px;
        }

        /* その他、元のサイトのレイアウトを維持するためのCSS */
        .course_Content {
            margin: 20px auto;
            max-width: 1200px; /* 全体の最大幅を設定 */
            padding: 0 15px; /* 左右のパディング */
        }


        .content_innerlayout {
            display: flex; /* flexboxで画像を横に並べる */
            flex-direction: column; /* デフォルトは縦積み */
            align-items: center; /* 中央寄せ */
            gap: 30px; /* 要素間の隙間 */
        }
        /* Splideの矢印やドットの位置調整など、デフォルトスタイルを上書きしたい場合 */
        .splide__arrow {
            background: rgba(0, 0, 0, 0.5); /* 矢印の背景色 */
            color: #fff; /* 矢印のアイコン色 */
            border-radius: 50%; /* 円形にする */
            opacity: 0.7; /* 透明度 */
            transition: opacity 0.3s ease;
            /* デフォルトのサイズ設定（必要に応じて調整） */
            width: 2rem;   /* 矢印コンテナの幅 */
            height: 2rem;  /* 矢印コンテナの高さ */
            font-size: 1.2rem; /* 矢印アイコンのサイズ */
            line-height: 4rem; /* 矢印アイコンを垂直中央に配置 */
												/* 矢印を垂直方向の中央に配置 */
            position: absolute; /* 親要素に対して絶対配置 */
            top: 50%;           /* 上から50%の位置 */
            transform: translateY(-50%); /* 自身の高さの半分上にずらす（中央揃え） */
            z-index: 1; /* 他の要素より手前に表示 */
        }

        .splide__arrow:hover {
            opacity: 1; /* ホバーで透明度を上げる */
        }
        @media (min-width: 768px) {
            .content_innerlayout {
               flex-direction: row-reverse; /* PCでは横並び */
                justify-content: center;
                align-items: flex-start; /* 上揃え */
            }
            .content_img {
                flex: 1; /* flex item が均等幅になるように */
                min-width: 0; /* flexアイテムの縮小を許可 */
            }
            .content_lead {
                flex: 1; /* flex item が均等幅になるように */
                padding-left: 30px; /* 左側にスペース */
            }
        }

/*        .content_img {
            width: 100%; 
            max-width: 500px; 
        }*/

        .content_lead {
            width: 100%; /* モバイルでは全幅 */
            max-width: 500px; /* テキストエリアの最大幅 */
            line-height: 1.8;
        }

        .pc-hidden {
            display: none; /* PCでは非表示 */
        }
        @media (max-width: 767px) {
            .pc-hidden {
                display: inline; /* スマホでは表示 */
            }
        }
								@media (max-width: 767px) {
    .youtube.short {
        /* スマホでは9:16のアスペクト比を維持（縦長） */
        padding-top: 177.77%; /* (16 / 9) * 100% */
    }
}
@media (max-width: 767px) {
            .splide__arrow {
                width: 3rem;      /* スマホで矢印コンテナの幅を大きくする */
                height: 3rem;     /* スマホで矢印コンテナの高さを大きくする */
                font-size: 1.5rem;  /* スマホで矢印アイコンのサイズを大きくする */
                line-height: 4rem; /* スマホで矢印アイコンを垂直中央に配置 */
            }
            .splide__arrow--prev {
                left: 0.5em; /* スマホで左矢印の位置を少し内側に */
            }
            .splide__arrow--next {
                right: 0.5em; /* スマホで右矢印の位置を少し内側に */
            }
        }