/* =====================================================
   画像・コンテンツ保護設定（簡易版）
   今後の別サイトでも、このファイルをそのままコピーして
   <link> で読み込むだけで同じ設定が使えます。
   ===================================================== */

/* ドラッグでの画像取得を抑制 */
img {
    -webkit-user-drag: none;
    user-drag: none;
    -khtml-user-drag: none;
    -moz-user-drag: none;
    -o-user-drag: none;
}

/* スマホでの「長押し→画像を保存」メニューを抑制 (iOS Safari等) */
img {
    -webkit-touch-callout: none;
}

/* テキスト・画像の選択(ドラッグ選択)を抑制 */
.no-select, body {
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}

/* 入力欄やテキストエリアなど、選択が必要な要素は例外にする */
input, textarea, [contenteditable="true"] {
    -webkit-user-select: text;
    -moz-user-select: text;
    -ms-user-select: text;
    user-select: text;
}

/* ===== 透明レイヤー方式（より強めに保護したい画像に使用） =====
   使い方：画像を <div class="protected-image"><img ...></div> で囲むだけ
*/
.protected-image {
    position: relative;
    display: inline-block;
    width: 100%;
    height: 100%;
}
.protected-image img {
    position: relative;
    z-index: 1;
    width: 100%;
    height: 100%;
}
.protected-image::after {
    content: '';
    position: absolute;
    inset: 0;
    z-index: 2;
    background: transparent;
    /* このレイヤーが右クリック・ドラッグを直接受け止める */
}

/* ===== 背景画像化方式（最も保護効果が高い。メインビジュアル等におすすめ） =====
   使い方：<img>の代わりに <div class="bg-image" style="background-image:url('画像パス')"></div>
*/
.bg-image {
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    -webkit-user-drag: none;
}