/******************************* common *******************************/

#wrap{
  overflow: hidden;
}

body {
  /* background-color: #FFF2CC; */
  background-color: #DEE9D8;
  font-family: "Hiragino Maru Gothic Pro";
}

main {
  padding-top: 100px;
  width: 100%;
  max-width: 1024px;
  margin-left: auto;
  margin-right:auto;
}

.main-emergency {
  padding-top: 100px;
  width: 100%;
  background-color: #FFF2CC;
}

@media screen and (min-width:764px) {
  #bottom-right-button{
    position: fixed;
    right: 30px;
    bottom: 50px;
    z-index: 100;
  }
}

@media screen and (max-width: 763px){
  #bottom-right-button{
    position: fixed;
    right: 30px;
    bottom: 50px;
    z-index: 100;
  }
}

/******************************* #nav *******************************/

#nav{
  position: fixed;
  z-index: 100;
  width: 100%;
}

@media screen and (min-width:764px) {
  #nav .btn-secondary {
    padding: 5%;
    color: black;
    background-color: yellow;
    border-color: white;
    margin-right: 50px;
    width: 100%;
  }
}

@media screen and (max-width: 763px){
  #nav .btn-secondary {
    padding: 5%;
    color: black;
    background-color: yellow;
    border-color: white;
    margin-right: 20px;
    width: 100%;
  }
}

/******************************* footer *******************************/

footer{
  text-align: center;
}

footer a {
  color: black !important;
}

footer .copy-right{
  margin-top: 50px;
}



@media screen and (min-width:764px) {
  footer .sns {
    margin-left: 15%;
    margin-right: 15%;
  }
}

@media screen and (max-width: 763px){
  footer .sns {
    margin-left: 10%;
    margin-right: 10%;
  }
}


/******************************* #currentPositionPin *******************************/

#currentPositionPin{
  background-color: #DEE9D8;
}

#currentPositionPin .map-menu{
  margin-left: 35px;
}

#currentPositionPin .map-menu img{
  width: 35px;
  padding-bottom: 10px;
}

@media screen and (min-width:764px) {
  #currentPositionPin .map-menu h2{
    display: inline;
    text-align: left;
    color: black;
    font-size: 24px;
  }
}

@media screen and (max-width: 763px){
  #currentPositionPin .map-menu h2{
    display: inline;
    text-align: left;
    color: black;
    font-size: 18px;
  }
}


/******************************* #map-view *******************************/

#map-view{
  background-color: #FFF2CC;
  padding: 2% 2% 2% 2%;
  border-radius: 15px;
  margin: 0px 30px 30px 30px;
}

#map-view .map{
  text-align: center;
}

#map-view .vue-map-container{
  display: inline-block;
}

#map-view .selector{
  padding: 5% 5% 2% 5%;
}

#map-view .selector img {
  width: 50px;
  cursor: hand;
  cursor:pointer;
}

#map-view .selector button {
  margin: 10px 0px;
}

@media screen and (min-width:764px) {
  #map-view .vue-map-container {
    width: 90%;
    height: 500px;
  }
}

@media screen and (max-width: 763px){
  #map-view  .vue-map-container{
    width: 90%;
    height: 300px;
  }
}

@media screen and (min-width:764px) {
  #map-view .info-window h3 {
    font-size: 20px;
  }
}

@media screen and (max-width: 763px){
  #map-view .info-window h3{
    font-size: 15px;
  }
}

#map-view .gm-style-mtc{
  display: none;
}

#map-view .titleAndPin{
  margin: 0px 3% 0px 3%;
  display: flex;
  justify-content: center;
  position: relative;
}

@media screen and (min-width:764px) {
  #map-view .titleAndPin h2 {
    margin: 3% 3% 0% 0%;
    font-weight: bolder;
    margin-bottom: 14px;
    display: inline-block;
    font-size: 14px;
  }

}

@media screen and (max-width: 763px){
  #map-view .titleAndPin h2 {
    margin: 3% 3% 0% 0%;
    font-weight: bolder;
    margin-bottom: 14px;
    display: inline-block;
    font-size: 14px;
  }
}

#map-view .titleAndPin .pin {
  display: inline-block;
  position: absolute;
  right: 0;
}

@media screen and (min-width:764px) {
  #map-view .titleAndPin img {
    width: 55px;
    cursor: hand;
    cursor:pointer;
  }

}

@media screen and (max-width: 763px){
  #map-view .titleAndPin img {
    width: 40px;
    cursor: hand;
    cursor:pointer;
  }
}



#map-view .gm-style-iw{
  border: 3px solid rgba(0, 0, 255, .8);
}

#map-view .info-window h4{
  font-size: 12px;
  display: inline;
}

#map-view .info-window .link {
  color: blue;
  text-align: right;
}

#map-view img[src^='images/map/myPin.png'] {
  -webkit-animation:blink 0.7s ease-in-out infinite alternate;
  -moz-animation:blink 0.7s ease-in-out infinite alternate;
  animation:blink 0.7s ease-in-out infinite alternate;
}

@-webkit-keyframes blink{
  0% {opacity:0;}
  100% {opacity:1;}
}
@-moz-keyframes blink{
  0% {opacity:0;}
  100% {opacity:1;}
}
@keyframes blink{
  0% {opacity:0;}
  100% {opacity:1;}
}

@media screen and (min-width:764px) {
  #map-view .selector h2 {
    margin-bottom: 14px;
    font-weight: bolder;
    text-align: center;
    font-size: 14px;
  }
}

@media screen and (max-width: 763px){
  #map-view .selector h2{
    margin-bottom: 14px;
    font-weight: bolder;
    text-align: center;
    font-size: 14px;
  }
}

#map-view .selector .wrap {
  scroll-snap-type: x mandatory;
  white-space: nowrap;
  overflow-x: auto;
  margin: 0 auto;
  padding: 00px 0px 30px 0px;
  width: 100%;
}

@media not all and (min-width: 840px){
  #map-view .selector .wrap  {
    width: 100%;
  }
}

#map-view .selector .wrap .item {
  scroll-snap-align: center;
  display: inline-grid;
  margin: 0 1%;
  width: 10%;
  height: 100px;
  white-space:normal;
  background-color: #f4f4f4;
  box-shadow: 5px 5px 5px rgba(0,0,0,.3);
  border-radius: 20px;
  overflow: hidden;
}

#map-view .selector .wrap .item p{
  font-size: 12px;
  padding: 1%;
  line-height: 1;
  overflow-wrap: anywhere;
}

@media not all and (min-width: 763px){
  #map-view .selector .wrap .item {
    /* width: 50%; */
    width: 25%;
    height: 100px;
  }
  #map-view .selector .wrap .item p{
    font-size: 10px;
    padding: 1%;
    line-height: 1;
  }
}


/******************************* #near-clinick *******************************/

#near-clinic {
  background-color: #FFF2CC;
  padding: 2%;
  border-radius: 15px;
  margin: 0px 30px 30px 30px;
}

@media screen and (min-width:764px) {
  #near-clinic h2 {
    text-align: center;
    margin: 3% 3% 14px 3%;
    font-weight: bolder;
    font-size: 14px;
  }

}

@media screen and (max-width: 763px){
  #near-clinic h2 {
    text-align: center;
    margin: 3% 3% 14px 3%;
    font-weight: bolder;
    font-size: 14px;
  }
}

#near-clinic .wrap {
  scroll-snap-type: x mandatory;
  white-space: nowrap;
  overflow-x: auto;
  margin: 0 auto;
  padding: 0px 0px 30px 0px;
  width: 100%;
}

@media not all and (min-width: 840px){
  #near-clinic .wrap {
    width: 100%;
  }
}

#near-clinic .wrap .item-near {
  scroll-snap-align: center;
  display: inline-block;
  margin: 0 20px;
  width: 25%;
  white-space: normal;
  background-color: #f4f4f4;
  box-shadow: 5px 5px 5px rgba(0,0,0,.3);
  border-radius: 20px;
  overflow: hidden;
}

@media not all and (min-width: 568px){
  #near-clinic .wrap .item-near {
    width: 50%;
  }
}

#near-clinic .clinic-info {
  padding: 5%;
}

@media screen and (min-width:769px) {
  #near-clinic .wrap .street-view {
    display: block;
    width: 100%;
    height: 160px;
  }
}

@media screen and (max-width: 768px){
  #near-clinic .wrap .street-view {
    display: block;
    width: 100%;
    height: 100px;
  }
}


#near-clinic .evaluation {
  margin-top: 10px;
}



@media screen and (min-width:901px) {
  #near-clinic .evaluation img {
    width: 25px;
    height: 25px;
    display: inline-block;
  }

  #near-clinic .evaluation p {
    display: inline-block;
    font-size: 20px;
  }

  #near-clinic  .clinic-info h2 {
    text-align: left;
    font-size: 18px;
    overflow: hidden;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 1;
  }

  #near-clinic .short-department {
    font-size: 16px;
    overflow: hidden;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 1;
    margin-left: 4%;
  }

  #near-clinic  .distance {
    font-size: 18px;
    text-align: right;
  }

}


@media screen and (max-width: 900px){
  #near-clinic .evaluation img {
    width: 16px;
    height: 16px;
    display: inline-block;
  }

  #near-clinic .evaluation p {
    display: inline-block;
    font-size: 12px;
  }

  #near-clinic .clinic-info h2 {
    text-align: left;
    font-size: 12px;
    overflow: hidden;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 1;
  }

  #near-clinic  .short-department {
    font-size: 10px;
    overflow: hidden;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 1;
    margin-left: 4%;
  }

  #near-clinic  .distance {
    font-size: 10px;
    text-align: right;
  }

}

/******************************* #emergency *******************************/

#emergency {
  /* background-color: #FFF2CC; */
  padding: 5%;
  border-radius: 15px;
  margin: 30px;
  text-align: center;
}


#emergency a{
  font-size: 14px;
  font-family: "Yu Gothic Light";
  font-weight: bolder;

  background-color: #ffed4a;
  border: thick solid #ffed4a;
  padding: 15px;
  border-radius: 25px;
  text-decoration: none;
  background-color: #ffed4a;
  display: inline-block;
  width: 80%;
  color: red !important;
}

/******************************* #sponsor-top *******************************/

#sponsor-top {
  background-color: #FFF2CC;
  padding: 2% 2% 2% 2%;
  border-radius: 15px;
  margin: 0px 30px 30px 30px;
}

@media screen and (min-width:764px) {
  #sponsor-top h2 {
    text-align: center;
    margin: 3% 3% 14px 3%;
    font-weight: bolder;
    font-size: 14px;
  }

}

@media screen and (max-width: 763px){
  #sponsor-top h2 {
    text-align: center;
    margin: 3% 3% 14px 3%;
    font-weight: bolder;
    font-size: 14px;
  }
}

#sponsor-top img{
  width: 100%;
}

#sponsor-top .logo-wrapper{
  margin: 5% 10%;
}

/******************************* #about-app *******************************/

#about-app {

}


/* #about-app p{
  font-size: 14px;
  font-family: "Yu Gothic Light";
  font-weight: bolder;

  background-color: #ffed4a;
  border: thick solid #ffed4a;
  padding: 15px;
  border-radius: 25px;
  text-decoration: none;
  background-color: #ffed4a;
  display: inline-block;
  width: 70%;
  color: black !important;
  cursor: pointer;
} */

@media screen and (min-width:764px) {
  #about-app button{
    font-size: 15px;
    background-color: white;
    color: #6c757d;
    width: 70%;
    padding: 15px;
    border-width: medium;
    margin: 2%;
    border-radius: 20px
  }

  #about-app button:hover{
    font-size: 15px;
    background-color: #6c757d;
    color: white;
    width: 70%;
    padding: 15px;
    border-width: medium;
    margin: 2%;
    border-radius: 20px
  }
}

@media screen and (max-width: 763px){
  #about-app button{
    font-size: 8px;
    background-color: white;
    color: #6c757d;
    width: 60%;
    padding: 15px;
    border-width: medium;
    margin: 2%;
    border-radius: 20px
  }

  #about-app button:hover{
    font-size: 8px;
    background-color: #6c757d;
    color: white;
    width: 60%;
    padding: 15px;
    border-width: medium;
    margin: 2%;
    border-radius: 20px
  }
}


/******************************* #about-app-content *******************************/

#about-app-content .button-area{
  padding: 5%;
  border-radius: 15px;
  margin: 30px;
  text-align: center;
}

#about-app-content .top{
  margin-bottom: 5%;
}

@media screen and (min-width:764px) {
  #about-app-content h2 {
    margin: 3% 3% 5% 3%;
    font-size: 21px;
  }
  #about-app-content p {
    font-size: 14px;
    margin-bottom: 0px;
  }
  #about-app-content img {
    width: 60%;
  }
}

@media screen and (max-width: 763px){
  #about-app-content h2 {
    margin: 3% 3% 5% 3%;
    font-size: 21px;
  }
  #about-app-content p {
    font-size: 14px;
    margin-bottom: 0px;
  }
  #about-app-content img {
    width: 30%;
    margin-top: 20px;
    margin-bottom: 20px;
  }
}

#about-app-content .row{
  margin-left: 3%;
}

#about-app-content .project-name{
  text-align: left;
}


#about-app-content {
  position: fixed;     /*body要素に対して絶対配置*/
  top: 0;       /*上端を中央に*/
  left: 0;      /*左端を中央に*/
  right: 0;   /*横幅*/
  bottom: 0;
  background-color:#EEFFE2;
  z-index: 200;
  display: none;
  padding: 5px;
  overflow: scroll;
}

#about-app-content .cancel-button {
  text-align: right;
  margin-bottom: 10px;
}

#about-app-content .cancel-button img {
  width: 5%;
  height: 5%;
  margin: 2%;
}

#about-app-content .cancel-button img:hover {
  transform:scale(1.2,1.2);
}

#about-app-content .contents_wrap {
  margin: 20px;
}


/******************************* #bottom-menu *******************************/

#bottom-menu{
  text-align: center;
  padding: 3%;
  margin: 30px;
}

@media screen and (min-width:764px) {
  #bottom-menu .btn-outline-warning{
    font-size: 20px;
    background-color: #ffed4a;
    color: black;
    width: 50%;
    padding: 15px;
    border-width: thick;
    border-radius: 25px
  }

}

@media screen and (max-width: 763px){
  #bottom-menu .btn-outline-warning{
    font-size:13px;
    background-color: #ffed4a;
    color: black;
    width: 70%;
    padding: 15px;
    border-width: thick;
    border-radius: 25px
  }

}

#bottom-menu .top-button{
  margin-bottom: 3%;
}

@media screen and (min-width:764px) {
  #bottom-menu .bottom-button button{
    font-size: 15px;
    background-color: white;
    color: #6c757d;
    width: 70%;
    padding: 15px;
    border-width: medium;
    margin: 2%;
    border-radius: 20px
  }

  #bottom-menu .bottom-button button:hover{
    font-size: 15px;
    background-color: #6c757d;
    color: white;
    width: 70%;
    padding: 15px;
    border-width: medium;
    margin: 2%;
    border-radius: 20px
  }
}

@media screen and (max-width: 763px){
  #bottom-menu .bottom-button button{
    font-size: 8px;
    background-color: white;
    color: #6c757d;
    width: 60%;
    padding: 15px;
    border-width: medium;
    margin: 2%;
    border-radius: 20px
  }

  #bottom-menu .bottom-button button:hover{
    font-size: 8px;
    background-color: #6c757d;
    color: white;
    width: 60%;
    padding: 15px;
    border-width: medium;
    margin: 2%;
    border-radius: 20px
  }
}

/******************************* #emergency-content *******************************/

#emergency-content{
  /* background-color: #FFF2CC; */
  padding: 3%;
  border-radius: 15px;
  margin: 30px;
}

#emergency-content .center span{
  display: block;
  text-align: center;
}

#emergency-content .button{
  color:red;    background-color: #pink;
  border: thick solid pink;
  padding: 8px 15px;
  border-radius: 25px;
  text-decoration: none;
  background-color: pink;
  display: inline-block;
}



/******************************* #recruitment-supporter *******************************/

#recruitment-supporter {
  position: fixed;     /*body要素に対して絶対配置*/
  top: 0;       /*上端を中央に*/
  left: 0;      /*左端を中央に*/
  right: 0;   /*横幅*/
  bottom: 0;
  background-color:#EEFFE2;
  z-index: 200;
  display: none;
  padding: 5px;
  overflow: scroll;
  width: 100%;
}

#recruitment-supporter .cancel-button {
  text-align: right;
  margin-bottom: 10px;
}

#recruitment-supporter .cancel-button img {
  width: 5%;
  height: 5%;
  margin: 2%;
}

#recruitment-supporter .cancel-button img:hover {
  transform:scale(1.2,1.2);
}

#recruitment-supporter .contents_wrap {
  text-align: center;
  margin: 20px;
  overflow: hidden;
}

/* @media screen and (min-width: 401px){
#recruitment-supporter .font-control {
font-size: 21px !important;
}
}

@media screen and (max-width: 400px){
#recruitment-supporter .font-control {
font-size: 15px !important;
}
} */

#recruitment-supporter .font-control {
  font-size: 21px !important;
}

#recruitment-supporter .contents_wrap .button a{
  border: thick solid #ffed4a;
  padding: 12px 5% 12px 5%;
  border-radius: 25px;
  text-decoration: none;
  background-color: #ffed4a;
}

#recruitment-supporter .marker{
  display: inline-block;
  background: linear-gradient(transparent 50%, yellow 0%);
}

#recruitment-supporter .left{
  text-align: left;
}

#recruitment-supporter span{
  display: block;
  text-align: center;
}

#recruitment-supporter .center {
  text-align: center;
  width: 100%;
}

#recruitment-supporter .contents_wrap img{
  /* width: 200px;
  height:80px; */
  height: 50px;
  max-width: 100%;
}

@media screen and (min-width:371px) {
  #recruitment-supporter .contents_wrap .readyfor{
    height: 40px;
  }
}

@media screen and (max-width:370px) {
  #recruitment-supporter .contents_wrap .readyfor{
    height: 35px;
  }
}
/******************************* #terms *******************************/

#terms {
  position: fixed;     /*body要素に対して絶対配置*/
  top: 0;       /*上端を中央に*/
  left: 0;      /*左端を中央に*/
  right: 0;   /*横幅*/
  bottom: 0;
  background-color:#EEFFE2;
  z-index: 200;
  display: none;
  padding: 5px;
  overflow: scroll;
}

#terms .cancel-button {
  text-align: right;
  margin-bottom: 10px;
}

#terms .cancel-button img {
  width: 5%;
  height: 5%;
  margin: 2%;
}

#terms .cancel-button img:hover {
  transform:scale(1.2,1.2);
}

#terms .contents_wrap {
  margin: 20px;
}

/******************************* #clinic-detail *******************************/

#clinic-detail{
  background-color: #FFF2CC;
  padding: 2%;
  border-radius: 15px;
  margin: 30px;
}

#clinic-detail .head-image{
  margin-top: 3%;
  text-align: center;
}

@media screen and (min-width:764px) {
  #clinic-detail .head-image iframe{
    width: 60%;
    height: 250px;
  }
}

@media screen and (max-width: 763px){
  #clinic-detail .head-image iframe{
    width: 80%;
    height: 200px;
  }
}

#clinic-detail .clinic-name{
  margin: 3%;
  text-align: center;
}

@media screen and (min-width:764px) {
  #clinic-detail .clinic-name h1{
    padding: 1%;
    display: inline;
    border-bottom: solid 4px yellow;
    font-size: 21px;
  }
}

@media screen and (max-width: 763px){
  #clinic-detail .clinic-name h1{
    padding: 1%;
    display: inline;
    border-bottom: solid 4px yellow;
    font-size: 21px;
  }
}

#clinic-detail .clinic-info{
  margin-top: 8%;
  margin-left: 5%;
}

#clinic-detail .clinic-info img{
  width: 30px;
}

@media screen and (min-width:764px) {
  #clinic-detail .department-list h3{
    font-family: "Yu Gothic Light";
    font-weight: bolder;
    font-size: 14px;
    margin-bottom: 14px;
  }
}

@media screen and (max-width: 763px){
  #clinic-detail .department-list h3{
    font-family: "Yu Gothic Light";
    font-weight: bolder;
    font-size: 14px;
    margin-bottom: 14px;
  }
}

#clinic-detail .department-list{
  margin: 6%;
}

#clinic-detail .department-list p{
  color: blue;
  cursor: hand;
  cursor:pointer;
}

/******************************* #comments *******************************/

#comments{
  background-color: #FFF2CC;
  padding: 4%;
  border-radius: 15px;
  margin: 30px;
}

#comments .error-message{
  color: red;
}

#comments img{
  width: 40px;
  height: 40px;
}

#comments textarea{
  width: 100%;
  height: 80px;
  margin-bottom: 3%;
  resize: none;
}

#comments .total-evaluation{
  text-align: right;
  margin-bottom: 3%;
  margin-top: 3%;
}

#comments .total-evaluation img{
  width: 30px;
  height: 30px;
}

#comments .comment-list img {
  width: 30px;
  height: 30px;
}

#comments .comment-list .image-section{
  margin-bottom:10px;
}

#comments .comment-list p {
  background-color: white;
  padding: 10px;
  border: solid 2px grey;
}


/******************************* #confirm *******************************/

#confirm{
  background-color: #FFF2CC;
  padding: 2%;
  border-radius: 15px;
  margin: 30px;
}

#confirm .title{
  margin-bottom: 40px;
}

#confirm .name{
  margin-bottom: 20px;
}

#confirm .name p{
  margin-left: 20px;
}

#confirm .evaluation{
  margin-bottom: 20px;
}

#confirm .evaluation p{
  margin-left: 20px;
}

#confirm .evaluation img{
  width: 30px;
}

#confirm .comment{
  margin-bottom: 20px;
}

#confirm .comment p{
  margin-left: 20px;
}

#confirm .button{
  text-align: center;
  margin: 30px;
}

@media screen and (min-width:764px) {
  #confirm h3{
    font-size: 28px;
  }
  #confirm h4{
    font-size: 24px;
  }
}

@media screen and (max-width: 763px){
  #confirm h3{
    font-size: 18px;
  }
  #confirm h4{
    font-size: 16px;
  }
}

/******************************* #timeTable *******************************/

#timeTable {
  position: fixed;     /*body要素に対して絶対配置*/
  top: 0;       /*上端を中央に*/
  left: 0;      /*左端を中央に*/
  right: 0;   /*横幅*/
  bottom: 0;
  background-color:#EEFFE2;
  z-index: 200;
  display: none;
  padding: 5px;
  overflow: scroll;
}

#timeTable .cancel-button {
  text-align: right;
  margin-bottom: 10px;
}

#timeTable .cancel-button img {
  width: 5%;
  height: 5%;
  margin: 2%;
}

#timeTable .cancel-button img:hover {
  transform:scale(1.2,1.2);
}

#timeTable .contents_wrap {
  text-align: left;
  margin: 10%;
}

#timeTable .contents_wrap h3{
  font-size: 21px;
}

#timeTable .contents_wrap .schedule{
  margin: 3%;
}

#timeTable .contents_wrap .schedule .day{
  margin: 3%;
}

#timeTable .contents_wrap .schedule p{
  display: inline;
}

.head-image .custom-img {
    width: 553px;
    height: 250px;
    object-fit: cover;
}

#near-clinic .custom-img {
    width: 100%;
    height: 160px;
    object-fit: cover;
}

@media screen and (max-width:764px) {
    .head-image .custom-img {
        width: 250px;
        height: 200px;
        object-fit: cover;
    }

    #near-clinic .custom-img {
        width: 100%;
        height: 100px;
        object-fit: cover;
    }
}