@charset "utf-8";

*, *:before, *:after {
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
}

main {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: center;
  width: 90%;
  max-width: 64em;
  margin: 3rem auto;
}

/* 検索窓 */
form input[type="search"], form input[type="search"]::-webkit-search-cancel-button {-webkit-appearance:none;}

.search-area #window {
  width: 100%;
  line-height: 2.4em;
  font-size: 1.2em;
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  background-color: #fff;
  padding: 0 36px 0 42px;
  border-radius: 30px;
  border: solid 1px #dfe1e5;
  outline: none;
  transition: .3s;
}

/* 検索窓アイコン */

.search-area {position: relative;}

.search-area .fa-search, .search-area #form-clear {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  color: #5F6368;
}
.search-area .fa-search {left: 1em;}
.search-area #form-clear {
  right: 1em;
  font-size: 18px;
  background: none;
  border: none;
}

.search-area #form-clear:hover {cursor: pointer;}

/* ボタンエリア */
.button-area {
  display: flex;
  flex-direction: column;
  justify-content: center;
  margin-top: 1rem;
  flex: 1;
}

.button-row {
  display:flex;
  font-size: 0;
}

.button-row .icon, .button-row button {
  display: inline-block;
  vertical-align: middle;
  font-size: 1rem;
  color: #5F6368;
  background-color: #F2F2F2;
  text-decoration: none;
  border: none;
  white-space: nowrap;
  transition: .3s;
  margin-top:8px;
}

.button-row .icon, .button-row #hashtag {
  text-align: center;
  font-size: 20px;
  width: 3rem;
  line-height: 3rem;
  border-radius: 50%;
  margin: auto;
  margin-top:8px;
}
.button-row #hashtag {
  padding: 0;
}

.button-row button:not(#hashtag) {
  padding: 0 1.2rem;
  line-height: 3rem;
  margin-left: 8px;
  cursor: pointer;
  border-radius: 4px;
  overflow-wrap : break-word;
}

.button-row button:hover, .button-row #hashtag:hover {
  box-shadow: 0 0 3px #222;
  color: #222;
  cursor: pointer;
}

#gimages:hover {color: #222; background: #FBBC05;}
#gmaps:hover {color: #fff; background: #34A853;}
#gtrans:hover {color: #fff; background: #4285F4;}
#youtube:hover {color: #fff; background: #ff0000;}
#yahoo:hover, #yimages:hover, #yvideos:hover, #y-shopping:hover {color: #fff; background: #ff0033;}
#bing:hover {color: #fff; background: #008274;}
#duck:hover {color: #fff; background: #e37151;}
#amazon:hover {color: #fff; background: #ff9900;}
#rakuten:hover {color: #fff; background: #bf0000;}
#twitter:hover {color: #fff; background: #000000;}
#instagram:hover {color: #fff; background: linear-gradient(135deg, #427eff 0%, #f13f79 80%);}
#tiktok:hover {
  color: #fff;
  background: #000000;
  text-shadow: -1px -1px 0px #01F2EA, 1px 1px 0px #FF004F;
}
#note:hover {color: #fff; background: #41C9B4;}
#threads:hover {color:#fff; background:  #000000;}
#random:hover{
  color: #fff;
  background: linear-gradient(45deg, #bf0000, #ff0000, #ff0033, #e37151, #ff9900, #FBBC05, #1da1f2, #41C9B4, #34A853, #008274, #3B5998, #4285F4);
  background-size: 1200% 1200%;
  animation: gradation 10s ease infinite;
}
   
@keyframes gradation {
  0% {background-position: 0% 50%;}
  50% {background-position: 100% 50%;}
  100% {background-position: 0% 50%;}
}

/* スマホ用CSS */
@media screen and (max-width: 700px) {
  main {
    width: 90%;
  }
  .search-area {
    margin: auto 1.2rem;
  }
  .button-area {
    display: flex;
    align-content: flex-start;
    align-items: flex-start;
    overflow-x: auto;
    width: 100%;
    padding: 0 1.2rem;
  }
  .button-row {
    display: flex;
    flex: 0 0 auto;
  }
  .icon1{
    flex-flow:row;
  }
  .button-row1 {
    flex-flow:row;
  }
  footer div {margin: 0 auto;}
  .dialog-area {width: 85%;}
}
@media screen and (max-height: 700px) {
  main {margin: 3rem auto;}
}