@charset "UTF-8";
@import url("https://fonts.googleapis.com/css?family=Roboto:400,900");
.top_content_top .weather {
  border-radius: 20px;
  background: url("../img/top/weather/bg.jpg");
  margin: 0 auto 10px;
  position: relative;
  width: 98%;
}

.top_content_top .weather #selectBox {
  opacity: 0;
  -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
  -webkit-transform: translateY(10px);
  -ms-transform: translateY(10px);
  transform: translateY(10px);
  -webkit-transition: all 0.7s cubic-bezier(0.165, 0.84, 0.44, 1) 0.5s;
  transition: all 0.7s cubic-bezier(0.165, 0.84, 0.44, 1) 0.5s;
}

.top_content_top .weather .txt_weather {
  opacity: 0;
  -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
  -webkit-transform: translateY(10px);
  -ms-transform: translateY(10px);
  transform: translateY(10px);
  -webkit-transition: all 0.7s cubic-bezier(0.165, 0.84, 0.44, 1) 0.6s;
  transition: all 0.7s cubic-bezier(0.165, 0.84, 0.44, 1) 0.6s;
}

.top_content_top .weather .temp {
  opacity: 0;
  -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
  -webkit-transform: translateY(10px);
  -ms-transform: translateY(10px);
  transform: translateY(10px);
  -webkit-transition: all 0.7s cubic-bezier(0.165, 0.84, 0.44, 1) 0.7s;
  transition: all 0.7s cubic-bezier(0.165, 0.84, 0.44, 1) 0.7s;
}

.top_content_top .weather.active #selectBox {
  opacity: 1;
  -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
  -webkit-transform: translateX(0);
  -ms-transform: translateX(0);
  transform: translateX(0);
  -webkit-transition: all 0.7s cubic-bezier(0.165, 0.84, 0.44, 1) 0.5s;
  transition: all 0.7s cubic-bezier(0.165, 0.84, 0.44, 1) 0.5s;
}

.top_content_top .weather.active .txt_weather {
  opacity: 1;
  -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
  -webkit-transform: translateX(0);
  -ms-transform: translateX(0);
  transform: translateX(0);
  -webkit-transition: all 0.7s cubic-bezier(0.165, 0.84, 0.44, 1) 0.6s;
  transition: all 0.7s cubic-bezier(0.165, 0.84, 0.44, 1) 0.6s;
}

.top_content_top .weather.active .temp {
  opacity: 1;
  -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
  -webkit-transform: translateX(0);
  -ms-transform: translateX(0);
  transform: translateX(0);
  -webkit-transition: all 0.7s cubic-bezier(0.165, 0.84, 0.44, 1) 0.7s;
  transition: all 0.7s cubic-bezier(0.165, 0.84, 0.44, 1) 0.7s;
}

.top_content_top .weather .bg {
  position: relative;
  z-index: 2;
}

.top_content_top .weather .content {
  position: absolute;
  width: 62%;
  top: 8%;
  left: 3.5%;
  z-index: 10;
}

.top_content_top .weather .content .cap {
  margin: 0 auto 4%;
  width: 85%;
}

.top_content_top .weather .content .txt_weather {
  width: 89%;
  margin: 0 auto 3%;
}

.top_content_top .weather .temp {
  width: 100%;
  margin: 2% 0 0 4%;
  text-align: center;
}

.top_content_top .weather .temp .max, .top_content_top .weather .temp .min {
  display: inline-block;
  width: 49%;
}

.top_content_top .weather .temp .max dt, .top_content_top .weather .temp .max dd {
  float: left;
}

.top_content_top .weather .temp .min dt, .top_content_top .weather .temp .min dd {
  float: left;
}

.top_content_top .weather .temp .max dt, .top_content_top .weather .temp .min dt {
  width: 35%;
}

.top_content_top .weather .temp .max dd, .top_content_top .weather .temp .min dd {
  font-weight: bold;
  font-family: 'Roboto', sans-serif;
  font-size: 3.1vw;
  letter-spacing: 0.017em;
  min-width: 60%;
  text-align: center;
  margin-top: 11%;
}

.top_content_top .weather .temp .max dd {
  color: #F7702C;
}

.top_content_top .weather .temp .min dd {
  color: #5878c3;
}

.top_content_top .weather form {
  margin-bottom: 4%;
}

.top_content_top .weather form #select1, .top_content_top .weather form #select2 {
  font-family: "游ゴシック",YuGothic,"Helvetica","Arial","ヒラギノ角ゴ ProN W3", "Hiragino Kaku Gothic ProN", "メイリオ", Meiryo, "Helvetica Neue", Helvetica, Arial, sans-serif;
  color: #5e0000;
  font-weight: 500;
  font-size: 1.3rem;
  height: 26px;
  padding-left: 3px;
  cursor: pointer;
  -webkit-border-radius: 3px;
  border-radius: 3px;
  background: none;
  background: #fff url("../img/top/weather/select.png") right center no-repeat;
  -webkit-background-size: contain;
  -o-background-size: contain;
  background-size: contain;
  border: none;
  -webkit-box-shadow: none;
  box-shadow: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  width: 100%;
  outline: none;
}

.top_content_top .weather form .select1, .top_content_top .weather form .select2 {
  border: 1px solid #5e0000;
  display: inline-block;
  -webkit-border-radius: 3px;
  border-radius: 3px;
}

.top_content_top .weather form .select1 {
  width: 35.5%;
}

.top_content_top .weather form .select2 {
  width: 62%;
}

.top_content_top .weather form #select1 option, .top_content_top .weather form #select2 option {
  font-weight: 500;
  cursor: pointer;
}

.top_content_top .weather form #select1 option:hover, .top_content_top .weather form #select2 option:hover {
  background: #F8E4AB;
}

.top_content_top .weather form select {
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  text-indent: 0.01px;
  text-overflow: '';
}

.top_content_top .weather form select::-ms-expand {
  display: none;
}

@media screen and (max-width: 1107px) {
  .top_content_top .weather .temp .max dd, .top_content_top .weather .temp .min dd {
    font-size: 3.7rem;
    margin-top: 9.25%;
  }
}

@media screen and (min-width: 1630px) {
  .top_content_top .weather .temp .max dd, .top_content_top .weather .temp .min dd {
    font-size: 5.2rem;
    margin-top: 12.5%;
  }
}