@charset "utf-8";

/* =======================================
    mainvew
======================================= */

.mainview {
  background-color: #FFFAE6;
}

.mainview .container {
  position: relative;
}

.mainview .container>img {
  display: block;
  width: 100%;
  max-width: 1026px;
}

.mainview .container>img.sp {
  display: none;
}

.mainview-btn {
  position: absolute;
  top: 30px;
  right: 10px;
  width: 265px;
  text-align: center
}

.mainview-btn>img {
  padding-bottom: 1rem;
}

.mainview-btn img.sp {
  display: none;
}

.wrap-app-btn {
  display: -webkit-flex;
  display: flex;
  -webkit-justify-content: space-between;
  justify-content: space-between;
}

.wrap-app-btn img {
  display: block;
}


/* =======================================
    information
======================================= */

.wrap-info {
  display: -webkit-flex;
  display: flex;
  padding-top: 2.5rem;
  padding-bottom: 4rem;
}

.information {
  width: 50%;
}

.information:first-child {
  padding-right: 1rem;
}

.information:last-child {
  padding-left: 1rem;
}

.information h2 {
  font-size: 1.8rem;
  color: #096BB7;
  padding: 1rem 0 1rem 1.6rem;
}

.information ul {
  list-style-type: none;
  border-top: solid 2px #CECEBF;
}

.information ul li {
  border-bottom: solid 2px #CECEBF;
}

.information a {
  display: block;
  color: #000;
  font-size: 1.6rem;
  line-height: 1.2;
  background-image: url(../img/icon-arrow.png);
  background-position: left 1.6rem center;
  background-repeat: no-repeat;
  padding: 1rem 0 1rem 4rem;
}
.information a .release_at{
  display: inline-block;
  margin-bottom:0.4em;
}


/* =======================================
    ind-search
======================================= */

.ind-search {
  background-image: url(../img/bg-stripe-blue.jpg);
  background-position: center top;
  background-repeat: repeat;
  padding: 4rem 0;
}

.ind-search h2.bg-line>span {
  background-image: url(../img/bg-stripe-blue.jpg);
  background-position: center top;
  background-repeat: repeat;
}

.inner-ind-search {
  text-align: center;
  margin-bottom: 4rem;
}

.inner-ind-search span, .inner-ind-search input {
  display: inline-blcok;
  vertical-align: middle;
}

.inner-ind-search span {
  font-size: 3rem;
  font-weight: 600;
  color: #004020;
  margin-right: 1rem;
}

.inner-ind-search input {
  height: 4rem;
  line-height: 4rem;
  border: solid 1px #bbb;
  border-radius: 5px;
  padding: 0 1rem;
}

.inner-ind-search input[type="search"] {
  width: 380px;
  font-size: 1.6rem;
  margin-right: 1rem;
}

.inner-ind-search input[type="submit"] {
  font-size: 2.4rem;
  color: #004020;
    box-shadow: 0 5px 0 #333;
margin-bottom:5px;
transition: .3s;
}


.inner-ind-search input[type="submit"]:hover {
  cursor: pointer;
  transform: translateY(5px);
box-shadow: 0 0 0 #333;
}

.ind-search-btn {
  display: -webkit-flex;
  display: flex;
  -webkit-justify-content: space-between;
  justify-content: space-between;
}

.ind-search-btn a {
  display: block;
  width: 49%;
  font-size: 3rem;
  font-weight: 600;
  color: #000;
  text-align: center;
  background-color: #FFD24D;
  border: solid 8px #fff;
  border-radius: 1rem;
  margin-bottom: 4rem;
  padding: 3rem 0;
}
.ind-search-btn a:hover {
  animation: pulsation .7s alternate infinite;
}

@keyframes pulsation {
  0% { transform: scale(1); }
  50% { transform: scale(0.95); }
  100% { transform: scale(1.05); }
}


/* =======================================
    ind-bottom
======================================= */

.ind-bottom.container {
  display: -webkit-flex;
  display: flex;
  -webkit-justify-content: space-between;
  justify-content: space-between;
  margin-bottom: 5rem;
  padding-top: 2rem;
}

.ind-calendar, .ind-app {
  width: 49%;
}

.ind-calendar {
  border: solid 1px #eee;
  padding: 2rem;
}

.ind-calendar h2 {
  font-size: 3.2rem;
  font-weight: 600;
  color: #FF8000;
  margin-bottom: 3rem;
}

.ind-calendar h2 img, .ind-calendar h2 span {
  display: inline-block;
  vertical-align: middle;
}

.ind-calendar h2 img {
  margin-right: 1rem;
}

.ind-calendar p {
  margin-bottom: 2rem;
}

.wrap-ind-map {
  display: -webkit-flex;
  display: flex;
  -webkit-justify-content: space-between;
  justify-content: space-between;
  -webkit-align-items: flex-end;
  align-items: flex-end;
}

.ind-map {
  -webkit-flex-grow: 1;
  flex-grow: 1;
}

.ind-map img {
  display: block;
  width: 100%;
  max-width: 214px;
  margin: 0 auto;
}


/*	.lst-areaはcommon.css	*/


/*浜松市専用ごみ出しアプリ*/

.ind-app {
  background-color: #F5FAF9;
  border: solid 1px #eee;
  padding: 2rem;
}

.ind-app h2 {
  margin-bottom: 1rem;
}

.ind-app h2 img {
  display: block;
  width: 100%;
  max-width: 343px;
  margin: 0 auto;
}

.ind-app>img {
  display: block;
  width: 100%;
  max-width: 461px;
  margin: 0 auto 1rem;
}

.ind-app-text {
  background-color: #F0F0E1;
  padding: 1.5rem;
}

.ind-app-text h3 {
  font-size: 2.2rem;
  font-weight: 600;
  color: #003F10;
  text-align: center;
  margin-bottom: 1rem;
}

.ind-app-text p {
  margin-bottom: 1rem;
}

.ind-app-btn {
  display: -webkit-flex;
  display: flex;
  -webkit-justify-content: center;
  justify-content: center;
}

.ind-app-btn a:first-child {
  margin-right: 1rem;
}

.ind-app-btn a img {
  display: block;
  width: 100%;
  max-width: 100%;
}