@charset "utf-8";

/* ------------------------------
  健診が受けられるとこ！メニュー
------------------------------ */
#place_nav>ul {
  display: flex;
}

#place_nav>ul li {
  margin-bottom: 8px;
  text-align: center;
}

#place_nav>ul li .button {
  height: 100%;
  line-height: 1.4;
}

#place_nav>ul li .button strong {
  display: block;
  width: 100%;
  margin: 0 auto;
}

#place_nav>ul li a::before {
  content: '';
  display: block;
  height: 70px;
  width: 130px;
  background-repeat: no-repeat;
  background-size: contain;
  background-position: center center;
}

#place_nav>ul li#place_nav_round a::before {
  background-image: url(../img/place_icon_round.png);
}

#place_nav>ul li#place_nav_demae a::before {
  background-image: url(../img/place_icon_demae.png);
}

#place_nav>ul li#place_nav_map a::before {
  background-image: url(../img/place_icon_map.png);
}

#place_nav>ul li#place_nav_center a::before {
  background-image: url(../img/place_icon_center.png);
}

#place_nav>ul li#place_nav_hearty21 a::before {
  background-image: url(../img/place_icon_hearty21.png);
}

#place_nav>ul li#place_nav_calm a::before {
  background-image: url(../img/place_icon_calm.png);
}

@media (max-width: 640px) {
  #place_nav>ul {
    flex-direction: column;
    margin: 0 20px;
  }

  #place_nav>ul li {
    width: 100%;
  }

  #place_nav>ul li .button {
    padding-left: 10px;
  }

  #place_nav>ul li a::before {
    width: 60px;
    height: 35px;
  }
}

@media (min-width: 641px) {
  #place_nav>ul {
    width: 1194px;
    flex-wrap: wrap;
    justify-content: flex-start;
  }

  #place_nav>ul li {
    width: 580px;
    min-height: 91px;
  }

  #place_nav>ul li .button {
    padding-left: 20px;
  }

  #place_nav>ul li#place_nav_demae {
    margin-left: 34px;
    order: 2;
  }

  #place_nav>ul li#place_nav_center {
    order: 1;
  }

  #place_nav>ul li#place_nav_hearty21 {
    margin-top: 20px;
    order: 3;
  }

  #place_nav>ul li#place_nav_calm {
    margin-left: 34px;
    margin-top: 20px;
    order: 4;
  }

  #place_nav>ul li#place_nav_round a::before {
    width: 94px;
    height: 64px;
  }
  
  #place_nav>ul li#place_nav_demae a::before {
    margin-left: 10px;
    width: 70px;
    height: 61px;
  }
  
  #place_nav>ul li#place_nav_center a::before {
    width: 84px;
    height: 59px;
  }
  
  #place_nav>ul li#place_nav_hearty21 a::before {
    width: 120px;
    height: 70px;
  }
  
  #place_nav>ul li#place_nav_calm a::before {
    width: 90px;
    height: 73px;
  }
}

/* ------------------------------
  医療機関で探す
------------------------------ */
#place_search_form {
  position: relative;
  margin-bottom: 40px;
  padding: 20px 20px 25px;
  border-radius: 25px;
  background: #84ced9;
}

#place_search_form::after {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  bottom: -20px;
  margin: 0 auto;
  display: block;
  width: 0;
  height: 0;
  border-style: solid;
  border-color: transparent;
  border-width: 20px 20px 0 20px;
  border-top-color: #84ced9;
}

#place_search .place_search_heading {
  margin-bottom: 1em;
  display: flex;
  justify-content: flex-start;
  align-items: flex-start;
  font-size: 1.142rem;
}

#place_search .place_search_heading i {
  margin-right: 1em;
  line-height: 0;
  padding: 0.25em 0;
}

#place_search .place_search_heading i img {
  height: 1em;
  width: auto;
}

#place_search ul.place_search_list {
  display: flex;
  flex-wrap: wrap;
}

#place_search ul.place_search_list li {
  width: 31.2%;
  font-weight: bold;
}

#place_search ul.place_search_list li input {
  display: none;
}

#place_search ul.place_search_list li input[data-checked="true"]+.button {
  background: #ffeb8f;
  transform: translateX(3px) translateY(3px);
}

#place_search ul.place_search_list li .button:hover {
  background: white;
}

#place_search_area {
  margin-bottom: 30px;
}

#place_search_area ul.place_search_list li .button {
  flex-direction: column;
  justify-content: center;
  text-align: center;
  height: 100%;
  padding: 0.785em 0.5em;
}

#place_search_type {
  margin-bottom: 25px;
}

#place_search_type ul.place_search_list li .button {
  justify-content: space-between;
  position: relative;
  padding: 10px;
  height: 100%;
  line-height: 1.5;
}

#place_search_type ul.place_search_list li .button strong {
  display: block;
  width: 100%;
  margin: auto 0;
}

#place_search_type ul.place_search_list li .button small {
  display: block;
  font-weight: normal;
  font-size: 0.73em;
  line-height: 1.3;
  width: 100%;
}

#place_search_type ul.place_search_list li .button::before {
  content: '';
  display: block;
  width: 100%;
  height: 50px;
  flex-shrink: 0;
  background-color: #a4deed;
  background-position: center center;
  background-repeat: no-repeat;
  background-size: contain;
  border-radius: 3px;
  overflow: hidden;
}

#place_search_type ul.place_search_list li .button[for^="type_gastric"]::before {
  background-image: url(../img/search_thumb_gastric.png);
}

#place_search_type ul.place_search_list li .button[for="type_colorectal"]::before {
  background-image: url(../img/search_thumb_colorectal.png);
}

#place_search_type ul.place_search_list li .button[for^="type_breast"]::before {
  background-image: url(../img/search_thumb_breast.png);
}

#place_search_type ul.place_search_list li .button[for="type_uterine"]::before {
  background-image: url(../img/search_thumb_uterine.png);
}

#place_search_type ul.place_search_list li .button[for="type_hepatitis"]::before {
  background-image: url(../img/search_thumb_hepatitis.png);
}

#place_search_type ul.place_search_list li .button[for="type_specific"]::before {
  background-image: url(../img/search_thumb_specific.png);
}

#place_serach_submit {
  text-align: center;
}

#place_serach_submit input {
  padding-left: 3.8em;
  padding-right: 2.8em;
  letter-spacing: 1em;
  font-weight: bold;
  background-image: url(/assets/img/contents/arrow_r_wht.png);
  background-repeat: no-repeat;
  background-size: 1em;
  background-position: right 0.8em center;
}


@media (max-width: 640px) {
  #place_search ul.place_search_list {
    flex-wrap: wrap;
  }

  #place_search_area ul.place_search_list li:nth-child(n+4) {
    margin-top: 10px;
  }

  #place_search_area ul.place_search_list li:not(:nth-child(3n+1)) {
    margin-left: 3.2%;
  }

  #place_search_type ul.place_search_list li {
    width: calc(50% - 5px);
  }

  #place_search_type ul.place_search_list li:nth-child(n+3) {
    margin-top: 10px;
  }

  #place_search_type ul.place_search_list li:nth-child(even) {
    margin-left: 10px;
  }

  #place_search_type ul.place_search_list li .button {
    flex-direction: column;
  }

  #place_search_type ul.place_search_list li .button::before {
    margin-bottom: 5px;
  }
}

@media (min-width: 641px) {
  #place_search_form {
    padding: 50px 60px 40px;
    margin-bottom: 80px;
    border-radius: 50px;
  }

  #place_search_form::after {
    bottom: -40px;
    border-width: 40px 40px 0 40px;
  }
  
  #place_search .place_search_heading {
    font-size: 1.125rem;
  }
  
  #place_search .place_search_heading i {
    padding: 0.5em 0;
  }

  #place_search ul.place_search_list li {
    width: 160px;
  }

  #place_search ul.place_search_list li input[data-checked="true"]+.button {
    transform: translateX(6px) translateY(6px);
  }

  #place_search_area {
    margin-bottom: 45px;
  }

  #place_search_area ul.place_search_list li:not(:first-child) {
    margin-left: 23px;
  }

  #place_search_area ul.place_search_list li .button {
    padding: 0.875em 0.5em;
  }
  
  #place_search_type {
    margin-bottom: 30px;
  }

  #place_search_type ul.place_search_list li {
    width: 254px;
  }

  #place_search_type ul.place_search_list li:not(:nth-child(4n+1)) {
    margin-left: 20px;
  }

  #place_search_type ul.place_search_list li:nth-child(n+5) {
    margin-top: 10px;
  }

  #place_search_type ul.place_search_list li .button::before {
    margin-right: 10px;
    width: 90px;
    height: 90px;
    border-radius: 6px;
  }

  #place_search_type ul.place_search_list li .button small {
    font-size: 0.75em;
  }
}

/* ------------------------------
  検索結果
------------------------------ */
.place_result_list {
  counter-reset: result;
}

.place_result_item {
  counter-increment: result;
}

.place_result_item:not(:last-child) {
  padding-bottom: 30px;
  margin-bottom: 30px;
  background: url(../img/place_result_linedot.png) repeat-x center bottom;
  background-size: 9px auto;
}

.place_result_heading {
  margin-bottom: 10px;
  padding-left: 2em;
  font-size: 1.375rem;
  font-weight: bold;
  line-height: 1.66;
}

.place_result_heading::before {
  content: counter(result);
  display: inline-block;
  width: 1.666em;
  height: 1.666em;
  margin-left: -2em;
  margin-right: 0.334em;
  font-weight: bold;
  color: white;
  line-height: 1.666;
  text-align: center;
  background: #ef648e;
}

.place_result_info .place_result_num {
  width: 1.36em;
  height: 1.36em;
  line-height: 1.36em;
  overflow: hidden;
  font-style: normal;
  text-align: center;
  color: white;
  background: #ef648e;
}

.place_result_type {
  width: 100%;
  margin: 1em auto 0;
}

.place_result_type ul {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-start;
}

.place_result_type ul li {
  text-align: center;
  font-weight: bold;
  font-size: 1rem;
}

.place_result_type ul li::before {
  display: block;
  content: '';
  width: 100%;
  margin-bottom: 0.7em;
  padding-top: 100%;
  height: 0;
  background-color: white;
  background-position: center center;
  background-repeat: no-repeat;
  background-size: cover;
  border-radius: 5px;
  overflow: hidden;
}

.place_result_type ul li.type_gastric::before {
  background-image: url(../img/search_thumb_gastric.png);
}

.place_result_type ul li.type_colorectal::before {
  background-image: url(../img/search_thumb_colorectal.png);
}

.place_result_type ul li.type_breast::before {
  background-image: url(../img/search_thumb_breast.png);
}

.place_result_type ul li.type_uterine::before {
  background-image: url(../img/search_thumb_uterine.png);
}

.place_result_type ul li.type_hepatitis::before {
  background-image: url(../img/search_thumb_hepatitis.png);
}

.place_result_type ul li.type_specific::before {
  background-image: url(../img/search_thumb_specific.png);
}

.place_result_type ul li[data-enable="false"] {
  opacity: 0.4;
}

.place_result_type ul li small {
  font-size: 80%;
  font-weight: normal;
}

@media (max-width: 640px) {
  .place_result_btns {
    text-align: center;
    width: 88.4%;
    margin: 0 auto;
  }
  
  .place_result_btns .button_wrap {
    display: block;
  }

  .place_result_btns .button_wrap:not(:first-child) {
    margin-top: 1em;
  }

  .place_result_type ul {
    justify-content: space-between;
  }
  
  .place_result_type ul li {
    line-height: 1.2;
    width: 23.8%;
    margin: 0 0 1em;
  }
  
}

@media (min-width: 641px) {
  .place_result_item {
    position: relative;
  }

  .place_result_item:not(:last-child) {
    padding-bottom: 40px;
    background-size: 18px auto;
  }

  .place_result_item::after {
    content: '';
    display: block;
    clear: both;
  }

  .place_result_info {
    box-sizing: border-box;
    margin-bottom: 1em;
    width: 450px;
    float: left;
  }

  .place_result_info h4 {
    position: relative;
  }

  .place_result_type {
    width: 720px;
    float: right;
    overflow: hidden;
  }

  .place_result_type ul {
    margin: 0 -5px;
    flex-wrap: nowrap;
  }
  
  .place_result_type ul li {
    line-height: 1.5;
    font-size: 0.8125rem;
    width: 82px;
    margin: 0 5px;
  }

  .place_result_type ul li::before {
    margin-bottom: 0.25em;
  }

  .place_result_type ul li small {
    font-size: 90%;
  }

  .place_result_btns .button_wrap {
    font-size: 0.875rem; /* 14px */
    margin-right: 1em;
    margin-bottom: 1em;
  }
}

/* ------------------------------
  健診実施業者さん紹介
------------------------------ */
#business_btn {
  text-align: center;
}

#business_btn .button_wrap .button {
  font-size: 1.142rem;
  font-weight: bold;
  padding-left: 73px;
  position: relative;
}

#business_btn .button_wrap .button::before {
  content: '';
  position: absolute;
  width: 67px;
  height: 67px;
  bottom: 0;
  left: 6px;
  background: url(../img/business_btn_thumb.png) no-repeat center bottom;
  background-size: contain;
}

@media (max-width: 640px) {
  #business_btn {
    margin-left: 20px;
    margin-right: 20px;
  }

  #business_btn .button_wrap {
    width: 100%;
  }
  
  #business_btn .button_wrap .button {
    min-height: 49px;
    width: 100%;
  }
}

@media (min-width: 641px) {
  #business_btn .button_wrap .button {
    font-size: 1.25rem;
    width: 585px;
    height: 90px;
    padding-left: 122px;
  }
  
  #business_btn .button_wrap .button::before {
    content: '';
    position: absolute;
    width: 110px;
    height: 110px;
    left: 12px;
  }


}