@charset "UTF-8";

/* ハッシュタグ機能
------------------------------------- */
#hashtag-block #hashtagGenerator {
  max-width: 960px;
  border-top: 1px solid #ddd;
  border-bottom: 1px solid #ddd;
  margin: 50px auto;
  padding: 50px 0;
}
.generateMsg {
  display: none;
}
#hashtag-block #hashtagGenerator h4 {
  margin-bottom: 30px;
  text-align: center;
  line-height: 2em;
  font-size: 2.8em;
}
#hashtag-block #hashtagGenerator p {
  margin: 0 auto 30px auto;
  text-align: center;
  text-justify: inter-word;
  line-height: 1.6em;
  font-size: 1.8em;
}
#hashtag-block #hashtagGenerator .hashtagGeneratorOutput {
  margin-bottom: 60px;
}
#hashtag-block #hashtagGenerator #hashtagList {
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  max-width: 720px;
  width: 90%;
  border: 0;
  border-radius: 5px;
  margin: 0 auto 20px;
  padding: 10px;
  resize: none;
  background: #f3f4f6;
  text-align: center;
  height: calc( 1.6em * 2.4 );
  letter-spacing: 1px;
  line-height: 3em;
  font-family: "Noto Sans JP", san-serif;
  font-size: 2em;
  font-weight: 700;
}
#hashtag-block #hashtagGenerator #hashtagList::placeholder {
  font-size: 0.8em;
  font-weight: 400;
}
#hashtag-block #hashtagGenerator #hashtagList:focus {
  outline: none;
  border: 1px solid #b68a3c;
  box-shadow: 0 0 0 3px rgba(180, 142, 67, 0.1);
}
#hashtag-block #hashtagGenerator #generate {
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  border: 0;
  border-radius: 100px;
  padding: 12px 40px;
  background: #b68a3c;
  font-size: 1.6em;
  font-weight: bold;
  font-family: "Noto Sans JP", san-serif;
  color: #fff;
  cursor: pointer;
}
#hashtag-block #hashtagGenerator .btnArea {
  height: 50px;
  text-align: center;
}
#hashtag-block #hashtagGenerator .btnArea p#generateMsg {
  text-align: center;
  font-size: 1.6em;
  margin: 0 auto 0 auto;
  padding-top: 10px;
}

#hashtag-block #hashtagGenerator #countrySearchText {
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  max-width: 540px;
  width: 90%;
  border: 1px solid #999;
  border-radius: 100vw;
  margin: 0 auto 0px auto;
  padding: 10px;
  resize: none;
  text-align: center;
  height: calc( 1.6em * 1.6 );
  line-height: 1.6em;
  font-family: "Noto Sans Jp", sans-serif;
  font-size: 2em;
  font-weight: 700;
  
  background-image: url("data:image/svg+xml,%3Csvg%20version%3D%271.1%27%20id%3D%27_x32_%27%20xmlns%3D%27http%3A//www.w3.org/2000/svg%27%20xmlns%3Axlink%3D%27http%3A//www.w3.org/1999/xlink%27%20x%3D%270px%27%20y%3D%270px%27%20width%3D%27512px%27%20height%3D%27512px%27%20viewBox%3D%270%200%20512%20512%27%20style%3D%27width%3A%20256px%3B%20height%3A%20256px%3B%20opacity%3A%201%3B%27%20xml%3Aspace%3D%27preserve%27%3E%3Cstyle%20type%3D%27text/css%27%3E%20.st0%7Bfill%3A%23b68a3c%3B%7D%20%3C/style%3E%3Cg%3E%3Cpath%20class%3D%27st0%27%20d%3D%27M499.516%2C439.313l-79.547-79.563l-60.219%2C60.219l79.547%2C79.563c8.047%2C8.031%2C18.734%2C12.469%2C30.125%2C12.469%20c11.359%2C0%2C22.047-4.438%2C30.094-12.469c8.063-8.047%2C12.484-18.75%2C12.484-30.125S507.563%2C447.344%2C499.516%2C439.313z%27%20style%3D%27fill%3A%20%23b68a3c%3B%27%3E%3C/path%3E%3Cpath%20class%3D%27st0%27%20d%3D%27M399.391%2C362.313L358%2C320.906c0.063-0.094%2C0.063-0.188%2C0.125-0.25c26.563-34.719%2C41.156-77.688%2C41.125-121.031%20c0.047-53.281-20.703-103.438-58.469-141.156C303.109%2C20.766%2C253.063%2C0%2C199.375%2C0C146.172%2C0%2C96.141%2C20.766%2C58.469%2C58.469%20C20.703%2C96.188-0.063%2C146.344%2C0%2C199.641c-0.047%2C53.297%2C20.719%2C103.422%2C58.453%2C141.141c37.688%2C37.719%2C87.766%2C58.469%2C141.188%2C58.469%20h0.188c43.234%2C0%2C86.141-14.594%2C120.828-41.125c0.078-0.063%2C0.156-0.094%2C0.234-0.125l41.406%2C41.406L399.391%2C362.313z%20M294.688%2C294.688c-25.391%2C25.344-59.125%2C39.344-95.078%2C39.406c-35.922-0.063-69.672-14.063-95.047-39.406%20c-25.359-25.359-39.344-59.125-39.391-95.063c0.047-35.938%2C14.031-69.688%2C39.375-95.063c25.375-25.344%2C59.125-39.313%2C95.063-39.391%20c0.016-0.016%2C0.031%2C0%2C0.031%2C0c35.922%2C0.078%2C69.672%2C14.047%2C95.047%2C39.391c25.344%2C25.359%2C39.328%2C59.125%2C39.391%2C95.094%20C334.016%2C235.578%2C320.031%2C269.344%2C294.688%2C294.688z%27%20style%3D%27fill%3A%20%23b68a3c%3B%27%3E%3C/path%3E%3C/g%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 16px center;
  background-size: 28px 28px;
}
#hashtag-block #hashtagGenerator #countrySearchText:focus {
  outline: none;
  border-color: #b68a3c;
  box-shadow: 0 0 0 3px rgba(180, 142, 67, 0.1);
}
#hashtag-block #hashtagGenerator #countrySearchText::placeholder {
  color: #bbbbbb;
  font-size: 0.8em;
  font-weight: 400;
}

#hashtag-block #hashtagGenerator #continentsArea {
  padding: 24px;
  box-sizing: border-box;
  max-width: 960px;
  width: 90%;
  margin: 20px auto 20px;
  columns: 4;
  column-gap: 24px;
}

#hashtag-block #hashtagGenerator #continentsArea.column1 {
  columns: 1;
}

#hashtag-block #hashtagGenerator #continentsArea .continentArea {
  break-inside: avoid;
  padding-bottom: 16px;
  text-align: center;
}

#hashtag-block #hashtagGenerator #continentsArea .continentArea .continentName {
  padding-bottom: 8px;
  font-weight: bold;
  font-size: 1.2rem;
  line-height: 1.6rem;
  text-align: center;
}

#hashtag-block #hashtagGenerator #continentsArea .continentArea .countryArea {
  padding-bottom: 8px;
  font-size: 1rem;
  line-height: 1.2rem;
  page-break-inside: avoid;
  break-inside: avoid;
  -webkit-column-break-inside: avoid;
}

#hashtag-block #hashtagGenerator #continentsArea .continentArea .countryArea .countryName {
  cursor: pointer;
  border-radius: 12px;
  border: 1px solid #e2e3e7;
  margin: 4px 0;
  padding: 2px 8px;
  background: #fff;
  word-break: auto-phrase;
  text-align: center;
  font-size: 0.85rem;
  user-select: none;
  box-shadow: 0 1px 2px rgba(0,0,0,0.03);
}
#hashtag-block #hashtagGenerator #continentsArea .continentArea .countryArea .countryName:hover {
  border: 0;
  border-radius: 20px;
  margin: 0;
  background: #b68a3c;
  font-weight: 700;
  color: #fff;
  transform: scale(1.1);
  padding: 8px;
  box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
}

#hashtag-block #hashtagGenerator #continentsArea .noneText {
  color: #999;
  text-align: center;
  font-size: 1.2rem;
  width: 100%;
}

@media screen and (max-width:960px) {
  #hashtag-block #hashtagGenerator {
    width: 92%;
    margin: 8% auto;
    padding: 12% 0 4%;
  }
  #hashtag-block #hashtagGenerator h4 {
    margin-bottom: 5%;
    line-height: 1em;
    letter-spacing: -1px;
    font-size: 2.3em;
  }
  #hashtag-block #hashtagGenerator p {
    font-size: 1.6em;
    line-height: 1.5em;
  }

  #hashtag-block #hashtagGenerator .hashtagGeneratorOutput {
    margin-bottom: 32px;
  }
  #hashtag-block #hashtagGenerator #hashtagList {
    width: 100%;
    padding: 10px;
    height: calc( 1.3em * 3 );
    line-height: 2.6em;
    letter-spacing: 0;
    font-size: 16px;
  }
  #hashtag-block #hashtagGenerator #hashtagList::placeholder {
    font-size: 0.9em;
    font-weight: 400;
  }
  #hashtag-block #hashtagGenerator .btnArea {
    height: 70px;
    margin-bottom: 5%;
  }
  #hashtag-block #hashtagGenerator #generate {
    padding: 12px 32px;
  }
  
  #hashtag-block #hashtagGenerator #continentsArea {
    padding: 0;
    width: 100%;
    columns: 3;
    column-gap: 8px;
  }
  #hashtag-block #hashtagGenerator #continentsArea .continentArea .continentName {
    font-size: 1.0rem;
  }
  #hashtag-block #hashtagGenerator #continentsArea .continentArea .countryArea .countryName {
    margin-bottom: 4px;
    border-radius: 8px;
    padding: 2px 3px;
    text-align: center;
    font-size: 0.7rem;
  }
  #hashtag-block #hashtagGenerator #continentsArea .continentArea .countryArea .countryName:hover {
    transform: scale(1.04);
    padding: 6px 3px;
    border-radius: 8px;
  }
  #hashtag-block #hashtagGenerator #countrySearchText::placeholder {
    font-size: 0.7em;
    color: #aaa;
  }
}