<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>力学ジェネレーター 試作版（反力）</title>
    
    <style>
        body {
            font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
            margin: 20px;
            background-color: #f4f4f9;
        }
        h1 {
            color: #333;
            border-bottom: 2px solid #007bff;
        }
        #app-container {
            max-width: 800px;
            margin: auto;
            background: #fff;
            padding: 20px;
            border-radius: 8px;
            box-shadow: 0 4px 12px rgba(0,0,0,0.05);
        }
        #diagram-container {
            border: 1px solid #ccc;
            background: #fdfdfd;
            margin-bottom: 20px;
            overflow: hidden;
        }
        #beam-svg {
            width: 100%;
            height: auto;
            user-select: none;
            -webkit-user-select: none;
            -moz-user-select: none;
        }
        .beam { stroke: #333; stroke-width: 4; }
        .support-pin { fill: none; stroke: #333; stroke-width: 2; }
        .support-roller { fill: none; stroke: #333; stroke-width: 2; }
        
        /* --- 荷重 (文字サイズ変更) --- */
        .load-arrow { stroke: #e91e63; stroke-width: 2; fill: #e91e63; }
        .load-text { 
            fill: #e91e63; 
            font-size: 28px; /* ★修正: 16px -> 28px */
            font-weight: bold; 
            text-anchor: middle; 
        }
        .load-p2 .load-arrow { stroke: #9c27b0; fill: #9c27b0; }
        .load-p2 .load-text { fill: #9c27b0; }
        .load-p3 .load-arrow { stroke: #ff9800; fill: #ff9800; }
        .load-p3 .load-text { fill: #ff9800; }

        /* --- 寸法線 (文字サイズ変更) --- */
        .dim-line { stroke: #00bcd4; stroke-width: 1; marker-start: url(#dim-tick); marker-end: url(#dim-tick); }
        .dim-line-aux { stroke: #00bcd4; stroke-width: 1; stroke-dasharray: 2 2; }
        .dim-text { 
            fill: #00796b; 
            font-size: 28px; /* ★修正: 16px -> 28px */
            text-anchor: middle; 
        }
        .label-text { 
            fill: #3f51b5; 
            font-size: 28px; /* ★修正: 16px -> 28px */
            font-weight: bold; 
            text-anchor: middle; 
        }
        
        .dim-seg .dim-line { stroke: #009688; }
        .dim-seg .dim-text { fill: #009688; }
        .dim-total .dim-line { stroke: #00bcd4; }
        .dim-total .dim-text { fill: #00bcd4; }

        /* --- 反力 (文字サイズ変更) --- */
        .reaction-arrow { stroke: #800080; stroke-width: 2; fill: #800080; }
        .reaction-text { 
            fill: #800080; 
            font-size: 28px; /* ★修正: 16px -> 28px */
            font-weight: bold; 
        }

        /* --- フォーム (入力欄の幅を修正) --- */
        #answer-form { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 15px; margin-bottom: 20px; }
        #answer-form div { display: flex; flex-direction: column; }
        #answer-form label { font-weight: bold; margin-bottom: 5px; color: #555; }
        #answer-form input { 
            padding: 10px; /* 少しパディングを増やす */
            font-size: 16px; 
            border: 1px solid #ccc; 
            border-radius: 4px; 
            width: 100%; /* ★修正: 100px -> 100% */
            box-sizing: border-box; /* ★追加: パディングを含めて幅100%にする */
        }
        
        /* --- ボタン (変更なし) --- */
        .buttons { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 20px; }
        .buttons button { padding: 12px 20px; font-size: 16px; font-weight: bold; border: none; border-radius: 5px; cursor: pointer; transition: background-color 0.2s; }
        #assume-reaction { background-color: #ffc107; color: black; }
        #check-answer { background-color: #007bff; color: white; }
        #show-answer { background-color: #6c757d; color: white; }
        #next-question { background-color: #28a745; color: white; margin-left: auto; }
        
        /* --- 結果 (変更なし) --- */
        #result-message { padding: 15px; border-radius: 5px; font-size: 1.1em; margin-bottom: 15px; }
        #result-message.correct { background-color: #d4edda; color: #155724; border: 1px solid #c3e6cb; }
        #result-message.incorrect { background-color: #f8d7da; color: #721c24; border: 1px solid #f5c6cb; }
        #result-message.solution { background-color: #e2e3e5; color: #383d41; border: 1px solid #d6d8db; }
        #equations { background: #f8f9fa; border: 1px solid #e9ecef; padding: 15px; border-radius: 4px; font-family: 'Courier New', Courier, monospace; white-space: pre-wrap; color: #333; line-height: 1.6; font-size: 14px; }
    </style>
</head>
<body>

    <div id="app-container">
        <h1>力学ジェネレーター 試作版（反力）単純梁の反力計算 (複数荷重)</h1>
        <p>図を見て、A点（ピン）とB点（ローラー）の反力（上向き、左向きを正として仮定）を求め、解答欄に入力してください。試作品です。普通に動きますがこのアプリ使用でのいかなる損害も保証しません。　制作：Catfishなおうち</p>

        <div id="diagram-container">
            <svg id="beam-svg" viewBox="-50 0 700 300" preserveAspectRatio="xMidYMid meet">
                <defs>
                    <marker id="dim-tick" viewBox="0 0 10 10" refX="5" refY="5" markerWidth="6" markerHeight="6" orient="auto-start-reverse">
                        <path d="M 0 0 L 10 10" stroke="#00bcd4" stroke-width="1" />
                        <path d="M 0 10 L 10 0" stroke="#00bcd4" stroke-width="1" />
                    </marker>
                    <marker id="arrow-head-load-p1" viewBox="0 0 10 10" refX="10" refY="5" markerWidth="6" markerHeight="6" orient="auto">
                        <path d="M 0 0 L 10 5 L 0 10 z" fill="#e91e63" />
                    </marker>
                    <marker id="arrow-head-load-p2" viewBox="0 0 10 10" refX="10" refY="5" markerWidth="6" markerHeight="6" orient="auto">
                        <path d="M 0 0 L 10 5 L 0 10 z" fill="#9c27b0" />
                    </marker>
                    <marker id="arrow-head-load-p3" viewBox="0 0 10 10" refX="10" refY="5" markerWidth="6" markerHeight="6" orient="auto">
                        <path d="M 0 0 L 10 5 L 0 10 z" fill="#ff9800" />
                    </marker>
                    <marker id="arrow-head-reaction" viewBox="0 0 10 10" refX="10" refY="5" markerWidth="6" markerHeight="6" orient="auto">
                        <path d="M 0 0 L 10 5 L 0 10 z" fill="#800080" />
                    </marker>
                </defs>

                <line id="beam" x1="50" y1="150" x2="550" y2="150" class="beam" />
                <g id="support-a" transform="translate(50, 150)">
                    <path d="M 0 0 L -10 15 L 10 15 Z" class="support-pin" />
                    <line x1="-15" y1="18" x2="15" y2="18" stroke="#333" stroke-width="2" />
                </g>
                <g id="support-b" transform="translate(550, 150)">
                    <path d="M 0 0 L -10 15 L 10 15 Z" class="support-roller" />
                    <circle cx="0" cy="20" r="5" class="support-roller" />
                    <line x1="-15" y1="28" x2="15" y2="28" stroke="#333" stroke-width="2" />
                </g>
                <text x="50" y="140" class="label-text">A</text>
                <text x="550" y="140" class="label-text">B</text>

                <g id="load-group-p1" class="load-p1" display="none">
                    <line class="load-arrow" x1="250" y1="90" x2="250" y2="148" marker-end="url(#arrow-head-load-p1)" />
                    <text class="load-text" x="250" y="80">P1=10kN</text>
                    <text class="label-text" x="250" y="170">C1</text>
                    <line class="dim-line-aux" x1="250" y1="150" x2="250" y2="215" /> </g>
                <g id="load-group-p2" class="load-p2" display="none">
                    <line class="load-arrow" x1="350" y1="70" x2="350" y2="148" marker-end="url(#arrow-head-load-p2)" />
                    <text class="load-text" x="350" y="60">P2=10kN</text>
                    <text class="label-text" x="350" y="170">C2</text>
                    <line class="dim-line-aux" x1="350" y1="150" x2="350" y2="215" /> </g>
                <g id="load-group-p3" class="load-p3" display="none">
                    <line class="load-arrow" x1="450" y1="50" x2="450" y2="148" marker-end="url(#arrow-head-load-p3)" />
                    <text class="load-text" x="450" y="40">P3=10kN</text>
                    <text class="label-text" x="450" y="170">C3</text>
                    <line class="dim-line-aux" x1="450" y1="150" x2="450" y2="215" /> </g>
                
                <g id="dim-group-total" class="dim-total">
                    <line id="dim-aux-a" x1="50" y1="150" x2="50" y2="235" class="dim-line-aux" />
                    <line id="dim-aux-b" x1="550" y1="150" x2="550" y2="235" class="dim-line-aux" />
                    <line id="dim-line-total" x1="50" y1="230" x2="550" y2="230" class="dim-line" />
                    <text id="dim-text-total" x="300" y="250" class="dim-text">10m</text>
                </g>
                
                <g id="dim-group-seg1" class="dim-seg" display="none">
                    <line class="dim-line" x1="50" y1="210" x2="150" y2="210" />
                    <text class="dim-text" x="100" y="205">2m</text>
                </g>
                <g id="dim-group-seg2" class="dim-seg" display="none">
                    <line class="dim-line" x1="150" y1="210" x2="250" y2="210" />
                    <text class="dim-text" x="200" y="205">2m</text>
                </g>
                <g id="dim-group-seg3" class="dim-seg" display="none">
                    <line class="dim-line" x1="250" y1="210" x2="350" y2="210" />
                    <text class="dim-text" x="300" y="205">2m</text>
                </g>
                <g id="dim-group-seg4" class="dim-seg" display="none">
                    <line class="dim-line" x1="350" y1="210" x2="550" y2="210" />
                    <text class="dim-text" x="450" y="205">4m</text>
                </g>
                <g id="reaction-a" display="none" transform="translate(50, 150)">
                    <line x1="0" y1="50" x2="0" y2="20" class="reaction-arrow" marker-end="url(#arrow-head-reaction)" />
                    <text x="-25" y="40" class="reaction-text" text-anchor="middle">VA</text>
                    <line x1="-5" y1="0" x2="-35" y2="0" class="reaction-arrow" marker-end="url(#arrow-head-reaction)" />
                    <text x="-55" y="5" class="reaction-text" text-anchor="middle">HA</text>
                </g>
                <g id="reaction-b" display="none" transform="translate(550, 150)">
                    <line x1="0" y1="55" x2="0" y2="30" class="reaction-arrow" marker-end="url(#arrow-head-reaction)" />
                    <text x="25" y="45" class="reaction-text" text-anchor="middle">VB</text>
                </g>
            </svg>
        </div>

        <div id="answer-form" style="display: none;">
            <div><label for="va">A点 垂直反力 (VA) [kN]</label><input type="number" id="va" step="0.1"></div>
            <div><label for="ha">A点 水平反力 (HA) [kN]</label><input type="number" id="ha" step="0.1" value="0"></div>
            <div><label for="vb">B点 垂直反力 (VB) [kN]</label><input type="number" id="vb" step="0.1"></div>
        </div>

        <div class="buttons">
            <button id="assume-reaction">反力仮定</button>
            <button id="check-answer" style="display: none;">解 答</button>
            <button id="show-answer" style="display: none;">解答表示</button>
            <button id="next-question">次の問題</button>
        </div>

        <div id="result" style="display: none;">
            <div id="result-message"></div>
            <pre id="equations"></pre>
        </div>

    </div> 
    
    <script>
        // --- グローバル変数 ---
        const Y_BEAM = 150;
        const X_START = 50;
        const X_END = 550;
        const BEAM_WIDTH = X_END - X_START;

        // 現在の問題の正解とパラメータを保持する
        let currentSolution = { VA: 0, HA: 0, VB: 0, L: 0, loads: [] };

        // --- DOM要素の取得 (共通) ---
        const answerForm = document.getElementById('answer-form');
        const vaInput = document.getElementById('va');
        const haInput = document.getElementById('ha');
        const vbInput = document.getElementById('vb');
        const assumeButton = document.getElementById('assume-reaction');
        const checkButton = document.getElementById('check-answer');
        const showButton = document.getElementById('show-answer');
        const nextButton = document.getElementById('next-question');
        const resultDiv = document.getElementById('result');
        const resultMessageDiv = document.getElementById('result-message');
        const equationsPre = document.getElementById('equations');
        const svgReactionA = document.getElementById('reaction-a');
        const svgReactionB = document.getElementById('reaction-b');
        const svgDimTextTotal = document.getElementById('dim-text-total');

        // --- イベントリスナー ---
        document.addEventListener('DOMContentLoaded', generateQuestion);
        nextButton.addEventListener('click', generateQuestion);
        assumeButton.addEventListener('click', assumeReaction);
        checkButton.addEventListener('click', checkAnswer);
        showButton.addEventListener('click', showAnswer);

        // --- 関数定義 ---

        /** 乱数生成ヘルパー */
        function getRandomInt(min, max) {
            return Math.floor(Math.random() * (max - min + 1)) + min;
        }

        /**
         * 問題を生成し、UIを初期化する
         */
        function generateQuestion() {
            // 1. パラメータをランダムに決定
            const L = getRandomInt(5, 12);
            const loadCount = getRandomInt(1, 3);
            
            let loads = [];
            let usedPositions = new Set();
            
            while (loads.length < loadCount) {
                const a = getRandomInt(1, L - 1);
                if (usedPositions.has(a)) {
                    continue;
                }
                usedPositions.add(a);
                const P = getRandomInt(10, 50);
                loads.push({ P: P, a: a });
            }

            loads.sort((loadA, loadB) => loadA.a - loadB.a);

            // 2. 正解を計算
            const HA = 0; 
            let totalMomentA = 0; 
            let totalLoadV = 0;   
            
            loads.forEach(load => {
                totalMomentA += load.P * load.a;
                totalLoadV += load.P;
            });

            const VB = totalMomentA / L;
            const VA = totalLoadV - VB;

            // 3. 計算結果とパラメータをグローバル変数に保存
            currentSolution = {
                VA: parseFloat(VA.toFixed(2)),
                HA: parseFloat(HA.toFixed(2)),
                VB: parseFloat(VB.toFixed(2)),
                L: L,
                loads: loads
            };

            // 4. フォームと結果をリセット (UI初期化)
            resetUI();         // ← 先にリセット
            // 5. SVGを描画更新
            drawSVG(L, loads); // ← 後で描画
        }

        /**
         * UIを初期状態（問題表示）に戻す
         */
        function resetUI() {
            vaInput.value = '';
            haInput.value = '0';
            vbInput.value = '';
            
            resultDiv.style.display = 'none';
            resultMessageDiv.innerHTML = '';
            resultMessageDiv.className = '';
            equationsPre.innerHTML = '';

            answerForm.style.display = 'none';
            checkButton.style.display = 'none';
            showButton.style.display = 'none';
            assumeButton.style.display = 'inline-block';

            svgReactionA.setAttribute('display', 'none');
            svgReactionB.setAttribute('display', 'none');

            // すべての荷重・区間寸法グループを非表示にする
            for (let i = 1; i <= 3; i++) {
                document.getElementById(`load-group-p${i}`).setAttribute('display', 'none');
            }
            for (let i = 1; i <= 4; i++) {
                document.getElementById(`dim-group-seg${i}`).setAttribute('display', 'none');
            }
        }


        /**
         * SVG要素の属性を更新して図形を描画する
         * @param {number} L 全長
         * @param {Array} loads 荷重の配列 [{P, a}, ...]
         */
        function drawSVG(L, loads) {
            
            // 全体寸法の更新
            svgDimTextTotal.textContent = `${L}m`;
            svgDimTextTotal.setAttribute('x', X_START + BEAM_WIDTH / 2);

            let last_x = X_START; // 区間寸法の描画開始X座標
            let last_a = 0;     // 区間寸法の描画開始実長

            // 各荷重と寸法線の描画
            loads.forEach((load, index) => {
                const i = index + 1; // IDは 1-indexed (p1, p2, p3)
                const p_x = X_START + (load.a / L) * BEAM_WIDTH;

                // --- 1. 荷重の描画 ---
                const loadGroup = document.getElementById(`load-group-p${i}`);
                loadGroup.setAttribute('display', 'block');
                
                const loadLine = loadGroup.querySelector('.load-arrow');
                loadLine.setAttribute('x1', p_x);
                loadLine.setAttribute('x2', p_x);
                
                const loadText = loadGroup.querySelector('.load-text');
                loadText.setAttribute('x', p_x);
                loadText.textContent = `P${i}=${load.P}kN`;
                
                const label = loadGroup.querySelector('.label-text');
                label.setAttribute('x', p_x);
                label.textContent = `C${i}`;
                
                // ★テキスト重なり解消 (Y座標をずらす)
                const y_text = 80 - (index * 20); // P1=80, P2=60, P3=40
                const y_arrow_start = y_text + 10; // P1=90, P2=70, P3=50
                loadText.setAttribute('y', y_text);
                loadLine.setAttribute('y1', y_arrow_start);

                // 補助線
                const auxLine = loadGroup.querySelector('.dim-line-aux');
                auxLine.setAttribute('x1', p_x);
                auxLine.setAttribute('x2', p_x);


                // --- 2. 区間寸法の描画 (A-C1, C1-C2, C2-C3) ---
                const seg_len = load.a - last_a;
                const dimGroup = document.getElementById(`dim-group-seg${i}`);
                dimGroup.setAttribute('display', 'block');
                
                dimGroup.querySelector('.dim-line').setAttribute('x1', last_x);
                dimGroup.querySelector('.dim-line').setAttribute('x2', p_x);
                
                const dimText = dimGroup.querySelector('.dim-text');
                dimText.setAttribute('x', last_x + (p_x - last_x) / 2);
                dimText.textContent = `${seg_len}m`;

                // 次の区間のために現在位置を保存
                last_x = p_x;
                last_a = load.a;
            });

            // --- 3. 最後の区間寸法の描画 (C_last -> B) ---
            const last_i = loads.length + 1; // 最後のセグメントID (seg2, seg3, or seg4)
            const seg_len = L - last_a;
            
            const dimGroupLast = document.getElementById(`dim-group-seg${last_i}`);
            dimGroupLast.setAttribute('display', 'block');
            
            dimGroupLast.querySelector('.dim-line').setAttribute('x1', last_x);
            dimGroupLast.querySelector('.dim-line').setAttribute('x2', X_END);
            
            const dimTextLast = dimGroupLast.querySelector('.dim-text');
            dimTextLast.setAttribute('x', last_x + (X_END - last_x) / 2);
            dimTextLast.textContent = `${seg_len}m`;
        }

        /**
         * 「反力仮定」ボタンが押されたときの処理
         */
        function assumeReaction() {
            answerForm.style.display = 'grid';
            checkButton.style.display = 'inline-block';
            showButton.style.display = 'inline-block';
            svgReactionA.setAttribute('display', 'block');
            svgReactionB.setAttribute('display', 'block');
            assumeButton.style.display = 'none';
        }

        /**
         * ユーザーの解答をチェックし、正誤と釣り合い式を表示する
         */
        function checkAnswer() {
            const userVA = parseFloat(vaInput.value) || 0;
            const userHA = parseFloat(haInput.value) || 0;
            const userVB = parseFloat(vbInput.value) || 0;

            const epsilon = 0.001; 
            const isVACorrect = Math.abs(userVA - currentSolution.VA) < epsilon;
            const isHACorrect = Math.abs(userHA - currentSolution.HA) < epsilon;
            const isVBCorrect = Math.abs(userVB - currentSolution.VB) < epsilon;
            
            const totalP = currentSolution.loads.reduce((sum, load) => sum + load.P, 0);
            const isSumVCorrect = Math.abs(userVA + userVB - totalP) < 0.01; 

            let resultHTML = '';
            if (isVACorrect && isHACorrect && isVBCorrect) {
                resultMessageDiv.className = 'correct';
                resultHTML = '<strong>正解です！</strong><br>';
                resultHTML += `VA = ${currentSolution.VA} kN, HA = ${currentSolution.HA} kN, VB = ${currentSolution.VB} kN`;
            } else {
                resultMessageDiv.className = 'incorrect';
                resultHTML = '<strong>不正解です。</strong><br>';
                resultHTML += `あなたの解答: VA=${userVA}, HA=${userHA}, VB=${userVB}<br>`;
                resultHTML += `<strong>正しい解答: VA=${currentSolution.VA} kN, HA=${currentSolution.HA} kN, VB=${currentSolution.VB} kN</strong><br><br>`;
                
                if (!isHACorrect) {
                    resultHTML += 'ヒント: 水平方向の力(HA)が間違っています。<br>';
                }
                if (!isSumVCorrect) {
                     resultHTML += 'ヒント: 垂直反力(VAとVB)の合計が、全荷重(P)の合計とつり合っていません。<br>';
                } else if (!isVACorrect || !isVBCorrect) {
                    resultHTML += 'ヒント: モーメントのつり合い(支点からの距離)を確認してみましょう。<br>';
                }
            }
            
            resultMessageDiv.innerHTML = resultHTML;
            displaySolution();
        }

        /**
         * 「解答表示」ボタンが押されたときの処理
         */
        function showAnswer() {
            resultMessageDiv.className = 'solution';
            resultMessageDiv.innerHTML = `<strong>解答</strong><br>VA = ${currentSolution.VA} kN, HA = ${currentSolution.HA} kN, VB = ${currentSolution.VB} kN`;
            displaySolution();
        }

        /**
         * 釣り合いの式を生成・表示する共通関数
         * (計算ロジックはA点からの距離aを使うため、変更なし)
         */
        function displaySolution() {
            const sol = currentSolution;
            let eqHTML = `--- 釣り合いの式（計算過程）---\n\n`;
            
            let loadLabels = [];
            sol.loads.forEach((load, i) => {
                // 計算過程の表示は「A点からの距離(a)」が分かりやすいため、そのまま
                loadLabels.push(`P${i+1}(=${load.P}kN) at a${i+1}(=${load.a}m)`);
            });
            eqHTML += `条件: L=${sol.L}m, ${loadLabels.join(', ')}\n`;
            eqHTML += `仮定： HA (左向き)、VA (上向き)、VB (上向き)\n\n`;
            
            eqHTML += `[1] 水平方向の力のつり合い (ΣH = 0)\n`;
            eqHTML += `  (左向きを正とする)\n`;
            eqHTML += `  HA = 0 kN\n\n`;

            eqHTML += `[2] A点まわりのモーメントのつり合い (ΣM_A = 0)\n`;
            eqHTML += `  (時計回りを正とする)\n`;
            
            let momentStr = [];
            let momentCalcStr = [];
            sol.loads.forEach((load, i) => {
                momentStr.push(`P${i+1} * a${i+1}`);
                momentCalcStr.push(`${load.P} * ${load.a}`);
            });
            
            eqHTML += `  ${momentStr.join(' + ')} - VB * L = 0\n`;
            eqHTML += `  VB * ${sol.L} = ${momentCalcStr.join(' + ')}\n`;
            const totalMomentA = sol.loads.reduce((sum, load) => sum + (load.P * load.a), 0);
            eqHTML += `  VB * ${sol.L} = ${totalMomentA.toFixed(2)}\n`;
            eqHTML += `  VB = ${totalMomentA.toFixed(2)} / ${sol.L} = ${sol.VB} kN\n\n`;

            eqHTML += `[3] 鉛直方向の力のつり合い (ΣV = 0)\n`;
            eqHTML += `  (上向きを正とする)\n`;
            
            let loadSumStr = sol.loads.map((load, i) => `P${i+1}`).join(' - ');
            let loadSumValStr = sol.loads.map(load => load.P).join(' + ');
            let totalLoadV = sol.loads.reduce((sum, load) => sum + load.P, 0);

            eqHTML += `  VA + VB - ${loadSumStr} = 0\n`;
            eqHTML += `  VA = (${loadSumStr}) - VB\n`;
            eqHTML += `  VA = (${loadSumValStr}) - ${sol.VB}\n`;
            eqHTML += `  VA = ${totalLoadV} - ${sol.VB} = ${sol.VA} kN\n`;
            
            resultDiv.style.display = 'block';
            equationsPre.textContent = eqHTML;
        }

    </script>
    <script async src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js?client=ca-pub-7855061578893179"
         crossorigin="anonymous"></script>
    <ins class="adsbygoogle"
         style="display:block"
         data-ad-format="fluid"
         data-ad-layout-key="-gw-3+1f-3d+2z"
         data-ad-client="ca-pub-7855061578893179"
         data-ad-slot="8574377639"></ins>
    <script>
         (adsbygoogle = window.adsbygoogle || []).push({});
    </T>
    <script async src="https://www.googletagmanager.com/gtag/js?id=G-LLZX3KXMVF"></script>
    <script>
      window.dataLayer = window.dataLayer || [];
      function gtag(){dataLayer.push(arguments);}
      gtag('js', new Date());

      gtag('config', 'G-LLZX3KXMVF');
    </script>
</body>
</html>