<head>
  <script>

    document.addEventListener('DOMContentLoaded', function () {
      const lines = document.getElementById('lines');
      const stations = document.getElementById('stations');
      const stationList = document.getElementById('stationsBoxId');

      const stationOptions = {
        'JR山手線': [
          'ランダム駅', '大崎', '五反田', '目黒', '恵比寿', '渋谷', '原宿', '代々木', '新宿', '新大久保', '高田馬場', '目白', '池袋', '大塚', '巣鴨', '駒込', '田端', '西日暮里', '日暮里', '鶯谷', '上野', '御徒町', '秋葉原', '神田', '東京', '有楽町', '新橋', '浜松町', '田町', '高輪ゲートウェイ', '品川'
        ],
        'JR中央線': [
          'ランダム駅', '東京', '神田', '御茶ノ水', '四ツ谷', '新宿', '中野', '高円寺', '阿佐ケ谷', '荻窪', '西荻窪', '吉祥寺', '三鷹', '武蔵境', '東小金井', '武蔵小金井', '国分寺', '西国分寺', '国立', '立川', '日野', '豊田', '八王子', '西八王子', '高尾'
        ],
        'JR総武線': [
          'ランダム駅', '三鷹', '吉祥寺', '西荻窪', '荻窪', '阿佐ケ谷', '高円寺', '中野', '東中野', '大久保', '新宿', '代々木', '千駄ケ谷', '信濃町', '四ツ谷', '市ケ谷', '飯田橋', '水道橋', '御茶ノ水', '秋葉原', '浅草橋', '両国', '錦糸町', '亀戸', '平井', '新小岩', '小岩', '市川', '本八幡', '下総中山', '西船橋', '船橋', '東船橋', '津田沼', '幕張本郷', '幕張', '新検見川', '稲毛', '西千葉', '千葉'
        ],
        'JR京浜東北線': [
          'ランダム駅', '大宮', 'さいたま新都心', '与野', '北浦和', '浦和', '南浦和', '蕨', '西川口', '川口', '赤羽', '東十条', '王子', '上中里', '田端', '西日暮里', '日暮里', '鶯谷', '上野', '御徒町', '秋葉原', '神田', '東京', '有楽町', '新橋', '浜松町', '田町', '高輪ゲートウェイ', '品川', '大井町', '大森', '蒲田', '川崎', '鶴見', '新子安', '東神奈川', '横浜'
        ],
        'JR湘南新宿ライン': [
          'ランダム駅', '大宮', '浦和', '赤羽', '池袋', '新宿', '渋谷', '恵比寿', '大崎', '西大井', '武蔵小杉', '新川崎', '横浜', '保土ケ谷', '東戸塚', '戸塚', '大船'
        ],
        'JR埼京線': [
          'ランダム駅', '大崎', '恵比寿', '渋谷', '新宿', '池袋', '板橋', '十条', '赤羽', '北赤羽', '浮間舟渡', '戸田公園', '戸田', '北戸田', '武蔵浦和', '中浦和', '南与野', '与野本町', '北与野', '大宮', '日進', '指扇', '南古谷', '川越'
        ],
        'JR京葉線': [
          'ランダム駅', '東京', '八丁堀', '越中島', '潮見', '新木場', '葛西臨海公園', '舞浜', '新浦安', '市川塩浜', '西船橋', '二俣新町', '南船橋', '新習志野', '幕張豊砂', '海浜幕張', '検見川浜', '稲毛海岸', '千葉みなと', '蘇我'
        ],
        '東京メトロ銀座線': [
          'ランダム駅', '浅草', '田原町', '稲荷町', '上野', '上野広小路', '末広町', '神田', '三越前', '日本橋', '京橋', '銀座', '新橋', '虎ノ門', '溜池山王', '赤坂見附', '青山一丁目', '外苑前', '表参道', '渋谷'
        ],
        '東京メトロ丸ノ内線': [
          'ランダム駅', '池袋', '新大塚', '茗荷谷', '後楽園', '本郷三丁目', '御茶ノ水', '淡路町', '大手町', '東京', '銀座', '霞ケ関', '国会議事堂前', '赤坂見附', '四ツ谷', '四谷三丁目', '新宿御苑前', '新宿三丁目', '新宿', '西新宿', '中野坂上', '新中野', '東高円寺', '新高円寺', '南阿佐ケ谷', '荻窪', '中野新橋', '中野富士見町', '方南町'
        ],
        '東京メトロ日比谷線': [
          'ランダム駅', '北千住', '南千住', '三ノ輪', '入谷', '上野', '仲御徒町', '秋葉原', '小伝馬町', '人形町', '茅場町', '八丁堀', '築地', '東銀座', '銀座', '日比谷', '霞ケ関', '虎ノ門ヒルズ', '神谷町', '六本木', '広尾', '恵比寿', '中目黒'
        ],
        '東京メトロ東西線': [
          'ランダム駅', '中野', '落合', '高田馬場', '早稲田', '神楽坂', '飯田橋', '九段下', '竹橋', '大手町', '日本橋', '茅場町', '門前仲町', '木場', '東陽町', '南砂町', '西葛西', '葛西', '浦安', '南行徳', '行徳', '妙典', '原木中山', '西船橋'
        ],
        '東京メトロ千代田線': ['ランダム駅', '北綾瀬', '綾瀬', '北千住', '町屋', '西日暮里', '千駄木', '根津', '湯島', '新御茶ノ水', '大手町', '二重橋前', '日比谷', '霞ケ関', '国会議事堂前', '赤坂', '乃木坂', '表参道', '明治神宮前〈原宿〉', '代々木公園', '代々木上原'],
        '東京メトロ有楽町線': ['ランダム駅', '和光市', '地下鉄成増', '地下鉄赤塚', '平和台', '氷川台', '小竹向原', '千川', '要町', '池袋', '東池袋', '護国寺', '江戸川橋', '飯田橋', '市ケ谷', '麹町', '永田町', '桜田門', '有楽町', '銀座一丁目', '新富町', '月島', '豊洲', '辰巳', '新木場'],
        '東京メトロ半蔵門線': ['ランダム駅', '渋谷', '表参道', '青山一丁目', '永田町', '半蔵門', '九段下', '神保町', '大手町', '三越前', '水天宮前', '清澄白河', '住吉', '錦糸町', '押上〈スカイツリー前〉'],
        '東京メトロ南北線': ['ランダム駅', '赤羽岩淵', '志茂', '王子神谷', '王子', '西ケ原', '駒込', '本駒込', '東大前', '後楽園', '飯田橋', '市ケ谷', '四ツ谷', '永田町', '溜池山王', '六本木一丁目', '麻布十番', '白金高輪', '白金台', '目黒'],
        '東京メトロ副都心線': ['ランダム駅', '和光市', '地下鉄成増', '地下鉄赤塚', '平和台', '氷川台', '小竹向原', '千川', '要町', '池袋', '雑司が谷', '西早稲田', '東新宿', '新宿三丁目', '北参道', '明治神宮前〈原宿〉', '渋谷'],
        '東急東横線': ['ランダム駅', '渋谷', '代官山', '中目黒', '祐天寺', '学芸大学', '都立大学', '自由が丘', '田園調布', '多摩川', '新丸子', '武蔵小杉', '元住吉', '日吉', '綱島', '大倉山', '菊名', '妙蓮寺', '白楽', '東白楽', '反町', '横浜'],
        '東急目黒線': ['ランダム駅', '目黒', '不動前', '武蔵小山', '西小山', '洗足', '大岡山', '奥沢', '田園調布', '多摩川', '新丸子', '武蔵小杉', '元住吉', '日吉'],
        '東急田園都市線': ['ランダム駅', '渋谷', '池尻大橋', '三軒茶屋', '駒沢大学', '桜新町', '用賀', '二子玉川', '二子新地', '高津', '溝の口', '梶が谷', '宮崎台', '宮前平', '鷺沼', 'たまプラーザ', 'あざみ野', '江田', '市が尾', '藤が丘', '青葉台', '田奈', '長津田', 'つくし野', 'すずかけ台', '南町田グランベリーパーク', 'つきみ野', '中央林間'],
        '東急大井町線': ['ランダム駅', '大井町', '下神明', '戸越公園', '中延', '荏原町', '旗の台', '北千束', '大岡山', '緑が丘', '自由が丘', '九品仏', '尾山台', '等々力', '上野毛', '二子玉川', '二子新地', '高津', '溝の口'],
        '都営大江戸線': ['ランダム駅', '都庁前', '新宿西口', '東新宿', '若松河田', '牛込柳町', '牛込神楽坂', '飯田橋', '春日', '本郷三丁目', '上野御徒町', '新御徒町', '蔵前', '両国', '森下', '清澄白河', '門前仲町', '月島', '勝どき', '築地市場', '汐留', '大門', '赤羽橋', '麻布十番', '六本木', '青山一丁目', '国立競技場', '代々木', '新宿', '西新宿五丁目', '中野坂上', '東中野', '中井', '落合南長崎', '新江古田', '練馬', '豊島園', '練馬春日町', '光が丘'],
        '都営浅草線': ['ランダム駅', '西馬込', '馬込', '中延', '戸越', '五反田', '高輪台', '泉岳寺', '三田', '大門', '新橋', '東銀座', '宝町', '日本橋', '人形町', '東日本橋', '浅草橋', '蔵前', '浅草', '本所吾妻橋', '押上（スカイツリー前）'],
        '都営三田線': ['ランダム駅', '目黒', '白金台', '白金高輪', '三田', '芝公園', '御成門', '内幸町', '日比谷', '大手町', '神保町', '水道橋', '春日', '白山', '千石', '巣鴨', '西巣鴨', '新板橋', '板橋区役所前', '板橋本町', '本蓮沼', '志村坂上', '志村三丁目', '蓮根', '西台', '高島平', '新高島平', '西高島平'],
        '都営新宿線': ['ランダム駅', '新宿', '新宿三丁目', '曙橋', '市ヶ谷', '九段下', '神保町', '小川町', '岩本町', '馬喰横山', '浜町', '森下', '菊川', '住吉', '西大島', '大島', '東大島', '船堀', '一之江', '瑞江', '篠崎', '本八幡'],
        '東武東上線': ['ランダム駅', '池袋', '北池袋', '下板橋', '大山', '中板橋', 'ときわ台', '上板橋', '東武練馬', '下赤塚', '成増', '和光市', '朝霞', '朝霞台', '志木', '柳瀬川', 'みずほ台', '鶴瀬', 'ふじみ野', '上福岡', '新河岸', '川越', '川越市', '霞ヶ関', '鶴ヶ島', '若葉', '坂戸', '北坂戸', '高坂', '東松山', '森林公園', 'つきのわ', '武蔵嵐山', '小川町', '東武竹沢', 'みなみ寄居', '男衾', '鉢形', '玉淀', '寄居'],
        '東武伊勢崎線': ['ランダム駅', '浅草', 'とうきょうスカイツリー', '押上〈スカイツリー前〉', '曳舟', '東向島', '鐘ヶ淵', '堀切', '牛田', '北千住', '小菅', '五反野', '梅島', '西新井', '竹ノ塚', '谷塚', '草加', '獨協大学前〈草加松原〉', '新田', '蒲生', '新越谷', '越谷', '北越谷', '大袋', 'せんげん台', '武里', '一ノ割', '春日部', '北春日部', '姫宮', '東武動物公園', '和戸', '久喜', '鷲宮', '花崎', '加須', '南羽生', '羽生', '川俣', '茂林寺前', '館林', '多々良', '県', '福居', '東武和泉', '足利市', '野州山辺', '韮川', '太田', '細谷', '木崎', '世良田', '境町', '剛志', '新伊勢崎', '伊勢崎'],
        '西武池袋線': ['ランダム駅', '池袋', '椎名町', '東長崎', '江古田', '桜台', '練馬', '中村橋', '富士見台', '練馬高野台', '石神井公園', '大泉学園', '保谷', 'ひばりヶ丘', '東久留米', '清瀬', '秋津', '所沢', '西所沢', '小手指', '狭山ヶ丘', '武蔵藤沢', '稲荷山公園', '入間市', '仏子', '元加治', '飯能', '東飯能', '高麗', '武蔵横手', '東吾野', '吾野'],
        '西武新宿線': ['ランダム駅', '西武新宿', '高田馬場', '下落合', '中井', '新井薬師前', '沼袋', '野方', '都立家政', '鷺ノ宮', '下井草', '井荻', '上井草', '上石神井', '武蔵関', '東伏見', '西武柳沢', '田無', '花小金井', '小平', '久米川', '東村山', '所沢', '航空公園', '新所沢', '入曽', '狭山市', '新狭山', '南大塚', '本川越'],
        '京王線': ['ランダム駅', '新宿', '笹塚', '代田橋', '明大前', '下高井戸', '桜上水', '上北沢', '八幡山', '芦花公園', '千歳烏山', '仙川', 'つつじヶ丘', '柴崎', '国領', '布田', '調布', '西調布', '飛田給', '武蔵野台', '多磨霊園', '東府中', '府中', '分倍河原', '中河原', '聖蹟桜ヶ丘', '百草園', '高幡不動', '南平', '平山城址公園', '長沼', '北野', '京王八王子'],
        '京王井の頭線': ['ランダム駅', '渋谷', '神泉', '駒場東大前', '池ノ上', '下北沢', '新代田', '東松原', '明大前', '永福町', '西永福', '浜田山', '高井戸', '富士見ヶ丘', '久我山', '三鷹台', '井の頭公園', '吉祥寺'],
        '小田急線': ['ランダム駅', '新宿', '南新宿', '参宮橋', '代々木八幡', '代々木上原', '東北沢', '下北沢', '世田谷代田', '梅ヶ丘', '豪徳寺', '経堂', '千歳船橋', '祖師ヶ谷大蔵', '成城学園前', '喜多見', '狛江', '和泉多摩川', '登戸', '向ヶ丘遊園', '生田', '読売ランド前', '百合ヶ丘', '新百合ヶ丘', '柿生', '鶴川', '玉川学園前', '町田', '相模大野', '小田急相模原', '相武台前', '座間', '海老名', '厚木', '本厚木', '愛甲石田', '伊勢原', '鶴巻温泉', '東海大学前', '秦野', '渋沢', '新松田', '開成', '栢山', '富水', '螢田', '足柄', '小田原'],
        '京急本線': ['ランダム駅', '泉岳寺', '品川', '北品川', '新馬場', '青物横丁', '鮫洲', '立会川', '大森海岸', '平和島', '大森町', '梅屋敷', '京急蒲田', '雑色', '六郷土手', '京急川崎', '八丁畷', '鶴見市場', '京急鶴見', '花月総持寺', '生麦', '京急新子安', '子安', '神奈川新町', '京急東神奈川', '神奈川', '横浜', '戸部', '日ノ出町', '黄金町', '南太田', '井土ヶ谷', '弘明寺', '上大岡', '屏風浦', '杉田', '京急富岡', '能見台', '金沢文庫', '金沢八景', '追浜', '京急田浦', '安針塚', '逸見', '汐入', '横須賀中央', '県立大学', '堀ノ内', '京急大津', '馬堀海岸', '浦賀'],
        'ゆりかもめ': ['ランダム駅', '新橋', '汐留', '竹芝', '日の出', '芝浦ふ頭', 'お台場海浜公園', '台場', '東京国際クルーズターミナル', 'テレコムセンター', '青海', '東京ビッグサイト', '有明', '有明テニスの森', '市場前', '新豊洲', '豊洲'],
        '東京モノレール': ['ランダム駅', '浜松町', '天王洲アイル', '大井競馬場前', '流通センター', '昭和島', '整備場', '天空橋', '羽田空港第3ターミナル', '新整備場', '羽田空港第1ターミナル', '羽田空港第2ターミナル'],
        'りんかい線': ['ランダム駅', '新木場', '東雲', '国際展示場', '東京テレポート', '天王洲アイル', '品川シーサイド', '大井町', '大崎'],
        ginza: [
          'ランダム駅', '浅草', '田原町', '稲荷町', '上野', '上野広小路', '末広町', '神田', '三越前', '日本橋', '京橋', '銀座', '新橋', '虎ノ門', '溜池山王', '赤坂見附', '青山一丁目', '外苑前', '表参道', '渋谷'
        ],
        marunouchi: [
          'ランダム駅', '荻窪', '南阿佐ヶ谷', '新高円寺', '東高円寺', '新中野', '中野坂上', '西新宿', '新宿', '新宿三丁目', '新宿御苑前', '四谷三丁目', '四ツ谷', '赤坂見附', '国会議事堂前', '霞ケ関', '銀座', '東京', '大手町', '淡路町', '御茶ノ水', '本郷三丁目', '御徒町', '仲御徒町', '上野'
        ]
      };

      lines.addEventListener('change', function () {
        const selectedLine = lines.value;
        stations.innerHTML = '';

        if (selectedLine) {
          const options = stationOptions[selectedLine];
          options.forEach(function (station) {
            const option = document.createElement('option');
            option.value = station;
            option.textContent = station;
            stations.appendChild(option);
          });
          stationList.classList.remove('hidden');
        } else {
          const option = document.createElement('option');
          option.value = '';
          option.textContent = '-- 先に路線を選択してください --';
          stations.appendChild(option);
          stationList.classList.add('hidden');
        }
        updateQuery();
      });
    });

    function getRamdomValue(selectId) {
      const selectElement = document.getElementById(selectId);
      const options = Array.from(selectElement.options);
      // "ランダム"のvalueを除外
      const filteredOptions = options.filter(option => option.value !== 'ランダム駅');
      let value = '';
      if (filteredOptions.length > 0) {
        // ランダムに1個選ぶ
        const randomIndex = Math.floor(Math.random() * filteredOptions.length);
        const randomOption = filteredOptions[randomIndex];
        value = randomOption.value
      }
      return value
    }

    function getCid(mapUri) {
      const params = new URLSearchParams(new URL(mapUri).search);
      const cid = params.get('cid');
      return cid;
    }
    async function getMapInfo(query) {
      const data = {
        query: query
      };

      const url = 'https://ksfo4mrbha5nkbzubavslp43oi0wvqzz.lambda-url.ap-northeast-1.on.aws/';  // APIのURLに置き換えてください
      const options = {
        method: 'POST',
        headers: {
          'Content-Type': 'application/json',
          'Accept': 'application/json'
        },
        body: JSON.stringify(data)
      };

      try {
        const response = await fetch(url, options);
        const apiData = await response.json();
        return apiData;
      } catch (error) {
        document.getElementById('responseArea').textContent = 'Error: ' + error.message;
      }
    }
    function highlightRandomRow() {
      const rows = document.querySelectorAll('#spotsTable tbody tr');
      rows.forEach(row => row.classList.remove('highlight'));

      const randomIndex = Math.floor(Math.random() * rows.length);
      const selectedRow = rows[randomIndex];

      selectedRow.classList.add('highlight');

      document.querySelector('.loader-overlay').style.display = 'flex';

      setTimeout(() => {
        document.querySelector('.loader-overlay').style.display = 'none';
      }, 1000); // Simulate 2 seconds loading time
      selectedRow.scrollIntoView({ behavior: 'smooth', block: 'center' });
    }
    function updateMap(apiData) {
      const spotName = apiData.spotName;
      const mapUri = apiData.mapUri;
      const cid = getCid(mapUri);
      const mapFrame = document.getElementById("mapFrame");
      mapFrame.src =
        "https://www.google.com/maps?cid=" + cid + "&output=embed";

      document.getElementById("stationName").innerHTML = spotName;
      // google検索リンク
      const searchLink = `https://www.google.com/search?q=${encodeURIComponent(query)}`;
      document.getElementById("spotLink").href = searchLink;
      document.getElementById("spotLink").innerText = `「${query}」で検索`;
      // シェアボタン
      const xShareQuery = `今日どこいく？ルーレット\n「${randomStation}」が出た！ \n #どこいくルーレット \n`
      const xShareLink = `https://twitter.com/share?url=https://betteryourlifetips.com/dokoiku-tokyo&text=${encodeURIComponent(xShareQuery)}`;
      document.getElementById("x-share").href = xShareLink;
      document.getElementById("spotLink").innerText = `「${query}」で検索`;
    }
    async function roulette() {
      const query = await getQuery();
      const apiData = await getMapInfo(query);
      await updateMap(apiData);
    }

    async function freeQueryRoulette() {
      const query = document.getElementById('free').value;
      const apiData = await getMapInfo(query);
      await updateMap(apiData);
    }

    function updateTable(apiData) {
      const tableBody = document.getElementById('spotsTable').getElementsByTagName('tbody')[0];
      tableBody.innerHTML = '';
      apiData['places'].forEach(spot => {
        const row = tableBody.insertRow();
        const displayNameCell = row.insertCell();
        if (spot.websiteUri) {
          // displayNameCell.innerHTML = `<a href="${spot.websiteUri}" target="_blank">${spot.displayName.text}</a>`;
          displayNameCell.innerHTML = `<a href="${spot.websiteUri}" target="_blank">${spot.displayName.text}</a> &nbsp;&nbsp; <a href="${spot.googleMapsUri}" target="_blank">📍</a>`;

        } else {
          displayNameCell.innerHTML = spot.displayName.text + `&nbsp;&nbsp; <a href="${spot.googleMapsUri}" target="_blank">📍</a>`;
        }
        row.insertCell().textContent = spot.rating || 'N/A'; // 評価がない場合はN/Aを表示
        row.insertCell().textContent = spot.userRatingCount || 'N/A'; // 評価数がない場合はN/Aを表示
      });
      const randomButton = document.getElementById("randomButton");
      randomButton.scrollIntoView({ behavior: 'smooth', block: "center", inline: "nearest"})
    }

    function removeLeadingRandom(query) {
      const line = document.getElementById('lines').value;
      const prefix = line + 'ランダム駅';
      if (query.startsWith(prefix)) {
        return query.slice(prefix.length);
      }
      return query;
    }

    function isRouletteOK() {
      const query = document.getElementById('query').value;
      const line = document.getElementById('lines').value;
      const station = document.getElementById('stations').value;
      const genre = document.getElementById('genre').value;
      if (!line) {
        document.getElementById("linesErrorMessage").textContent = "路線を選択してください。";
        return false;
      } else {
        document.getElementById("linesErrorMessage").textContent = "";
      }

      if (!station) {
        document.getElementById("stationsErrorMessage").textContent = "駅を選択してください。";
        return false;
      } else {
        document.getElementById("stationsErrorMessage").textContent = "";
      }

      if (!genre) {
        document.getElementById("genreErrorMessage").textContent = "ジャンルを選択してください。";
        return false;
      } else {
        document.getElementById("genreErrorMessage").textContent = "";
      }

      if (!query) {
        document.getElementById("queryErrorMessage").textContent = "必須項目です。";
        return false;
      } else {
        document.getElementById("queryErrorMessage").textContent = "";
      }

      return true;
    }

    async function listRoulette() {
      if (!isRouletteOK()) {
        return false
      }
      // PlaceAPIで検索するクエリ
      let query = document.getElementById('query').value;
      // 駅がランダムだったら、ランダムに1個選ぶ処理がをする
      let station = document.getElementById('stations').value;
      if (station === 'ランダム駅') {
        station = getRamdomValue('stations');
        query = station + ' ' + removeLeadingRandom(query);
      }
      const apiData = await getMapInfo(query);
      document.getElementById('spotsTable').style.display = 'table';
      document.getElementById('randomButton').style.display = 'inline';
      document.querySelector('.loader-overlay').style.display = 'flex';
      document.getElementById('results').innerHTML = '';

      setTimeout(() => {
        document.querySelector('.loader-overlay').style.display = 'none';
        document.getElementById('results').innerHTML = `<p>「 ${query}」🔍</p>`;
      }, 1000);
      await updateTable(apiData);
    }

    function updateQuery() {
      // 地域やジャンルを選択する度にクエリフォームをアップデートする
      const lines = document.getElementById('lines').value;
      let stations = document.getElementById('stations').value;
      const genre = document.getElementById('genre').value;
      const query = document.getElementById('query');

      if (stations === 'ランダム駅') {
        stations = lines + 'ランダム駅'
      }

      let queryText = '';
      if (stations) {
        queryText += stations + ' ';
      }
      if (genre) {
        queryText += genre;
      }
      query.value = queryText.trim();
      isRouletteOK();
    }

    document.getElementById("blog-description").style.display = "none";
  </script>

  <style>

    label {
      font-weight: bold;
    }

    .loader-overlay {
      display: none;
      position: fixed;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      background: rgba(0, 0, 0, 0.5);
      justify-content: center;
      align-items: center;
      z-index: 9999;
    }

    .loader {
      width: calc(6*30px);
      height: 50px;
      display: flex;
      color: #2beb0e;
      filter: drop-shadow(30px 25px 0 currentColor) drop-shadow(60px 0 0 currentColor) drop-shadow(120px 0 0 currentColor);
      clip-path: inset(0 100% 0 0);
      animation: l12 2s infinite steps(7);
    }

    .loader:before {
      content: "";
      width: 30px;
      height: 25px;
      --c: no-repeat radial-gradient(farthest-side, currentColor 92%, #0000);
      background:
        var(--c) left /70% 70%,
        var(--c) right/20% 20%,
        var(--c) top 0 right 15%/20% 20%,
        var(--c) bottom 0 right 15%/20% 20%;
    }

    @keyframes l12 {
      100% {
        clip-path: inset(0 -30px 0 0)
      }
    }

    .dokoiku-div {
      margin: 12px;
    }

    label {
      font-size: 1.1em;
    }

    .description {
      position: relative;
      text-align: center;
      /* 中央揃え */
      display: block;
      margin: 1em;
    }

    .container {
      text-align: center;
      display: grid;
    }

    .linesBox {
      margin: 0.5em;
    }

    .stationsBox {
      margin: 0.5em;
    }

    .genreBox {
      margin: 0.5em;
    }

    .queryBox {
      margin: 0.5em;
      display: grid;
    }

    .mainButtonBox {
      margin: 1.5em;
    }

    .randomButtonBox {
      margin: 1em;
    }

    #query {
      text-align: center;
      margin: 0.5em 10% 0.5em 10%;
    }

    /* 条件選択エリアを縦並びに */
    .select-area {
      display: flex;
      flex-flow: column;
      position: relative;
      text-align: center;
      /* 中央揃え */
      display: block;
      margin: 1em;
    }

    .results {
      font-size: 1.5em;
    }

    /* ヘッダーの余白縮小 */
    #blog-title {
      margin: 0;
    }

    #lineSelect,
    #genreSelect {
      display: block;
      cursor: pointer;
    }


    .selectbox {
      align-items: center;
      position: relative;
    }

    .selectbox::after {
      position: relative;
      right: 30px;

      width: 10px;
      height: 7px;
      background-color: #535353;
      clip-path: polygon(0 0, 100% 0, 50% 100%);
      content: '';
      pointer-events: none;
    }

    .selectbox select {
      position: relative;
      text-align: center;
      /* 中央揃え */
      display: block;
      margin: 0 auto;
      /* 幅の指定 */
      width: 100%;
      max-width: 200px;
      box-sizing: border-box;
      padding: 10px;
      font-weight: bold;
      border-radius: 8px;
      transition: 0.3s;
      /* 幅の指定 */
      width: 100%;
      max-width: 200px;
      box-sizing: border-box;
      padding: 10px;
    }

    /* ボタン */
    .flat.border {
      position: relative;
      text-align: center;
      /* 中央揃え */
      display: block;
      margin: 0 auto;
      /* 幅の指定 */
      width: 100%;
      max-width: 200px;
      box-sizing: border-box;
      padding: 10px;
      /* 色の指定 */
      background: linear-gradient(135deg, #ffd900, #ff9300);
      color: #fff;
      font-weight: bold;
      border-radius: 8px;
      transition: 0.3s;
      border: 2px solid #ff9300;
      background: #fff;
      color: #ff9300;
      cursor: pointer;
    }

    .flat.border:hover {
      background: #ff9300;
      color: #fff;
    }

    .flat.border:active,
    .flat.border:focus {
      top: 2px;
    }

    #stationName {
      font-size: 2em;
      text-align: center;
      line-height: 0.95em;
      font-weight: bold;
      color: transparent;
      background: linear-gradient(0deg, #F57C00 0% 60%, #FFB74D 60% 100%);
      -webkit-background-clip: text;
    }


    section {
      max-width: 300px;
      margin: 0 auto;
      /* 幅の指定 */
      width: 100%;
      max-width: 200px;
      box-sizing: border-box;
      padding: 10px;
    }

    a.btn_06-2 {
      display: block;
      color: #ffffff;
      font-size: 20px;
      font-weight: bold;
      line-height: 1.2;
      text-decoration: none;
      text-align: center;
      padding: 1.3em .5em;
      background: rgba(0, 0, 0, 0.2);
      background: black;
      border: 1px solid transparent;
      border-radius: 6px;
      box-sizing: border-box;
      max-width: 360px;
      margin: 0 auto;
      position: relative;
    }

    a.btn_06-2 span {
      position: relative;
      display: block;
      transform: translate(-3px, -3px);
      transition: 0.3s;
      z-index: +1;
    }

    a.btn_06-2:after {
      content: "";
      position: absolute;
      top: 0;
      left: 0;
      margin: auto;
      width: 100%;
      height: 100%;
      border-radius: 6px;
      box-sizing: border-box;
      transform: translate(-3px, -3px);
      transition: 0.3s;
    }

    a.btn_06-2:hover span {
      transform: translate(0, 0);
    }

    a.btn_06-2:hover:after {
      transform: translate(0, 0);
    }

    @media all and (max-width: 1023px) {
      a.btn_06-2 {
        font-size: 18px;
      }
    }

    @media all and (max-width: 767px) {
      a.btn_06-2 {
        font-size: 16px;
      }
    }

    #spotLink {
      color: brown;
    }

    table {
      width: 100%;
      border-collapse: collapse;
    }

    th,
    td {
      border: 1px solid #ddd;
      padding: 8px;
      text-align: left;
    }

    th {
      background-color: #f2f2f2;
    }

    #spotsTable {
      display: none;
    }

    #randomButton {
      display: none;
    }

    .highlight {
      animation: highlightGlow 1s infinite alternate;
    }

    @keyframes highlightGlow {
      0% {
        background-color: #fffacd;
        box-shadow: 0 0 10px rgba(255, 215, 0, 0.5);
      }

      100% {
        background-color: #ffeb3b;
        box-shadow: 0 0 20px rgba(255, 193, 7, 1);
      }
    }

    .gradient {
      background: linear-gradient(hsl(107, 39%, 95%), #fff);
    }
  </style>
</head>

<body class="gradient">
  <div class="container">
    <div class="description">
      「今日どこ行く？」<br />
      迷ったら「ドコイク!」<br />
      簡単な条件を選んでボタンを押せばおすすめスポットを紹介！<br />
    </div>
    <div class="select-area">
      <div class="linesBox">
        <label for="lines">路線:</label>
        <select id="lines" onchange="updateQuery()">
          <option value="">-- 路線を選択 --</option>
          <option value="JR山手線">JR山手線</option>
          <option value="JR中央線">JR中央線</option>
          <option value="JR総武線">JR総武線</option>
          <option value="JR京浜東北線">JR京浜東北線</option>
          <option value="JR湘南新宿ライン">JR湘南新宿ライン</option>
          <option value="JR埼京線">JR埼京線</option>
          <option value="JR京葉線">JR京葉線</option>
          <option value="東京メトロ銀座線">東京メトロ銀座線</option>
          <option value="東京メトロ丸ノ内線">東京メトロ丸ノ内線</option>
          <option value="東京メトロ日比谷線">東京メトロ日比谷線</option>
          <option value="東京メトロ東西線">東京メトロ東西線</option>
          <option value="東京メトロ千代田線">東京メトロ千代田線</option>
          <option value="東京メトロ有楽町線">東京メトロ有楽町線</option>
          <option value="東京メトロ半蔵門線">東京メトロ半蔵門線</option>
          <option value="東京メトロ南北線">東京メトロ南北線</option>
          <option value="東京メトロ副都心線">東京メトロ副都心線</option>
          <option value="東急東横線">東急東横線</option>
          <option value="東急目黒線">東急目黒線</option>
          <option value="東急田園都市線">東急田園都市線</option>
          <option value="東急大井町線">東急大井町線</option>
          <option value="都営大江戸線">都営大江戸線</option>
          <option value="都営浅草線">都営浅草線</option>
          <option value="都営三田線">都営三田線</option>
          <option value="都営新宿線">都営新宿線</option>
          <option value="東武東上線">東武東上線</option>
          <option value="東武伊勢崎線">東武伊勢崎線</option>
          <option value="西武池袋線">西武池袋線</option>
          <option value="西武新宿線">西武新宿線</option>
          <option value="京王線">京王線</option>
          <option value="京王井の頭線">京王井の頭線</option>
          <option value="小田急線">小田急線</option>
          <option value="京急本線">京急本線</option>
          <option value="ゆりかもめ">ゆりかもめ</option>
          <option value="東京モノレール">東京モノレール</option>
          <option value="りんかい線">りんかい線</option>
          <!-- 他の路線も追加可能 -->
        </select>
        <div id="linesErrorMessage" style="color: red;"></div>
      </div>

      <div id="stationsBoxId" class="stationsBox hidden">
        <label for="stations">駅:</label>
        <select id="stations" onchange="updateQuery()">
          <option value="">-- 先に路線を選択してください --</option>
        </select>
        <div id="stationsErrorMessage" style="color: red;"></div>
      </div>

      <div class="genreBox">
        <label for="genre">ジャンル:</label>
        <select id="genre" onchange="updateQuery()">
          <option value="">選択してください</option>
          <option value="レストラン">レストラン</option>
          <option value="和食">和食</option>
          <option value="スイーツ">スイーツ</option>
          <option value="居酒屋">居酒屋</option>
          <option value="カフェ">カフェ</option>
          <option value="パン屋">パン屋</option>
          <option value="ショッピング">ショッピング</option>
          <option value="観光スポット">観光スポット</option>
          <option value="アクティビティ">アクティビティ</option>
          <option value="デート">デート</option>
        </select>
        <div id="genreErrorMessage" style="color: red;"></div>
      </div>

      <div class="queryBox">
        <label for="query">↓オプションで条件を追加</label>
        <input id="query" type="text" placeholder="例：ベジタリアン対応、夜景がきれい">
        <div id="queryErrorMessage" style="color: red;"></div>
      </div>
      <!-- CSSのローディング -->
      <div class="loader-overlay">
        <div class="loader" id="loader"></div>
      </div>
    </div>

    <div class="mainButtonBox">
      <button class="reset flat border" type="button" onclick="listRoulette()">条件からおすすめを探す</button>
    </div>

    <div id="results" class="results"></div>

    <div class="randomButtonBox">
      <button class="flat border" type="button" id="randomButton" onclick="highlightRandomRow()">ランダムに1つ選ぶ</button>
    </div>

    <table id="spotsTable">
      <thead>
        <tr>
          <th>スポット名</th>
          <th>評価</th>
          <th>評価数</th>
        </tr>
      </thead>
      <tbody>
        <!-- データがここに挿入されます -->
      </tbody>
    </table>
    <div class="dokoiku-div">
      <p id="stationName"></p>
    </div>
    アイデア・感想 絶賛募集中！<br/>このジャンルが欲しい… ここが使いづらい…など。
    <iframe
      src="https://docs.google.com/forms/d/e/1FAIpQLSfV_ojNGNMxmBolAYOI_b1a5lH3fDAbZ3g9iWCt6Ps_oCs1yA/viewform?embedded=true"
      width="640" height="669" frameborder="0" marginheight="0" marginwidth="0">読み込んでいます…</iframe>

    <p>
    <div class="embed-group"><a href="https://blog.hatena.ne.jp/-/group/11696248318754550880/redirect"
        class="embed-group-link js-embed-group-link">
        <div class="embed-group-icon"><img
            src="https://cdn.image.st-hatena.com/image/square/adad63b72f1d6545b2ba2538c3fc2923b2fd5989/backend=imagemagick;height=80;version=1;width=80/https%3A%2F%2Fcdn.blog.st-hatena.com%2Fimages%2Fcircle%2Fofficial-circle-icon%2Fcomputers.gif"
            alt="" width="40" height="40"></div>
        <div class="embed-group-content"><span class="embed-group-title-label">ランキング参加中</span>
          <div class="embed-group-title">プログラミング</div>
        </div>
      </a></div>
    </p>
  </div>
</body>