html,body,div,p{
  background: transparent;
  border: 0;
  margin: 0;
  padding: 0;
  vertical-align: baseline;
}

input[type="button"]{
  padding: 0;
  border: none;
  border-radius: 0;
  outline: none;
  appearance: none;
  cursor: pointer;
}

$card-width: 100%;
$button-width: 150px;
$main-font: 'M PLUS 1p', sans-serif;
$color-black: #222222;
$color-white: #FFFFFF;
$color-blue: #003399;
$color-red: #FF3B1D;

html{
  color: $color-black;
  letter-spacing: 0.1em;
  font-size: 62.5%;
  font-family: $main-font;
}

.caption{
  font-size: 1.2rem;
  text-align: center;
}

.outer{
  width: $card-width;
  padding-top: 2rem;
  background: $color-white;
}

input[type="button"].button{
  font-size: 1.4rem;
  font-family: $main-font;
  color: $color-white;
  background: $color-blue;
  display: block;
  width: $button-width;
  height: 50px;
  margin: 1rem auto 0;
  border-radius: 30px;
  transition: all .3s;
  &:hover{
    opacity: 0.8;
  }
}

.inner{
  margin-top: 2rem;
  &_content{
    display: flex;
    justify-content: center;
    align-items: center;
    margin-bottom: 1rem;
  }
  &_text{
    font-size: 1.4rem;
    font-weight: bold;
    margin-right: 0.5rem;
    &.result{
      display: block;
      text-align: center;
      font-size: 1.6rem;
      padding: 1rem 2rem;
      border: 3px solid $color-red;
    }
  }
}

let $button = document.getElementById('js-button'),
    $resultTitle = document.getElementById('js-resultTitle'),
    $resultText = document.getElementById('js-resultText');

let resultData = [
  {
    title: '池袋',
    text: '文芸坐のオールナイト'
  },
  {
    title: '上野',
    text: '美術館巡り'
  },
  {
    title: '秋葉原',
    text: 'メイドカフェ巡り'
  },
  {
    title: '根津、谷中、千駄木',
    text: 'お散歩'
  },
  {
    title: '柴又',
    text: '草団子を食べる'
  },
  {
    title: '江古田',
    text: '食べ歩き'
  },
  {
    title: '羽田空港',
    text: 'お土産屋さん巡り'
  },
  {
    title: '東京スカイツリー',
    text: 'ショッピング'
  },
  {
    title: '日暮里の繊維街',
    text: '生地屋さん巡り'
  },
  {
    title: '上野動物園',
    text: 'モノレールに乗る'
  },
  {
    title: '北千住',
    text: 'ショッピングと梯子酒'
  },
  {
    title: '合羽橋',
    text: '調理器具を買う'
  },
  {
    title: '赤羽',
    text: '梯子酒'
  },
  {
    title: '上野',
    text: '昼呑み'
  },
  {
    title: '新橋のスナック',
    text: 'カラオケ'
  },
  {
    title: '神保町',
    text: '古本屋巡り'
  },
  {
    title: '御茶ノ水',
    text: '楽器を買う'
  },
  {
    title: '月島',
    text: 'もんじゃを食べる'
  },
  {
    title: '自由が丘',
    text: 'ケーキ屋を食べる'
  },
  {
    title: '下北沢',
    text: '古着屋さん巡り'
  },
  {
    title: '蔵前',
    text: 'カフェ巡り'
  },
  {
    title: '浅草',
    text: '甘味屋さん巡り'
  },
  {
    title: '町屋',
    text: '梯子酒'
  },
  {
    title: 'お台場',
    text: '屋形船に乗る'
  },
  {
    title: '神保町',
    text: 'カレー屋さん巡り'
  },
  {
    title: '原宿',
    text: 'クレープを食べる'
  },
  {
    title: '井の頭公園',
    text: 'スワンボートに乗る'
  },
  {
    title: '不忍池',
    text: 'スワンボートに乗る'
  },
  {
    title: '市ヶ谷',
    text: '釣り堀'
  },
  {
    title: '代々木公園',
    text: 'ランニング'
  },
  {
    title: '表参道',
    text: 'ショッピングをする'
  },
  {
    title: '新大久保',
    text: '韓国文化を楽しむ'
  },
  {
    title: '人形町',
    text: 'すき焼きを食べる'
  },
  {
    title: 'あきる野市',
    text: '温泉に入る'
  },
  {
    title: '中目黒',
    text: 'アンティーク家具屋さん巡り'
  },
  {
    title: '両国',
    text: 'ちゃんこ鍋を食べる'
  },
  {
    title: '西荻窪',
    text: '雑貨屋さん巡り'
  },
  {
    title: '日本橋',
    text: '天ぷらを食べる'
  },
  {
    title: '町田',
    text: 'リスを見る'
  },
  {
    title: '神楽坂',
    text: 'ランチを食べる'
  },
  {
    title: '清澄白河',
    text: 'カフェ巡り'
  },
  {
    title: '蒲田',
    text: '餃子を食べる'
  },
  {
    title: 'ハモニカ横丁',
    text: '梯子酒'
  },
  {
    title: '八王子',
    text: '八王子ラーメンを食べる'
  },
  {
    title: '王子',
    text: '博物館巡り'
  }
];

let result; //前回の結果を格納する変数
let resultLength; //今回の実行結果を格納する変数
function gwPlace (){

  //結果が重複しない為に、違う結果がでるまで繰り返す
  while(resultLength === result) {
    resultLength = Math.floor(Math.random() * resultData.length);
  }

  let resultRandom = resultData[resultLength];
  result = resultLength; //今回の結果を変数に格納して、次回の処理時に比較する
  $resultTitle.innerHTML = resultRandom.title;
  $resultText.innerHTML = resultRandom.text;

};

$button.onclick = function() {
  gwPlace();
}